prototype-design

Prototype Design

生成交互式原型，可视化设计方案并进行早期验证。支持 HTML 原型输出格式。

画什么、怎么画，必须先与用户确认，未确认不得生成。 原型若脱离目标系统的真实页面与风格，产出即不可用——确认是唯一防线。详见 Step 1 门禁。

What This Skill Does

生成原型文件，用于可视化设计方案并进行早期验证。支持两种输出格式：

1. HTML 原型：独立 HTML 文件，可在浏览器中直接打开预览

支持两种模式：

• 迭代模式：基于用户提供的截图或 HTML 文件，提取现有样式后生成匹配的新原型
• 新产品模式：询问用户设计偏好后，使用默认或自定义设计规范生成原型

When to Use

激活此 skill 当：

• PRD 生成后需要创建可视化原型
• 用户说"创建原型"、"设计这个功能"、"UI 原型"
• 需要验证用户流程或交互模式
• 需要向干系人演示设计概念

---

Step 0: 模式检测 (CRITICAL)

生成任何原型前，必须先检测场景模式：

向用户提问确定模式（宿主有结构化提问工具时使用，如 Claude Code 的 AskUserQuestion；否则以编号选项列表提问并等待回复）：

### Q: 请选择原型生成模式

| Option | Description |
|:-------|-------------|
| **迭代更新** | 基于现有产品样式生成（**必须**提供截图或 HTML 文件，否则无法匹配原系统） |
| **新产品** | 创建全新设计（需要确认设计规范） |

迭代模式硬性要求：用户必须当场提供现有 UI 的参考（截图路径 / HTML 文件 / 在线 URL）。若用户未提供，不得进入 Step 2——原地等待，或退回让用户改选"新产品"模式。没有参考输入就开画，等于凭空臆造，产出必然与原系统无关。

---

Step 1: 范围确认门禁 (CRITICAL — 最重要)

此步骤是原型可用性的核心防线。无论何种模式，未通过本门禁不得进入生成步骤（Step 2.3 / Step 3.4）。

执行序：Step 0 定模式 → 按模式收集样式（迭代走 Step 2.1–2.2、新产品走 Step 3.1–3.2）→ 本门禁汇总确认 → 用户确认后进入 Step 2.3 / 3.4 生成。即：先有样式输入，再组装门禁确认单。

原型失败最常见的原因不是画得不好，而是画错了页面、用错了风格。一旦开画，返工成本极高；而提前用三十秒对齐"画什么、怎么画"，几乎能消除"与原系统毫无关系"的灾难性产出。所以这一步不可省略、不可由 agent 代答。

向用户提交一份确认单并等待明确确认（结构化提问，或等用户回复"确认/继续"）。确认单须包含以下内容：

1.1 画什么（页面范围）

• 页面清单：逐页列出将生成的页面（名称 + 一句话职责），如「登录页 / 工作台首页 / 详情页」。
• 跳转关系：页面间的流转，如「登录成功 → 工作台 → 点击卡片 → 详情页」。
• 若 PRD 已明确页面范围，照搬并回显；若未明确，由你基于 PRD 提议清单，交用户增删确认。

1.2 怎么画（风格对齐）

• 迭代模式：回显 Step 2.2 从参考输入提取出的样式 token——主色（含色值）、字体、圆角、间距、关键组件样式。明确标注"此样式提取自用户提供的 XX 截图/HTML"。若提取结果含糊或置信度低，必须当场说明并请用户补料，不得带病进入生成。
• 新产品模式：回显 Step 3.1–3.2 确认的设计风格 + 主色调。
• 保真度：明确将使用 wireframe / mockup / interactive 中的哪一档，并简述理由。

1.3 确认动作

### 请确认原型范围

我将生成以下原型：

**页面（N 个）：**
1. …
2. …

**跳转：** … → … → …

**风格：** [迭代模式：主色 #XXX / 字体 … / 提取自 XX 参考] | [新产品：简约现代 + 蓝色]
**保真度：** mockup

确认后我即开始生成；如需调整，请指出。

门禁规则：

• 未收到用户明确确认（"确认"/"继续"/"开始"等）不得生成任何原型文件。
• 即便用户希望快速出图、其余提问可省，唯独本门禁不可省——门禁意在确认"画什么"，方向未定就出图，只会产出废品。
• 用户确认前若已生成文件，视为门禁失效。