默庵·超级个体 26-04-22 20:22
微博认证:微博新知博主 科技博主 头条文章作者 微博原创视频博主

DESIGN.md 正式发布为开放标准了,期待 Codex、Claude Code、Cursor 这些工具能尽快跟进支持。

这个规范的核心思路是做一个双层结构:上层给机器读,下层给人读。

先说机器层。文件顶部用 YAML Front Matter 定义精确的设计 token,涵盖颜色、字体、圆角、间距等维度。颜色用语义化命名加十六进制值,比如 primary 对应一个具体色值。字体则包括字族、字号、字重、行高、字距这些参数。圆角和间距定义了阶梯尺度,组件级的 token 还支持引用其他 token,比如某个组件的背景色可以直接引用 colors 里定义好的值。

再说人类层。Markdown 正文用自然语言描述设计哲学和使用语境,按固定顺序分为 8 个章节:品牌与风格总览、色彩角色与情感、排版气质、布局与留白策略、层级与阴影、形状语言、组件规范,以及设计禁区。

这两层的配合是整个规范最关键的设计。token 提供精确的规范性数值,正文部分解释为什么要这样定义以及具体怎么应用。这样一来,LLM 在生成代码的时候既能拿到准确的参数,又能理解背后的设计意图,大幅减少猜错品牌色、用错间距这类问题。

开源仓库还提供了配套的 CLI 工具链,主要有四个命令:lint 做结构校验,同时检测 WCAG 对比度和 token 引用的完整性;diff 可以对比两个版本的 DESIGN.md,识别 token 和正文层面的回归变化;export 支持导出为 Tailwind 主题配置或者 W3C DTCG 标准的 tokens.json;spec 则输出规范原文,方便直接注入 agent prompt 作为上下文使用。

传送门:github.com/google-labs-code/design.md

#科技先锋官##How I AI#

发布于 山东