技术深度解析
DESIGN.md 看似简单，但其架构揭示了对复杂问题的深思熟虑。该规范在 Markdown 文件中使用 YAML 前置元数据块，既便于人类阅读，也易于 AI 代理解析。核心结构围绕设计令牌构建，这些令牌是设计系统的原子值。
定义的令牌类别：
- 颜色： 支持 `primary`、`secondary`、`accent`、`background`、`text` 和 `error`，可使用十六进制、RGB 或 HSL 值。强制使用语义命名——不是 `#3366FF`，而是 `primary: '#3366FF'`。
- 排版： 定义 `font-family`（含后备字体）、`font-size` 尺度（例如 `xs: '12px'`、`sm: '14px'`、`base: '16px'`）、`font-weight` 和 `line-height`。
- 间距： 从 `xs` 到 `2xl`（或自定义）的尺度，映射为像素值。这确保了内边距和外边距的一致性。
- 边框： `border-radius` 和 `border-width` 令牌。
- 阴影： `shadow-sm`、`shadow-md`、`shadow-lg`，附带标准 box-shadow CSS 值。
AI 代理如何使用它：
当像 Google 的 Project IDX 或开源工具 Continue.dev 这样的代理在项目根目录发现 DESIGN.md 时，它可以：
1. 将 YAML 前置元数据解析为结构化对象。
2. 在生成代码之前，将这些令牌注入系统提示或上下文窗口。
3. 将自然语言请求（例如“创建一个主按钮，中等间距”）映射到精确令牌（`background: primary`、`padding: spacing-md`）。
4. 根据令牌验证生成的代码，标记偏差。
与现有方法的比较：
| 方法 | 优势 | 劣势 | AI 兼容性 |
|---|---|---|---|
| DESIGN.md | 简单、通用、无需新工具 | 仅静态令牌，不支持响应式/暗黑模式 | 优秀（Markdown 解析对 LLM 来说微不足道） |
| CSS 自定义属性 | 动态、运行时主题化 | 未针对 AI 解析结构化；需要 CSS 知识 | 中等（LLM 可以读取，但无法原生‘理解’为系统） |
| 设计令牌（W3C 草案） | 全面、标准 | 复杂的 JSON 模式，需要繁重的工具链 | 良好（JSON 可解析但冗长） |
| Figma API/插件 | 精确的设计保真度 | 需要 Figma，不通用；无代码上下文 | 差（需要 API 调用，不是本地文件） |
数据洞察： DESIGN.md 的简洁性赋予了它显著的采用优势。虽然 W3C 的设计令牌标准更全面，但其复杂性造成了障碍。DESIGN.md 用深度换取可访问性，这对于当前上下文窗口有限、偏好简洁输入的 AI 编码代理来说，可能是正确的取舍。
幕后：解析与注入
开源仓库（github.com/google-labs/code）包含一个 TypeScript 参考解析器。关键洞察在于，解析器将 YAML 转换为扁平的键值映射，然后序列化为 JSON 字符串供 AI 提示使用。例如：
```
{
"color-primary": "#3366FF",
"spacing-md": "16px",
"font-family-base": "Inter, sans-serif"
}
```
这种扁平结构至关重要，因为 LLM 难以处理深度嵌套的 JSON。通过扁平化令牌，DESIGN.md 确保代理无需多步推理即可快速检索精确值。
要点： DESIGN.md 的扁平令牌结构是一种务实的工程选择，针对 LLM 上下文窗口限制进行了优化。预计未来版本将通过条件令牌组（类似于 CSS 中的媒体查询）增加对响应式断点和暗黑模式的支持。
关键参与者与案例研究
DESIGN.md 的发布并非发生在真空中。几个关键参与者已经在塑造设计到代码的 AI 格局，他们对这一规范的反应将决定其成败。
Google（Project IDX 和 Firebase）： 作为创造者，Google 是主要受益者。Project IDX（Google 的云端 IDE，具备 AI 功能）很可能会原生集成 DESIGN.md。这使 Google 在目前由 GitHub Copilot 和 Cursor 主导的 AI 编码工具市场中获得了独特优势。
GitHub Copilot（Microsoft）： Copilot 目前没有原生设计系统感知能力。它可以生成 CSS，但除非明确提示，否则它没有项目设计令牌的概念。Microsoft 可以选择采用 DESIGN.md，或者推广自己的标准。鉴于 GitHub 庞大的用户基础，采用该规范将是一个巨大的胜利。
Cursor（Anysphere）： Cursor 在支持自定义 AI 工作流方面一直最为激进。其 `cursorrules` 文件在精神上与 DESIGN.md 相似，但侧重于编码约定，而非设计令牌。Cursor 可以轻松添加对 DESIGN.md 的支持，其开发者优先的用户群很可能会欣然接受。
Vercel（v0.dev）： Vercel 的 v0.dev 从文本提示生成 UI，但依赖于自己的内部设计系统（基于 Tailwind CSS）。DESIGN.md 可以允许 v0.dev 生成与用户自定义设计系统匹配的代码，而不仅仅是 Vercel 的默认值。