Make Design MD
从网站、HTML文件或截图分析设计风格，生成符合 Google design.md 规范 的结构化 DESIGN.md 设计规范文档。
规范说明
本技能遵循 Google 开源的 design.md 规范，生成的文档包含：
- YAML Front Matter - 机器可读的设计令牌（colors, typography, spacing, rounded, components）
- Markdown Body - 人类可读的设计原理说明
生成的 DESIGN.md 可通过官方 CLI 工具验证和导出：
npx @google/design.md lint DESIGN.md # 验证格式
npx @google/design.md export --format tailwind DESIGN.md # 导出 Tailwind 配置
工作流程
输入类型判断
根据用户提供的输入类型选择相应的分析路径：
| 输入类型 | 识别方式 | 处理方法 |
|---|
| 网站URL | 以 http:// 或 https:// 开头 | 使用 WebFetch 抓取页面内容 |
| HTML文件 | 以 .html 或 .htm 结尾的文件路径 | 使用 Read 工具读取文件 |
| 截图文件 | 以 .png、.jpg、.jpeg、.webp 结尾 | 使用 Read 工具查看图片 |
分析流程
-
获取内容
- URL：使用 WebFetch 抓取页面 HTML
- HTML文件：使用 Read 工具读取
- 截图：使用 Read 工具查看并分析视觉元素
-
提取设计令牌
从内容中提取以下设计令牌：
colors - 颜色系统
primary - 主品牌色（必须）secondary - 次级强调色background - 背景色（可包含多个层级如 background-subtle）surface - 表面色（卡片、面板）text - 文字色（main, muted, subtle）border - 边框色success, warning, error, info - 状态色
typography - 字体排版对象
每个排版角色包含：fontFamily, fontSize, fontWeight, lineHeight, letterSpacing
typography:
display:
fontFamily: "Inter, system-ui, sans-serif"
fontSize: "64px"
fontWeight: "700"
lineHeight: "1.0"
letterSpacing: "-0.04em"
heading1:
fontFamily: "Inter, system-ui, sans-serif"
fontSize: "48px"
fontWeight: "700"
lineHeight: "1.1"
body:
fontFamily: "Inter, system-ui, sans-serif"
fontSize: "16px"
fontWeight: "400"
lineHeight: "1.5"
spacing - 间距刻度
spacing:
0: "0"
1: "4px"
2: "8px"
3: "12px"
4: "16px"
5: "24px"
6: "32px"
8: "48px"
10: "64px"
rounded - 圆角刻度
rounded:
none: "0"
sm: "4px"
md: "8px"
lg: "12px"
xl: "16px"
2xl: "24px"
full: "9999px"
components - 组件样式（使用令牌引用）
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "#ffffff"
typography: "{typography.body}"
rounded: "{rounded.md}"
padding: "{spacing.2} {spacing.4}"
card:
backgroundColor: "{colors.surface}"
borderColor: "{colors.border}"
rounded: "{rounded.lg}"
-
生成 DESIGN.md
按照以下结构生成文档：
---
version: "alpha"
name: "设计系统名称"
description: "简短描述"
colors:
primary: "#533afd"
background: "#ffffff"
text-main: "#1a1a1a"
# ...
typography:
display:
fontFamily: "Inter, sans-serif"
fontSize: "64px"
fontWeight: "700"
lineHeight: "1.0"
# ...
spacing:
1: "4px"
2: "8px"
# ...
rounded:
sm: "4px"
md: "8px"
# ...
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "#ffffff"
---
## Overview
设计系统概述和视觉哲学...
## Colors
颜色系统详细说明...
## Typography
字体排版说明...
## Layout
布局与间距说明...
## Elevation & Depth
阴影与层级说明...
## Shapes
圆角与形状说明...
## Components
组件样式说明...
## Do's and Don'ts
设计宜忌...
-
生成预览文件
同时生成 HTML 预览文件，从 YAML front matter 提取令牌值：
preview.html - 浅色/默认模式预览
preview-dark.html - 深色模式预览（如适用）
<style>
:root {
--color-primary: #533afd;
--color-background: #ffffff;
--spacing-1: 4px;
--spacing-2: 8px;
--rounded-md: 8px;
}
</style>
章节顺序（必须遵循）
按 Google design.md 规范，章节必须按以下顺序排列：
| 顺序 | 章节名 | 别名 |
|---|
| 1 | Overview | Brand & Style |
| 2 | Colors | - |
| 3 | Typography | - |
| 4 | Layout | Layout & Spacing |
| 5 | Elevation & Depth | Elevation |
| 6 | Shapes | - |
| 7 | Components | - |
| 8 | Do's and Don'ts | - |
令牌格式规范
颜色 (Color)
- 格式：
# + 十六进制（sRGB）
- 示例：
#1A1C1E, #FF5722
- RGBA 格式：
rgba(0, 0, 0, 0.8)
尺寸 (Dimension)
- 格式：数字 + 单位（
px, em, rem）
- 示例：
48px, 1.5rem, -0.02em
令牌引用
- 格式：
{path.to.token}
- 示例：
{colors.primary}, {typography.body.fontSize}, {spacing.4}
排版对象 (Typography)
heading1:
fontFamily: "Inter, system-ui, sans-serif"
fontSize: "48px"
fontWeight: "700"
lineHeight: "1.1"
letterSpacing: "-0.02em" # 可选
fontFeature: "\"calt\", \"kern\"" # 可选
fontVariation: "\"wght\" 400" # 可选
分析技巧
从 CSS 提取
- 查找
<style> 标签内的样式
- 分析
style 属性中的内联样式
- 识别 CSS 变量（
--color-primary 等）
- 提取 Tailwind/CSS 框架的类名
从视觉推断（截图）
- 使用颜色提取识别主色调
- 观察字体风格推断字体族
- 测量间距规律
- 分析组件形态
从 HTML 结构推断
- 语义化标签暗示布局意图
- class 名称可能包含设计信息
- 嵌套层级反映视觉层级
验证与导出
生成的 DESIGN.md 可使用 Google 官方 CLI 工具：
# 验证文档格式
npx @google/design.md lint DESIGN.md
# 比较两个版本
npx @google/design.md diff DESIGN.md DESIGN-v2.md
# 导出为 Tailwind 配置
npx @google/design.md export --format tailwind DESIGN.md
# 导出为 DTCG 格式
npx @google/design.md export --format dtcg DESIGN.md
# 查看规范
npx @google/design.md spec
Lint 规则说明
broken-ref - 令牌引用无法解析missing-primary - 未定义 primary 颜色contrast-ratio - WCAG AA 对比度检查orphaned-tokens - 未使用的颜色令牌section-order - 章节顺序不符合规范
使用示例
分析网站 URL
分析 https://linear.app 的设计风格，生成 DESIGN.md
分析本地 HTML
分析 ./dist/index.html 的设计风格
分析截图
分析 ./screenshots/homepage.png 的设计风格
生成后验证
生成 DESIGN.md 后用 Google CLI 验证格式是否正确
导出为 Tailwind 配置
将 DESIGN.md 导出为 tailwind.config.js
资源
