Google发布DESIGN.md：让AI“看懂”设计，让设计“变成”代码

一个描述设计系统的标准格式
YAML+Markdown，机器可读、人类可写
AI读完，自动生成统一风格的界面

🎭 先看痛点：设计和开发之间，永远有一道“翻译墙”

你是一个开发者，拿到设计师的Figma设计稿。

设计师告诉你：

“这个按钮用主色，圆角适中，标题用粗体，正文用常规……”

你打开代码，开始写：

button {
  background-color: #1A1C1E;
  border-radius: 8px;
  font-weight: 700;
}

但问题来了：

• 设计师说的“主色”是哪个颜色值？你要去Figma里查
• “圆角适中”是4px、8px还是12px？你猜
• “粗体”是600还是700？你又猜
• 下一个组件又用同样的规则？你从头再猜一次

更麻烦的是：

• 设计改了一个颜色值 → 你要把所有用到的组件都找出来改一遍
• 设计系统变了 → 整个代码库要“人肉刷新”
• 设计师和开发者之间永远有“翻译偏差”

核心矛盾：

设计系统存在于设计工具里（Figma/Sketch），但代码里没有结构化的、可被AI读取的设计描述。设计师用眼睛看，开发者用手写。中间的“翻译”环节，又慢又容易出错。

✅ Google DESIGN.md 的解法

DESIGN.md 是Google发布的一个格式规范——用一个标准文件描述“设计系统”，让人类和AI都能读懂。

一句话：把设计系统写成“代码能读懂的文档”——YAML前端数据+Markdown说明文字

---
name: Heritage
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
  tertiary: "#B8422E"
  neutral: "#F7F5F2"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
---

## Overview
Architectural Minimalism meets Journalistic Gravitas.

一个AI读完这份DESIGN.md文件，就知道：

• 主色是 #1A1C1E（深墨色）
• 标题字体是 Public Sans，3rem
• 按钮要用主色、圆角4px

它不需要猜。不需要问。不需要去Figma里翻。

🔥 它解决了什么？

1. “口头沟通” vs “文件即契约”

2. “设计系统分散” vs “单一事实来源”

💡 设计令牌（Design Tokens）：设计系统里最基础的变量——比如 --color-primary: #1A1C1E、--font-size-heading: 24px。改一个令牌，所有用到它的地方自动更新。

3. “人肉翻译” vs “工具自动读取”

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

# 导出为W3C标准设计令牌格式
npx @google/design.md export --format dtcg DESIGN.md

设计师改设计 → 更新DESIGN.md → 开发者运行命令 → 代码自动同步

📦 文件格式：两分钟看懂

结构

---                              ← YAML前端数据（机器可读）
name: Heritage
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
---                              ← 分界线

## Overview                       ← Markdown正文（人类可读）
Architectural Minimalism...

## Colors                         ← 章节（可选的，有固定顺序）
The palette is rooted in...

核心令牌类型

组件定义

components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-tertiary}"
    rounded: "{rounded.sm}"
    padding: 12px
  button-primary-hover:
    backgroundColor: "{colors.tertiary-container}"

章节顺序（固定，方便对比）

1. Overview（概述）
2. Colors（颜色）
3. Typography（字体）
4. Layout（布局）
5. Elevation（层级）
6. Shapes（形状）
7. Components（组件）
8. Do’s and Don’ts（该做/不该做）

🛠️ 配套工具（CLI）

安装

npm install @google/design.md

验证文件（lint）

npx @google/design.md lint DESIGN.md

输出JSON格式的检查报告：

{
  "findings": [
    {
      "severity": "warning",
      "path": "components.button-primary",
      "message": "颜色对比度15.42:1 —— 通过WCAG AA标准"
    }
  ],
  "summary": { "errors": 0, "warnings": 1, "info": 1 }
}

💡 WCAG：Web内容无障碍指南，确保颜色对比度足够，让视力障碍者也能看清。

对比版本（diff）

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

输出：

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

导出（export）

# 导出为Tailwind配置（JSON）
npx @google/design.md export --format json-tailwind DESIGN.md

# 导出为W3C标准设计令牌格式
npx @google/design.md export --format dtcg DESIGN.md

🎯 谁最适合用？

一个典型的“AI+设计”场景

问题：小C在用Claude Code生成一个新的登录页面。之前AI生成的组件风格不一致——有的按钮用圆角8px，有的用12px；有的标题用Inter字体，有的用Helvetica。

现在：项目根目录放了一份DESIGN.md：

---
colors:
  primary: "#1A1C1E"
  tertiary: "#B8422E"
rounded:
  sm: 4px
  md: 8px
typography:
  h1: { fontFamily: Public Sans, fontSize: 3rem }
---

## Components
button-primary:
  backgroundColor: "{colors.tertiary}"
  rounded: "{rounded.sm}"
  padding: 12px

然后小C在Claude Code里说：

“帮我生成一个登录页面，按照DESIGN.md的设计规范”

AI读取DESIGN.md，生成的按钮自动用 #B8422E、圆角4px、Padding 12px。

所有组件风格统一。不需要第二次解释。

🔗 链接

• GitHub：github.com/google/design.md
• npm包：@google/design.md
• 格式规范：项目docs/spec.md
• 许可证：未在README中明确（参考Google开源惯例）

✅ 总结

Google DESIGN.md —— 让设计系统“可读、可维护、可AI理解”。
设计写在文件里，而不是只存在于Figma中。