PRD 可视化引擎

要解决什么问题

产品 PRD 往往很长：章节层级深、夹杂架构图与 UI 截图，用 Word/PDF 分享时读者很难快速建立「首屏印象 + 全文脉络」。若手工做一页式 HTML，又容易阉割原文、图表变成占位图，或与品牌 VI 脱节。

技能如何工作

PRD2HTML 把 PRD 当作唯一事实来源，按固定阶段执行：

• Phase 0：读取 PRD，统计嵌入图与图表标注；必要时暂停，确认模型是否具备图片识别能力。询问用户是否在 images/ 目录提供需原样嵌入的原图；对其余架构/流程/关系类内容做 SVG 精准复现（文字与 PRD 一致），或对 PDF 内截图做边界裁剪。
• Phase 1：扫描品牌名并检索官网/VI，覆盖 CSS 变量；通过 Q1–Q5 决策树（可跳过由 agent 推断）确定 Hero、色系与交互模块路由，并映射 references/ 中的 category/style 预设。
• Phase 2：生成单文件 HTML（CSS/JS 全内联），建议用子代理并行产出 CSS 设计系统、SVG 与交互模块后拼合；输出放在 PRD 同目录，浏览器直接打开。

核心约束包括：章节顺序与层级与原文一致、导航锚点覆盖所有 section、禁止编造数据、不依赖 Node/React 等外部运行时。

适用边界

| 场景 | 说明 |
|------|------|
| 适合 | 带产品视角、可结构化章节的中等规模 PRD |
| 不适合 | 纯 API 文档、超 25 屏需拆分、对外官网/落地页（应选 frontend-design）、需 CMS 持续编辑 |

含大量图片且当前模型不支持 image input 时，架构图复现会降级为从文字推断，执行前会明确提示。