今日 Trending 榜首

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

什么是 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 文件由两部分组成：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

---
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 概览

Token 引用

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

1
2
3
4
5
6

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 → 代码生成的完整闭环

为什么值得关注？

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

当前状态

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

快速开始

1
2
3
4
5
6
7
8

# 安装
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