Google Stitch DESIGN.md：让 AI Agent 读懂设计系统
基于 Google Stitch 官方文档，对 DESIGN.md 的概念定位、格式规范和使用方式进行完整梳理与分析。
引言
在 AI 驱动的 UI 生成逐渐成为现实的今天，一个核心矛盾浮出水面：设计系统的信息长期存放在 Figma 文件、品牌 PDF 或设计师的经验中，AI agent 无法直接消费这些格式。Google Stitch 提出的 DESIGN.md 正是对这一问题的回应——一种纯文本设计系统文档，让人类和 AI agent 都能读取、编辑和执行。
本文基于 Stitch 官方文档的三篇核心内容，对 DESIGN.md 的概念定位、格式规范和使用方式进行完整梳理。
一、DESIGN.md 是什么
DESIGN.md 是 Google Stitch 定义的一种设计系统文档格式。它用纯文本（Markdown）描述一个项目的视觉标识——颜色、字体、间距、组件样式等——使其既对人类可读，又能被 AI agent 直接解析和执行。
Stitch 将其定位为设计领域的 AGENTS.md 对应物：AGENTS.md 告诉 AI 如何写代码，DESIGN.md 告诉 AI 如何做设计。
这一定位解决的核心问题是：传统设计系统的载体（Figma、PDF、口头约定）对 AI agent 来说是不透明的。DESIGN.md 通过标准化的纯文本格式，将设计意图转化为 agent 可执行的指令。
二、格式规范：固定结构，灵活精度
2.1 章节结构
DESIGN.md 遵循固定的章节顺序。章节可以省略，但顺序不可打乱：
Overview（概览） — 描述设计的整体观感和个性（活泼还是专业、紧凑还是宽松）。在没有具体 token 可用时，它是 agent 做高层决策的主要依据。
Colors（颜色） — 定义 primary、secondary、tertiary、neutral 四组调色板。每个颜色需包含 hex 值和用途描述。agent 会基于基础色自动生成 named colors（surface、on-primary、error、outline 等），遵循 Material Design 的 color role 约定。
Typography（字体） — 定义字体族及其在排版层级中的角色（display、headline、title、body、label）。字体搭配有信号意义：同一字体族传达统一感，混用不同字体族则创造视觉对比，agent 会延续这种意图。
Elevation（层级/阴影） — 定义如何传达深度和层级关系。可以使用阴影（需指定 spread、blur、color 及适用组件），也可以选择扁平风格。
Components（组件） — 原子级组件的样式指导。官方列出了 Buttons、Chips、Lists、Inputs、Checkboxes、Radio buttons、Tooltips 等组件及各自需要指定的属性。也支持根据项目上下文自定义组件。
Do's and Don'ts（准则与禁忌） — 实践性的设计准则和常见陷阱，作为 agent 生成 UI 时的约束护栏。
2.2 双重表示（Dual Representation）
这是 DESIGN.md 最核心的设计理念。
同一份设计系统有两个表示层：Markdown 层是人类友好的摘要，底层是 Stitch 维护的结构化 token（hex 值、字体枚举、间距刻度、完整 named color palette）。编辑 Markdown 时，Stitch 会自动 reconcile 两个表示。
精度可以灵活选择：
- 模糊描述（如 "warm colors, rounded feel"）→ Stitch 翻译为精确 token
- 精确值（如 #2665fd、8px radius）→ Stitch 直接采用 Markdown 是协作层，token 是执行层。两者描述同一个设计系统，服务于不同受众。
三、使用方式：查看、编辑与导出
在 Stitch UI 中，DESIGN.md 通过 Design System 面板进行交互：
查看 — 面板显示当前 screen 对应的已解析 token，包括颜色、字体、圆角、间距和组件模式。如果项目包含多个设计系统，面板会显示当前选中 screen 所应用的那一个。
设置默认 — 可以将某个设计系统设为项目默认，此后新生成的 screen 自动继承 token。但已有 screen 不会被追溯更新，需逐个手动应用。
编辑 — 在面板中直接修改 token 值，变更会同时更新结构化 token 和 DESIGN.md 的 Markdown 摘要，保持双重表示的一致性。
四、总结
DESIGN.md 的本质是一种设计系统的序列化协议。它不是要替代 Figma 或任何设计工具，而是在「人类设计意图」和「AI 生成执行」之间建立一个标准化的中间层。
其核心价值可以归结为三点：
- 可读性与可执行性统一 — Markdown 给人读，结构化 token 给 agent 用，两者自动同步
- 精度弹性 — 允许从模糊描述到精确值的任意精度，降低了编写门槛
- 固定结构、灵活内容 — 六个标准章节覆盖设计系统的核心维度，同时支持按项目上下文扩展