prototype-design

# Prototype Design 生成交互式原型，可视化设计方案并进行早期验证。支持 **HTML 原型**输出格式。 > **画什么、怎么画，必须先与用户确认，未确认不得生成。** > 原型若脱离目标系统的真实页面与风格，产出即不可用——确认是唯一防线。详见 Step 1 门禁。 ## What This Skill Does 生成原型文件，用于可视化设计方案并进行早期验证。支持两种输出格式： 1. **HTML 原型**：独立 HTML 文件，可在浏览器中直接打开预览 支持两种模式： - **迭代模式**：基于用户提供的截图或 HTML 文件，提取现有样式后生成匹配的新原型 - **新产品模式**：询问用户设计偏好后，使用默认或自定义设计规范生成原型 ## When to Use 激活此 skill 当： - PRD 生成后需要创建可视化原型 - 用户说"创建原型"、"设计这个功能"、"UI 原型" - 需要验证用户流程或交互模式 - 需要向干系人演示设计概念 --- ## Step 0: 模式检测 (CRITICAL) 生成任何原型前，必须先检测场景模式： 使用 `AskUserQuestion` 确定模式： ```markdown ### 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 代答。 向用户提交一份**确认单**并等待明确确认（`AskUserQuestion` 或等用户回复"确认/继续"）。确认单须包含以下内容： ### 1.1 画什么（页面范围） - **页面清单**：逐页列出将生成的页面（名称 + 一句话职责），如「登录页 / 工作台首页 / 详情页」。 - **跳转关系**：页面间的流转，如「登录成功 → 工作台 → 点击卡片 → 详情页」。 - 若 PRD 已明确页面范围，照搬并回显；若未明确，由你基于 PRD 提议清单，交用户增删确认。 ### 1.2 怎么画（风格对齐） - **迭代模式**：回显 Step 2.2 从参考输入提取出的样式 token——主色（含色值）、字体、圆角、间距...