每天一个开源项目#21 DESIGN.md：Google 出品的 AI Agent 设计规范，20K Stars，TypeScript 96%，让编程助手读懂你

dong_junshuai
5 阅读5分钟

每天一个开源项目#21 DESIGN.md：Google 出品的 AI Agent 设计规范，20K Stars，TypeScript 96%，让编程助手读懂你的设计系统

报告日期：2026-06-26 · 数据来源：GitHub Trending

📊 项目概览

指标数据
项目名称DESIGN.md
作者/组织google-labs-code
描述为 AI 编程助手定义视觉身份的格式规范，让 Agent 结构化地理解设计系统
⭐ Stars20,036
🍴 Forks1,677
📅 创建日期2026-04-10
🕐 最后更新2026-06-15
📝 语言分布TypeScript 95.8% · MDX 3.9% · JavaScript 0.4%
📜 许可证Apache-2.0
📦 仓库大小199 KB（极轻量）
🐛 Open Issues32

🌟 为什么选它？

今日 Trending 榜上有 Apple Container（33K Stars）、CasaOS、MinerU 等知名项目，但 DESIGN.md 值得优先关注，原因有三：

  1. 定义了一个全新领域：它不是又一个工具，而是 AI Agent 时代的设计规范标准——用 YAML front matter + Markdown 组合，让 AI 编程助手精确理解品牌色值、字体、间距、圆角等设计系统。
  2. Google 背书 + 真实生态：来自 google-labs-code 官方组织，已有 npm 包 @google/design.md，可直接 npx 使用，工程化程度极高。
  3. 20K Stars 在 76 天内达成：2026-04-10 创建，日均增长 ~263 Stars，属于爆发式增长。

🔧 核心特性

1. 双层文件结构

---
name: Heritage
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
  tertiary: "#B8422E"
  neutral: "#F7F5F2"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
---
## Overview
Architectural Minimalism meets Journalistic Gravitas...
  • YAML 前置部分：机器可读的设计 Token（颜色、字体、间距、圆角、组件）
  • Markdown 正文：人类可读的设计理念和使用说明

2. 丰富的 Token 类型系统

类型格式示例
Color任意 CSS 颜色"#1A1C1E"、"oklch(62% 0.18 250)"
Dimension数字+单位48px、-0.02em
Token 引用{path.to.token}{colors.primary}
Typography对象{fontFamily, fontSize, fontWeight...}

3. 组件级 Token 映射

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

支持 hover、active、pressed 等状态变体，Agent 可以完整还原交互细节。

4. 四大 CLI 命令

命令功能
lint校验文件结构、WCAG 对比度、断链引用
diff对比两个版本的 Token 差异和回归检测
export导出为 Tailwind（v3 JSON / v4 CSS）、W3C DTCG 格式
spec输出完整规范文档（可注入 Agent Prompt）

5. 9 条自动 Lint 规则

  • broken-ref：Token 引用未定义 → error
  • missing-primary：缺少 primary 颜色 → warning
  • contrast-ratio：背景/文字对比度低于 WCAG AA 4.5:1 → warning
  • orphaned-tokens：定义了但未被引用的 Token → info
  • ... 等共 9 条规则

🏗️ 技术架构分析

工程栈

  • Monorepo：使用 Turbo 构建，packages/cli 为核心 CLI 包
  • TypeScript 96%：全类型覆盖，解析器和验证器均用 TS 实现
  • MDX 4%：用于文档渲染
  • Bun：bun.lock 表明使用 Bun 作为包管理器（比 npm/yarn 更快）

设计理念

从仓库中的 PHILOSOPHY.md 可以看出，项目追求的是规范优先、工具跟随的路线——先定义格式标准，再构建工具链。这与 Tailwind CSS 的成功路径相似。

生态位分析

DESIGN.md 填补了一个关键空白：AI Agent 如何持久化地理解设计系统？ 目前的解决方案（如 Figma tokens、Style Dictionary）都是面向人类开发者或设计工具的，而 DESIGN.md 是第一个专门为 AI 编程助手 设计的格式规范。

人类设计师 ←→ Figma / Sketch（设计工具）
     ↓
DESIGN.md（桥接层：机器可读 + 人类可读）
     ↓
AI Agent ←→ Cursor / Copilot / Claude Code（编程助手）

📖 README 核心内容摘要

  1. 格式规范：定义了 YAML 前置 + Markdown 正文的双层结构
  2. Token Schema：完整的类型系统（Color、Dimension、Typography、Token Reference）
  3. Section 顺序：Overview → Colors → Typography → Layout → Elevation → Shapes → Components → Do's and Don'ts
  4. 组件系统：支持 Token 引用和状态变体
  5. CLI 工具：lint/diff/export/spec 四大命令
  6. 多平台支持：Windows PowerShell 需用 designmd 别名避免 .md 后缀冲突

🚀 快速上手

# 直接运行（推荐）
npx @google/design.md lint DESIGN.md

# 或安装后使用
npm install @google/design.md

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

# 导出为 W3C Design Token 格式
npx @google/design.md export --format dtcg DESIGN.md > tokens.json

# 对比两个版本
npx @google/design.md diff DESIGN-v1.md DESIGN-v2.md

# 查看完整规范（可注入 Agent Prompt）
npx @google/design.md spec --rules

📈 增长速度与社区热度

指标数据评估
存活天数76 天（2026-04-10 ~ 2026-06-26）—
日均增长~263 Stars/天🔥 爆发式增长
Fork 比例1,677 / 20,036 = 8.4%偏高，说明有大量二次开发
Issue 活跃度32 open中等偏活跃
最后提交1 周前（2026-06-15）持续维护中
Commits40项目早期阶段
npm 包@google/design.md已发布可用

增长阶段判断

项目仅 76 天就达到 20K Stars，属于典型的爆发式增长曲线。考虑到 Google 官方背书 + AI Agent 赛道的热度，预计 3 个月内有望突破 50K Stars。

💡 值得关注的细节

  1. Windows 兼容性处理：README 详细说明了 PowerShell 中 @ 和 .md 后缀的冲突问题，提供了 designmd 别名方案，说明项目团队对实际使用场景考虑周全。
  2. Agent 友好的设计：spec 命令可直接将规范输出为 Markdown，方便注入 Agent 的 system prompt——这是对 AI 工作流的深度思考。
  3. W3C DTCG 支持：支持导出为 W3C Design Token Community Group 标准格式，表明项目追求的是行业标准而非自立门户。
  4. Token 引用机制：{colors.primary} 这种引用语法类似 CSS 变量但更结构化，Agent 可以静态分析出所有依赖关系。

🎯 适用场景

  • AI 编程助手集成：Cursor、Copilot、Claude Code 等工具可通过读取 DESIGN.md 理解品牌设计
  • 设计系统文档化：将 Figma/Sketch 中的设计规范转化为机器可读格式
  • 多主题管理：通过 diff 命令追踪设计系统的演进
  • 自动化 UI 生成：结合 Tailwind export，Agent 可直接生成符合品牌规范的组件

报告编号：每天一个开源项目#21 · 数据来源：GitHub Trending 2026-06-26

avatar
文章
阅读
粉丝