Google DESIGN.md让 AI Agent 理解你的设计系统设计系统不再只属于设计师AI 编码 Agent 也需要读懂设计。Google Labs 开源的 DESIGN.md 规范正是解决这个问题的关键尝试。引言你是否遇到过这样的场景用 AI 生成的 UI每次风格都不一样Agent 不知道为什么品牌色是某个特定的值跨项目的 UI 无法保持一致性设计师的设计稿Agent 无法理解其中的设计决策问题的根源是传统设计系统分散在多个地方——CSS 文件、Figma 组件库、设计文档、品牌指南。AI Agent 没有一个统一的入口来读懂整个设计系统。Google Labs 的解决方案是DESIGN.md——一个让 AI Agent 理解设计系统的标准文件格式。什么是 DESIGN.md核心定位一个文件同时满足人类和 AI 的需求。DESIGN.md 是 Google Labs 开源的设计系统规范格式Apache-2.0 许可专门为 AI 编码 Agent 设计。它把设计系统的所有信息整合到一个 Markdown 文件┌─────────────────────────────────────────────────┐ │ DESIGN.md │ ├─────────────────────────────────────────────────┤ │ YAML Front Matter机器可读 │ │ - 设计 tokens 的精确数值 │ │ - 颜色、字体、间距、组件属性 │ ├─────────────────────────────────────────────────┤ │ Markdown Body人类可读 │ │ - 设计 rationale为什么这样设计 │ │ - 使用场景和注意事项 │ │ - Dos and Donts │ └─────────────────────────────────────────────────┘GitHub 仓库https://github.com/google-labs-code/design.mdStars8,697截至 2026-04-27CLInpx google/design.md文件结构详解YAML Front Matter设计 TokensYAML 部分是机器可读的精确数值定义了整个设计系统的骨架---version:alphaname:Heritagedescription:Architectural minimalism meets journalistic gravitas.colors:primary:#1A1C1E# 深墨色用于标题和核心文本secondary:#6C7278# 中灰用于辅助文本tertiary:#B8422E# Boston Clay品牌强调色neutral:#F7F5F2# 浅米色背景和卡片typography:h1:fontFamily:Public SansfontSize:3remfontWeight:700lineHeight:1.1letterSpacing:-0.02embody-md:fontFamily:Public SansfontSize:1remfontWeight:400lineHeight:1.5rounded:sm:4pxmd:8pxlg:16pxspacing:sm:8pxmd:16pxlg:24pxcomponents:button-primary:backgroundColor:{colors.tertiary}textColor:#FFFFFFrounded:{rounded.sm}padding:12pxbutton-primary-hover:backgroundColor:{colors.primary}---关键特性Token 引用用{colors.primary}引用其他 token保持单一数据源组件定义直接定义组件的样式属性变体分离button-primary-hover是独立的 key不是嵌套结构Markdown Body设计 RationaleMarkdown 部分是人类可读的设计理由告诉 AI Agent为什么要这样设计## Overview Architectural Minimalism meets Journalistic Gravitas. This design system draws from print editorial heritage while embracing digital scalability. ## Colors - **Primary (#1A1C1E):** Deep ink for headlines and core text. Creates visual weight without overwhelming. - **Tertiary (#B8422E):** Boston Clay — the sole driver for interaction. Used only for primary actions, never for decoration. ## Typography Public Sans for everything except small all-caps labels. The geometric sans-serif maintains clarity at all sizes while subtly referencing newspaper mastheads. ## Components button-primary is the only high-emphasis action on a page. Use sparingly — when everything is important, nothing is. ## Dos and Donts ✅ Do: Use tertiary color only for primary actions ✅ Do: Maintain generous whitespace between sections ❌ Dont: Apply rounded corners to inputs (keep them sharp) ❌ Dont: Mix tertiary with other accent colorsCanonical Section OrderDESIGN.md 规范要求章节必须按固定顺序排列序号章节名称别名内容1OverviewBrand Style设计系统整体定位2Colors-颜色体系3Typography-字体规范4LayoutLayout Spacing布局和间距5Elevation DepthElevation层级和阴影6Shapes-形状和圆角7Components-组件定义8Do’s and Don’ts-使用注意事项注意重复的章节标题会导致 lint 失败。CLI 工具验证、对比、导出1. Lint验证npx google/design.md lint DESIGN.mdLint 检查 7 条规则规则类型说明broken-referror{colors.missing}引用不存在的 tokenduplicate-sectionerror同一章节标题出现两次invalid-colorerror颜色格式错误必须是# hexinvalid-dimensionerror尺寸格式错误需要单位invalid-typographyerror字体对象缺少必要属性wcag-contrastwarning文字/背景对比度未达 WCAG AA4.5:1unknown-component-propertywarning组件属性不在白名单中WCAG 检查的价值这是 lint 最实用的功能——自动检查无障碍合规。2. Diff对比npx google/design.mddiffDESIGN.md DESIGN-v2.md对比两个版本的 DESIGN.md检测是否存在回归设计变化导致的问题。返回 exit 1 表示有回归。3. Export导出# 导出为 Tailwind theme JSONnpx google/design.mdexport--formattailwind DESIGN.mdtailwind.theme.json# 导出为 W3C DTCG JSONDesign Tokens Format Modulenpx google/design.mdexport--formatdtcg DESIGN.mdtokens.json导出格式Tailwind直接用于 Tailwind CSS 配置DTCGW3C 标准格式可被其他设计工具Figma、Style Dictionary导入Token 类型规范类型格式示例Color# hexsRGB必须引号#1A1C1EDimension数字 单位px,em,rem负值需引号48px,-0.02emToken Reference{path.to.token}{colors.primary}Typography包含fontFamily,fontSize,fontWeight等的对象见上文示例组件属性白名单backgroundColor,textColor,typography,rounded,padding,size,height,width常见 Pitfalls1. Hex 颜色必须引号# ❌ 错误YAML 会把 # 当成注释colors:primary:#1A1C1E# ✅ 正确colors:primary:#1A1C1E2. 负值尺寸需要引号# ❌ 错误YAML 会把 -0.02em 解析成奇怪的东西letterSpacing:-0.02em# ✅ 正确letterSpacing:-0.02em3. 变体不嵌套# ❌ 错误嵌套变体components:button-primary:backgroundColor:{colors.tertiary}hover:backgroundColor:{colors.primary}# ✅ 正确变体是独立的 keycomponents:button-primary:backgroundColor:{colors.tertiary}button-primary-hover:backgroundColor:{colors.primary}4. Token 引用必须完整路径# ❌ 错误缺少路径backgroundColor:{primary}# ✅ 正确完整路径backgroundColor:{colors.primary}生态系统DESIGN.md 规范正在快速发展已经出现多个周边项目项目Stars说明google-labs-code/design.md8,697官方规范和 CLIawesome-design-md-jp580日本语 UI 的 DESIGN.md 集合CJK 字体扩展awesome-design-skills182DESIGN.md 和 SKILL.md 的精选列表design-md-firefox4Firefox 扩展从网站提取样式生成 DESIGN.mdclaude-plugin-design-md2Claude Code 插件自动生成 DESIGN.md为什么 DESIGN.md 重要1. 解决 AI 生成 UI 的不一致问题传统方式Agent 需要从多个分散的来源CSS、文档、截图拼凑设计信息每次生成结果都不一致。DESIGN.mdAgent 有一个完整、结构化的设计系统文件每次生成都能遵循相同的规范。2. 让 Agent 理解设计决策不只是知道品牌色是 #B8422E还知道这是 Boston Clay唯一用于交互的颜色从不用于装饰。这种rationale 层的信息让 Agent 能做出更符合设计意图的判断。3. 设计系统的可验证性通过 CLI 的 lint 和 diff设计系统变得可验证、可追踪WCAG 无障碍合规自动检查版本对比检测回归导出格式保证跨工具兼容4. 实现 “Design as Token”这正是 “All as Token” 思维在设计领域的落地设计系统不再是分散的文档和组件库而是一个 AI Agent 可读取、可理解、可验证的单一文件设计 tokens 变成了可被 Agent 直接引用的精确值实践建议新项目从 DESIGN.md 开始在项目根目录创建DESIGN.md定义核心 tokens颜色、字体、间距用 lint 验证格式和 WCAG 合规用 export 导出 Tailwind/DTCG JSON在 AI Agent 提示中引用这个文件现有项目逆向提取使用design-md-firefox扩展从现有网站提取样式或手动整理现有设计文档转换为 DESIGN.md 格式用 diff 对比版本确保无回归团队协作设计师维护 DESIGN.md 的 rationale 部分开发者维护 tokens 的精确数值AI Agent生成 UI 时引用 DESIGN.mdCI/CDlint 检查无障碍合规结语DESIGN.md 的出现标志着设计系统正在从设计师专用工具向AI Agent 可理解格式演进。它解决了一个核心矛盾设计师需要丰富的设计理由人类可读AI Agent 需要精确的设计数值机器可读DESIGN.md 用一个文件同时满足两者让 AI Agent 不只是生成 UI而是理解设计系统。这正是 “Design as Token” 的实践——设计系统变成 AI 可读取、可验证、可复用的单一文件。当万物都变成 token设计也不例外。附录资源链接资源链接官方仓库https://github.com/google-labs-code/design.mdCLI 文档npx google/design.md --help日本语 UI 集合https://github.com/kzhrknt/awesome-design-md-jpFirefox 提取扩展https://github.com/bergside/design-md-firefox数据来源GitHub google-labs-code/design.md、Hermes design-md skill、2026-04-27