design.md：Google 开源的 AI 设计规范格式，让 Agent 一次生成符合你风格的 UI

Google 近日开源了一个名为 design.md 的规范项目，旨在为 AI 编程 Agent 定义一种标准化的”设计系统描述文件”格式。简单来说，这个项目想解决一个实际问题：如何让 AI Agent 一次性生成符合你设计规范的 UI，而不是反复修改颜色和间距。

项目背景

随着 Claude Code、Cursor、Copilot 等 AI 编程工具的普及，越来越多的开发者开始用 AI 生成前端代码。但一个普遍的痛点是：AI 生成的 UI 虽然功能正确，但设计风格往往不符合项目的设计规范——颜色不对、字体不对、间距不对、组件样式不对。

每次都需要开发者手动调整这些设计细节，效率很低。design.md 正是为了解决这个问题。

什么是 design.md

design.md 定义了一种 Markdown 格式的设计系统描述文件，包含以下内容：

• 色彩系统：主色、辅色、中性色、语义色等
• 排版规范：字体族、字号、行高、字重等
• 间距系统：基础间距单位和各组件的间距规范
• 组件库：按钮、输入框、卡片、导航等组件的样式定义
• 圆角和阴影：边框圆角、阴影层级等
• 动效规范：过渡时间和缓动函数

AI 编程 Agent 在生成前端代码时，会读取这个 design.md 文件，然后按照其中定义的规范来生成 UI。

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

核心数据：⭐ 12,000+ Stars | 🟦 TypeScript

如何使用

在你的项目根目录放置一个 design.md 文件：

# My App Design System

## Colors
- Primary: #2563EB
- Secondary: #7C3AED
- Neutral: #1F2937
- Background: #FFFFFF
- Error: #DC2626

## Typography
- Font: Inter, system-ui
- Heading: 600 weight, 1.2 line-height
- Body: 400 weight, 1.6 line-height
- Code: JetBrains Mono

## Spacing
- Base unit: 4px
- Component padding: 16px
- Section gap: 32px

## Border Radius
- Small: 4px
- Medium: 8px
- Large: 16px

然后在使用 AI 编程工具时，Agent 会自动识别并遵循这个规范。

支持的 AI 工具

目前 design.md 已经与以下 AI 编程工具集成：

• Claude Code（通过 CLAUDE.md 引用）
• Cursor（通过 .cursor/rules 引用）
• GitHub Copilot
• 以及其他支持自定义规则的 AI 编程工具

为什么不用 Tailwind 或设计 Token

有人可能会问：已经有了 Tailwind CSS 和 Figma Design Token，为什么还需要 design.md？

• Tailwind 是 CSS 框架：它定义的是样式类，不是设计规范。AI 需要知道”用什么 Tailwind 配置”才能生成正确的代码
• Design Token 太技术化：JSON/YAML 格式的 Token 对 AI 来说不如自然语言描述直观
• design.md 是人和 AI 都能读的：Markdown 格式既方便开发者维护，也方便 AI 理解

适合谁

• 使用 AI 编程工具生成前端代码的开发者
• 有统一设计规范的团队，希望 AI 生成的代码自动符合规范
• 独立开发者，想用一套规范管理多个项目的设计一致性
• 设计系统团队，希望设计规范能直接驱动代码生成

简评

design.md 解决了一个很实际的问题：AI 生成的 UI 如何符合你的设计规范。虽然目前这个项目还比较新，格式规范也还在迭代中，但它代表了一个重要趋势——AI 编程工具需要更结构化的设计上下文。对于已经开始用 AI 生成前端代码的团队来说，值得一试。

来源：GitHub – google-labs-code/design.md