学习模式

【UI设计】一张图用AI做App:从柴犬照片到全套品牌UI界面

2个月前 AI高效生成全套UI 作者:西瓜
AI产品设计
UI自动生成
Lovart
GPT Image 2.0
品牌手册
零基础设计
随手拍下的一张日常照片,能不能成为一款精美独立 App 的起点?本篇教程将以一张真实的柴犬照片为例,带你完整跑通“实物照片 ➔ 3D吉祥物 ➔ 产品策划 ➔ 品牌手册 ➔ 全套UI界面”的高效工作流。

一起来看一下成品:

品牌手册

那么接下来,按照我的思路和步骤,你也可以做出这样的作品,一起来实操吧~

准备工具


Gemini (https://gemini.google.com)

lovart (https://www.lovart.ai/)



第一步:灵感提取,实物转绘 3D 吉祥物


操作指引:

准备一张你喜欢的动物照片(例如这只阳光治愈的柴犬)。

去pinterest上找到合适的3d材质质感

搜索“3d宠物形象”

将你喜欢的质感下载下来作为参考图

我找到了这一张作为参考:

使用lovart中的 image2.0去生成,将其转绘为具有 3D的卡通形象

输入提示词:

参考图1柴犬的形象,生成和图2类似的3d 渲染风格,需要白底图,要可爱精致

得到这一张图片



第二步:AI 大模型完成产品策划


操作指引:

将第一步生成的 3D 柴犬形象发给 AI 大模型(如 Gemini、或豆包)。

沟通提示词:

“我要以这个柴犬形象为吉祥物制作一个 App,先帮我想几个符合的 App 方向。”

方案落地:

在推荐的方案中,选定“陪伴式趣味记账与存钱”。

随后继续提问,让大模型为 App 拟定一个好听的名字。

我这里选择了《富柴日记》并更改为《柴富日记》

这时,他会自己生成一些构思(我们第五步的时候有用):



第三步:生成专属 Logo 与标准字


操作指引:

明确了产品调性与名称后,使用 image 2.0。

生成内容:

将步骤一的柴犬进行图生图,输入应用名称和设计偏好,直接产出与 3D 吉祥物风格契合的 App 图标(Logo)以及配套的文字排版。

我这里输入:

我要以图1为形象,制作一个app的logo,这个app名为“柴富日记”,给我logo与文字设计。logo与文字要高级简约,logo要圆角矩形。扁平化,一个白底圆角正方形上一只柴犬从右下角探出头来。

有时候文字满意,但是logo不满意,就可以多次抽卡,然后将logo与文字拼起来。



第四步:生成品牌视觉手册


操作指引:

进入 Lovart 平台,将生成的“柴犬 3D 形象”与“Logo 文字图片”一同上传作为参考图。

输入提示词:

框选画板中的素材后,在右侧Agent处输入提示词:
图一是我的 logo,图二是我的吉祥物(一只柴犬),为一家名为「柴富日记」的公司打造一套精致的 多页品牌视觉手册 (多张图片形式)。品牌整体气质应当充满趣味、具有未来感、色彩鲜明,并且设计感强烈,在 “玩具般的活力” 与 “高端创意科技品牌的精致感” 之间取得平衡。视觉风格需采用大胆且具有实验性的品牌语言,包括:高饱和亮色、简洁几何图形、现代字体设计、富有动感的视觉节奏,以及略带超现实感的图像表达。 整体氛围应传递出:创造力、年轻感、节奏感、触感体验以及概念前卫性。在表达上,需要融合消费级产品的趣味性、时尚品牌的呈现方式,以及当代数字设计的语言体系。品牌手册中应体现:对产品细节的极致关注 (product obsession) 多样化的视觉实验 (visual experimentation) 包装设计探索 (packaging exploration) 编辑风格摄影 (editorial photography) 沉浸式零售体验 (immersive retail) 跨平台品牌应用 (cross-platform brand application) 最终呈现应构建一个自信、当代、统一且完整的品牌世界观 -- 既易于理解与接近,又具备强烈的艺术指导感 (artdirection) 在视觉上保持高度一致性,同时展现出高端创意工作室级别的美学标准

核心目标:

让 AI 自动提取色彩规范与辅助元素,生成整套品牌视觉手册,确保后续界面的设计语言高度统一。



第五步:核心 UI 界面落地


操作指引:

回到 Gemini 继续提问,让其基于前面的规划,提供更详细的页面版面设计指导。

直接输入 给我更多界面的策划。gemini就会给你多个详细的策划

结合生图:

将 Gemini 输出的版面规划直接复制与 Lovart 生成的品牌手册结合,交由Lovart 中的 GPT Image 2.0 进行生图,快速产出首批风格一致的高保真 UI 界面。

以下是我的版面策划:

1. 首页:柴富日常 (Home) 这是用户打开APP看到的第一眼,核心是建立情感连接与预算感知。 上半部分(沉浸式陪伴区): * 占据屏幕近40%的空间,展示你的3D小柴犬。背景可以随现实时间自动切换(白天是阳光草地,晚上是温馨台灯小窝)。 动态预算情绪: 柴犬头顶悬浮一个轻量化的“本月剩余预算”气泡。预算>50%时,柴柴元气满满;预算<20%时,柴柴会戴上“奋斗”头巾疯狂敲键盘,或者眼巴巴盯着空碗。 触控交互: 戳柴柴的肚子它会在地上打滚,摸摸头会冒出小心心并随机掉落一句理财金句(如:“今天少喝一杯奶茶,明天离柴富自由更近一步!”)。 下半部分(数据卡片区): 采用圆润的“悬浮卡片”设计(Claymorphism 拟塑风格)。 今日支出卡片: 极简展示今天花了多少钱。 即将到期提醒卡片: 如果有设置固定支出(如房租、订阅费),柴柴会叼着一张小账单在这里提醒你。
2. 悬浮记账弹窗:爪爪记账 (Quick Record)
点击底部中央的“金色大骨头”触发,要求快、顺、爽。 弹出动画: 界面自下而上弹出,小柴犬会从屏幕边缘“探出一个脑袋”看着你记账。 顶部分类栏: 摒弃传统单调的图标,分类全用柴犬主题插画表示。比如“餐饮”是柴柴啃骨头,“娱乐”是柴柴玩飞盘,“服饰”是柴柴试戴新项圈。 数字键盘区(设计小心机): 键盘按键设计成肉嘟嘟的“狗爪垫”形状。 每次按下数字,手机伴有轻微的触感反馈(Haptic),并伴有萌萌的“噗叽”音效。 情绪贴纸(可选填): 输入金额后,可顺手贴一个代表本次消费心情的柴犬表情包(美滋滋、大出血、稳健消费)。
3. 明细页:时光账本 (Diary Timeline)
打破传统表格流水的冰冷感,做成手账流的形式。 顶部切换: 日历视图与日记视图秒切。日历上,消费超标的日子会画上一个“惊恐柴柴脸”,克制的日子则是“小红花”。 瀑布流日记卡片: 每一天的数据是一张独立的日记卡片。 卡片左侧是时间与分类,右侧是金额。 如果记账时选了心情或写了备注,会以“手写便签”的形式挂在对应账单下方,旁边趴着一只手绘风的迷你柴犬,看起来就像一本精心制作的电子手账。
4. 心愿页:梦想金库 (Savings Island)
将枯燥的“强制储蓄”包装成“和柴柴一起寻宝/建岛”。 心愿创建: 输入你想买的东西(如:Switch游戏机、毕业旅行)、目标金额和计划完成时间。 游戏化视觉呈现: * 每一个心愿生成一座独立的“海上小岛”或“建造基地”。 初始状态是一片荒地。用户每往里存一笔钱(比如手动存入50元),屏幕上就会出现小柴犬推着小推车运送金币或砖块的动画。 随着进度条从 0% 到 100%,岛上会逐步建起精致的3D小建筑,存满时柴犬会在岛上放烟花庆祝。
5. 统计报表页:柴富洞察 (Analytics)
数据分析页往往最容易让人头疼,我们需要让小柴犬充当“财务顾问”。 图表交互: 圆形饼图设计成一个“大披萨”或“大狗粮碗”。点击不同色块(如餐饮40%),小柴犬会用一根小教鞭指着对应的数据。 柴柴月度诊断报告: 每个月结束时生成一份拟人化报告。 “本月你恩格尔系数偏高哦,柴柴陪你吃了25顿大餐,干饭王非你莫属!” “本月冲动消费次数为0,柴柴为你点赞,省下的钱够买10包顶级狗粮啦!”

框选你觉得合适的手册页面再加上以下前置提示词直接生成:

图一、二、三是我的整套产品视觉,生成以下界面:

得到以下UI界面



第六步:利用品牌套件,深度扩展界面矩阵


操作指引:

在全套 UI 落地过程中,先回到 Gemini 继续提问,获取更多次级页面的布局灵感与内容规划。

直接和gemini说:我需要一些其他的页面策划

gemini产出的内容

持续产出:

随后使用 Lovart 的品牌套件功能。

将你之前所有产出的图片以及logo一起上传生成套件。

在lovart的右侧界面中输入“@”就会跳出你的品牌套件

再框选之前生成的UI界面,输入提示词:

结合这几个已经生成的ui界面,再给我这几个页面“柴富成就勋章馆”、“桌面小组件专属配置页”、“柴柴杂货铺(壁纸兑换页)”

系统会严格遵循第四步建立的品牌视觉规范,为你源源不断地生成画风完美统一的新界面,轻松搞定整套 App 的多页面矩阵设计。

最后在评论区上传您的作品,一起讨论吧~


速用卡

3D 资产执行卡

把这节课压缩成一张可执行卡片:看重点、照步骤、避坑,再复制模板直接开做。

一句话重点

这节课讲的不是单张效果,而是围绕「一张图用AI做App:从柴犬照片到全套品牌UI界面」把结构、比例和后续可用性一起考虑进去。

落地顺序

按原文节奏走最稳:先吃透「准备工具」,再把「第一步:灵感提取,实物转绘 3D 吉祥物」定住,接着处理「第二步:AI 大模型完成产品策划」;最后用「第三步:生成专属 Logo 与标准字」收口。

照着做清单
  1. 先把「准备工具」里的结构关系定准。
  2. 这一段重点看能不能继续往建模里走。
  3. 做完「第二步:AI 大模型完成产品策划」后,检查比例和材质是否一致。
  4. 先把「第三步:生成专属 Logo 与标准字」里的结构关系定准。
  5. 做完「第五步:核心 UI 界面落地」后,检查比例和材质是否一致。
最容易踩坑

不要只生成一张好看的正面图;要提前考虑三视图、结构一致性、材质分层和后续建模可用性。

成品自检

检查正侧背是否一致;结构是否可建模;材质是否清楚;比例是否合理;是否能进入下一步建模或动画。

可直接复制的万能模板
请围绕「一张图用AI做App:从柴犬照片到全套品牌UI界面」帮我做一个可直接执行的方案。
我的目标是:【填写你的具体目标】
我的素材/产品/角色信息是:【填写已有素材和限制】

请输出:资产结构拆解、正侧背视图提示词、材质说明、可建模注意事项和后续修正清单。要求结构清晰、比例一致。