PRD + 可交互原型制作

要解决什么问题

很多 PRD 停在 Word 或飞书文档里：研发和设计只能脑补页面，评审时还要另做 Axure/Figma 或 PPT 演示。反过来，纯原型又缺背景、指标、接口与风险，上线前容易扯皮。更常见的是你只有一句话想法，信息不全时不知道从哪一章写起。

技能如何工作

本技能把文字 PRD与单文件 HTML 原型合在同一份产出里，默认走本地可打开预览（自包含模板，无外部依赖），不主动推远端。

1. 信息采集与补全：对照最小信息集（产品名、角色、核心流程、页面清单等），缺口用 references/product-methodology.md 里的用户故事地图、JTBD、用户旅程、KANO、状态机等框架推导，先搭框架再让你确认少量「待确认」项。
2. 标准章节：按 references/prd-structure.md 组织约 12 章（概览、范围、指标、角色权限、流程、接口、原型、交互说明等）；有草稿时先诊断缺失再补全。
3. 可点原型：基于 assets/prd-template.html 生成单文件页——顶栏 Tab、左目录高亮、小程序框/后台与连接线；关键元素加 data-ix 描述，右下角「交互」面板与 PRD「交互说明」章节双向对应。
4. 演示自洽：用全局 state + render() 做页面间联动（如选项驱动金额/状态），便于评审时「能点、能演」。
5. 发布（可选）：仅在你明确要分享链接时，才询问静态托管方式（含国内替代），且覆盖远端前必须确认。

适用边界与注意点

• 适合页面流、状态联动与评审演示；复杂拖拽/地图/大屏图表可在单文件内联第三方库，但技能优先简化示意以降低维护成本。
• 首次使用需按 references/ONBOARDING.md 确认本地可写；仅本地预览无需额外安装；发布与 Playwright 实机验证为可选路径。
• 后台连接线若错位，多与父级 transform 动画有关，模板 drawLines() 已做修正，自定义动画需注意坐标系。