用途:DESIGN.md 是项目视觉语言的唯一事实来源,应在构建 UI 之前创建。它分为两层:机器可读的设计令牌(YAML 前置数据)与人类可读的设计理由(Markdown 正文)。令牌具有规范性,正文提供上下文,正文中可用描述性名称(如 Midnight Forest Green)并映射到系统令牌名(如 primary)。该格式改编自 DESIGN.md 规范(Google Labs,Apache-2.0),存在校验/导出工具,可运行 npx @google/design.md。
文件结构:前置数据必须以恰好为 --- 的行开始和结束,之后依次使用 ## 标题的章节:Overview、Colors、Typography、Layout、Elevation & Depth、Shapes、Components、Do's and Don'ts;无关章节可省略,也可添加领域专属章节。
令牌模式:支持 version、name、description;colors 使用 #RRGGBB;typography 为复合对象(fontFamily、fontSize、fontWeight、lineHeight、letterSpacing、fontFeature、fontVariation);rounded、spacing 使用带单位尺寸或无量纲数;components 支持 backgroundColor、textColor、typography、rounded、padding、size、height、width,变体可另立按键(如 button-primary-hover)。令牌引用用 {} 指向树中其他值。该令牌块可与 tokens.json、Figma 变量及 Tailwind 主题配置互相转换,是设计意图与代码之间的桥梁。
使用方式:这是 UI 工作的硬性门槛,写组件、页面或样式前项目根目录必须有 DESIGN.md,缺失则先依据需求创建,存在则读取并遵循。工作流建议先读需求推断设计方向,并先阅读 collection.md(含 70 多个真实 DESIGN.md 文件,如 Airbnb、Stripe、Linear、Vercel、Apple)中与其气质或行业最接近的一到两个,研究其令牌组织方式后改写而非照搬。构建 UI 时严格依令牌执行,视觉语言变化时同步更新。
限制:未知章节标题保留不报错,未知令牌名在值合法时接受,未知组件属性接受但告警,重复章节标题则报错并拒绝该文件。规范可扩展。