---
name: prototype
description: 将 PRD 或明确的页面需求转为可走查的 HTML 原型与页面、字段、交互状态清单。当用户要求画原型、设计页面、制作 mockup 或修改已有原型时使用；只交付原型设计，不实施生产前端、设计 API 或部署。
user-invocable: true
---

# 页面原型设计

## 目标与边界

用原型回答“页面呈现什么、用户如何操作、不同状态如何反馈”，用配套清单保留需求依据和实现所需的产品信息。

可使用 PRD、对话中的明确需求、截图或现有页面；不要求特定需求目录或已批准的 PRD。仅解释原型概念、评审生产代码或按设计稿实现功能，不启动本流程。

PRD 可为默认的 `prd.html` 或既有其他格式；直接读取正文、规则、验收和开放问题的语义结构，不固定寻找 prd.md，也不为读取而创建 Markdown 副本。

原型是设计产物。不要连接真实业务服务、提交真实数据、生成生产组件或自动进入实施、发布。轻量本地脚本可用于导航、状态切换和模拟操作，明确哪些行为是模拟的。

## 读取依据

复用用户材料，按需读取项目指令、PRD、设计规范和相关页面。已有项目优先查看最接近的真实页面与组件，核实布局、表单形态、操作折叠、视觉 token 及响应式约定，不固定框架或组件库。

区分业务预期与实现现状：PRD 定义预期，代码说明现状；冲突时说明差异及影响，不用现状静默覆盖需求。枚举、默认值、权限条件和校验规则标注来源；读不到的保留为待确认，不编造权限码或值域。原型中的示例数据标为模拟数据。

新项目没有代码或视觉规范时，依据需求提出一致的视觉方案并标为设计建议，不把缺少现有页面当成阻塞条件。用户指定的风格与技术约束优先。

## 确定投入与页面结构

按改动规模选择档位，简述理由；用户已指定范围时直接沿用，不额外要求档位确认。

| 档位 | 适用场景 | 交付范围 |
|---|---|---|
| T1 全量 | 新页面、信息架构重排、新交互流程 | 相关页面、关键流程与适用状态的完整原型及清单 |
| T2 局部 | 现有骨架不变，新增面板、抽屉、弹窗或局部区域 | 必要上下文、改动区域及受影响字段／状态；按需展示前后对比 |
| T3 可省略 | 文案、单字段、枚举或轻微样式调整，原型增益很低 | 说明可省略的理由，交付准确的变更说明；用户明确要原型时仍按所需范围绘制 |

动手前整理页面结构：页面／区域、对应需求、主要区块与关键操作条件。已有材料明确时直接据此绘制；只有会改变范围、业务规则或关键流程的缺口才集中询问，可继续处理已明确部分。布局与配色等可逆选择自行给出合理方案，记录为建议，不建立固定的结构审批门。

## 先列清单，再绘制

先按 [清单说明](references/prototype-spec.md) 建立页面、字段、操作及状态清单 `prototype.md`，再据此绘制 HTML，保持两者一致。

状态按场景适用性裁剪，说明不适用项；T2 只覆盖受影响范围。清单不预设接口路径、请求方法、数据库结构或组件实现；组件名称用于表达项目已有视觉语言，新组件建议给出理由。

## 绘制与验证

默认交付可离线打开的 HTML：少量页面可合并为一个 `index.html`，多页使用导航入口与独立页面；组织方式服从用户和项目约定。使用内联或本地 CSS、脚本及资源，避免 CDN、在线字体和远端图片依赖。

主视图默认展示正常态，其余状态用独立入口、分区或本地切换器查看，避免异常状态淹没主页面。明确交互热点与模拟限制；不提供看似可用却没有说明的死按钮。沿用项目的控件、间距、颜色与信息密度，保证标签可读、焦点可见，检查长文本、溢出和目标屏幕尺寸。

在可用浏览器或渲染工具中打开实际产物，检查导航、模拟操作、状态展示与清单一致性。没有工具时说明视觉及交互未实测，不把源码检查称为走查通过。不为制作原型自动安装框架或启动生产应用。

修改已有原型时编辑其真实源文件；若由模板／片段生成，修改源并重建，不只修改生成文件。字段或行为改动同步清单；若与 PRD 冲突，指出需要同步的需求条目，未经授权不改写需求正本。

## 保存与交付

遵循用户指定位置与项目文档约定。有现成需求目录时默认保存到其 `prototype/` 子目录，不迁移或复制 PRD。没有约定时，在目标项目采用 `prototype/<功能名>/`，交付时说明位置；未确定目标项目时先询问保存位置，不写入技能安装目录。

交付原型入口、清单、设计假设、开放问题及实际验证范围。可邀请用户走查并按反馈修订，但不等待“批准”作为本次交付完成条件；已有项目明确审批流程时沿用并如实标记状态。

产物供用户按需使用，不指定或调用下一技能，也不把本轮原型称为已获用户确认。