Google 开源 DESIGN.md 登顶 GitHub Trending —— 让 AI 编程助手读懂设计系统

Fri, 26 Jun 2026 00:00:00 +0000

2026 年 6 月 26 日，google-labs-code/design.md 登上 GitHub Trending 榜首。这个由 Google 团队维护的开源项目今日新增 1,475 Star，总 Star 数达到 20,138，成为开发者社区今日最关注的焦点。

指标	数值
仓库	google-labs-code/design.md
主要语言	TypeScript
总 Star	20,138
今日新增	1,475
Forks	1,679

什么是 DESIGN.md？

DESIGN.md 是一份面向 AI 编程助手的视觉识别格式规范。它解决了一个日益突出的问题：当 Agent 帮你写前端代码时，如何让它真正理解你的设计系统，而不是每次都从零猜测颜色、字体、圆角和间距？

传统的设计系统文档（如 Figma、Storybook、设计规范 PDF）是为人类设计师准备的，Agent 很难直接消费。DESIGN.md 的做法是：

机器可读：用 YAML front matter 精确描述设计 token（颜色、字体、间距、圆角、组件等）
人类可写：用 Markdown body 解释设计决策的缘由和应用场景
Agent 可执行：Agent 读取后能把 token 直接映射到代码实现

一句话概括：给 AI 一个结构化、持久化的设计系统上下文。

格式核心：YAML Tokens + Markdown Prose

一个标准的 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 — a high-end broadsheet or contemporary gallery.

YAML 部分的 token 是规范值（normative），Markdown 部分的文字是应用说明。Agent 既能拿到精确数值，也能理解为什么要这样设计。

Token Schema 概览

顶层键	说明
`version`	格式版本，当前为 `alpha`
`name`	设计系统名称
`description`	可选描述
`colors`	颜色 token
`typography`	字体样式 token
`rounded`	圆角尺度
`spacing`	间距尺度
`components`	组件级 token

Token 引用

组件 token 可以引用全局 token，例如：

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

这种 {path.to.token} 的引用方式让设计系统具备层级一致性，修改一处即可全局生效。

CLI 工具：lint / diff / export / spec

项目同时提供了 npm 包 @google/design.md，可通过 CLI 直接使用：

1. lint —— 验证设计系统

`1`	`npx @google/design.md lint DESIGN.md`

支持检测：

破损的 token 引用（broken-ref）
WCAG 对比度不达标的颜色组合（contrast-ratio）
缺失 primary 颜色或 typography（missing-primary、missing-typography）
孤儿 token（定义了但未被引用）
section 顺序错误等

2. diff —— 对比两个版本

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

可检测 token 级别的增删改，以及 prose 层面的回归。

3. export —— 导出为其他格式

1
2
3

npx @google/design.md export --format json-tailwind DESIGN.md > tailwind.theme.json
npx @google/design.md export --format css-tailwind DESIGN.md > theme.css
npx @google/design.md export --format dtcg DESIGN.md > tokens.json

支持导出为：

Tailwind v3 theme.extend JSON
Tailwind v4 @theme { ... } CSS 块
DTCG（W3C Design Tokens Format Module）JSON

4. spec —— 输出规范原文

`1`	`npx @google/design.md spec`

适合把规范注入到 Agent prompt 中作为上下文。

设计 Token 互操作性

DESIGN.md 的 token 设计深受 W3C Design Token Format 启发，并兼容 DTCG 标准。这意味着：

设计团队可以继续使用 Figma Tokens、Style Dictionary 等工具管理 token
开发团队可以用 DESIGN.md 作为面向 Agent 的“中间层”
未来有可能实现设计工具 → DESIGN.md → 代码生成的完整闭环

为什么值得关注？

Google 背书：由 Google Labs 团队推出，具备一定的工业界风向标意义
Agent 时代的基础设施：随着 Claude Code、Cursor、Copilot 等 AI 编程助手普及，如何让 Agent 理解设计系统会越来越重要
格式轻量：只是一份 Markdown + YAML 文件，零额外依赖即可上手
工具链完整：lint、diff、export、programmatic API 已经可用

当前状态

DESIGN.md 目前处于 alpha 阶段，规范、token schema 和 CLI 都在积极迭代中。项目明确提示：随着格式成熟，未来可能会有破坏性变更。

快速开始

# 安装
npm install @google/design.md

# 验证你的 DESIGN.md
npx @google/design.md lint DESIGN.md

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

Windows 用户注意：直接在 PowerShell 中运行 npx @google/design.md 可能因为 .md 后缀与系统 Markdown 文件关联冲突而无输出，建议使用别名：
1
npx -p @google/design.md designmd lint DESIGN.md

项目链接

GitHub 仓库：https://github.com/google-labs-code/design.md
npm 包：https://www.npmjs.com/package/@google/design.md
完整规范：docs/spec.md

DESIGN.md on AI