Google Labs 发布 DESIGN.md —— 让 AI 编程助手理解你的设计体系的规范格式

Google Labs 最近开源了一个非常有意思的项目——DESIGN.md，一个专为 AI 编程助手（Coding Agents）设计的设计体系描述格式规范。上线即爆火，目前已获得 19,000+ Star，单日增长近 1500 Star。

什么痛点？

用过 Claude Code、Cursor、Gemini CLI 等 AI 编程工具的开发者都遇到过一个问题：AI 生成的 UI 跟你想要的设计风格对不上。颜色不对、字体不对、间距不对……每次都要反复纠正。

DESIGN.md 解决的就是这个问题。它提供了一种结构化、可被编程解析的格式，让你能把设计体系写在项目根目录的 DESIGN.md 文件里，AI 编程助手读取后就能生成符合你设计规范的界面。

核心设计：Token + Prose 双层结构

一个 DESIGN.md 文件分为两层：

1. YAML Front Matter（机器可读）：用 --- 包裹的 YAML 块，定义颜色、字体、圆角、间距等设计 Token
2. Markdown Body（人类可读）：用自然语言解释为什么要这样设计，帮助 AI 理解设计意图

举个例子，一个叫 “Heritage” 的设计系统的 DESIGN.md：

---
name: Heritage
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
  tertiary: "#B8422E"
  neutral: "#F7F5F2"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
  body-md:
    fontFamily: Public Sans
    fontSize: 1rem
rounded:
  sm: 4px
  md: 8px
spacing:
  sm: 8px
  md: 16px
---

## Overview

Architectural Minimalism meets Journalistic Gravitas. 
The UI evokes a premium matte finish.

## Colors

- **Primary (#1A1C1E):** Deep ink for headlines
- **Secondary (#6C7278):** Slate for borders and captions
- **Tertiary (#B8422E):** "Boston Clay" — the sole interaction driver
- **Neutral (#F7F5F2):** Warm limestone foundation

一个读取了这个文件的 AI 编程助手，就会生成深墨色 Public Sans 字体的标题、温暖石灰白背景、以及 “Boston Clay” 红色作为唯一的交互色——精准命中设计意图。

强大的 CLI 工具链

Google Labs 不只是给了一个格式规范，还配套发布了 @google/design.md npm 包，提供了强大的命令行工具：

1. 校验（lint）—— 自动检查设计系统的正确性

npx @google/design.md lint DESIGN.md

会输出结构化 JSON，检查内容包括：

• broken-ref：Token 引用（如 {colors.primary}）是否能解析
• contrast-ratio：组件背景色/文字色对比度是否达到 WCAG AA 标准
• orphaned-tokens：定义了但从未被组件引用的颜色 Token
• missing-primary：定义了颜色但缺少 primary 色
• section-order：Section 顺序是否符合规范

2. 对比（diff）—— 追踪设计系统变更

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

检测两个版本之间的 Token 级差异，包括新增、移除、修改的颜色和字体。特别适合团队协作时监控设计系统的回归。

3. 导出（export）—— 一键生成 Tailwind / DTCG 配置

# 导出为 Tailwind v3 配置
npx @google/design.md export --format json-tailwind DESIGN.md > tailwind.theme.json

# 导出为 Tailwind v4 CSS 变量
npx @google/design.md export --format css-tailwind DESIGN.md > theme.css

# 导出为 W3C Design Token Format
npx @google/design.md export --format dtcg DESIGN.md > tokens.json

这意味着写一次 DESIGN.md，就能自动生成 Tailwind、CSS 变量、DTCG 等多种格式的配置，彻底消除手写设计配置的痛苦。

4. 查看规范（spec）—— 方便注入 AI 上下文

npx @google/design.md spec

输出完整的 DESIGN.md 格式规范，可以注入到 AI 提示词中，让不熟悉该格式的 Agent 也能正确生成 DESIGN.md 文件。

怎么用？

安装

npm install "@google/design.md"

注意：Windows PowerShell 需要用引号包裹包名，否则 @ 符号会被当成特殊字符。

在项目中使用

1. 在项目根目录创建 DESIGN.md 文件
2. 按照规范写入设计 Token 和设计理念
3. 在 AI 编程助手的系统提示词中引用：「请阅读项目根目录的 DESIGN.md 文件，严格遵循其中定义的设计体系」
4. AI 生成代码时会自动匹配你的设计规范

Windows 特别注意

由于 .md 扩展名在 Windows 上会与 Markdown 文件关联冲突，Google 贴心地提供了 designmd 别名：

npx -p @google/design.md designmd lint DESIGN.md

技术栈

• 语言：TypeScript
• 发布渠道：npm（@google/design.md）
• 核心能力：YAML 解析、Token 引用解析、WCAG 对比度计算、设计 Token 格式转换
• 兼容性：支持 W3C Design Token Format Module（DTCG）

为什么值得关注？

DESIGN.md 的意义远不止一个简单的格式规范。它代表了 AI 辅助开发的下一个方向：让 AI 理解上下文，而不是每次都从头猜测。

在传统开发中，设计师出设计稿 → 开发者手动写 CSS → AI 生成代码时完全不理解设计意图。而有了 DESIGN.md：

• 设计师可以定义一份设计系统
• 开发者可以直接把设计系统”喂”给 AI
• AI 生成的 UI 天然符合设计规范
• 通过 lint/diff 等工具确保质量

这是一个典型的 “Design-to-Agent” 工作流——设计不再是给人看的静态文档，而是可以直接被 AI 消费的、结构化的数字资产。

总结

Google Labs 的 DESIGN.md 用一个 极简但精准的格式，解决了 AI 编程时代最核心的痛点之一：设计一致性。YAML Token + Markdown Prose 的双层结构兼顾了机器和人，配套的 CLI 工具链让设计系统维护变得可量化、可追踪。

如果你正在使用 AI 编程助手进行前端开发，强烈建议试试 DESIGN.md。19,000+ 开发者的选择已经说明了它的价值。

项目地址：https://github.com/google-labs-code/design.md