UI 原型标准化拆解
把 UI 原型截图沉淀为固定、可复用的文档体系，而不是零散页面说明。
将这个 skill 视为一套文档标准化工作流。优先做客观 UI 拆解，不要臆造缺失的业务逻辑。
工作流
-
先确定范围。
如果用户只提供一张截图，产出单页标准化文档。
如果用户提供多张有关联的截图，产出：
- 每页一份标准化文档
- 一份整体业务流程 / 页面关系文档
- 一份跨页面共享规则，避免重复写在每页里 -
写之前先判断场景和终端。
除非用户明确说明，否则默认按 PC 网页 / 桌面端处理。
如果用户提供的是移动端、响应式、多端对比、独立弹窗、低保真线框、真实产品截图或设计系统抽取任务，先读 references/scenario-routing.md 再决定输出口径。
不要把不同终端的交互假设混写在同一套规则里。 -
选择提示词深度。
多面板、表格、表单、弹窗、抽屉、嵌套状态较多的复杂页面，使用完整版提示词。
简单页面或独立弹窗，只在必要时使用精简版提示词。
正式产出前先读 references/prompt-and-template.md。 -
严格自上而下拆解。
页面文档固定按以下顺序组织：
- 页面基础信息
- 全局导航
- 分类 / 筛选 / 表单区域
- 主体内容载体
- 底部 / 分页 / 辅助操作
- 弹窗 / 抽屉 / 浮层组件
- 交互规则
- 数据状态 -
控制输出边界。
不要补写原型里看不到、用户也没有提供的后台流程、接口语义或业务规则。
没有展示的内容，直接标注为无或未知，不要靠猜测补齐。 -
做跨页面标准化。
当多页明显共享导航、页头、配色、分页或状态规则时，只写一次共享规则，再在单页文档里引用。
处理多页文档时，先读 references/shared-rules.md。 -
分阶段组织交付物。
按 references/workflow.md 的阶段执行：
- 输入准备
- 页面拆解
- 流程整合
- 差异补齐
- 口径统一
输出规则
- 使用 references/prompt-and-template.md 里的固定模板。
- 语言保持简洁、客观。
- 重点描述可见组件、布局、字段、状态和交互。
- 对于原型中可见或由 PC 交互模式强烈暗示的行为，补齐 hover、排序、分页、批量勾选、弹窗开闭、局部 loading 等说明。
- 通用规则与页面差异分开写。
资源读取顺序
- 读 references/scenario-routing.md 获取：
- 适用场景
- 不适用场景
- 终端分流
- 输入质量分级
- 输出形态选择
- 读 references/prompt-and-template.md 获取：
- 完整版提示词
- 精简版提示词
- 固定输出结构
- 拆解约束
- 读 references/workflow.md 获取：
- 多阶段文档演化方式
- 如何把单页文档提升为一套可复用体系
- 读 references/shared-rules.md 获取：
- 导航
- 页头
- 默认配色
- 分页
- 通用按钮 / 数据 / 权限状态
编写建议
- 页面命名优先使用原型中的可见标题或主任务名称。
- 区域命名优先使用明确标签，如“任务列表”“筛选区”“预览表格”“详情抽屉”“关系图谱面板”。
- 截图信息密度过高时，只有在细节缺失会明显影响准确性时，才要求用户拆分截图。
- 页面属于同一主链路时，把上下游关系写进总览文档，不要在每页重复解释。
- 原型没有可靠色值时，使用 references/shared-rules.md 中的兜底配色。
交付结果
单页场景：
- 一份标准化页面文档
多页关联场景：
- 每页一份标准化页面文档
- 一份整体流程 / PRD 总览
- 一份抽取后的共享规则，或共享规则引用集合
专项场景：
- 独立弹窗 / 抽屉：一份组件级规范
- 移动端页面：一份移动端页面文档，交互规则按移动端重写
- 响应式页面：一份按断点拆分的页面文档
- 设计系统抽取：一份组件、配色、状态、布局规则清单
- 低保真线框：一份结构与交互推断文档，并标明不可确认细节
