Vibe Coding：让复杂产品的 UI 美观又统一
从 PRD 和概念图，到 HTML 样板与设计规范，用 CATALK 实例和四段提示词，让复杂产品在持续迭代中保持统一的视觉风格。
用概念图选定视觉方向，用 HTML 样板确认实现与细节，再把规则和可复用组件整理为设计规范，接入项目入口并随新页面持续更新。
先准备三样东西，让风格有据可依
做一个简单网页，找一张喜欢的设计，让 AI 参考着做，通常就能得到一个不错的起点。可一旦开始做 App 或小程序，问题就复杂了：有首页、功能页、个人页、设置页，每个页面还有空状态、加载和出错等情况。
你可能会遇到这样的情况：这一轮做出来的页面很好看，下一轮新增页面，圆角和配色就变了；再换一个对话窗口，整个产品像换了一套设计。
这一期以 CATALK——一个记录猫咪叫声的手帐 App 为例。我们要做的，是把手帐贴纸的视觉风格，一步步变成后续开发可以持续复用的设计资产。
先记住三个核心产物：
| 产物 | 解决什么问题 |
|---|---|
| 概念图 | 先把想要的感觉选出来 |
| HTML 样板 | 把图片里的感觉变成可以修改、可以操作的代码 |
| 设计规范 | 把确定的规则和组件留下来，交给后续接手的 AI |
接下来会用到一份产品需求文档（PRD）、能生成图片的 AI，以及能读取项目文件的 AI 编程工具。案例中，概念图和样板在 ChatGPT 中完成，设计规范回到项目里用 Claude Code 整理。
如果还没有 PRD，可以先参考站内的 Vibe Coding 项目规划指南。
从 PRD 写出界面简报
概念图就是一张图片，不包含代码。先做它，是为了在正式实现之前，把视觉方向选清楚。
如果风格还没想好就让 AI 写代码，很容易陷入“写一版 → 看一眼 → 不满意 → 再改一版”的循环，大量时间和 token 都花在了反复试感觉上。
但很多人又卡在前一步：脑子里没有具体画面，也说不清想要什么风格。可以先借助已经写好的 PRD，生成一份界面简报。
这份简报要说明产品做什么、给谁用、整体应该是什么感觉，再用简单线框画出核心页面的内容和布局。相当于给后面的生图模型一张线稿。
把自己的 PRD 提供给 AI，再发送这段提示词：
这是我的产品需求文档（PRD），先别急着出图，帮我写一份界面简报。
要求：
1. 讲清楚这个产品是做什么的、给谁用，整体应该是什么感觉；
2. 列出想要什么、要避免什么；
3. 定好品牌色；
4. 把主页面和核心页面的线框图简单画出来。线框只规定页面上有什么、放在哪，视觉风格留给后面的概念图去探索。
生成后，先看简报有没有表达清楚产品目标、整体感觉和关键页面。CATALK 的简报里，就画出了录音、裁剪、打标签、添加猫咪等核心流程：
这一阶段先确定页面上有什么、放在哪里。 纸张质感、字体气质、贴纸风格等细节，留给概念图阶段探索。
同一份简报，生成三个视觉方向
简报确认后，把它交给有生图能力的 AI，让它直接把核心页面画成图片。案例使用 ChatGPT，发送简报后继续说：
看一下这份简报的内容，用生图功能设计主页面的视觉效果。
同一份内容，先出三个不同的视觉方向，并排放在一张图里给我挑。
这里的关键是 “同一份内容，三个不同的视觉方向，并排给我挑”。页面内容不变，更容易比较自己究竟喜欢哪一种风格。
CATALK 最后选择了中间的纸质手帐方向。选定之后，再让 AI 沿用这个风格，把其他核心页面也画出来。
看概念图时不要急着抠细节。 比如文字画错了，或头像数量画少了，这个阶段先不用纠结。它的主要任务，是帮助你确认“是不是想要这个感觉”。
等方向确定，再进入代码实现。
把概念图变成 HTML 样板
现在手里有了几张满意的图片，但还没有可以操作的界面。下一步是在同一段对话中，以选定的概念图为基础，让 AI 做一个 HTML 样板。
以这一版为基础，开始规划页面的 UI。先把应用的视觉风格用代码实现出来，做成一个 HTML 样板。
要求：
1. 图标可以用生图或者 SVG 画，也可以找类似的现成图标直接用；
2. 界面里的质感效果，比如纸张贴图、撕纸边，做成通用的素材。
完成后，在浏览器里打开样板，看看概念图里的主要元素有没有变成实际的页面部件。
案例中的相框、胶带、猫咪切换栏、标签、时间线和录音按钮，都已经通过代码实现。它们可以继续修改，也可以整理成可复用的素材和组件。
这一步的产物是用来确认视觉和交互的样板。后续开发产品时，再以它为依据实现各个页面。
用样板确认细节，也接受合理的差异
样板做好后，除了看整体效果，还要试着操作它。
在 CATALK 的样板里，可以换成真实的猫咪照片、调整纸纹强度，也能把撕纸效果关掉。“素材与组件”页则把纸张、胶带、标签和图标集中展示出来：
概念图与 HTML 样板有差异，很正常。 案例里就做了这些取舍：
| 概念图里的效果 | 代码实现时的选择 |
|---|---|
| 手写字体 | 换成楷体 |
| 丰富的背景质感 | 做得更克制一些 |
| 生图里很好看的特殊效果 | 根据实现难度取舍 |
样板还能帮你做具体决定。比如猫咪头像，最初拿不准三种方案：照片和名字分开、照片下面贴小纸签，或者圆形头像。
把真实照片换进去，在同一个样板里切换方案，比单看效果图更容易判断。案例最后选定的是 B：照片下面贴纸质名签。
到这里，我们已经明确了风格、实现方式和关键细节。但只完成一个首页还不够：接下来要把这些决定整理成规范，让新页面能接着做。
把设计资源整理成两份规范
新开一个对话窗口，或换一个 AI 模型，它未必知道之前定过哪些规则。为了让后续开发有明确依据，需要把概念图、样板、产品截图和图标等资源集中整理。
回到项目里，给能读取这些文件的 AI 编程工具发送第四段提示词：
帮我整合一下这个项目的设计资源：效果图、核心页面的 HTML 样板、产品截图和图标库。
要求：
1. 按「效果图 → HTML 样板 → 设计资源 → 设计规范」这条线整理；
2. 整理成两个版本：一份给 AI 读的文档版，一份给人看的 HTML 可视化版；
3. 整理好之后挂到 CLAUDE.md 和 AGENTS.md 里，作为后续页面设计必须遵守的规范。
先看一下项目里现有的资源，理解这个需求，告诉我你准备怎么做。
留意最后一句：“告诉我你准备怎么做。” 先看 AI 准备整理哪些资源、细到什么程度，确认理解一致，再让它执行。
整理后的内容分为两份：
| 版本 | 主要用途 |
|---|---|
| 文档版 | 把规则、资源位置和使用方式写清楚，便于 AI 在开发时读取 |
| HTML 可视化版 | 用图和实际组件展示规范，方便自己查看、比较和确认 |
可视化规范里，可以集中查看风格的来历、必须遵守的规则，以及颜色、字体、间距、组件和图标。
除了写规则，还要把已经实现的按钮、字体层级、弹框和卡片等组件留下来，供后续页面直接复用。
把规范接入项目，让 AI 开工时找得到
规范写完，还需要有一个明确入口。
提示词里要求把它挂到 CLAUDE.md 和 AGENTS.md：也就是在项目对应的入口文件中，写明设计规范的位置，以及后续页面开发必须遵守的要求。
案例同时准备了这两个入口，方便在不同 AI 编程工具之间衔接。实际使用时，要对应工具支持的项目指令文件，并确认规范路径能正确访问。
重点是把已经确定的设计，留在项目文件里。 这样，新任务可以从同一套规则和组件继续，而不用只依赖上一次对话里的记忆。
每新增一个页面，都走一遍这个流程
除了“规范在哪里”，文档里还要说明“新页面怎么做”。案例中的核心流程可以归纳成五步：
- 先找近似页面和组件。 看现有规范里有没有可以沿用的做法。
- 全新样式才重新出概念图。 已经确认过的视觉方向，不必每次从头探索。
- 实现时使用现有颜色和组件。 让新页面延续整个产品的设计。
- 做完对照检查清单过一遍。 检查实现是否符合已经确认的规范。
- 把新增组件和图标写回规范。 让下一次开发也能复用这次的成果。
规范会随着产品一起更新：每多做一个页面，就多积累一些经过确认的设计资源。持续迭代时，整个产品才有稳定的依据。
总结：从选感觉，到能修改，再到能复用
回顾这套流程，核心始终是三样东西：
| 阶段 | 交给 AI 什么 | 拿到什么 | 主要判断什么 |
|---|---|---|---|
| 界面简报 | 产品需求文档 PRD | 产品说明与核心页面线框 | 功能和布局是否表达清楚 |
| 概念图 | 简报与生图提示词 | 多个视觉方向、选定风格的核心页面 | 感觉是不是自己想要的 |
| HTML 样板 | 选定的概念图 | 可以修改、操作和对比的页面 | 实际效果、交互和实现取舍 |
| 设计规范 | 效果图、样板、截图与图标库 | 文档版、可视化版及可复用组件 | 后续开发有没有清楚的依据 |
| 持续迭代 | 规范与新页面需求 | 新页面、补充后的规范 | 新旧页面是否保持一致 |
先用概念图选方向，再用 HTML 样板把它做实，最后把规则和组件沉淀到项目里。 以后新增页面、换对话窗口或换编程工具时，都有同一套设计资产可以接着用。