06 · 设计系统：让输出长成你的样子
「AI 味」是有具体成分的：紫蓝渐变、圆角卡片三连、通用图标、编出来的数字。它不是模型不行，是你没给方向的时候它只能给平均值。
设计系统就是那个方向。选一个，配色、字体、间距、动效性格、语气全部锁死，后面每一次生成都继承同一套。
一份 DESIGN.md 是什么
一个 Markdown 文件，把一套视觉语言写成机器能读的约定。官方库里有 152 套，每一套都是照着一个真实品牌拆的——Stripe、Linear、Vercel、Airbnb、Tesla、Notion、Apple 这类，用的是它们真实的色值和字体，不是「材料设计通用回退」。
它规定的东西大致是：
| 层 | 管什么 |
|---|---|
| 调色板 | 主色、辅色、语义色、中性色阶 |
| 字体 | 字族、字号阶梯、字重、字距 |
| 间距与网格 | 基础间距单位、栅格、圆角、阴影 |
| 组件 | 按钮、卡片、表单、表格长什么样 |
| 动效 | 时长、缓动、什么该动什么不该动 |
| 语气 | 文案的人称、句长、克制程度 |
怎么选
先问这份东西要让人产生什么反应，再选风格。不要选最好看的那个。
| 你要的效果 | 选什么感觉的系统 |
|---|---|
| 信任、战略、企业级可信度 | 干净、结构化、克制、编辑感 |
| 能量、社区、产品势头 | 大胆、高饱和、高对比、有表情 |
| 技术深度、数据、研究 | 网格化、模块化、信息密度高 |
| 面向开发者的 AI 工具 | 数字感、分层、代码气质、电影感 |
这张表来自官方 PPT 教程，但它对网页、看板、海报同样适用。
三种用法
一、直接用库里的
在插件库里挑一个，项目 snap 上去。之后每一次生成都自动继承。适合你没有既定品牌，或者要做的东西本来就该借某种气质（比如给开发者看的东西借 Linear 的气质）。
二、从截图或 Figma 抽一套
这是把你自己的品牌搬进来的最快路径：
- 把一张截图或者一份 Figma 导出丢进界面。
- 让 Agent 从里面抽出一份
DESIGN.md。 - 存到仓库的
design-systems/<你的品牌>/下面。
存好之后，所有技能生成的东西都会长成这个样子，不用每次在提示词里重复描述。
可以直接抄的提示词：
这是我们产品的一张界面截图。
请从里面抽出一份完整的 DESIGN.md，包括：
1. 调色板（主色、辅色、语义色、中性色阶，给出十六进制值）
2. 字体（字族、字号阶梯、字重、行高）
3. 间距系统（基础单位、常用间距、圆角、阴影）
4. 组件规范（按钮、卡片、输入框、表格的默认样式）
5. 动效性格（时长、缓动、哪些交互该有动效）
拿不准的地方标出来，不要猜一个值填进去。三、手写一份
如果你已经有品牌规范文档，直接改写成 DESIGN.md 也行。它就是 Markdown，没有魔法格式。
设计系统管不到的东西
有一层规则是任何设计系统都覆盖不了的：可访问性底线、动效该不该跑、状态要不要写全、表单错误怎么提示。这些在 OpenDesign 里是单独一层，叫 Craft，12 条，跟品牌无关。
打个比方：设计系统决定按钮是什么颜色，Craft 决定这个按钮必须有 disabled 和 loading 状态。两层都在，输出才不会「好看但不能用」。
详见 进阶 / Craft。
一个实际建议
第一次用别急着抽自己的品牌。先从库里挑一个跟你气质接近的跑两次，看看设计系统到底在多大程度上改变输出。有了这个体感之后再抽自己的，你会知道该往 DESIGN.md 里补什么。
下一步
07 · 跑通你的第一个产物 — 把前面六篇串成一次真的操作。