页面原型设计

目标与边界

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

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

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

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

读取依据

复用用户材料，按需读取项目指令、PRD、设计规范和相关页面。已有项目先建立下述样式基线，再绘制原型；不固定框架或组件库。

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

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

已有项目：先建立样式基线

默认把原型设计为现有产品的一部分。新增页面也沿用所在模块的视觉语言；用户明确要求改版时，按指定范围调整，不将局部需求扩展为整站换肤。

• 选择同模块、同页面类型的真实页面作为参照，局部修改优先以被修改页面为准。项目存在多套主题、新旧 UI 或多个应用时，限定目标应用、模块和主题，不混用全仓样式；无法判断且会实质影响结果时集中询问，其余部分继续。
• 沿参照页查实际使用的布局、共享组件及样式来源，包括全局样式、主题变量、组件覆盖和相关本地资源。组件库名称不足以证明项目外观，不用组件库默认样式代替项目定制。能访问现有页面或截图时同时观察渲染效果；只有代码时说明视觉基线尚未实测，不据此虚构截图观察结论。
• 在 prototype.md 中记录可追溯的样式基线：参照路径／页面／截图、适用主题与尺寸，以及本次相关的布局尺寸、字体层级、颜色、间距、控件尺寸、圆角／阴影、表格密度和图标约定。写出会用于绘制的实际值或规则及来源，不只写“沿用项目风格”；源码取值与截图估计分开标注。
• 缺少的规则优先从相邻同类组件推导并标为建议；材料不足时沿用已知部分，列出视觉缺口，不把推测写成既有规范。用户明确指定的新风格优先于现状，同时记录调整范围与差异。

确定投入与页面结构

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

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

先列清单，再绘制

先按 清单说明 建立页面、字段、操作及状态清单 prototype.md，再据此绘制 HTML，保持两者一致。

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

绘制与验证

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

将样式基线落实为原型的 CSS 变量、布局规则和控件样式，优先复用可独立使用的项目样式与本地资源；依赖生产运行时的组件用静态 HTML/CSS 复现相关外观与状态，不为原型引入完整应用。无法离线复用的字体、图标等记录替代方案及视觉差异，不静默换成 emoji 或另一套图标。

保留目标页面的导航、内容宽度、标题／工具栏层级、表单组织、操作位置和信息密度；T2 只改变需求涉及的区域，用必要上下文展示它在原页面中的位置。没有需求或项目依据时，不额外增加大标题横幅、装饰渐变、卡片包裹或更换导航结构。原型说明与状态切换器放在独立的演示区域，避免改变业务页面的布局和视觉层级。

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

在可用浏览器或渲染工具中打开实际产物，检查导航、模拟操作、状态展示与清单一致性。已有项目在相同视口、主题及可比状态下，对照参照页／截图检查页面骨架、字体、间距、控件和密度；修正非需求引起的偏差，保留有依据的变更及已知限制。只有源码时按基线逐项核对，明确尚未完成与真实页面的视觉对照。没有工具时说明视觉及交互未实测，不把源码检查称为走查通过。不为制作原型自动安装框架或启动生产应用。

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

保存与交付

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

交付原型入口、清单、设计假设、开放问题及实际验证范围；已有项目同时说明采用的样式基线、主动调整及未消除的视觉差异。可邀请用户走查并按反馈修订，但不等待“批准”作为本次交付完成条件；已有项目明确审批流程时沿用并如实标记状态。

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