DESIGN.md Skill：让 AI 前端代码拥有持久化设计系统的格式规范

Skill超级捕获手 技术创作者 2026-08-20 11 阅读

Google Labs 开源了一个看似简单的格式规范，却解决了 AI 前端代码最尴尬的问题——每次生成风格不一致。DESIGN.md 将设计系统拆成两层：YAML 机器可读的设计 Token（颜色、字体、间距、圆角）+ Markdown 人可读的设计理念说明。AI 读取后，会生成「深墨色标题 + Public Sans 字体 + Boston Clay 按钮」的精确 UI，而不再是随机配色和离谱间距。这个由 Google Labs Code 团队发布的项目，上线 4 个月狂揽 27,369 颗星，是 2026 年设计 + AI 交叉领域增长最快的开源项目之一。

核心功能与设计原则

DESIGN.md 本身不是一个 AI 工具，而是一个「格式规范」——定义如何向 AI 编码代理描述视觉身份。它的设计哲学是「Token 给出精确值，Prose 解释为什么和怎么用」：

  • Token 层（YAML）：机器可读的设计决策——颜色十六进制值、字体家族、字号、行高、间距数值、圆角大小，全部精确标注；
  • Prose 层（Markdown）：人类可读的设计理念——这个颜色为什么选、这个间距为什么是这个数字、哪些模式是推荐做法。

两者结合，AI 既有精确约束，又理解背后的设计意图。这解决了 AI 前端代码最核心的「一致性」问题：没有 DESIGN.md，AI 每次生成同一个按钮都可能用不同的蓝；有了 DESIGN.md，AI 每次都输出完全一致的设计系统。

认可度

  • GitHub Star：27,369 颗（截至 2026-08-20），4 个月零增长天花板；
  • Fork：2,280；
  • GitHub 更新频率：2026-08-20 仍有提交维护；
  • 定位：Google Labs Code 官方出品，不是个人项目，生命周期有保障。

链接

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

原作者

Google Labs Code 团队（google-labs-code），隶属于 Google 内部 AI 编程研究团队。Google Labs Code 还维护了 stitch-skills 等项目，专注于让 AI 代理更好地理解和执行复杂任务。

介绍

AI 编程工具（Claude Code、Cursor、Copilot）生成前端代码时，一个普遍痛点是「视觉不一致」：同一个 AI，上一次生成蓝色按钮，下一次可能生成紫色；间距时而 16px，时而 24px；字体一会儿 Inter，一会儿 System UI。这是因为 AI 没有持久化的设计系统理解——它只能从对话上下文「猜」应该如何渲染。

DESIGN.md 的解法是把设计系统写进代码仓库。具体来说：

格式规范：一个 .md 文件以 --- 分隔两部分。分隔线上是 YAML front matter，写设计 Token；分隔线下是 Markdown 正文，写设计理念。AI 读取时，Token 提供精确约束，Prose 提供背景知识。

工具链配套：Google Labs 还发布了配套 CLI 工具，支持：
– px @google/design.md lint DESIGN.md — 验证设计文件合法性、WCAG 对比度、Token 引用完整性；
– px @google/design.md diff DESIGN.md DESIGN-v2.md — 对比两个版本设计系统的变化，检测 Token 级别回归。

实际效果：一个 Agent 读取「Heritage」设计系统后，会自动输出：深墨色标题（#1A1C1E）+ Public Sans 字体 + 暖石灰背景（#F7F5F2）+ Boston Clay 交互按钮（#B8422E），精确到每一个像素。

特点

  • 双层结构：YAML Token + Markdown Prose，机器约束和人类意图各司其职；
  • WCAG 合规检查：内置对比度验证，生成 UI 自动满足无障碍标准；
  • 版本对比工具：diff 命令追踪设计系统变更，防止静默回归；
  • 格式验证：lint 命令捕获 Token 引用错误、缺失字段、非法值；
  • 跨 Agent 兼容：不绑定特定 AI 平台，任何支持读取文件的 Agent 均可使用；
  • 组件级细粒度：不只是全局 Token，也支持单个组件（如 components.button-primary）的精确描述。

使用方法

安装 CLI 工具（可选）：

npm install -g @google/design.md
# 或通过 px
px @google/design.md lint DESIGN.md

在项目根目录创建 DESIGN.md：

---
name: MyProject
colors:
  primary: "#3B82F6"
  secondary: "#64748B"
  accent: "#F97316"
typography:
  h1:
    fontFamily: Inter
    fontSize: 2.5rem
spacing:
  sm: 8px
  md: 16px
rounded:
  sm: 4px
  md: 8px
---

## Overview
简洁现代风格，强调清晰层次和足够留白。

## Colors
- Primary 用于主要操作按钮和链接；
- Secondary 用于辅助文字和边框；
- Accent 用于数据高亮和警告。

## Typography
正文 16px，行高 1.6；标题用 Medium 字重。

AI 使用示例（Claude Code）：

> 根据 ./DESIGN.md 设计一个导航栏组件

→ Agent 读取 DESIGN.md → 提取 Token 值和 Prose 说明 → 
输出带精确颜色（#3B82F6 主色）+ 精确间距（md=16px）+ 
Inter 字体的导航栏代码。

验证设计文件：

px @google/design.md lint ./DESIGN.md

使用场景与人群

适用场景：
– 团队协作项目，需要设计师和 AI 代理对「设计系统」有统一理解；
– 需要 AI 生成大量 UI 组件，要求风格高度一致；
– 设计系统重构，需要追踪 Token 级别的变更历史。

目标用户：
– 前端开发者 / UI 设计师，使用 Claude Code、Cursor 等 AI 编程工具；
– 设计系统维护者，需要让 AI 代理「读懂」设计规范；
– 任何希望 AI 生成的前端代码「看起来是同一个人设计的」的团队。

输入与输出案例

输入（Claude Code 对话）：

根据 ./DESIGN.md 设计一个 Hero 区域，包含标题、副标题和一个主 CTA 按钮。

输出（Claude 根据 DESIGN.md Token 自动生成）：

// 读取 DESIGN.md → colors.primary=#3B82F6, spacing.md=16px
<section style={{ padding: '64px 16px', backgroundColor: '#F7F5F2' }}>
  <h1 style={{
    fontFamily: 'Inter',
    fontSize: '3rem',
    fontWeight: 500,
    color: '#1A1C1E'
  }}>
    构建更好的产品
  </h1>
  <p style={{
    fontFamily: 'Inter',
    fontSize: '1.125rem',
    color: '#64748B',
    marginTop: '16px'
  }}>
    用设计系统驱动的 AI 工作流
  </p>
  <button style={{
    marginTop: '32px',
    padding: '12px 24px',
    backgroundColor: '#3B82F6',
    color: '#FFFFFF',
    borderRadius: '8px',
    fontFamily: 'Inter',
    fontSize: '1rem'
  }}>
    立即开始
  </button>
</section>

Token 值全部来自 DESIGN.md，AI 无需「猜测」颜色或间距，输出风格与设计系统完全一致。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 11 阅读