# Prd Prototype

> 从 PRD 文档生成交互式原型。**当用户需要根据 PRD 生成可交互的 UI 原型、多页面跳转演示、或快速验证产品设计时必须使用此技能**。触发场景：用户说"生成原型"、"做个 demo 看看"、"生成可跳转的原型"、"把 PRD 变成可点击的页面"。

- Skill: `guoxiangjie/prd-prototype` (Agent Skill, multi-file: 18 files)
- Install (CLI): `npx skillmds@latest add guoxiangjie/prd-prototype`
- Raw SKILL.md: https://api.skillmd.com/api/skills/guoxiangjie/prd-prototype/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: guoxiangjie (https://skillmd.com/u/guoxiangjie)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/guoxiangjie/prd-prototype

---


# PRD 原型生成技能

## ⚡ 快速开始

**何时使用**：
- PRD 文档已完成，需要生成可交互的原型进行演示
- 需要快速验证产品设计和页面流程
- 开发前需要可视化原型供团队评审
- 用户上传了 PRD 文档并要求生成原型

**使用方式**：
```
/prd-prototype  # 启动原型生成流程
```

**产物路径**：
```
PRD 文档位置        → 原型产物位置
prd/                → prd/prototype/
```

## 📚 核心资源导航

| 资源 | 用途 | 何时读取 |
|------|------|----------|
| `commands/generate.md` | 原型生成详细流程 | 执行 generate 命令时 |
| `commands/check.md` | 同步状态检查流程 | 执行 check 命令时 |
| `commands/update.md` | 增量更新流程 | 执行 update 命令时 |
| `commands/preview.md` | 原型预览和导出流程 | 执行 preview 命令时 |
| `templates/html_tailwind.html` | HTML+Tailwind 模板 | 生成 Tailwind 原型时 |
| `templates/react_shadcn.html` | React+shadcn/ui+Tailwind 模板 | 生成 React 原型时 |
| `templates/pages_schema.json` | 页面契约模板 | 生成 pages.json 时 |
| `scripts/prototype_validator.js` | 完整性验证脚本 | 最终检查时 |

## 🛡️ 三阶段质量保障机制

原型生成采用三阶段质量保障，确保完整性和正确性：

```
┌─────────────────────────────────────────────────────────────┐
│  阶段1: 规划锁定                                              │
│  ├── 扫描模块 PRD，读取内容                                   │
│  ├── 生成设计体系并确认                                       │
│  └── 生成 pages.json 页面契约，用户确认锁定                   │
├─────────────────────────────────────────────────────────────┤
│  阶段2: 按序生成 + 即时验证                                   │
│  ├── 读取 pages.json 作为生成队列                             │
│  ├── 每个页面生成前验证引用合法性                              │
│  ├── 每个页面生成后即时验证完整性                              │
│  └── 不合格则重试（最多2次）                                  │
├─────────────────────────────────────────────────────────────┤
│  阶段3: 最终完整性检查                                        │
│  ├── 运行与构建验证（pnpm install + tsc + pnpm build）         │
│  ├── 页面清单核对（pages.json vs 实际文件）                   │
│  ├── 链接有效性检查（href 目标是否存在）                      │
│  ├── 导航一致性检查（侧边栏菜单是否匹配）                      │
│  ├── 内容完整性检查（表格数据、弹窗实现）                      │
│  └── 输出检查报告（validation_report.md）                    │
└─────────────────────────────────────────────────────────────┘
```

### pages.json 页面契约

核心创新点：通过 `pages.json` 锁定页面清单，作为生成"契约"：

- **锁定页面清单** - 明确要生成哪些页面，防止遗漏或过度生成
- **约束链接目标** - 所有链接必须指向契约中的有效页面
- **统一导航菜单** - 所有页面使用相同的侧边栏配置
- **支持即时验证** - 生成过程中可验证页面完整性

## 🎨 设计美学准则

**核心原则**：拒绝通用 AI 审美，追求独特、有辨识度的设计。

### ❌ 绝对禁止

| 类别 | 禁止项 |
|------|--------|
| 字体 | Inter、Roboto、Arial、Helvetica、系统默认 |
| 配色 | 白底紫渐变、Bootstrap 蓝、均匀分布的彩色 |
| 布局 | 标准三栏、对称网格、模板化设计 |

### ✅ 必须追求

| 维度 | 要求 |
|------|------|
| **字体** | 个性标题 + 精致正文，强字重对比（900 vs 400） |
| **色彩** | 主色突出（80% 视觉焦点）、点缀鲜明 |
| **动效** | 入场动画 + 错开延迟、悬停微交互 |
| **布局** | 不对称、元素叠加、打破网格、大量留白 |
| **细节** | 渐变背景、装饰边框、强烈阴影 |

### 风格选项

| 风格 | 适用场景 | 特色元素 |
|------|----------|----------|
| 工业硬朗 | 企业后台 | 硬阴影、粗线条、高对比 |
| 科技现代 | 数据大屏 | 发光效果、渐变背景、赛博朋克 |
| 暖调复古 | 电商平台 | 米白背景、砖红点缀、装饰边框 |
| 深色奢华 | 金融系统 | 深邃黑底、金色点缀、细腻纹理 |
| 清新自然 | 教育医疗 | 薄荷绿调、柔和阴影、圆润边角 |

详细美学指南见：[templates/design_aesthetics.md](templates/design_aesthetics.md)

## 🎯 核心功能

### generate 命令

**功能**：从 PRD 文档生成交互式原型

**支持的技术栈**：
| 技术栈 | 适用场景 | 输出 |
|--------|----------|------|
| **HTML + Tailwind CSS** | 快速原型、轻量演示 | 多个 HTML 文件 + Tailwind CDN |
| **React + shadcn/ui + Tailwind** | 现代化应用、美观实用 | React 组件 + shadcn/ui 风格 |

### 业务逻辑气泡

在 PRD 文档中使用 `<@>业务逻辑说明<@>` 标记，生成原型时会**自动转换为悬停提示气泡**。

**特点**：
- 💡 图标标识有业务说明
- 悬停显示，不影响页面正常交互
- 支持多行文本，超长内容可滚动
- 适合向客户/开发讲解产品设计逻辑

**使用示例**：
```
PRD 中写：
新增用户按钮 <@>点击打开新增表单弹窗，必填字段：用户名、姓名<@>

原型生成后：
[新增用户] 💡 ← 悬停显示气泡提示
```

**转换规则**：详见 [commands/generate.md](commands/generate.md) 中的"业务逻辑标记转换"章节

**生成的目录结构**：
```
prd/prototype/                  # 原型目录（固定路径）
├── mapping.md              # 映射文档（记录 PRD 与原型的依赖关系）
├── index.html              # 首页/登录页
├── dashboard.html          # 仪表盘
├── user-management.html    # 用户管理（含 CRUD 弹窗）
├── order-management.html   # 订单管理（含详情抽屉）
└── settings.html           # 系统设置
```

**⚠️ 重要**：所有页面都直接放在 `prd/prototype/` 目录下，不要创建子目录。链接直接写文件名即可。

**每个页面包含**：
- Logo（点击返回仪表盘）
- 侧边栏导航菜单
- 面包屑导航
- 主内容区（表格/表单 + 弹窗）

**执行流程（需求/项目经理模式）**：
1. 检查 PRD 文档，确定产物路径（prd/prototype/）
2. 扫描并读取模块 PRD（基于实际存在的模块 PRD 文件）
3. 从模块 PRD 提取页面内容（功能需求、字段定义、界面设计）
4. 选择使用人身份（需求/项目经理 或 研发人员）
5. 选择设计风格（仅需求/项目经理模式，4种预设+自定义）
6. 确认页面契约（pages.json）
7. 逐页生成原型内容（HTML + Tailwind CSS）
8. 完整性检查
9. 生成映射文档（mapping.md）
10. 确认完成并提示预览

**执行流程（研发人员模式）**：
1. 检查 PRD 文档，确定产物路径（prd/prototype/）
2. 扫描并读取模块 PRD（基于实际存在的模块 PRD 文件）
3. 从模块 PRD 提取页面内容（功能需求、字段定义、界面设计）
4. 选择使用人身份 → 研发人员
5. 确认技术栈：React 18 + Ant Design + Zustand + React Router v6
5.5. 检测并安装依赖 Skills（vercel-react-best-practices、vercel-composition-patterns）
6. 全局分析与组件设计（提取公共组件、类型定义、Mock 数据，使用 composition-patterns） + 视觉风格选择
7. 生成项目脚手架（Vite + TypeScript + SPA 架构）
8. 生成全局公共组件（CommonTable、CommonModal 等）
9. 逐页生成页面组件（使用 react-best-practices 确保代码质量）
10. 路由注册与整合
11. 运行与构建验证（pnpm install + tsc --noEmit + pnpm build，失败则修复重试）
12. 最终完整性检查（TypeScript 编译、路由、Mock 数据、构建产物）
13. 确认完成，提示 pnpm run dev

### check 命令

**功能**：检查原型与 PRD 的同步状态

**执行流程**：
1. 读取映射文档（mapping.md）
2. 读取所有 PRD 当前版本
3. 对比每页依赖的 PRD 版本
4. 输出检查报告（同步/需更新/缺失）

**适用场景**：
- PRD 更新后检查原型是否需要同步
- 定期检查原型与 PRD 的一致性

### update 命令

**功能**：增量更新原型页面

**执行流程**：
1. 执行同步检查
2. 展示待更新页面列表
3. 用户确认更新范围
4. 读取 PRD 变更内容
5. 定向更新受影响的页面
6. 更新映射文档

**适用场景**：
- PRD 版本更新后同步原型
- 新增模块 PRD 后生成对应原型
- 删除模块 PRD 后移除对应原型

### preview 命令

**功能**：预览和导出生成的原型

**执行流程**：
1. 检查原型目录是否存在
2. 在浏览器中打开原型首页
3. 提供导出选项（ZIP 打包等）

## 📋 模块 PRD 页面映射规则

**⚠️ 核心原则：页面内容严格依赖模块 PRD，不依赖主 PRD 的模块清单！**

从模块 PRD 文档中提取页面信息：

| 模块 PRD 章节 | 映射为 |
|--------------|--------|
| 第3章 详细功能需求 | 页面功能、按钮操作 |
| 第4章 数据字段定义 | 表格列、表单字段 |
| 第5章 用户界面设计 | 页面布局、弹窗内容 |
| 第6章 业务规则与边界 | 校验逻辑、提示信息 |

从主 PRD 提取基础信息：

| 主 PRD 内容 | 映射为 |
|------------|--------|
| 项目名称 | Logo 文字 |
| 用户角色 | 权限控制和导航菜单 |
| 业务流程图 | 页面跳转关系 |

## ⚠️ 重要原则

1. **一个模块 PRD 一个页面**：每个模块 PRD 只生成一个页面，CRUD 操作通过弹窗实现
2. **内容依赖模块 PRD**：页面内容严格基于模块 PRD 的具体描述，不依赖主 PRD 的模块清单
3. **弹窗优先**：新增、编辑、详情、删除等操作都在页面内通过弹窗完成，不生成独立页面
4. **完整导航结构**：每个页面必须包含 Logo（点击返回首页）、侧边栏菜单、面包屑导航
5. **内容完整**：表格必须有数据和操作列，表单必须有完整字段，禁止使用 alert/confirm/prompt
6. **统一图标库**：所有技术栈统一使用 Lucide 图标，保持视觉一致
7. **身份区分**：需求/项目经理模式使用 HTML+Tailwind，研发人员模式使用 React 18+Ant Design+Zustand
8. **SPA 架构**：研发人员模式生成完整的 SPA 单页应用，包含路由、布局、公共组件、Mock 数据
9. **代码质量**：研发人员模式产物是正式前端项目，需 TypeScript 严格类型、CSS Modules 样式隔离

## 📋 页面规划原则

**页面数量 = 固定页面（2个） + 模块 PRD 数量**

```
✅ 正确做法（基于实际存在的模块 PRD）：
- 扫描到 3 个模块 PRD → 生成 5 个页面（2 固定 + 3 模块）
- 登录页 → index.html
- 仪表盘 → dashboard.html
- 用户管理（M001_prd.md） → user-management.html（含弹窗）
- 订单管理（M002_prd.md） → order-management.html（含抽屉）
- 商品管理（M003_prd.md） → product-management.html（含弹窗）

❌ 错误做法：
- 依赖主 PRD 的模块清单（可能有 10 个模块）
- 但实际只生成了 3 个模块 PRD
- 却生成了 10 个原型页面（内容凭空猜测）
```

## 🔗 与其他技能的协作

- **前置依赖**：需要先有 PRD 文档（由 `/prd-suite` 生成）
- **后续流程**：原型确认后可进入开发阶段

## 📖 详细流程

完整工作流程请参考：
- [commands/generate.md](commands/generate.md) - 原型生成详细流程
- [commands/check.md](commands/check.md) - 同步状态检查流程
- [commands/update.md](commands/update.md) - 增量更新流程
- [commands/preview.md](commands/preview.md) - 原型预览和导出

## 👤 使用人身份选择

在生成原型前，首先选择使用人身份：

| 身份 | 技术栈 | 适用场景 | 后续流程 |
|------|--------|----------|----------|
| **需求、项目经理** | HTML + Tailwind CSS | 快速原型、产品演示、需求评审 | 进入设计风格选择 |
| **研发人员** | React 18 + Ant Design + Zustand | 开发团队对接、技术评审、项目实现 | 全局分析+脚手架+逐页生成 |

### 研发人员模式技术选型

| 技术项 | 选型 |
|--------|------|
| React | 18.x |
| 路由 | React Router v6 |
| 状态管理 | Zustand |
| UI 组件库 | Ant Design |
| 样式方案 | Ant Design 内置 + CSS Modules |
| TypeScript | 严格模式 |
| 构建工具 | Vite |
| 架构 | SPA 单页应用 |

### 研发人员模式特点

- **SPA 架构**：React Router v6 路由，Ant Design Pro 风格布局
- **视觉风格**：Ant Design Pro 官方规范（preview.pro.ant.design），固定蚂蚁蓝 #1677FF 主色
- **组件拆分**：先分析全局公共组件，再逐页生成页面组件
- **类型安全**：完整 TypeScript 类型定义
- **Mock 数据**：内置模拟数据层，无需后端即可运行
- **正式项目**：产物可直接作为项目实现代码使用
- **代码质量**：使用 `vercel-react-best-practices` 和 `vercel-composition-patterns` skills 确保代码质量
- **自动安装**：流程中自动检测并安装所需 skills，未安装时 fallback 到内置规则

## 🎨 预设设计风格选择

**⚠️ 需求/项目经理模式**：进入下方完整设计风格选择流程（4 种预设 JSON 风格 + 自定义输入）。

**⚠️ 研发人员模式**：在步骤 6R.4.5 中进行视觉风格选择（4 种预设 + 自定义），通过 Ant Design ConfigProvider + CSS 变量应用。

在生成原型前，提供预设设计风格供用户选择，支持自定义输入。

### 选择流程

1. **扫描预设风格** - 从 `templates/design/` 目录读取预设风格文件
2. **展示选项** - 4 个预设风格 + 1 个自定义输入选项
3. **用户选择** - 选择预设风格或输入自定义规范
4. **确认保存** - 确认后用于后续页面生成

### 预设风格清单

| 风格 | 主色 | 基础单位 | 适用场景 | 核心特征 |
|------|------|----------|----------|----------|
| **众诚** | `#246FE5` | 4px | 企业中后台 | 极简、清晰、标准化、反馈明确 |
| **类Ant Design** | `#165DFF` | 8px | 企业中后台 | 阿里官方、确定性、自然流畅 |
| **类Element Plus** | `#409EFF` | 8px | Vue3 中后台 | Vue3 经典、清晰易用、简约高效 |
| **类Arco Design** | `#165DFF` | 8px | 企业中后台 | 字节官方、简洁直观、高效易用 |

### 自定义输入

用户可选择"自定义输入"选项，提供两种输入方式：
- **JSON 格式** - 直接粘贴完整的风格 JSON 规范
- **自然语言** - 描述设计偏好，AI 将转换为规范

### 设计风格文件结构

预设风格 JSON 文件包含：
- `design_philosophy` - 设计哲学与原则
- `general_constraints` - 强制约束规则
- `global_style` - 全局样式（颜色、字体、布局）
- `component_rules` - 组件规范
- `ai_quick_guide` - 快速参考信息

详细选择流程见：[commands/generate.md](commands/generate.md) 步骤 4-5

---

*最后更新：2026-04-09 (研发人员模式完整流程 + 运行与构建验证机制)*