# prd-html-skill

**Repository Path**: xiaojilong/prd-html-skill

## Basic Information

- **Project Name**: prd-html-skill
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-01
- **Last Updated**: 2026-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# prd-html

> 将 PRD、页面清单或系统截图转成可点击、可验收、可离线交付的 HTML 交互原型。

`prd-html` 面向产品经理和 AI 工具实践者。它使用 Markdown 管理需求结构，按页生成 HTML，并通过设计规范、生成门禁和验收清单控制多页原型的一致性。

## 适用场景

- 将 PRD 或需求文档转成可点击的 HTML 原型。
- 将页面清单拆成多页原型，并走通跨页业务流程。
- 根据现有系统截图建立页面结构和设计规范。
- 生成使用 mock 数据的体验级原型，用于需求评审、流程走查和方案演示。

单页、一次性演示可以直接生成 HTML，无需执行完整 spec 流程。需要像素级还原、复杂动效或生产级前端代码时，应使用专业设计和开发流程。

## 设计原则

Markdown 是需求的唯一事实源，HTML 是根据 Markdown 生成的交互产物。

需求发生变化时，先更新 Markdown，再根据影响范围更新单页或全局产物。页面生成前先确认需求结构，可以减少生成完整页面后的返工。

## 安装

1. 下载或克隆本仓库。
2. 将完整的 `prd-html/` 目录放入所用 AI 工具的 skills 目录。
3. 保留 `SKILL.md`、`assets/`、`design-specs/` 和 `references/` 的相对目录结构。
4. 新建对话，使用下方示例语句触发 skill。

skills 目录的具体位置由 AI 工具决定，请以对应工具的官方文档为准。

## 快速开始

```text
按这份 PRD 生成一套可点击的 HTML 原型。
把这几个页面做成可以演示的网页，页面之间要能跳转。
根据这份需求文档生成多页交互原型。
```

开工前，skill 会要求确认：

- 原型生成目录。
- 设计规范选型。
- 需求中没有写清的字段、跳转或交互。

需求不明确时，skill 会使用 `[NEEDS CLARIFICATION: 具体问题]` 标记并询问，不自行补全。

## 执行流程

1. 确认原型生成目录。
2. 列出设计规范清单，等待用户选型。
3. 生成导航地图、公共规范和单页 spec。
4. 生成公共样式和 mock 数据。
5. 每批生成 1—2 个页面，每页完成后立即截图验收。
6. 生成 `index.html` 和交付 README，邀请用户完整走查。
7. 验收通过后，打包单文件 HTML 交付版。

## Skill 目录

```text
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` 中的文件名、适用类型和状态已经更新。
- 生成前仍然会向用户列出清单并等待选择。

## 交付结构

```text
原型名/
├── spec/                         # 需求结构和页面规格
├── src/                          # HTML 页面、公共样式和 mock 数据
├── 预览截图/                     # 逐页验收和交付截图
├── <原型名>-完整交互原型.html  # 可离线打开的单文件交付版
└── README.md                     # 打开方式和页面清单
```

`spec/` 用于在 HTML 生成前确认 AI 对需求的理解。页面边界、字段和跳转关系可以先在文字阶段修正，再进入页面生成。

## 质量控制

- **不许猜**：需求不明确时停下询问。
- **生成前门禁**：检查规范、导航和工程边界。
- **逐页验收**：检查打开、布局、跳转、状态、风格、视觉签名和文案。
- **整体验收**：全部页面完成后，从统一入口走通主流程。
- **单文件验证**：从最终打包文件本身打开验证，不用分页结果代替。

## 与 Spec Kit 的关系

本 skill 借鉴了 [GitHub Spec Kit](https://github.com/github/spec-kit) 的 spec-driven 思路，保留了单一事实源、待澄清标记、生成前检查和验收清单。

为适应产品原型场景，本 skill 没有引入 git 分支、特性编号、API 合约和命令链等完整工程仪式。

## 使用边界

- 输出是需求评审用的体验级原型，不是生产级前端工程。
- 对像素级视觉还原、复杂动效或特定原型工具格式有强制要求时，需要使用其他工具。
- 涉及真实用户、合同、金额或其他敏感数据时，生成前应先确认合规性，默认使用 mock 数据。