你的 Figma 文件，AI 看不懂。
这是我最近研究 Stitch 时意识到的一个问题。
我们把所有的设计决策压缩进 Figma——配色、字体、圆角、间距、组件规范——然后交给开发者"对着设计稿还原"。这套流程跑了十几年，勉强可以。
但现在 AI agent 开始参与生成 UI 了。问题来了：它看不懂 Figma。它不知道你的品牌主色是 #2665fd，不知道你不喜欢阴影，不知道你的按钮永远是 8px 圆角。每次生成，它都在从零猜测你的审美。
结果就是：每个页面都像是不同设计师做的。
DESIGN.md 可以解决这个问题。
一份文件，定义整个项目的视觉语言
DESIGN.md 的逻辑很简单：把你的设计系统写成纯文本，让 agent 能读。
你可以把它理解成设计界的 AGENTS.md：
| 文件 | 读者 | 定义的内容 |
|---|---|---|
README.md |
人类 | 项目是什么 |
AGENTS.md |
编程 agent | 怎么构建 |
DESIGN.md |
设计 agent | 怎么呈现 |
有了它，每次 Stitch（Google AI）生成新页面，都会先读这份文件，然后再干活儿。配色一致，字体一致，圆角一致。所有页面看起来像同一个产品，而不是同一个 AI 在不同心情下的随机输出。
它不是静态的配置文件。它是活的文档（就这个问题，还有老外在推特上问我）—— 你改它，agent 跟着变；设计演进了，它也跟着进化。
三种方式创建它
让 agent 生成。 最省力的方式。你只需要描述感觉：
"一款活泼的咖啡店点单 App，暖色调，圆角，亲切友好的氛围"
Stitch 把这句话翻译成完整的设计 token，连同 DESIGN.md 一起吐出来。
从品牌资产提取。 如果你已有品牌，丢一个 URL 或图片给它。它会从中提取配色、字体、风格模式，帮你构建出 DESIGN.md。适合那些"品牌已经有了，只是没有整理成 agent 能读的格式"的场景。
手写。 最精确的方式。每个章节都是普通 Markdown，没有特殊语法，不需要任何工具链。适合对设计系统有强烈主导欲的人。
它长什么样：六个章节
每份 DESIGN.md 遵循固定结构，章节顺序保持不变，不相关的可以省略。
Overview：定调
这里描述产品的性格，而不是具体数值。
## Overview
A calm, professional interface for a healthcare scheduling platform.
Accessibility-first design with high contrast and generous touch targets.
当没有具体 token 可以参考时，agent 靠这段话做高层决策。写得越准确，生成结果越贴近你的直觉。
Colors：配色
每种颜色需要两样东西：十六进制值，和用途说明。
## Colors
- **Primary** (#2665fd): CTAs, active states, key interactive elements
- **Secondary** (#6074b9): Supporting actions, chips, toggle states
- **Tertiary** (#bd3800): Accent highlights, badges, decorative elements
- **Neutral** (#757681): Backgrounds, surfaces, non-chromatic UI
agent 会从这四个基础色派生出完整的命名色板：surface、on-primary、error、outline……遵循 Material color role 规范，存在结构化 token 里。你只需要定义根，它负责长出整棵树。
Typography：字体
定义字体家族和各层级的用法：
