夜雨聆风你先看图。
这 5 张 APP UI,从配色到 IP 到布局,从专注目标到番茄钟、数据统计、积分商店、签到打卡,全是 Lovart 自动出的。
我一开始也不信。直到把整套工作流跑了一遍,才发现 AI 画 UI 这事儿,已经卷到这种程度了。
整套流程总共 4 步,跨 Lovart 和 Codex 两个工具。每一步操作都不复杂,关键是顺序不能错。下面手把手拆,每一步都配上视频里的真实操作截图,你照着抄就行。
Step 1 · 用 Lovart 出品牌视觉手册
这一步是地基。直接让 AI 画 APP 是大多数人翻车的原因 —— AI 没有品牌锚点,出来就是平庸的 PPT 模板风。先让 AI 给你的品牌出一套完整视觉规范(色块、字体、产品物理、包装),后面所有界面才有「魂」。
而且这套规范的输入,只需要两张图,一个 logo + 一个吉祥物。
操作步骤
1. 打开 lovart.ai/zh/brand-kit,把 logo 和吉祥物两张图拖进画布。
2. 把 Prompt 1(在文末 Prompt 库)粘进输入框,模型那里手动选「GPT Image 2」,关掉「自动」(自动选会乱跳模型)。
▲ 这是 Lovart 的输入框。注意底部模型一栏要手动选 GPT Image 2,不要用自动
3. 点生成。等 1-2 分钟,Lovart 会出 6 张品牌手册页(色板、字体规范、产品物料展示、包装设计),铺满整个画布。
▲ 出来的品牌手册在 Lovart 画布里,6 张铺开就是这个样子
4. 满意之后,选中所有 6 张品牌手册,点底部「使用此套件创建项目」。
▲ 关键这一步,Lovart 会自动识别字体、Brand Mascot Illustration、Focus App UI、Mobile App Promotional 等元素,打包成一个可复用的品牌套件。后面所有操作都通过 @ 引用这个套件
整套品牌手册成品,放大看清楚长这样,
这套规范就是后面所有 APP 界面、H5 运营页的「DNA」。
Step 2 · 用品牌套件 + 参考图,生成 APP 界面
这步出 APP UI。最关键的不是提示词,是参考图。你提示词写得再花,不给 AI「想要的 APP 长什么样」的具体参考,出来的都是默认模板,永远达不到想要的效果。
操作步骤
1. 在 Lovart 里新建一个 Image Generator(画布右下角的「+」)。
▲ 新建生成器之后画布上会出现一个空白 Image Generator 容器(2048×2048)
2. 把你自己从 Dribbble、小红书收藏的好看 APP 截图,拖进画布作为参考图。这一步决定了 AI 出来的 UI 长什么样,是整套方法的胜负手。
▲ 派大鑫拖了一张「干净温柔的小日记 App 三联屏」(3200×2400)作为风格参考。这张图就是 AI 后面出 5 张 APP UI 的模板
3. 在输入框里打 @,引用刚才创建的「不鸽目标」品牌套件(Step 1 留下的那个)。这步是把 Step 1 的品牌 DNA 喂进去的关键。
▲ 输入框这样写,@ 不鸽目标 根据该品牌的设计风格,生成目标详情页、完成目标页、日历视图页,可以追加具体功能要求
4. size 那里选 16:9 (2k),模型保持 GPT Image 2。把 Prompt 2 粘上,点生成。
派大鑫喂给 AI 的整套参考(包括前面的小日记 UI + 后面这些干净 APP 截图),
干净、留白、3D 小图标、温柔配色 —— 这就是「想要的 APP 长相」目标态。AI 接到品牌套件 + 这套参考图,出来的就是开头那 5 张 APP UI。
基因来自参考图,血肉来自品牌套件。组合出完全独立的形态。
Step 3 · 把 IP 融进 H5 运营页
到这步 UI 已经成型,但少灵魂 —— 没 IP。这一步的核心是让吉祥物自然地出现在不同界面里,而不是机械复制粘贴。顺便,4:3 的 H5 运营页也一起出。
操作步骤
1. 还在那个 Image Generator 里,新建一轮生成。
2. size 改成 4:3(H5 运营页比例),参考图换成抖音/小红书的促销页风(高饱和糖果色 + 3D 立绘 + 节日打折氛围)。
派大鑫这次喂的参考图,
跟 Step 2 的温柔小日记画风完全不同 —— 这就是「换皮肤」的依据。
3. 把 Prompt 3 粘进去。两个关键词不能漏,
- ○「保持设计风格与排版」 —— 防 AI 自作主张帮你重新设计
- ○「给 IP 换皮肤」 —— 让吉祥物在不同界面有不同动作、文案、配色
4. 点生成。 出来的就是,
那只傲娇鸽子,在赛车界面里穿头盔,在节日界面里举横幅 —— 以前是设计师手工调三天的「灵魂」,现在 Lovart 一轮搞定。
Lovart 几个隐藏功能(顺便讲)
跑到这一步,Lovart 里还有几个超好用的功能,顺带提一下。
1. 海报元素分解
生成的海报可以一键把里面的图层拆出来单独调整。比如这张 STAY FOCUSED 海报,大字号、3D IP、背景元素都能单独选中改大小、改字体、改文案。
▲ STAY FOCUSED 海报里的大字号被选中,可以单独调字体、字号、字重(右上角的 Poppins / Regular / 174 是字体设置)
2. 字体生成器
字体文件丢失或不知道是什么字体?Lovart 的「字体生成器」会自动分析图片里的字体并生成对应的字体文件。
▲ 字体生成器会给你 AaBb 这种 sample,自动识别样式 + 输出可下载的字体文件
3. 一键转 Figma
Lovart 自带「Web to Figma」插件,把任何网页/海报截图扔进去,几秒钟还原成 Figma 可编辑文件。注意,这个只适合简单界面,复杂图表表现一般,所以下面 Step 4 不走这条路。
▲ 派大鑫之前专门讲过这个 Web to Figma 插件
▲ 拖进 Figma 后效果还原度还行,但只适合导入简单界面
Step 4 · 用 Codex 把图变成可点的 HTML
最后一步,把 PNG 图片还原成可交互的 HTML 原型。这步派大鑫强烈推荐 Codex(OpenAI 的本地编码 Agent),Cursor、Claude Code 也能跑,但 Codex 有个独家优势 —— 它支持直接调用 image2 生图,出 HTML 时缺切图会自动补,这是别的工具做不到的。
操作步骤
1. 打开 Codex 客户端(Mac/Windows 都有),新建一个 project。
▲ Codex 主界面,新建项目后会让你描述要构建什么。这里拖入生成的界面图 + 吉祥物 IP(透明底 PNG)
2. 把 Prompt 4 整段粘进去(Cmd+V),特别强调对吉祥物做单独的切图引用(IP 保持透明底,这样不同界面替换时更干净)。
3. 跑 1-2 分钟,Codex 输出 HTML 文件。直接浏览器打开就能点。
▲ Codex 生成的 HTML 在浏览器渲染,No Pigeon No Goal 文案 + Daily Focus 任务清单 + 25:00 番茄钟,完全可交互
4. 关键加分项,Codex 生成的 HTML 图层结构做了自动布局,可以直接导回 Figma 做后续精修。
▲ 吉祥物 IP 是单独切出来的 PNG 图层(190×168),Focus Session 界面里可以单独选中拖动
▲ 三屏 Focus Goal / Focus Session / Goal Details,导回 Figma 后还能继续二次编辑
5. 实战提醒:一般要再调 2-3 轮(图错位、布局乱),才能接近真正可用的状态。AI 出活儿从来不是一把过,但比手画快得多。
整套流程的精髓
四步串起来,
先定品牌 → 用品牌定 UI → 用 IP 注入 UI → 用代码还原 UI
每一步都基于上一步的产出。这是为什么最终界面成系列,而不是东拼西凑。也是为什么大多数人用 AI 出 UI 出得稀烂 —— 他们直接从第二步开始,跳过了品牌定义。
放到三年前,这套流程要请一个完整团队,品牌设计师两周、UI 一周、交互三天、前端一周,报价 30 万起。
现在,4 段提示词,一个下午。
Prompt 库(4 段全收)
下面 4 段提示词原样搬出,你直接复制到 Lovart / ChatGPT / Codex 都能跑。
Prompt 1 · 品牌定义(粘到 Lovart 图像生成器)
图一是我的 logo,图二是我的吉祥物(傲娇有脾气的鸽子),
为一家名为「不鸽目标」的公司打造一套精致的
多页品牌视觉手册(多张图片形式)。
品牌整体气质应当充满趣味、具有未来感、色彩鲜明,
并且设计感强烈,在「玩具般的活力」与「高端创意科技品牌
的精致感」之间取得平衡。
视觉风格需采用大胆且具有实验性的品牌语言,包括,
高饱和亮色、简洁几何图形、现代字体设计、
富有动感的视觉节奏,以及略带超现实感的图像表达。
整体氛围应传递出,创造力、年轻感、节奏感、触感体验
以及概念前卫性。在表达上,需要融合消费级产品的趣味性、
时尚品牌的呈现方式,以及当代数字设计的语言体系。
品牌手册中应体现,
对产品细节的极致关注(product obsession),
多样化的视觉实验(visual experimentation),
包装设计探索(packaging exploration),
编辑风格摄影(editorial photography),
沉浸式零售体验(immersive retail),
跨平台品牌应用(cross-platform brand application)。
最终呈现应构建一个自信、当代、统一且完整的品牌世界观,
既易于理解与接近,又具备强烈的艺术指导感(art direction),
在视觉上保持高度一致性,
同时展现出高端创意工作室级别的美学标准。Prompt 2 · APP 界面(@ 引用品牌套件 + 加风格参考图后粘贴)
图一是我的整套产品视觉物料,
图二是我想要的 APP 界面风格,
根据参考风格,生成 3 个专注目标界面。可以加 「界面需要包含登录页 / 数据可视化 / 任务清单 / 番茄钟」这类具体要求。
Prompt 3 · IP 融入 + H5 运营页(size 改 4:3)
将我的 IP 融入图一的界面里,
保持设计风格与排版。
运营 h5 游戏界面,比例为 4:3,
必要时,可以给我的 IP 换上与界面更契合的皮肤、
文案和内容。Prompt 4 · 代码还原(粘到 Codex)
1、最大深度地去理解图片上的界面样式,
高精度还原组件的效果,
要求样式与交互与组件保持一致。
同时保证每个组件都具有可交互性
(默认、鼠标移入、点击、禁用)。
2、界面上的吉祥物 IP 保留为单独的切图,
当没有切图时,使用 image2 图片生成器
生成对应的吉祥物(保持吉祥物的动作一致性),
透明底图片替换进去。
3、图标默认使用 Hugeicons 图标库,
https://hugeicons.com/几个小坑提醒
- ○不用非 Lovart 不可,ChatGPT、Midjourney 都能跑这套提示词。Lovart 的优势是品牌套件(
@引用)和参考图调度方便。不想付费的话,ChatGPT 4o 直接复制提示词也能 80% 还原。 - ○Figma 图片转设计稿插件,效果一般,复杂界面别指望。靠 Codex 反而稳。
- ○不要跳步,Step 1 那段又长又啰嗦的品牌定义提示词是地基,跳过它后面就是东拼西凑。
- ○参考图是胜负手,别用 AI 凭空想象,从 Dribbble、小红书、抖音上扒你真正喜欢的截图喂进去。
本套方法的原作者是派大鑫，本帖负责收集整理。
