---
name: dwy-prototype
description: "【dwy·UI原型】产品 0 到 1 设计与架构阶段。触发场景：用户说『画原型 / 出原型 / 做 UI 原型 / 把页面画出来 / prototype』，要在写 UI 代码前把页面画成静态原型图时。两轮串行门控：先低保真线框初稿，用户讨论通过后再做高保真平面图，过了才进架构。"
---

## 职责（单一）
把 PRD 的页面画成**静态原型图**，两轮串行、每轮门控：**① 线框初稿（低保真）→ 用户讨论通过 → ② 高保真平面图 → 用户讨论通过**。

两轮都是**静态、按页出图**，区别只在保真度——都不做可交互（无拖拽/缩放/连线/点击跳转），浏览器直接展示，速度优先。本流程不调用白板引擎，纯静态 HTML 自写。

## 输入（从哪读）
- state.json 的 `confirmed.prd`、`confirmed.tasks`
- `.dwy/prod/[项目]/02-需求规划/PRD.md`

## 判设备形态（两轮共用，先做）
读 PRD/上下文判目标端，决定页面外框，**不写死尺寸**：
- 移动端 → 套手机框（iOS 用 iPhone 逻辑尺寸如 390×844、鸿蒙用对应 vp）
- 网页端 → 不套设备框，用浏览器视口比例
- 平板 → 用平板真实比例

## 第一轮·线框初稿（低保真静态）
1. 一个页面一张**低保真静态线框图**：灰阶/占位块表达布局结构，重点让用户看**页面齐不齐、布局对不对、信息层级合不合理**，不纠结视觉、不上色、不做交互。
2. 图标用占位（稳定图标库的字符或内联 SVG 占位），**不用 emoji** 作功能性图标。
3. 每图带一句**用途说明** + 关键**边界**（空态/加载/错误等该页适用项），纯文字描述。
4. 形式：静态 HTML，一页一文件 `<页面>.html` + 总览 `index.html`（平铺各页缩略，可点下钻到单页，仅此导航，无页面内交互）。设备外框按上面判得的形态（网页端不套框）。
5. 产出：`.dwy/prod/[项目]/03-原型设计/wireframe/`
6. **门控**：产出后向用户汇报线框覆盖情况，明确问「线框初稿是否通过，可进高保真？」。未通过按反馈改，改完再问。通过后回写 `confirmed.wireframe`。

## 第二轮·高保真平面图（静态，一页一图）
1. 前置校验 `confirmed.wireframe` 存在，否则报错提示先过线框初稿。
2. **基于已定稿的线框逐页升保真**：保持线框确定的页面清单与布局，上真实色板/明暗调/真实图标（稳定图标库，不用 emoji）/真实文案。仍是静态、不做可交互。
3. 配色按产品定位定（金融稳重 / 社交活泼 / 工具中性）；**反 AI 套路**：不堆渐变 blob、不用 emoji 功能图标、用语义色板、≤2 字体。
4. **每图必带说明**：用途 + 关键交互说明（文字描述「点 X 去 Y」即可，不做可点跳转）+ 边界。
5. 形式：静态 HTML，一页一文件 `<页面>.html` + 总览 `index.html`，浏览器直接展示。**速度优先**。
6. 产出：`.dwy/prod/[项目]/03-原型设计/hifi/`
7. **门控**：产出后汇报，问「高保真平面图是否通过，可进架构？」。通过后回写 `confirmed.prototype`。

## 产出契约（硬约束）
- 两轮目录分开：`03-原型设计/wireframe/` 与 `03-原型设计/hifi/`，各含每页 `<页面>.html` + `index.html` 总览
- 两轮都要：覆盖 PRD 所有页面、每图带说明、设备形态贴合目标端
- 高保真轮额外：布局与线框定稿一致
- 回写 state.json：线框轮 `confirmed.wireframe`、高保真轮 `confirmed.prototype`