HTML 快速原型

一次性 HTML 模型：2-3 种设计变体快速对比选择。

当用户想要在提交到一个设计方向前看到——作为可抛弃的 HTML 原型探索 UI/UX 想法时使用此 skill。

何时不应使用

• 用户想要生产组件——使用 claude-design 或正确构建
• 用户想要精心制作的一次性 HTML 制品（落地页、演示）——claude-design
• 用户想要图表——excalidraw、architecture-diagram
• 设计已经锁定——直接构建

核心方法

intake → variants → head-to-head → pick winner (or iterate)

1. Intake

生成变体前，获取三件事：

• 感觉。"这应该感觉如何？形容词、情绪、一种氛围。"
• 参考。"什么应用、网站或产品捕捉了你想象中的感觉？"
• 核心动作。"用户在这个屏幕上做的最重要的一件事是什么？"

2. 变体（2-3 个）

一次产生 2-3 个变体。每个变体是一个完整的独立 HTML 文件。

每个变体应该采取不同的设计立场：

• 密度：紧凑 / 宽松 / 超密
• 重点：内容优先 / 动作优先 / 工具优先
• 美学：编辑感 / 实用主义 / 俏皮
• 布局：单栏 / 侧边栏 / 分屏

3. 让它们成为真正的 HTML

每个变体是单个自包含 HTML 文件：

• 内联 ——无构建步骤，无外部 CSS
• 系统字体或一个通过 的 Google Font
• 通过 CDN 的 Tailwind 可以
• 现实的假内容——实际句子，不是"Lorem ipsum"
• 交互式：链接可点击、悬停真实、至少一个状态转换

4. 变体 README

每个变体的 README.md 回答：

## Variant: {stance name}

### Design stance
一句话描述驱动此变体的原则。

### Key choices
- Layout: ...
- Typography: ...
- Color: ...

### Trade-offs
- Strong at: ...
- Weak at: ...

5. 并排比较

所有变体构建完成后，作为比较呈现：

## 首页的三种方案

| 维度 | Calm editorial | Utilitarian dense | Playful split |
|------|----------------|-------------------|---------------|
| 密度   | 低            | 高              | 中        |
| 主要动作可见性 | 低 | 高 | 中 |
| 扫描性 | 高 | 中 | 低 |

交互性标准

当用户可以时，草图就足够交互：

• 点击主要动作并发生可见的事
• 看到一个有意义的状态转换
• 悬停可识别的交互元素

输出

• 在仓库根创建 sketches/
• 每个变体一个子目录：NNN-stance-name/index.html + README.md
• 告诉用户如何打开
• 保持变体可抛弃