PRD Studio — 完整 PRD 需求文档生成工具（通用版）

概述

本技能将任何产品需求输入转化为一站式 PRD 工作台单文件 prd-studio.html，
包含 6 个可编辑标签页：PRD 文档、产品逻辑图、产品框架图、页面流程图、
高保真交互原型、设计参考。所有内容可在浏览器中直接编辑、拖拽、连线、
标注、保存（localStorage）和导出，无需后端。

不局限于任何行业——教育 SaaS、电商、工具、B 端后台、C 端 App 均可。
输入可以是需求标题 + 一段描述，也可以是原型图/竞品截图（多张），
输出永远是同一套完整 PRD 交付物。

适用场景

• 产品经理拿到需求标题/一段话，要快速产出结构化 PRD + 全套可视化图表 + 高保真原型
• 从竞品截图 / 手绘草图 / 旧系统截图反推完整 PRD 文档与原型
• 需要可编辑、可迭代、可评审的活文档（非一次性导出）
• 多轮迭代：先出预览稿确认方向，再落到最终文件

快速开始：直接可用的对话示例（新手照抄即可触发）

> 以下 4 段对话可直接复制粘贴使用，触发词已对齐到本 skill 的 description。

示例 1 · 从一段话生成完整 PRD

我要做一个面向小学老师的【班级作业管理小程序】，核心功能：发布作业、家长查看打卡、AI 批改客观题、统计完成率。
请按 prd-studio 流程生成完整 PRD 工作台，包括 6 大标签页。

示例 2 · 竞品截图反推 PRD

@image 这是「猿辅导」家长端的首页截图，帮我反推一份完整 PRD 工作台（包含 6 大标签页），
目标用户：小学家长，核心场景：作业查看、家长沟通、课程管理。

示例 3 · 一句话需求起步

一句话需求：做一个 SaaS 工具帮小公司管理客户（CRM），行业：贸易公司。
给我生成完整 PRD 工作台。

示例 4 · 在已有原型上改造

这是我现有的 prd-studio.html（@附件），请只改造「高保真交互原型 → 首页」：
把课程卡片网格从 4 列改成 6 列，加入点击效果。不要改动其他标签页。

工作流程

0. 输入检查清单（生成前必读，避免输出不稳定）

• [ ] 产品名称 + 一句话定位（必填；提供 2-3 个候选更好）
• [ ] 目标用户：角色 + 核心场景（不少于 2 个场景）
• [ ] 核心功能 3-5 个：能说清每个功能做什么、给谁用
• [ ] 参考素材（可选但强烈推荐）：原型图/竞品截图/竞品链接
• [ ] 约束条件（可选）：平台（Web/小程序/原生）、技术栈、预算/工期

> 如果用户给的信息不足，必须主动反问 1-2 个关键问题（如"主要目标用户是老师还是家长？""核心功能优先级 P0 是哪 3 个？"），不要闷头生成低质量 PRD。信息充足才动手。

1. 输入分析（任意素材均可）

接收以下输入之一或任意组合：
- 需求标题 + 需求描述：产品名称、核心功能、目标用户、业务背景
- 原型图截图：现有页面设计稿，提取布局与元素
- 竞品截图：多张竞品界面，提取信息架构、视觉风格、功能模块
- 业务背景文字：场景、用户群、业务流程
- 手绘草图：草图线条反推页面结构

从输入中提取：
- 产品名称与定位（给用户确认，必要时生成 2-3 个候选名）
- 目标用户与核心场景
- 核心功能模块清单（含优先级 P0/P1/P2）
- 关键业务流程（→ 逻辑图）
- 功能架构（模块 → 页面 → 功能点，→ 框架图）
- 页面清单与跳转关系（→ 流程图）
- 视觉风格方向（配色、布局形态，→ 高保真原型 + 设计参考）

2. 方向确认（大改动前必做）

• 涉及整体布局/视觉风格的重新设计时，先用 show_widget 出一版预览稿，
  用户确认方向后再写入最终文件（避免大文件反复返工）
• 用户明确给了参考截图并要求"保留所有元素"时，严格保留原图结构与全部元素，
  只做排版与美观度优化，不要删改结构

3. 生成 prd-studio.html

生成单一 HTML 文件，包含以下 6 个标签页。详细规格见 references/architecture.md，
踩坑经验见 references/pitfalls.md。

标签页 1：PRD 文档

• 结构：产品概述 → 目标用户与痛点 → 功能需求（P0/P1/P2 优先级卡片）→ 非功能需求 → 数据模型 → 里程碑
• 所有标题、段落、表格 contenteditable 可编辑
• 功能卡片 = 模块标题 + 优先级标签（红P0/黄P1/蓝P2）+ 功能描述

标签页 2：产品逻辑图（业务流程）

• SVG 实现，节点拖拽移动、连线自动跟随、双击编辑文字
• 按业务流程网格布局（顶部主轴 → 中部支线 → 底部闭环），连线精确对齐节点边界中点
• 每条连线带操作标签（如"选择分类""提交"），末端加三角箭头 marker

标签页 3：产品框架图（功能架构，非技术架构）

• 产品侧功能框架：中心产品名 → 一级模块（首页/列表/详情/搜索/我的/通知等）→ 页面/功能叶子节点
• 禁止技术架构（用户层/服务层/数据层）除非用户明确要求
• 模块节点与叶子节点用颜色区分（如分类叶子浅紫底），支持展开/收起全部叶子

标签页 4：页面流程图

• SVG 展示全部页面跳转逻辑，节点 = 页面
• 连线类型：正向跳转（实线+箭头）/ 返回回退（曲线）/ 快捷入口（虚线）/ 页面内交互（自环）
• 节点点击跳转高保真原型对应页面；编辑模式开关（DIAG_EDIT_MODE）控制"编辑 vs 跳转"冲突

标签页 5：高保真交互原型

• 横版/竖版可切换：默认横版（如 860×540 平板式，上下全屏：顶部标题栏 → 横向分类 Tab → 全屏网格）；竖版（如 420×860，网格变 2 列、分栏改上下堆叠）
• 左侧栏：页面列表 + 视图模式切换器（横版|竖版分段按钮）+ 功能标注/添加标注/编辑模式按钮 + 添加元素工具
• 编辑模式：元素拖拽 + 6px 自动对齐吸附（青色参考线）+ Delete/Backspace 删除 + 方向键微调 + 右键删除 + 属性检查器 + 复制/撤销 + 新增页面/元素
• 功能标注：红色数字标记点悬浮层 + 弹窗（功能描述/交互逻辑/业务规则三段式 PRD 风格）+ 可编辑/新增/删除（localStorage 持久化）
• 封面/配图可用 AI 生成图（base64 内嵌）或渐变占位图，风格统一

标签页 6：设计参考（从产品概述推导）

• 板块：产品定位与设计方向 → 设计参考·视觉与交互规范 → 竞品参考·同类产品对标（带链接）→ 免费可商用素材库 → 落地建议
• 所有卡片带标签分类（定位/用户/场景/方向/配色/卡片等），链接可点击

4. 编辑能力体系（全部标签页通用）

5. 大文件编辑规范（≥1MB 一律遵守）

• 绝不用 Write 工具写回大 HTML（会截断损坏），一律用 Python 脚本做字符串/正则替换
• 脚本用 Write 工具创建（UTF-8），PowerShell 或绝对路径 Python 执行
• 每步修改后立即验证：JS 语法（node --check）+ 结构标记存在性
• 修改 SVG/HTML 标签时绝不能用 .strip() 处理属性（会吃掉 <text 与属性间空格 → <textdy= 损坏标签）

6. JS 锚点保护清单（严禁破坏 · 编辑功能异常的根本原因）

> 这是 R（可靠性）评分的命脉——生成文件时必须严格保留下列所有关键 ID 与函数签名，
> 任意一处丢失都会导致「编辑功能异常」（拖拽/连线/文字编辑/视图切换/标注全部失效）。

必须保留的 HTML 元素 ID：

必须保留的 JS 全局函数名（脚本会调用，名字改了就失效）：

setOrient / toggleAnnot / toggleAnnAdd / showAnnPopup / editAnn / saveAnn
editNodeText / syncDiagramText / makeDiagramEditable / addDiagramNode
toggleLinkMode / deleteDiagramSelected / saveDiagram / loadDiagram
toggleDiagramEdit / expandAllMM / collapseAllMM / flowJump
exportJSON / importJSON / switchScreen / navTo / showToast

节点 data-id 命名约定（连线和编辑依赖）：

• 节点：n1 / n2 / ...；框架图：mm-center / mm-l1 / mm-c1
• 连线：data-id="l1" data-from="n1" data-to="n2"

生成后的强制校验（每一步都做）：

python -c "
import re
html = open('prd-studio.html', encoding='utf-8').read()
required_ids = ['tab-prd','tab-logic','tab-framework','tab-flow','tab-hifi','tab-design',
                'logic-svg','framework-svg','flow-svg','hifi-app',
                'hifi-home','hifi-detail','hifi-lessons','hifi-prep','hifi-search','hifi-mine',
                'hifi-pages','orient-landscape','orient-portrait','orient-pc',
                'ann-toggle','ann-add-toggle','edit-toggle','ann-pop']
missing = [i for i in required_ids if f'id=\"{i}\"' not in html]
print('missing IDs:', missing if missing else 'NONE - all required IDs present')
required_fns = ['function setOrient','function makeDiagramEditable','function editNodeText',
                'function syncDiagramText','function addDiagramNode','function toggleLinkMode',
                'function exportJSON','function importJSON','function showAnnPopup']
missing_fns = [f for f in required_fns if f not in html]
print('missing fns:', missing_fns if missing_fns else 'NONE - all required functions present')
"
node --check <extracted-script.js>  # JS 语法必过

任何 missing 都不能交付，必须修复后再生成。

生成检查清单

• [ ] 6 个标签页全部存在且可切换（PRD/逻辑图/框架图/流程图/高保真/设计参考）
• [ ] PRD 文档：产品概述/目标用户/功能需求(优先级)/非功能/数据/里程碑，全部可编辑
• [ ] 逻辑图：节点拖拽、双击编辑、连线带标签+箭头、边界精确对齐
• [ ] 框架图：产品功能框架（模块→页面/功能），非技术架构，可展开/收起
• [ ] 流程图：4 种连线类型、节点点击跳转原型、编辑模式开关可用
• [ ] 高保真原型：横竖版可切换、编辑模式（拖拽/对齐/删除/微调）、功能标注可编辑新增、AI 封面
• [ ] 设计参考：按产品概述推导，含竞品对标与素材库
• [ ] 三图工具栏：+新增节点/连线/删除选中/保存/重置 5 按钮齐全
• [ ] JS 锚点保护清单全部通过（24 个 ID + 9 个函数完整）
• [ ] JS 语法 node --check 通过；localStorage 保存正常；单文件无外部依赖

资源文件

• references/architecture.md — 当前 6 标签页完整架构：CSS 类名、JS 函数清单、数据结构、尺寸/配色规范
• references/pitfalls.md — 全部踩坑经验：作用域、tagName 大小写、foreignObject、.strip()、contenteditable 等
• assets/prd-studio-template.html — HTML 模板基底（内容替换即可适配新产品；按 architecture.md 升级到 6 标签规格）