Coding

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

What it does

The skill document

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. 生成"带交互说明"的输出

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

原型内：右下角"交互"悬浮面板，列出所有 data-ix 交互，可点击定位高亮。
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 原型通常含：

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

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