将 PRD、页面清单或系统截图转成可点击、可验收、可离线交付的 HTML 交互原型。
prd-html 面向产品经理和 AI 工具实践者。它使用 Markdown 管理需求结构，按页生成 HTML，并通过设计规范、生成门禁和验收清单控制多页原型的一致性。
- 将 PRD 或需求文档转成可点击的 HTML 原型。
- 将页面清单拆成多页原型，并走通跨页业务流程。
- 根据现有系统截图建立页面结构和设计规范。
- 生成使用 mock 数据的体验级原型，用于需求评审、流程走查和方案演示。
单页、一次性演示可以直接生成 HTML，无需执行完整 spec 流程。需要像素级还原、复杂动效或生产级前端代码时，应使用专业设计和开发流程。
Markdown 是需求的唯一事实源，HTML 是根据 Markdown 生成的交互产物。
需求发生变化时，先更新 Markdown，再根据影响范围更新单页或全局产物。页面生成前先确认需求结构，可以减少生成完整页面后的返工。
- 下载或克隆本仓库。
- 将完整的
prd-html/目录放入所用 AI 工具的 skills 目录。 - 保留
SKILL.md、assets/、design-specs/和references/的相对目录结构。 - 新建对话，使用下方示例语句触发 skill。
skills 目录的具体位置由 AI 工具决定，请以对应工具的官方文档为准。
按这份 PRD 生成一套可点击的 HTML 原型。
把这几个页面做成可以演示的网页，页面之间要能跳转。
根据这份需求文档生成多页交互原型。
开工前，skill 会要求确认：
- 原型生成目录。
- 设计规范选型。
- 需求中没有写清的字段、跳转或交互。
需求不明确时，skill 会使用 [NEEDS CLARIFICATION: 具体问题] 标记并询问，不自行补全。
- 确认原型生成目录。
- 列出设计规范清单，等待用户选型。
- 生成导航地图、公共规范和单页 spec。
- 生成公共样式和 mock 数据。
- 每批生成 1—2 个页面，每页完成后立即截图验收。
- 生成
index.html和交付 README，邀请用户完整走查。 - 验收通过后，打包单文件 HTML 交付版。
prd-html/
├── SKILL.md
├── README.md
├── assets/
│ ├── 导航地图模板.md
│ ├── 页面spec模板.md
│ └── 公共规范-通用.md
├── design-specs/
│ ├── index.md
│ ├── 后台-通用.md
│ └── APP-通用.md
├── references/
│ └── 单文件交付.md
└── evals/
└── evals.json
项目公共规范由三部分拼装：
通用 token 骨架 + 选定的类型规范 + 项目色板 = 项目专属公共规范
内置规范包括：
后台-通用.md：后台管理类产品。APP-通用.md：移动 APP 类产品。
遇到新项目时，可以通过截图、设计文档或文字描述生成新规范，存入 design-specs/ 并登记到 design-specs/index.md。后续开工时，新规范会出现在选型清单中，继续由用户确认。
扩展时请检查：
- 新规范没有包含个人路径、客户数据或未授权素材。
index.md中的文件名、适用类型和状态已经更新。- 生成前仍然会向用户列出清单并等待选择。
原型名/
├── spec/ # 需求结构和页面规格
├── src/ # HTML 页面、公共样式和 mock 数据
├── 预览截图/ # 逐页验收和交付截图
├── <原型名>-完整交互原型.html # 可离线打开的单文件交付版
└── README.md # 打开方式和页面清单
spec/ 用于在 HTML 生成前确认 AI 对需求的理解。页面边界、字段和跳转关系可以先在文字阶段修正，再进入页面生成。
- 不许猜：需求不明确时停下询问。
- 生成前门禁：检查规范、导航和工程边界。
- 逐页验收：检查打开、布局、跳转、状态、风格、视觉签名和文案。
- 整体验收：全部页面完成后，从统一入口走通主流程。
- 单文件验证：从最终打包文件本身打开验证，不用分页结果代替。
本 skill 借鉴了 GitHub Spec Kit 的 spec-driven 思路，保留了单一事实源、待澄清标记、生成前检查和验收清单。
为适应产品原型场景，本 skill 没有引入 git 分支、特性编号、API 合约和命令链等完整工程仪式。
- 输出是需求评审用的体验级原型，不是生产级前端工程。
- 对像素级视觉还原、复杂动效或特定原型工具格式有强制要求时，需要使用其他工具。
- 涉及真实用户、合同、金额或其他敏感数据时，生成前应先确认合规性，默认使用 mock 数据。