DESIGN.md导出W3C令牌：dtcg格式对接Figma与Style Dictionary的完整指南

DESIGN.md导出W3C令牌dtcg格式对接Figma与Style Dictionary的完整指南【免费下载链接】design.mdA format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system.项目地址: https://gitcode.com/GitHub_Trending/de/design.mdDESIGN.md是一种专为编码代理Coding Agent设计的视觉规范格式用 YAML 前置元数据存放机器可读的设计令牌用 Markdown 正文描述设计决策。而它最实用的一环是通过内置 CLI 的export命令把令牌一键导出为 W3C 设计令牌社区组DTCG标准的tokens.json从而打通与Figma、Style Dictionary等主流工具链的互操作路径。先认识 DESIGN.md令牌与文字的双层结构一个 DESIGN.md 文件只有两层YAML front matter——精确的设计令牌颜色、字体、圆角、间距、组件Markdown 正文——人类可读的设计意图告诉代理为什么用这些值。完整规范见 docs/spec.md项目说明见 README.md。这种令牌管数值、文字管意图的分工让它既能被 AI 理解也能被传统设计工具消费。一键导出 W3C tokens.jsonexport --format dtcg安装后只需一条命令即可将 DESIGN.md 转换为符合 W3C Design Tokens Format Module2025.10 版的tokens.jsonnpx google/design.md export --format dtcg DESIGN.md tokens.json命令定义位于 packages/cli/src/commands/export.ts导出逻辑的核心在 packages/cli/src/linter/dtcg/handler.ts。输出的 JSON 自带$schema声明指向 designtokens.org 的官方格式 schema并分为四个语义组分组类型标记内容color$type: colorsRGB 分量0–1 归一化hex双表示spacing/rounded$type: dimension数值 单位px、rem、emtypography$type: typography字体族、字号、字重、行高、字距颜色会被规范化为colorSpace: srgbcomponentshex的结构例如#1A1C1E会变成分量[0.102, 0.11, 0.118]——这正是 DTCG 生态工具能稳定解析的原因。Figma 互操作路径从 tokens.json 到设计稿DTCG 是 Figma 生态的事实标准导出的tokens.json有两条常用通路Tokens Studio 类插件直接把tokens.json拖入插件导入面板即可把颜色、间距、字体令牌同步为 Figma 的 Styles/Variables团队设计稿与代码侧令牌从此同源反向同步设计师在 Figma 中修改变量后导出 DTCG JSON再用npx google/design.md lint做结构校验形成双向闭环。Style Dictionary 互操作路径多端产出的枢纽Style Dictionary v4 原生支持 DTCG 的tokens.json作为输入这意味着 DESIGN.md 可以成为单一事实来源经 Style Dictionary 编译出任意端产物DESIGN.md ──(export --format dtcg)── tokens.json │ ┌───────────────┼────────────────┐ ▼ ▼ ▼ iOS/Android CSS/SCSS Web/JS 模块一个完整的现成案例可以参考示例项目中的令牌文件examples/atmospheric-glass/design_tokens.json配套说明在 examples/atmospheric-glass/README.md。备选导出格式Tailwind 与 CSS 变量除了 dtcgexport还支持三种格式适合不引入 Style Dictionary 的轻量场景格式参数产物适用场景json-tailwindJSONTailwind v3 的theme.extend配置css-tailwindCSSTailwind v4 的theme { }变量块css-varsCSS纯 CSS 自定义属性可用--prefix加前缀npx google/design.md export --format css-tailwind DESIGN.md theme.css npx google/design.md export --format css-vars DESIGN.md vars.csscss-vars输出器会嵌套令牌名中的点号转连字符避免浏览器丢弃声明实现细节见 packages/cli/src/linter/css-vars/handler.ts。用 lint 与一致性测试守住导出质量导出成功不代表令牌没问题。建议流程是先校验、再导出npx google/design.md lint DESIGN.md # 校验结构、坏引用、WCAG 对比度 npx google/design.md export --format dtcg DESIGN.md tokens.jsonlinter 内置 11 条规则坏令牌引用、缺失 primary、对比度不足等详见 README 的 Linting Rules 章节。项目还维护了一条 DTCG 一致性测试验证导出的tokens.json能被第三方 DTCG 工具 Terrazzo 解析并生成 CSS代码见 packages/cli/src/linter/dtcg/conformance.test.ts类型定义见 packages/cli/src/linter/dtcg/spec.ts。小结用export --format dtcg把 DESIGN.md 升级为 W3C 标准tokens.json零配置完成格式转换对接 Figma借助 Tokens Studio 系插件直接导入令牌对接 Style Dictionary以 DTCG JSON 为输入编译 iOS、Android、CSS 等多端产物用lint命令守住质量用diff命令防止令牌回归。一条命令DESIGN.md 就从AI 的设计说明书变成了整个设计-开发工具链的中枢。【免费下载链接】design.mdA format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system.项目地址: https://gitcode.com/GitHub_Trending/de/design.md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考