PRD & Interactive Prototype

Turn a one-line idea into a clickable, demo-ready PRD (text + single-file HTML). Interactions are clear and intuitive so anyone gets it; preview locally with zero setup, or publish to share with teammates online. Built-in methodology fills the gaps and auto-generates Interaction Specs; supports mini

PRD 原型与需求说明制作 / PRD + Interactive Prototype

License: MIT

⚠️ Before First Use | 首次使用必读 首次使用此 skill 前，必须先读取 references/ONBOARDING.md 完成环境配置（主要是确认本地可写文件；发布到静态托管需安装 gh CLI 并登录，实机验证建议装 Playwright）。仅生成本地预览时无需任何额外安装。

把产品需求整理成一份"文字 PRD + 可交互 HTML 原型"合一的单文件文档，视觉走大厂简约风。默认只生成可在本地直接打开的预览版（零门槛）；只有用户明确要对外分享时，才询问发布方式并推荐静态托管（兼顾国内替代）。

它是什么 / 适合谁（一句话概览）

• 是什么：一份"文字 PRD + 可交互单文件 HTML 原型"合一的产出工具。你给想法，它用内置产品方法论补全缺口，直接产出"能点、能演示"的文档，而不是一堆纯文字。
• 适合谁：
  • ① 产品经理——日常写 PRD、做方案评审、对齐研发与设计；
  • ② 创业者 / 业务方——只有一个模糊想法或一句话需求，需要快速成型；
  • ③ 任何需要"把方案讲清楚、演出来"的人——汇报、拉齐、售前都适用。
• 核心收益（为什么好用）：
  • 低门槛：默认本地预览，零部署，开箱即用；
  • 有方法：内置产品方法论（用户故事地图 / JTBD / 用户旅程 / KANO / 状态机）自动补全缺口；
  • 能演示：自动生成"交互说明"（原型内悬浮面板 + PRD 章节双向呼应）；
  • 可传播：可选一键发布到静态托管（含国内替代），覆盖远端前必确认。

语言支持 / Language

• 本技能不限制语言：根据你使用的语言自动回复（默认支持中文 / English，其他语言也可）。
• 文档、原型文案、交互说明均可按你的语言生成。
• 示例：中文直接说"帮我写个 PRD"；English: "turn my product idea into an interactive PRD".

何时使用 / When to use

• 你想要一份 PRD，且希望它"能点、能演示"，而不只是文字。
• 你只有一个模糊想法 / 一句话需求，希望用标准产品方法论帮你补全成完整 PRD 与可交互原型。
• 你已有 PRD 草稿，需要诊断缺什么、补全章节、或加上可交互原型。
• 你需要把方案发布成可访问的链接（可选，需确认）。

门槛很低：你只需提供这些（最小信息集）

即使信息不全也能开始。下面是"理想情况"下你最好能给到的内容；缺任何一项，本技能都会用产品方法论帮你补全，不会卡住你：

你可提供的信息	作用	完全没给时我会怎么做
产品名 / 一句话想法	标题与定位	用占位名先搭框架，最后再定
目标用户 / 角色	角色权限、用户流	用 JTBD / 用户故事默认推导
核心流程（哪怕口述）	页面与跳转	用用户旅程地图补全闭环
要展示的页面清单	原型结构	按标准三端（概览 / 前端原型[小程序 或 Web·桌面] / 后台）默认给
关键数据 / 状态	接口契约、联动	用状态机模板给占位定义
外部系统（CRM / 支付 …）	接口章节	标记"待确认"占位

原则：先动起来，本地出东西，再迭代。 不要因为"信息不全"就不开始。

工作流 / Workflow

1. 采集信息 + 用产品方法论补全

• 先看用户给了什么，对照上面"最小信息集"找出缺口。
• 缺口用 references/product-methodology.md 的框架补全：用用户故事地图梳理页面、用 JTBD 锚定价值、用用户旅程地图补全异常 / 逆向流程、用 KANO 排优先级、用 状态机 定义数据迁移。
• 不必一次问全：能默认推导的先默认，把"待你确认"的少量问题一并列出，让用户一次性回复即可。

2. 确定 PRD 章节结构

加载 references/prd-structure.md，按标准 12 章 + 交互说明清单组织（概览 / 背景目标 / 范围 / 关键指标 / 非功能需求 / 角色权限 / 流程闭环 / 接口契约 / 原型 / 交互说明 / 上线运营 / 风险 / 术语表）。 拿到草稿时先诊断缺失（仅诊断、先不改），再按需补全。关键指标优先用时间节点而非"试点覆盖 X 家"。

3. 基于模板搭建单文件 HTML

复制 assets/prd-template.html（自包含、无外部依赖、图片 base64 / 内联 SVG）。模板已内置：顶栏 3 tab 滑动切换、左目录滚动高亮、小程序手机框、后台连接线 drawLines()，以及交互说明悬浮面板（自动采集 data-ix 标注）。要点：

• 给关键可交互元素加 data-ix="交互描述" 与可选 data-ix-title="标题"，右下角"交互"按钮会自动汇总成说明面板。
• 在 PRD 概览里补一节"交互说明"，与悬浮面板呼应。

4. 数据联动（演示自洽）

前序页面选择驱动后序页面（如商品选择 → 交易金额 / 优惠实时计算）。推荐模式：声明全局 state 对象 → 交互只改 state → 统一 render() 重绘。详见 references/prd-structure.md 第五章。

5. 生成"带交互说明"的输出

两套都给，确保评审方既看得到"长什么样"也看得到"怎么动"：

1. 原型内：右下角"交互"悬浮面板，列出所有 data-ix 交互，可点击定位高亮。
2. PRD 文档内：独立"交互说明"章节，按"触发 — 行为 — 状态变化"描述关键交互。

6. 本地预览（默认，必做，零门槛）

• 用 present_files 直接打开本地 HTML，用户在浏览器里就能点、能演示。
• 不主动发布、不主动推送任何远端。 这一步不需要用户做任何部署操作。
• 发布前必须用 Playwright-core + 系统 Chrome 实机验证：无 JS 错误、div 平衡、tab / 页面 / 连接线 / 联动正确。

7. 发布（可选，需用户确认，推荐静态托管）

只有用户说"要发布 / 要个链接"时才进入。先明确询问发布方式，默认推荐静态托管（含国内静态托管），并列出国内替代：

• 静态托管（推荐，含国内静态托管）：加载 references/deploy-github-pages.md（任选一种静态托管方式即可）。
• 国内替代：Gitee Pages / 腾讯云静态网站（CloudBase） / WorkBuddy CloudStudio 部署。
• ⚠️ 任何覆盖远端文件的操作，执行前必须明确告知并获确认（"将覆盖仓库远端 index.html，是否继续？"）。

能力对照 / Capability coverage（评测维度覆盖）

本技能在设计与历次评测中刻意覆盖以下维度，便于审阅、传播与持续优化：

维度	本技能如何覆盖
安全合规	单文件自包含、无可执行脚本，可过安全扫描；发布前强制用户确认；描述中英双语。
可靠性 Reliability	先采集信息再补全，缺口用产品方法论兜底，不会因"信息不全"卡流程（见「最小信息集」）。
信任度 Trust	默认本地预览零门槛；发布提供国内静态托管替代，不绑定单一平台/账号。
适用性 Applicability	附完整可运行示例 references/example-full.html + 最小章节示例，开箱即见效果。
规范性 Normativeness	集中 FAQ + 标准 12 章结构 + 交互说明规范，输出口径统一。
有效性 Effectiveness	状态对象 + render() 的数据联动模式；自定义效果可内联第三方库（ECharts / Sortable 等），仍保持单文件自包含。

---

作者 / Author： QQ 965621229 · License： MIT · 反馈、合作或问题请加 QQ

资源 / Resources

• references/prd-structure.md — PRD 12 章 + 交互说明清单、诊断方法、关键指标写法、数据联动。
• references/product-methodology.md — 产品方法论速查（用户故事地图 / JTBD / 用户旅程 / KANO / 状态机）及"何时用哪种"与映射到 PRD 章节。
• references/ONBOARDING.md — 首次使用环境配置（可选：发布用 gh CLI、验证用 Playwright、国内托管替代）。
• references/example-full.html — 完整可运行示例（团队订餐拼单）：12 章 PRD + 小程序/后台可用 demo + 交互说明，开箱即见效果。
• references/deploy-github-pages.md — .nojekyll、cache-bust、gh api 更新、轮询清缓存、国内替代、操作前确认。
• assets/prd-template.html — 可运行单文件骨架（顶栏 tab、左目录、小程序 / 后台原型、连接线、交互说明面板、圆角规范与完整 JS）。

常见问题 / FAQ

Q1：我只有一句话需求，能直接出原型吗？ 能。按"最小信息集"先搭框架，缺口用产品方法论补全，本地先出可点预览，再迭代。不必等"信息齐全"。

Q2：必须发布到静态托管吗？ 不必。默认只给本地预览文件，你随时可双击打开。只有你要对外分享链接时才发布，且会先问你方式（默认推荐静态托管，境内可选国内静态托管）。

Q3：原型交互说明怎么写？ 给元素加 data-ix 属性，模板右下角"交互"面板会自动汇总；同时在 PRD 加一节"交互说明"。两者对应，评审方一目了然。

Q4：后台连接线错位怎么办？ 通常是父元素 transform 动画残留导致 SVG position:fixed 包含块偏移。模板 drawLines() 已做坐标修正并在 animationend 重绘；仍错位则检查自定义动画是否加了额外 transform。

Q5：可以改视觉风格吗？ 可以。通过 CSS 变量（--accent、--radius-card、--radius-panel 等）统一调整；不建议局部写死颜色或滥用渐变。

Q6：支持更复杂的自定义交互（拖拽、图表、地图）吗？ 模板适合轻量页面流与状态联动。复杂交互可在单文件 HTML 内联第三方库（如 ECharts、Sortable），保持单文件自包含；但优先用简化示意，降低维护与验证成本。

完整示例参考 / Example

最小可运行 PRD 原型通常含：

1. PRD 概览 tab：标题"XX 系统 · 产品原型与需求说明"，12 章填充真实业务；含"交互说明"一节。
2. 小程序原型 tab：3 页面 chip（首页 / 扫码 → 会员详情 → 核销成功），金额 / 积分联动；关键元素带 data-ix。
3. 后台管理 tab：左侧导航 → 中间 SVG 连接线 → 右侧功能说明。
4. 右下角"交互"面板自动汇总所有 data-ix。

骨架见 assets/prd-template.html，替换占位文字与业务逻辑即可。