google-labs-code/design.md

这是什么？

核心功能

• 01在同一文件中结合 YAML 设计令牌与 Markdown 设计说明。
• 02lint 命令校验文件结构、失效的令牌引用及 WCAG 对比度。
• 03diff 命令比较两个版本设计系统之间的令牌级变化。
• 04可将令牌导出为 Tailwind v3、Tailwind v4 配置及 W3C DTCG 格式。
• 05提供 TypeScript 编程接口，并可输出规范内容用于提示词。

适用场景

• 为编码智能体提供品牌配色、字体和组件风格的持久化描述。
• 在 CI 中检查设计系统的失效令牌引用和低对比度组件颜色。
• 通过 export 命令将设计令牌同步到 Tailwind 项目中。

快速上手

1. 1

   安装 CLI 包

   npm install @google/design.md
2. 2

   校验 DESIGN.md 文件

   npx @google/design.md lint DESIGN.md

使用前须知

• !该格式处于 alpha 版本，随着成熟可能会发生变化。
• !该项目不符合 Google 开源软件漏洞奖励计划的资格。

标签

常见问题

design.md 是什么？

一种描述视觉设计系统的文件格式与 CLI 工具，让编码智能体能稳定地还原设计风格。 DESIGN.md 是一种向编码智能体描述设计系统的文件格式。文件由两部分组成：以 YAML front matter 形式书写的机器可读设计令牌，以及解释这些取值用途与原因的 Markdown 正文。令牌提供精确的颜色、字体排版、间距、圆角和组件属性，正文则说明风格基调、配色角色和使用规范。

design.md 可以免费使用吗？用的什么许可证？

design.md 以 Apache-2.0 许可证开源。用于商业产品前，请先确认许可证条款。

design.md 还在维护吗？

活跃维护中。design.md 最近一次提交是在 2026年10月16日。

design.md 适合用来做什么？

为编码智能体提供品牌配色、字体和组件风格的持久化描述。 在 CI 中检查设计系统的失效令牌引用和低对比度组件颜色。 通过 export 命令将设计令牌同步到 Tailwind 项目中。

design.md 怎么安装和运行？

安装 CLI 包: npm install @google/design.md 校验 DESIGN.md 文件: npx @google/design.md lint DESIGN.md

在哪里获取 design.md？

源代码和安装说明在 GitHub 上：https://github.com/google-labs-code/design.md