design-md

DESIGN.md 是 Google 的开放规范（Apache-2.0，仓库 google-labs-code/design.md），用于向编码智能体描述视觉识别。一个文件同时包含 YAML 前置元数据（机器可读的设计令牌，为规范值）和 Markdown 正文（人类可读的理由说明，按标准章节组织）。令牌给出精确值，正文说明这些值为何存在以及如何应用。CLI（npx @google/design.md）可校验结构与 WCAG 对比度、比较版本差异以发现回退、并导出为 Tailwind 或 W3C DTCG JSON。适用场景：用户要求 DESIGN.md 文件、设计令牌或设计系统规范；需要跨项目或工具保持 UI/品牌一致；对已有 DESIGN.md 做校验、比较、导出或扩展；将样式指南移植为智能体可消费的格式；对配色做对比度与 WCAG 可访问性验证。纯视觉灵感或布局示例应使用 popular-web-designs，从零设计一次性 HTML 产物应使用 claude-design，本技能针对正式规范文件本身。文件结构包括 version、name、description、colors、typography、rounded、spacing、components 等字段，组件属性白名单为 backgroundColor、textColor、typography、rounded、padding、size、height、width，变体（如 hover）需作为独立组件条目而非嵌套。标准章节顺序为 Overview、Colors、Typography、Layout、Elevation & Depth、Shapes、Components、Do's and Don'ts，缺失章节可选但出现时必须按此顺序且不得重复。常用命令：npx -y @google/design.md lint DESIGN.md 做结构与令牌引用及 WCAG 对比度校验；diff 比较两版并在回退时退出码为 1；export --format tailwind 或 dtcg 导出；spec --rules-only --format json 输出规范本身。命令均支持 - 表示标准输入。lint 规则包括 broken-ref、duplicate-section、invalid-color/dimension/typography（错误），wcag-contrast、unknown-component-property（警告）。限制：组件变体不可嵌套，十六进制颜色与负值尺寸必须加引号，章节顺序强制，令牌引用按点路径解析（{colors.primary} 有效，{primary} 无效），version: alpha 为当前规范版本（截至 2026 年 4 月），规范标记为 alpha，可能有破坏性变更。