DESIGN.md Skill：让 AI 理解设计系统的格式规范

让 AI 真正读懂设计稿——DESIGN.md 用格式规范搭起人机设计沟通桥

DESIGN.md 是 Google Labs 开源的一个格式规范项目，旨在为 AI 编码智能体提供一套可机器读取、可人类阅读的设计系统描述规范。它将设计 token（颜色、字体、间距、圆角等）以 YAML 前置元数据表达，将设计理念与组件规范以 Markdown 正文说明，AI 读取后即可输出一致、可追溯的 UI 代码。这个项目近期在 GitHub Trending TypeScript 日榜持续上榜，以 26k+ Stars 的体量成为设计系统 + AI Agent 交叉领域最受关注的新项目之一。

功能与原则

DESIGN.md 解决的是一个核心矛盾：AI 能写代码，但它不知道你的品牌是什么风格、用什么颜色、多大的圆角。传统设计系统依赖 Figma/Sketch 文件，AI 无法直接读取。DESIGN.md 用纯文本格式替代，让 AI 能够理解并严格遵循视觉规范。其设计原则有三条：Token 优先（YAML 中的值是规范基准）、渐进式表达（可选的 Markdown 正文补充设计背景）、机器可操作（所有值均可被程序解析、验证、比对）。

认可度

截至 2026-07-27，DESIGN.md 在 GitHub 累计获得 26,457 Stars、2,139 Forks，过去数周持续出现在 GitHub Trending TypeScript 日榜，是该分类下排名最高的新晋项目之一。npm 包 @google/design.md 保持高频下载，涵盖 CLI 工具、设计 lint、设计 diff、设计 token 导出等完整工具链。

链接

GitHub：https://github.com/google-labs-code/design.md
npm：npx @google/design.md 或 npm install @google/design.md

原作者

Google Labs（google-labs-code）—— Google 内部实验性项目团队，专注于为 AI 编程智能体构建基础设施，曾产出 design.md、stitch-skills、agents-cli 等多个热门项目。

介绍

DESIGN.md 文件由两层构成。第一层是 YAML 前置元数据，定义设计 token 的具体值——颜色、字体字号、间距、圆角、组件属性等，均为机器可解析的标准化格式；第二层是 Markdown 正文，以 ## 章节结构（Overview / Colors / Typography / Layout / Components 等）阐述设计理念和使用方式。

CLI 工具 design.md 提供三大核心命令：lint 验证 DESIGN.md 文件的结构正确性，检查 token 引用合法性、WCAG 对比度，并输出结构化 JSON 报告；diff 对比两个版本的 DESIGN.md，精确报告颜色、字体等 token 的增减与变更，支持 CI 流程集成；export 将 design token 导出为 CSS/Tailwind/DTCG JSON 等格式，打通设计与开发最后一公里。

以 button-primary 组件为例，YAML 中定义背景色为 {colors.tertiary}（即 Boston Clay #B8422E），AI 读取后生成的按钮代码将自动使用该色值，而非凭”感觉”选择，从而确保整个设计系统的视觉一致性。

特点

• 双层结构：YAML token（机器读）+ Markdown 正文（人类读），各有分工，互不干扰
• WCAG 对比度验证：lint 命令自动检查前景/背景颜色对比，输出结构化报告
• 设计版本 diff：追踪设计系统变更，精确到 token 级别，回归问题早发现
• 多格式导出：支持导出为 CSS Variables、Tailwind theme、DTCG JSON Token，满足不同技术栈需求
• 跨智能体兼容：不绑定特定 AI 提供商，任何能解析文本的 Agent 均可使用（Claude Code、Copilot、Cursor 等均适用）

使用方法

安装 CLI：

npm install @google/design.md

验证设计文件：

npx @google/design.md lint DESIGN.md

对比两个版本：

npx @google/design.md diff DESIGN.md DESIGN-v2.md

导出为 Tailwind：

npx @google/design.md export --format json-tailwind DESIGN.md > tailwind.theme.json

在 Claude Code 中使用示例： 将 DESIGN.md 放入项目根目录，AI 在生成 UI 代码时会自动读取其中的 token 值，输出与设计系统一致的组件代码，无需额外提示词。

使用场景与人群

适用场景： 设计系统维护（设计师与开发者的共享规范）、AI 编程场景（确保 AI 生成代码符合品牌视觉）、CI 流程（设计变更自动回归检查）、跨团队协作（设计意图的可执行文档化）。目标用户： UI/UX 设计师（需要将设计意图传递给 AI）、前端开发者（需要 AI 生成符合规范的代码）、AI Agent 开发者（为 Agent 构建设计感知能力）、设计系统维护团队（版本控制与变更追踪）。

输入与输出案例

输入（Lint）：
用户执行 npx @google/design.md lint DESIGN.md，AI 根据文件内容输出：

{
  "findings": [
    {
      "severity": "warning",
      "path": "components.button-primary",
      "message": "textColor (#ffffff) on backgroundColor (#1A1C1E) has contrast ratio 15.42:1 — passes WCAG AA."
    }
  ],
  "summary": { "errors": 0, "warnings": 1, "info": 1 }
}

输入（Diff）：
执行 npx @google/design.md diff DESIGN.md DESIGN-v2.md，输出：

{
  "tokens": {
    "colors": { "added": ["accent"], "removed": [], "modified": ["tertiary"] },
    "typography": { "added": [], "removed": [], "modified": [] }
  },
  "regression": false
}

GitHub: https://github.com/google-labs-code/design.md