HTML Design System Generator

将丑但功能完整的 HTML（来自 PM）转换为标准设计规范，让任何 LLM 都能生成风格一致的新页面。

核心功能

Input HTML (丑但功能完整)
        ↓
┌───────────────────────────────────────┐
│  html-design-system-generator Skill    │
│                                       │
│  Layer 1: tokens.md (设计变量说明)    │
│  Layer 2: components.yaml (组件API)   │
│  Layer 3: layouts.yaml (页面布局规则) │
│  Layer 4: prompt-template.md (生成提示)│
└───────────────────────────────────────┘
        ↓
Output: 设计规范包
        ↓
Any LLM → 生成风格一致的新页面

4-Layer 架构

Layer 1: Design Tokens (tokens.md)

从 HTML CSS 变量中提取的设计变量：

• 颜色系统
• 间距系统
• 字体系统
• 圆角/阴影系统

Layer 2: Component API (components.yaml)

格式无关的组件规范：

• Button / Input / Select / Checkbox
• Card / Modal / Drawer
• Table / Badge / Avatar
• ...

Layer 3: Layout Rules (layouts.yaml)

标准页面布局模式：

• ListPage: 列表页面
• DetailPage: 详情页面
• FormPage: 表单页面
• DashboardPage: 仪表盘

Layer 4: Prompt Template (prompt-template.md)

LLM 友好的生成提示词模板

快速开始

方式一：命令行

# 克隆项目
cd html-design-system-generator

# 生成所有规范文件
python3 scripts/generate_all.py examples/input/index.html examples/output/

# 查看生成的文件
ls examples/output/

方式二：作为 Claude Skill 使用

1. 将 html-design-system-generator/ 放入 Claude Code 的 skills 目录
2. 在 Claude Code 中触发 skill：/html-design-system-generator
3. 提供 HTML 文件路径
4. 获得设计规范包

目录结构

html-design-system-generator/
├── SKILL.md                      # Skill 入口
├── README.md                     # 本文件
├── references/
│   ├── architecture.md           # 4-layer 架构规范
│   └── components-schema.md      # components.yaml 格式规范
├── scripts/
│   ├── generate_tokens.py        # 生成 tokens.md
│   ├── generate_components.py    # 生成 components.yaml
│   ├── generate_layouts.py       # 生成 layouts.yaml
│   ├── generate_prompts.py       # 生成 prompt-template.md
│   └── generate_all.py           # 一键生成全部
├── templates/                    # Jinja2 模板
└── examples/
    └── input/index.html         # 测试用例

设计原则

格式无关 (Format-Agnostic)

# ❌ 错误：写死实现
Button:
  html: <button class="btn">Click</button>
  react: <button className="btn">Click</button>

# ✅ 正确：只写规范
Button:
  name: 按钮
  variants: [primary, secondary, ghost, danger]

为什么？

• 不同 LLM（Claude/GPT/Gemini）有不同的实现风格
• 给规范不给代码 = 每个 LLM 都能用自己的方式实现
• 只要结果符合规范 = 风格一致

使用场景

场景 1：PM 交付原型

PM 给你一个丑但功能完整的 HTML 原型：

python3 scripts/generate_all.py pm-prototype.html design-system/

获得：

• tokens.md - 颜色、字体、间距
• components.yaml - 组件 API
• layouts.yaml - 页面布局
• prompt-template.md - LLM 提示词

场景 2：让 LLM 生成新页面

将 prompt-template.md 复制到新对话，输入需求：

请生成一个用户列表页面，包含：
- 用户头像和名称
- 角色标签
- 操作按钮（编辑/删除）

LLM 会生成符合设计规范的页面。

License

Apache 2.0