PRD2HTML — PRD可视化引擎

核心原则

1. 完整保留PRD结构：章节顺序、层级、子节与原文完全一致，不阉割
2. 先理解再执行：通读PRD后再设计，不预设视觉方案
3. 调性自适应：UI风格随项目调性动态匹配品牌色、字体、布局
4. 一次成型：单次调用输出高完成度HTML

🔴 模型选择（开始任何任务前）

PRD 中图片处理的质量直接取决于模型是否具备视觉识别能力。

Phase 0 第一步：检测并提示用户。

1. 读取 PRD 后，统计 page.images 数量 + 架构图/流程图/示意图标注数量
2. 总量 > 0 → 🔴 暂停执行。用以下文字回复用户，等待确认后再继续：

⚠️ 检测到 PRD 含 {N} 张嵌入图片 + {M} 处图表标注。

当前对话模型如不支持图片识别（image input）：
✓ 仍可提取图片二进制数据（pdfplumber）
✗ 无法"看懂"图片内容——判断类型、验证边界、提取结构
✗ 架构图 SVG 复现将降级为"从文字描述推断"（准确度下降）

🟢 建议切换支持图片识别的模型以获得最佳效果
🟡 回复"继续"以当前模型执行

能力边界

> Phase 0 先诊断；命中拒绝场景直接告知；边缘案例咨询用户。

工作流路由

Phase 0: 读取 + 提取（含强制门禁）

Step 1: 读取 PRD

# PDF: 用 pdfplumber 提取文本
python -c "
import pdfplumber
with pdfplumber.open('PRD_PATH') as pdf:
    for p in pdf.pages:
        t = p.extract_text()
        if t: print(t)
"

Step 2: 📷 用户原图询问（🔴 暂停，等待用户回复）

🔴 停止执行。向用户发送以下文字：

📷 这份 PRD 中是否有需要原样呈现的图片？
（比如 UI 原型截图、产品渲染图、专属图表、照片等）

如果有，请：
1. 在 PRD 同目录下创建 images 文件夹
2. 按章节命名图片：{序号}_{章节名}.png
例如：04_产品架构图.png、07_UI原型-首页.jpg
3. 将图片放入后告诉我"已就绪"

如果没有，回复"跳过"。

处理规则：
- 用户放置的图片 → 直接 <img src="data:image/png;base64,..."> 嵌入，不做其它处理
- 用户跳过 → 进入 Step 3 自动视觉内容处理
- images/ 目录存在但为空 → 视为"跳过"；未搜到目录请用户告知目录路径
- 所有用户图片必须按文件名排序嵌入到对应章节

Step 3: 🔴 视觉内容处理 — 强制门禁

按内容类型分策略：

SVG 复现流程：
1. 从 PRD 原文提取章节标题和图表描述文字
2. 根据描述生成 SVG（<rect> + <line> + <text> + 箭头 marker）
3. 使用页面 CSS 变量（--color-primary 等）保持视觉一致
4. SVG 放置于对应 section 标题下方
5. 所有文字必须与 PRD 原文一致，不允许编造

门禁规则：
- 每个标有"图：/架构图/流程图/示意图"的 PRD 章节 → HTML 中必须有对应的 <svg> 或 <img>
- 遗漏任何一处 → Phase 0 不合格，重做
- 详见 references/image-extraction.md

Step 4: 提取章节大纲（必须输出）
Step 5: 识别 project_type

Phase 1: 调性发现

品牌检测（必须在 Q1 之前执行）：
1. 扫描 PRD 全文，识别PRD内容所属品牌名称
2. WebSearch 搜索品牌官网/VI/设计指南，提取真实色号；brand-palettes.md 的静态表仅为搜索结果的缓存兜底
3. 提取品牌设计语言：Primary/Secondary 色号、深浅偏好、字体偏好、特殊视觉元素
4. 匹配成功 → 品牌色覆盖 style 预设的 primary/accent/gradient；设计语言覆盖对应 token
5. 纯内部项目/新品牌/通用方案 → 跳过品牌检测，正常走 Q1-Q3

交互式决策树（一次一题，可跳过由 agent 推断）：

• 大类预设：project_type → references/README.md 10 套 category
• 风格叠加：选 A-H → 额外加载 style-*.md
• 跳过所有问题 → 大类预设自动匹配

Phase 2: 生成 HTML

子代理分派（🔴 强烈建议，节省上下文窗口）

使用 Agent 工具并行派发 3 个子任务（run_in_background: true），主代理收结果后拼合。

调用方式（每个分派 = 一次 Agent 工具调用）：

Agent({ name: "css", run_in_background: true, prompt: "读取以下文件并生成完整设计系统CSS：..." })
Agent({ name: "svg", run_in_background: true, prompt: "读取以下文件并生成架构图SVG：..." })
Agent({ name: "interact", run_in_background: true, prompt: "读取以下模板并生成交互模块：..." })

每个 prompt 必须包含（🔴 缺一不可）：
1. 要读取的 reference 文件相对路径（相对于本 Skill 根目录，如 references/category-*.md）
2. 主代理从 Phase 0/1 获取的参数（品牌色号、章节大纲、概念类型→模板映射）
3. 输出格式要求

3 个子任务：

> ⚠️ 如果当前平台不支持 Agent 工具 → 降级为顺序执行，主代理自行完成。

分派判断：

> 如果不支持子代理 → 降级为顺序执行，主代理自行完成所有模块。

加载路由表

输出规范

• 单文件 HTML，CSS/JS 全内联
• 浏览器直接打开，无需服务器
• 路径：PRD 同目录

设计决策树

红线

• ❌ 不可阉割 PRD 内容
• ❌ 不可使用纯装饰性动画
• ❌ 不可编造数据
• ❌ 不可跳过调性发现
• ❌ 不可依赖外部运行时（Node/React）
• ❌ 不可用 box-shadow 做 SVG 阴影 → filter: drop-shadow()
• ❌ 不可丢弃 PRD 图片/流程图/架构图
• ❌ 不可生成无法点击的交互模块
• ❌ 不可因修 bug 删交互功能
• ❌ 不可遗漏导航锚点