词元之母TOK.MOM - 平台充值汇率 1:1 即 1 人民币充值到账 1 美元，支持一个 Key 调用近 600+ 海内外模型，限时特价模型低至 1 折，欢迎上岸！
"Design Md — 编写/验证/导出 Google 的 DESIGN"
Design Md
Skill 元数据
| 来源 | 内置（默认安装） |
| 路径 | skills/creative/design-md |
| 版本 | 1.0.0 |
| 作者 | Hermes Agent |
| 许可证 | MIT |
| 平台 | linux, macos, windows |
| 标签 | design, design-system, tokens, ui, accessibility, wcag, tailwind, dtcg, google |
| 相关 skill | popular-web-designs, claude-design, excalidraw, architecture-diagram |
参考：完整 SKILL.md
信息
DESIGN.md Skill
google-labs-code/design.md），用于向编码 agent 描述视觉标识。一个文件包含：npx @google/design.md）可对结构和 WCAG 对比度进行 lint 检查，对版本进行 diff 以检测回归，并导出为 Tailwind 或 W3C DTCG JSON。何时使用此 skill
popular-web-designs。若需要从零开始设计一次性 HTML 产物（原型、幻灯片、落地页、组件实验室）时的流程与品味，请使用 claude-design。本 skill 专用于正式规范文件本身。文件结构
---
version: alpha
name: Heritage
description: Architectural minimalism meets journalistic gravitas.
colors:
primary: "#1A1C1E"
secondary: "#6C7278"
tertiary: "#B8422E"
neutral: "#F7F5F2"
typography:
h1:
fontFamily: Public Sans
fontSize: 3rem
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
body-md:
fontFamily: Public Sans
fontSize: 1rem
rounded:
sm: 4px
md: 8px
lg: 16px
spacing:
sm: 8px
md: 16px
lg: 24px
components:
button-primary:
backgroundColor: "{colors.tertiary}"
textColor: "#FFFFFF"
rounded: "{rounded.sm}"
padding: 12px
button-primary-hover:
backgroundColor: "{colors.primary}"
---
## Overview
Architectural Minimalism meets Journalistic Gravitas...
## Colors
- **Primary (#1A1C1E):** Deep ink for headlines and core text.
- **Tertiary (#B8422E):** "Boston Clay" — the sole driver for interaction.
## Typography
Public Sans for everything except small all-caps labels...
## Components
`button-primary` is the only high-emphasis action on a page...Token 类型
| 类型 | 格式 | 示例 |
|---|---|---|
| 颜色 | # + 十六进制（sRGB） | "#1A1C1E" |
| 尺寸 | 数字 + 单位（px、em、rem） | 48px、-0.02em |
| Token 引用 | {path.to.token} | {colors.primary} |
| 字体排版 | 包含 fontFamily、fontSize、fontWeight、lineHeight、letterSpacing、fontFeature、fontVariation 的对象 | 见上方 |
backgroundColor、textColor、typography、rounded、padding、size、height、width。变体（hover、active、pressed）是独立的组件条目，使用相关键名（button-primary-hover），而非嵌套结构。规范章节顺序
1.
2.
3.
4.
5.
6.
7.
8.
工作流：编写新的 DESIGN.md
1.
2.
DESIGN.md，使用 write_file 写入项目根目录。始终包含 name: 和 colors:；其他章节可选但建议添加。3.
{colors.primary}）在 components: 章节中引用颜色，而非重复输入十六进制值。保持调色板单一来源。4.
5.
tailwind.theme.json、tokens.json）。工作流：lint / diff / 导出
@google/design.md（Node）。使用 npx，无需全局安装。- 作为 stdin。lint 在出现错误时返回 exit 1。若需要以结构化方式报告结果，请使用 --format json 标志并解析输出。Lint 规则参考（7 条规则的检查内容）
broken-ref（错误）— {colors.missing} 指向不存在的 tokenduplicate-section（错误）— 同一 ## 标题 出现两次invalid-color、invalid-dimension、invalid-typography（错误）wcag-contrast（警告/信息）— 组件 textColor 与 backgroundColor 的对比度，对照 WCAG AA（4.5:1）和 AAA（7:1）unknown-component-property（警告）— 超出上述白名单范围常见陷阱
button-primary.hover 是错误的；应将 button-primary-hover 作为同级键。# 处出错，或将 #1A1C1E 等值截断。letterSpacing: -0.02em 会被解析为 YAML flow — 应写为 letterSpacing: "-0.02em"。version: alpha 是当前规范版本（截至 2026 年 4 月）。该规范标记为 alpha — 请关注破坏性变更。{colors.primary} 有效；{primary} 无效。规范来源
@google/design.md修改于 2026-05-31 00:25:01