用途:DESIGN.md 是面向编码智能体的开放设计系统格式(仓库 google-labs-code/design.md,包 @google/design.md),把机器可读的设计令牌(YAML front matter)与人类可读的说明(Markdown 正文)结合,令牌为规范来源,正文提供应用语境。该技能让设计系统从智能体猜测变为可读取的规范,前端插件中其他设计技能在存在 DESIGN.md 时应以其为准。
主要能力:三种模式——Consume(项目根或 docs/DESIGN.md 已存在,先读取并内化 Overview 与 Do's and Don'ts)、Author(用户要求创建设计系统、编写令牌或风格指南)、Propose(既无文件也无明确要求时,先询问是否提交 DESIGN.md)。章节顺序固定:Overview、Colors、Typography、Layout、Elevation & Depth、Shapes、Components、Do's and Don'ts,可省略但存在者须按序。CLI 提供 lint(八条规则:broken-ref、missing-primary、contrast-ratio、orphaned-tokens、missing-typography、section-order、token-summary、missing-sections)、diff(回归检测)、export(tailwind 或 dtcg 格式)、spec(注入规范)。
使用方式:先运行 npx @google/design.md@latest spec --rules 获取权威规范与规则。检测用 ls DESIGN.md docs/DESIGN.md 2>/dev/null 或 Glob。校验用 npx @google/design.md@latest lint DESIGN.md;导出用 npx @google/design.md@latest export --format tailwind DESIGN.md 或 --format dtcg。Tailwind v4 需将 v3 形状的 JSON 转换为 @theme 中的 CSS 变量(如 --color-primary、--text-h1、--radius-sm)。
适用场景:为项目建立设计系统、生成风格指南、与 shadcn 等前端技能协作、审计对比度与令牌引用。
限制:规范为 alpha 且活跃开发中,超过一周应重新核对 spec --rules;export --format tailwind 仍面向 v3,需自行应用 v4 转换;linter 的 WCAG 发现默认是警告;无运行时依赖,全部通过 npx @google/design.md@latest 调用,不应加入依赖;未知属性按警告而非错误处理。