DESIGN.md：给 AI Coding Agent 看的设计规则规范

这篇文章介绍 DESIGN.md 的由来与设计理念。它不是为了增加一个 Markdown 文件，而是 AI 编程进入 Agent 时代后，审美和品牌一致性必须变成 AI 能读取的上下文。

DESIGN.md 的由来

DESIGN.md 最早是从 Google Stitch 这个 AI UI 设计工具里长出来的。

Stitch 是 Google Labs 做的一个 AI 设计工具，用户可以用自然语言生成 App 或网页界面。问题是：AI 每次生成 UI 时，如果没有稳定的设计上下文，就容易乱变风格。今天像 Linear，明天像 Material Design，后天又像模板站。

于是 Google Stitch 需要一个文件，专门保存"这个项目的设计规则"。

这个文件就是 DESIGN.md。

Google 官方对它的描述是：DESIGN.md 可以让 Stitch 在不同项目之间导入、导出设计规则，这样每次开始新设计时，不用重新解释品牌风格；同时 AI 能理解设计系统背后的理由，并生成符合品牌的 UI。

Google 在 2026 年 4 月 21 日宣布开源 DESIGN.md 的草案规范，让它不再只服务于 Stitch，而是可以被不同平台和 AI Agent 使用。

演化路径

Figma / 设计系统
        ↓
人类设计师能看懂，但 AI 不好稳定读取
        ↓
Google Stitch 需要一种 AI 能读懂的设计规则文件
        ↓
DESIGN.md 出现
        ↓
Google 开源规范
        ↓
Claude Code、Cursor、Codex 等 AI Coding Agent 也可以读取

DESIGN.md 是什么

DESIGN.md 不是普通 Markdown 笔记，而是一个给 coding agents 描述视觉身份的格式规范。Google 的 GitHub 仓库里写得很明确：它用于给 Agent 提供"持久、结构化的设计系统理解"。

它通常由两部分组成：

• 机器可读的 YAML design tokens — 精确的设计变量
• 人类可读的 Markdown 设计理由 — 为什么要这么设计

示例

YAML 设计 Token：

colors:
  primary: "#1A1C1E"
spacing:
  md: 16px
rounded:
  md: 8px

Markdown 设计理由：

## Colors

Primary 用于标题、核心文字和主要操作按钮。
整体风格应该克制、专业、低饱和。

这比单纯告诉 AI"高级一点"强很多。因为 AI 不再靠猜，而是有了明确的设计 token 和使用理由。

三个文件的定位

• README.md 是给人看的项目说明
• AGENTS.md 是给 AI Agent 看的开发规则
• DESIGN.md 则是给 AI Agent 看的设计规则

为什么需要 DESIGN.md

AI 编码工具在生成 UI 时面临的核心问题是设计一致性。传统上，设计系统存放在 Figma 或设计文档中，人类设计师能看懂，但 AI 无法稳定读取。

DESIGN.md 解决了这个问题：

1. 持久化设计上下文 — 每个项目都有稳定的设计规则文件，不会因为对话重置而丢失
2. 结构化设计 Token — 颜色、间距、圆角等精确值，AI 可以直接消费
3. 设计理由记录 — 为什么用这个颜色、为什么是这个间距，AI 能理解背后的逻辑
4. 跨项目可移植 — 设计规则可以导入/导出，新项目可以继承已有品牌风格

项目链接

• Google 官方博客：Stitch app's DESIGN.md format is now open-source
• GitHub 仓库：google-labs-code/design.md