Make Design MD

从网站、HTML文件或截图分析设计风格，生成符合 Google design.md 规范 的结构化 DESIGN.md 设计规范文档。

规范说明

本技能遵循 Google 开源的 design.md 规范，生成的文档包含：

1. YAML Front Matter - 机器可读的设计令牌（colors, typography, spacing, rounded, components）
2. Markdown Body - 人类可读的设计原理说明

生成的 DESIGN.md 可通过官方 CLI 工具验证和导出：

npx @google/design.md lint DESIGN.md        # 验证格式
npx @google/design.md export --format tailwind DESIGN.md  # 导出 Tailwind 配置

工作流程

输入类型判断

根据用户提供的输入类型选择相应的分析路径：

分析流程

1. 获取内容
• URL：使用 WebFetch 抓取页面 HTML
• HTML文件：使用 Read 工具读取
• 截图：使用 Read 工具查看并分析视觉元素

1. 提取设计令牌

从内容中提取以下设计令牌：

colors - 颜色系统

• primary - 主品牌色（必须）
• secondary - 次级强调色
• background - 背景色（可包含多个层级如 background-subtle）
• surface - 表面色（卡片、面板）
• text - 文字色（main, muted, subtle）
• border - 边框色
• success, warning, error, info - 状态色

typography - 字体排版对象

每个排版角色包含：fontFamily, fontSize, fontWeight, lineHeight, letterSpacing

```yaml

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 - 间距刻度

```yaml

spacing:

0: "0"

1: "4px"

2: "8px"

3: "12px"

4: "16px"

5: "24px"

6: "32px"

8: "48px"

10: "64px"

```

rounded - 圆角刻度

```yaml

rounded:

none: "0"

sm: "4px"

md: "8px"

lg: "12px"

xl: "16px"

2xl: "24px"

full: "9999px"

```

components - 组件样式（使用令牌引用）

```yaml

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}"

```

1. 生成 DESIGN.md

按照以下结构生成文档：

```markdown

---

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

设计宜忌...

```

1. 生成预览文件

同时生成 HTML 预览文件，从 YAML front matter 提取令牌值：

preview.html - 浅色/默认模式预览

preview-dark.html - 深色模式预览（如适用）

字体 CDN 替换规则（必须遵循）

生成网页/预览文件时，若引用 Google Fonts，必须使用国内镜像自动替换：

• fonts.googleapis.com → fonts.loli.net
• fonts.gstatic.com → gstatic.loli.net

```html

```

```css

:root {

--color-primary: #533afd;

--color-background: #ffffff;

--spacing-1: 4px;

--spacing-2: 8px;

--rounded-md: 8px;

}

```

章节顺序（必须遵循）

按 Google design.md 规范，章节必须按以下顺序排列：

令牌格式规范

颜色 (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 提取

• 查找