02 · 设计系统：152 套品牌，或者你自己的

设计系统是 DESIGN.md——一份把视觉语言写成机器可读约定的 Markdown。官方库里 152 套，都是照着真实品牌拆的。

快速上手第 6 篇 讲了它是什么和怎么选。这一篇讲怎么真正把它变成你自己的资产。

官方库为什么值钱

每一套预设都取一个真实品牌——Stripe、Linear、Vercel、Airbnb、Tesla、Notion、Apple 这类——按同一套标准 schema 拆解：真实的品牌色值、真实的字体、真实的间距。不是「材料设计通用回退」。

这个差别在输出上很明显。给一个通用系统，你得到的是「一般的现代 UI」。给一个品牌级系统，你得到的是有具体气质的东西——因为色值、字重、圆角这些参数本来就是被某个设计团队推敲过的。

抽出你自己的一套

这是投入产出比最高的一步。一次投入，之后每次生成都受益。

从截图抽

最快的路径。一张产品截图，或者你们官网的一屏。

这是我们产品的一张界面截图。

请从里面抽出一份完整的 DESIGN.md，包含：

1. 调色板
   - 主色、辅色、语义色（成功/警告/错误/信息）
   - 中性色阶，从最浅到最深，给出十六进制值
   - 每个颜色标注它在截图里出现在哪

2. 字体
   - 字族（能识别出来就写具体名字，识别不出来写特征）
   - 字号阶梯，标注每一级用在什么地方
   - 字重、行高、字距

3. 间距系统
   - 基础单位
   - 常用间距值
   - 圆角、阴影

4. 组件规范
   - 按钮（主要/次要/文字，各状态）
   - 卡片、输入框、表格的默认样式

5. 动效性格
   - 时长、缓动
   - 哪些交互该有动效

拿不准的地方明确标出来，不要猜一个值填进去。
截图里看不到的部分（比如错误态、空态），列成待补清单。

最后两句是关键。不加的话，它会把没看到的部分也编出来，你拿到的是一份看起来很完整但有一半是虚构的规范。

从 Figma 抽

如果有 Figma 文件，导出之后同样丢进去。Figma 导出带的信息比截图多——变量、样式、组件命名都在，抽出来的 DESIGN.md 精度更高。

存到哪

your-project/
└── design-systems/
    └── your-brand/
        └── DESIGN.md

存好之后，所有技能生成的东西都会长成这个样子，不用每次在提示词里重复描述品牌。

怎么验证抽得对不对

抽完别急着用。做一次对照测试：

1. 用新抽的系统生成一个页面。
2. 跟你们真实的产品界面并排放。
3. 看这四项：主色的使用比例、标题和正文的字号比、卡片圆角、按钮的高度和内边距。

这四项最容易抽偏。尤其是主色使用比例——很多品牌的主色其实只用在行动按钮上，但抽出来的系统经常把它当成大面积背景色用。

不对就直接改 DESIGN.md，它是 Markdown，手改比重抽快。

一套系统管不到的地方

DESIGN.md 决定长什么样，决定不了什么算合格。

按钮是什么颜色，设计系统说了算。按钮必须有 disabled 和 loading 状态，这是 Craft 说了算。两层分开是有意的——换品牌的时候，质量底线不应该跟着变。

详见 04 · Craft。

多品牌怎么办

接客户项目的话，每个客户一套：

design-systems/
├── client-a/DESIGN.md
├── client-b/DESIGN.md
└── our-own/DESIGN.md

切换是切一个目录。同一份技能在不同系统下跑，出来的东西气质完全不同，但结构和质量是一致的。

这是这套架构在实际项目里最实用的一点：你的方法论可以复用，客户的品牌各自独立。

常见坑

坑	表现	怎么办
一次抽完就用	生成出来跟真产品有明显差距	做对照测试，改 DESIGN.md
主色用得太满	页面被品牌色淹了	在系统里明确写主色的使用比例和场景
只抽了亮色模式	暗色下一片糊	抽的时候明确要求两套色值
字体写了个不存在的名字	渲染时回退成默认字体	用能拿到的字体，或者写清楚回退栈
每个项目重抽一次	浪费	抽一次存进仓库，跨项目复用

相关

• 快速上手 · 设计系统 — 基础概念和怎么选
• 实战 · 从截图抽一套品牌系统 — 完整走一遍
• 04 · Craft — 品牌覆盖不了的那一层