核心思路
做 UI 设计时，很少有人从一张白纸开始。更常见的起点是：喜欢某个产品的风格、收集了一些参考截图、或者脑子里有一个模糊的感觉。
AI 能帮你完成的，是把这些输入转化为可用的设计——但前提是你知道怎么把”感觉”或”参考图”变成 AI 能执行的语言。
本文覆盖两种起点：
– 从设计参考图出发：手上有一张完整的设计图，想以它为基础做自己的版本
– 从风格感觉出发：只有模糊的喜好和灵感，需要先提炼再生成
路径一：从设计参考图出发
有完整参考图时，信息量更大，也更容易陷入”直接复制”的误区。正确的方式是把参考图当作设计系统的载体来分析，提取规律而不是像素。
第一步：读懂参考图的设计系统
对着参考图，逐层拆解：
色彩层
- 主色是什么色值？（用取色器获取）
- 背景色、面板色、边框色各是什么？
- 文字有几层颜色？主文字、辅助文字、禁用文字分别是什么？
- 强调色、错误色、成功色是什么？
- 整体用了几种颜色？（通常不超过 5 种）
排版层
- 字体是什么类型？（衬线 / 无衬线 / 等宽）
- 有几档字号？最小和最大分别是多少？
- 正文字号和行高是多少？
- 粗体用在哪里？用了几种字重？
空间层
- 最小间距单位是多少？（通常是 4px 或 8px 的倍数）
- 组件内边距是多少？（以按钮为基准）
- 组件之间的间距是多少？
- 模块之间的间距是多少？
形状层
- 圆角是多少？不同组件是否一致？
- 层级是用阴影还是边框还是背景色差来表达？
- 卡片有没有边框？
组件层
- 页面里出现了哪些组件？（列出清单）
- 每个组件有哪些状态？（默认 / 悬停 / 禁用 / 选中）
- 图标是什么风格？线性还是面性？粗细如何？
第二步：用 AI 辅助提取
把参考图（截图）上传给 AI，配合这个提示让它帮你提取：
这是一张 UI 设计参考图。请帮我分析它的设计系统，按以下维度输出：
1. 色彩：识别主色、背景色、文字色、边框色、语义色，尽量给出估算色值
2. 排版：字体类型、字号档位、行高、字重使用规律
3. 间距：最小间距单位推算、组件内边距、组件间距
4. 形状：圆角大小、层级表达方式（阴影 / 边框 / 背景色差）
5. 组件：列出图中出现的所有 UI 组件
对不确定的地方，说明你的推断依据。
AI 的分析不会完全精确，但能帮你快速建立对这个设计系统的整体认知，再由你校正细节。
第三步：决定借鉴什么、改变什么
参考图是别人产品的设计，直接照搬会有两个问题：一是版权风险，二是它的设计决策是为别人的产品服务的，不一定适合你。
用三个问题过滤：
保留：这个参考里哪些规律我完全认同，直接沿用？
（通常是：间距节奏、层级逻辑、信息密度）
调整：哪些地方我喜欢思路但需要改变具体值？
（通常是：颜色换成自己的品牌色、字号适应自己的内容密度）
替换：哪些地方不适合我的产品，需要换一个方案？
（通常是：组件风格、交互模式、特定视觉元素）
第四步：生成自己的版本
把提取的设计系统 + 你的调整决策，组织成提示：
我分析了一个参考设计，提取了以下设计系统：
色彩：
- 主色：[估算色值或描述]
- 背景：[值]
- 边框：[值]
- 文字（主 / 次）：[值]
间距基准：[值]px
圆角：[值]px
层级表达：[阴影 / 边框 / 背景色差]
我的调整：
- [列出保留 / 调整 / 替换的决策]
请基于以上设计系统，生成 [组件名或页面名]。
这是衍生设计，不是复制参考图。
路径二：从风格感觉出发
第一步：提炼参考风格
拿到参考（截图、产品链接、心情板）之后，不要直接扔给 AI 说”做一个类似的”。这样 AI 只会模仿表面，你也不清楚自己真正喜欢的是什么。
正确做法：拆解参考，找出你真正喜欢的是什么。
对着参考逐项回答：
整体感受：这个设计给你的第一感觉是什么？（克制 / 活泼 / 高级 / 温暖...）
色彩：
- 主色是什么？用在哪里？
- 背景是纯白还是带一点灰？
- 整体色调偏冷还是偏暖？
- 用了几种颜色？
排版：
- 字体是衬线还是无衬线？
- 字号变化大还是小？
- 文字间距宽松还是紧凑？
空间：
- 内容密度高还是低？
- 留白多还是少？
- 组件之间的间距是否规律？
形状：
- 圆角大还是小？
- 卡片边界是阴影还是边框还是无边界？
你不喜欢的部分：
- 参考里有哪些你不想要的？
完成这个拆解后，你已经有了一份”风格提取清单”，而不是模糊的”我想要像 XX 一样的风格”。
第二步：定义自己的风格
参考是起点，不是终点。从参考的拆解中，筛选出你想保留的、想改变的、想加入的。
保留：哪些地方你完全认同，直接沿用
改变：哪些地方喜欢思路但不喜欢具体执行
加入：你的产品有什么特别之处，需要在风格里体现
用这三个维度整理出你的风格决策，填入 ui-style-guide.md。这一步不需要精确数值，先用描述词占位：
主色：深蓝偏靛，比参考更沉稳一点
背景：极浅灰，不是纯白
圆角：比参考更小，4px 左右
留白：保留参考的宽松感，但内容区更紧凑
不要：参考里的彩色标签，改用灰度
第三步：用 AI 生成初稿
风格决策确定后，开始生成。这一阶段的目标是快速拿到可以讨论的视觉稿，不追求精确。
提示结构：
我正在设计一个 [产品类型]，目标用户是 [用户描述]。
风格参考：[产品名或简短描述，如"类似 Linear 的克制感"]
我的风格调整：
- [列出你的保留 / 改变 / 加入]
请生成 [组件名或页面名]，要求：
- [具体约束，如：无阴影、边框代替层级]
- [可选：提供一段现有组件代码作为风格基准]
先给一个初稿，不需要完美，我会在此基础上调整。
第四步：迭代收敛
初稿出来后，进入逐步收敛的过程。每一轮只调整一件事，原因是：改多了不知道哪个改动起了作用，下次遇到同样问题还是没有答案。
迭代节奏：
第一轮：整体比例和布局对不对？
第二轮：色彩关系对不对？
第三轮：字体大小和层级对不对？
第四轮：间距和密度对不对？
第五轮：细节——圆角、边框、图标
每轮的提示格式：
整体方向对了。现在只调整 [一个具体问题]：
- 问题：[描述哪里不对]
- 期望：[具体说明，不要说"更好看"]
- 不变：其他所有部分保持不变
第五步：沉淀为风格规范
当你对某个组件的输出满意了，把这次确定下来的决策记录到：
ui-style-guide.md：把描述词换成精确值（”深蓝偏靛” →#1E3A5F）design-decisions.md：记录为什么做这个选择，特别是放弃了什么
这样下次做新组件或新页面时，AI 有具体数值可以遵守，不需要重新对齐风格。
常见卡点
“说不清楚自己想要什么风格”
不用先想清楚。先收集 5–10 个你觉得还不错的参考，用第一步的拆解方法逐一过一遍，共同点就是你的风格直觉。
“AI 生成的和参考差太多”
通常是因为描述词太模糊。”简洁”对 AI 没有意义，”无阴影、1px 边框、背景 #F5F5F5″才有意义。把感受词换成视觉属性词。
“改了很多轮还是不对”
停下来，重新做第一步。多数情况下不是 AI 的问题，而是你还没想清楚自己真正想要什么。把”不对”拆解成具体维度，找到根本分歧在哪里。