04 · 从截图抽一套品牌系统

速览

产出	一份 DESIGN.md
用时	30 分钟（加上校验大概一小时）
类型	「Design System」
价值	全书投入产出比最高的一次操作

为什么先做这个

一次投入，之后每一次生成都受益。

抽完之后，你不用再在每个提示词里描述「我们的主色是什么、字体用什么、圆角多大」。所有技能生成的东西都自动长成你们家的样子。

准备素材

按精度从高到低：

素材	精度	说明
Figma 文件导出	最高	带变量、样式、组件命名
现有的品牌规范文档	高	直接改写成 DESIGN.md 即可
产品界面截图（多张）	中	多张能覆盖更多组件和状态
官网截图（一张）	低	通常只有营销页的样式

有 Figma 就用 Figma。只有截图的话，尽量多给几张——一张列表页、一张表单页、一张详情页，覆盖的组件类型不一样。

提示词

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

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

1. 调色板
   - 主色、辅色
   - 语义色：成功、警告、错误、信息
   - 中性色阶，从最浅到最深，每一级给十六进制值
   - 每个颜色标注它在截图里出现在什么位置、占多大面积

2. 字体
   - 字族（能识别就写名字，识别不出来描述特征并给回退栈）
   - 字号阶梯，每一级标注用途
   - 字重、行高、字距

3. 间距系统
   - 基础单位
   - 常用间距值
   - 圆角、阴影（给具体数值）

4. 组件规范
   - 按钮：主要、次要、文字型，每种的默认、hover、focus、disabled
   - 输入框：默认、聚焦、错误、禁用
   - 卡片、表格、标签的默认样式

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

6. 语气（如果截图里有足够的文案）
   - 人称、句长、正式程度

重要：
- 拿不准的地方明确标出来，不要猜一个值填进去
- 截图里看不到的（错误态、空态、深色模式）列成待补清单，不要编
- 主色的使用比例要写清楚：它是大面积背景色还是只用于行动按钮

为什么这么写

「不要猜一个值填进去」 是这份提示词最重要的一句。不加的话，你拿到的是一份看起来很完整、有一半是虚构的规范。虚构的部分会在后面每一次生成里持续生效，而且你不知道哪些是虚构的。

「主色的使用比例」单独拎出来说，是因为这是抽取时最容易出错的一项。很多品牌的主色只用在行动按钮上，占页面面积不到 2%。抽出来的系统如果把它当成大面积背景色，生成的页面会被品牌色淹掉。

「每个颜色标注它在截图里出现在什么位置」 让你能核对。看到「#0055FF —— 主要按钮背景、链接文字」你能立刻判断对不对。

校验

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

1. 用新系统生成一个页面（拿 案例 01 的提示词就行）。
2. 跟你们真实的界面并排放。
3. 重点看这四项：

项	常见偏差
主色使用比例	被当成大面积背景色
标题和正文的字号比	阶梯被压扁，对比不够
卡片圆角	差 2 到 4 px，观感明显不同
按钮高度和内边距	偏胖或偏瘦

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

存放

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

提交进 git。之后这份文件跟着仓库走，团队里每个人都用同一套。

验收清单

• [ ] 所有颜色都有十六进制值，没有「深蓝色」这种描述
• [ ] 主色的使用场景和比例写清楚了
• [ ] 字号阶梯每一级都标了用途
• [ ] 按钮和输入框的各个状态都有
• [ ] 待补清单存在（说明它没有编造看不到的部分）
• [ ] 做过对照测试
• [ ] 已提交进仓库

变体

补深色模式

这份 DESIGN.md 目前只有亮色。请补一套深色模式的色值。

要求：
- 不是简单反转。中性色阶要重新设计，深色下的层次靠亮度差而不是阴影
- 主色在深色背景上的对比度要过 WCAG AA
- 语义色（成功/警告/错误）在深色下也要保持可识别
- 标注哪些颜色两个模式共用，哪些各有一套

从竞品抽（做研究用）

这是 [某产品] 的界面截图。抽一份 DESIGN.md 出来，用于分析。

额外分析：
1. 他们的视觉决策解决了什么问题
2. 哪些做法值得借鉴，哪些是他们特定场景才成立的
3. 如果我们的产品是 [描述]，这套系统里哪些不适用

抽竞品的系统用于学习和分析是正常的设计研究。直接拿去用是另一回事，注意商标和视觉识别的边界。

多客户管理

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

同一份技能在不同系统下跑，方法论复用，品牌各自独立。

常见问题

它说识别不出字体。

正常。截图里的字体经常识别不出来。让它描述特征（衬线/无衬线、字宽、字重、有没有特殊的字形），然后你自己填名字，或者给一个回退栈。

颜色抽出来跟设计稿对不上。

截图有压缩和色彩管理的影响。有 Figma 或者原始规范的话以那个为准，截图只用来补组件规范。

抽出来太笼统。

给的截图不够。补几张覆盖不同组件的图，尤其是有表单、有表格、有状态提示的页面。

相关

• 进阶 · 设计系统 — 更完整的说明
• 快速上手 · 设计系统 — 基础概念
• 案例 05 · Figma 转代码