# Prd To Demo

> PRD转可交互原型：根据产品需求文档自动生成HTML高保真原型Demo，支持多页面、交互链路、响应式布局。当用户说'根据PRD生成原型'、'把需求转成Demo'、'PRD转原型'、'生成产品原型'、'需求文档转可交互页面'、'做个原型看看'、'根据需求出Demo'时触发。核心特点：自动解析PRD结构、智能页面拆分、组件映射、交互链路串联、一键生成可运行HTML。

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

---


> **来源**: 自建（融合 huashu-design + frontend-design + BMAD 方法论）
>
> **发布时间**: 2026-04-29
>
> **理念**: "PRD 不应该只停留在文档里，5 分钟变成可点击的原型。"

# 🎨 PRD 转可交互原型

把产品需求文档变成可点击、可交互的 HTML 原型 Demo。

---

## 🎯 核心能力

| 能力 | 说明 |
|------|------|
| **PRD 解析** | 自动识别页面列表、功能模块、交互流程 |
| **页面生成** | 首页/列表/详情/表单/个人中心/仪表盘等 |
| **组件映射** | 需求描述 → 对应 UI 组件 |
| **交互链路** | 按钮点击跳转、表单提交、状态切换、弹窗 |
| **响应式** | 桌面端 + 移动端自适应 |
| **需求追溯** | 每个元素标注对应 PRD 条目编号 |

---

## 📋 工作流程

```
用户输入 PRD → 解析页面结构 → 生成页面清单
    → 设计信息架构 → 生成各页面 HTML
    → 串联交互链路 → 输出单文件原型
```

---

## 🔍 PRD 解析框架

### 第一步：识别页面清单

从 PRD 中提取所有独立页面：

| PRD 关键词 | 对应页面类型 |
|-----------|-------------|
| "首页"、"Home"、"landing" | 首页 (Home) |
| "列表"、"List"、"目录"、"管理" | 列表页 (List) |
| "详情"、"Detail"、"查看" | 详情页 (Detail) |
| "表单"、"创建"、"编辑"、"提交" | 表单页 (Form) |
| "登录"、"注册"、"找回密码" | 认证页 (Auth) |
| "个人中心"、"我的"、"Profile" | 个人中心 (Profile) |
| "仪表盘"、"Dashboard"、"统计" | 仪表盘 (Dashboard) |
| "设置"、"配置"、"系统管理" | 设置页 (Settings) |
| "搜索"、"筛选"、"结果" | 搜索页 (Search) |
| "消息"、"通知"、"站内信" | 消息页 (Message) |

### 第二步：提取功能模块

每个页面下的功能点：

```
页面：商品列表页
├── 功能1：搜索框（按名称/分类搜索）
├── 功能2：筛选条件（价格区间/品牌/评分）
├── 功能3：商品卡片（图片/名称/价格/标签）
├── 功能4：分页器
├── 功能5：排序切换（综合/销量/价格）
└── 功能6：批量操作（收藏/对比/加入购物车）
```

### 第三步：识别交互流程

```
用户流程：
登录页 → 首页 → 商品列表 → 商品详情 → 购物车 → 订单确认 → 支付 → 订单成功

关键交互：
- 点击"登录"按钮 → 跳转首页
- 点击商品卡片 → 跳转商品详情
- 点击"加入购物车" → 底部购物车数字+1，toast提示
- 点击"结算" → 跳转订单确认页
```

---

## 🧩 组件映射表

| PRD 描述 | UI 组件 | 示例 |
|---------|--------|------|
| "搜索框"、"Search" | 搜索栏（输入框+搜索按钮） | `<input placeholder="搜索...">` |
| "筛选"、"Filter" | 筛选面板（下拉/复选/滑块） | 侧边筛选栏 |
| "卡片"、"Card" | 信息卡片（图片+标题+描述） | 商品卡片、文章卡片 |
| "列表"、"List" | 列表项（行布局） | 订单列表、消息列表 |
| "表格"、"Table" | 数据表格（表头+行+操作列） | 管理后台表格 |
| "表单"、"Form" | 输入表单（文本/选择/日期） | 注册表单、创建表单 |
| "按钮"、"Button" | 操作按钮（主要/次要/危险） | "提交"、"取消"、"删除" |
| "标签"、"Tag" | 状态标签（颜色区分） | "进行中"、"已完成" |
| "Tab"、"切换" | 选项卡切换 | 内容区域切换 |
| "弹窗"、"Modal" | 模态弹窗（确认/表单/提示） | 删除确认、快捷编辑 |
| "抽屉"、"Drawer" | 侧边抽屉（从右侧滑出） | 详情查看、筛选面板 |
| "导航"、"Nav" | 顶部/侧边导航栏 | 主导航、面包屑 |
| "轮播"、"Carousel" | 轮播图/Banner | 首页 Banner |
| "步进器"、"Steps" | 步骤条 | 订单流程、注册流程 |
| "分页"、"Pagination" | 分页器 | 列表分页 |
| "空状态"、"Empty" | 空状态提示 | 无数据、无搜索结果 |
| "加载"、"Loading" | 加载状态 | 骨架屏、转圈 |
| "图表"、"Chart" | 数据可视化 | 折线图、柱状图、饼图 |

---

## 📐 原型设计规范

### 视觉风格

```
风格：简洁专业的原型灰度风格（不抢内容风头）
色彩：
  - 主背景：#F5F5F5（浅灰）
  - 卡片背景：#FFFFFF（白色）
  - 主按钮：#1890FF（蓝色）
  - 次按钮：#FFFFFF + #D9D9D9 边框
  - 文字主色：#262626
  - 文字次要：#8C8C8C
  - 边框：#E8E8E8
  - 高亮/选中：#E6F7FF

字体：系统默认（-apple-system, BlinkMacSystemFont, Segoe UI）
圆角：8px（卡片），4px（按钮/输入框），999px（标签）
阴影：0 2px 8px rgba(0,0,0,0.08)
```

### 原型标注规范

每个可交互元素必须带有需求追溯标注：

```html
<!-- [PRD-3.2.1] 商品搜索框：支持按名称模糊搜索 -->
<div class="search-bar" data-prd="3.2.1">...</div>

<!-- [PRD-4.1.2] 加入购物车按钮：点击后toast提示"已加入" -->
<button class="btn-primary" data-prd="4.1.2" onclick="addToCart()">加入购物车</button>
```

页面角落显示悬浮标注面板：
```
┌─────────────────┐
│ 需求追溯面板     │
│ [PRD-3.2.1] 搜索框│
│ [PRD-4.1.2] 加购  │
│ [PRD-5.1.1] 分页  │
└─────────────────┘
```

---

## 🖥️ 页面模板

### 模板1：首页 (Home)

```
布局：
┌─────────────────────────────┐
│ [导航栏] Logo  首页 分类 搜索  登录│
├─────────────────────────────┤
│ [Banner轮播]                  │
│  ● ○ ○                        │
├─────────────────────────────┤
│ [功能入口] 图标网格 4列        │
│  🏠  🛒  📦  ⭐               │
├─────────────────────────────┤
│ [推荐列表] 商品卡片横向滚动    │
│ [img] [img] [img] [img]      │
├─────────────────────────────┤
│ [分类区块] 标题 + 查看更多 →  │
│ [商品卡片网格] 2列             │
├─────────────────────────────┤
│ [底部导航] 首页 分类 购物车 我的│
└─────────────────────────────┘
```

### 模板2：列表页 (List)

```
布局：
┌─────────────────────────────┐
│ [← 返回] 商品列表      [筛选]│
├─────────────────────────────┤
│ [搜索栏] 🔍 iPhone...        │
├─────────────────────────────┤
│ [排序Tab] 综合 | 销量 | 价格  │
├─────────────────────────────┤
│ [筛选标签] 全部 ✓ 手机 电脑   │
├─────────────────────────────┤
│ [商品卡片]                   │
│ [图] iPhone 15 Pro   ¥7999   │
│     苹果旗舰店 ★4.9 月销1万+ │
├─────────────────────────────┤
│ [商品卡片]                   │
│ [图] MacBook Air M3  ¥8999   │
│     苹果旗舰店 ★4.8 月销5000 │
├─────────────────────────────┤
│ [分页器] < 1 2 3 ... 10 >   │
├─────────────────────────────┤
│ [底部导航]                   │
└─────────────────────────────┘
```

### 模板3：详情页 (Detail)

```
布局：
┌─────────────────────────────┐
│ [←] 商品详情          [分享] │
├─────────────────────────────┤
│ [图片轮播]                    │
│     [大图占位]               │
│   ● ○ ○ ○                    │
├─────────────────────────────┤
│ ¥7999                        │
│ iPhone 15 Pro 256GB 白色钛金属│
│ 月销 1.2万+ | 评分 4.9       │
│ [满减] [包邮] [7天无理由]     │
├─────────────────────────────┤
│ [规格选择]                   │
│ 颜色：⚪ ⚫ 🔵                │
│ 容量：128GB 256GB 512GB      │
├─────────────────────────────┤
│ [Tab] 商品 | 评价 | 详情     │
│ [内容区域]                   │
├─────────────────────────────┤
│ [底部操作栏]                 │
│ [客服] [收藏] [加入购物车] [立即购买]│
└─────────────────────────────┘
```

### 模板4：表单页 (Form)

```
布局：
┌─────────────────────────────┐
│ [←] 创建订单                 │
├─────────────────────────────┤
│ [地址卡片]                   │
│ 📍 张三 138****8888          │
│    北京市朝阳区...            │
│    [更换地址 >]               │
├─────────────────────────────┤
│ [商品信息]                   │
│ [缩略图] iPhone 15 Pro x1    │
│          ¥7999               │
├─────────────────────────────┤
│ [表单区域]                   │
│ 配送方式：○ 快递  ○ 自提     │
│ 发票：○ 个人  ○ 公司        │
│ 备注：______________         │
├─────────────────────────────┤
│ [金额汇总]                   │
│ 商品总额：¥7999              │
│ 运费：¥0                     │
│ 实付：¥7999                  │
├─────────────────────────────┤
│ [提交按钮]                   │
│ [      提交订单      ]       │
└─────────────────────────────┘
```

### 模板5：仪表盘 (Dashboard)

```
布局：
┌─────────────────────────────┐
│ [顶部导航] 管理系统    [通知][头像]│
├──────────┬──────────────────┤
│ [侧边栏]  │ [数据概览]        │
│ 仪表盘    │ ┌──┐ ┌──┐ ┌──┐ ┌──┐│
│ 用户管理  │ │订单│ │用户│ │收入│ │转化││
│ 商品管理  │ └──┘ └──┘ └──┘ └──┘│
│ 订单管理  │                   │
│ 数据统计  │ [图表区域]        │
│ 系统设置  │ [折线图] [饼图]    │
│          │                   │
│          │ [最近订单表格]     │
│          │ 订单号 用户 金额 状态│
└──────────┴──────────────────┘
```

---

## 🔄 交互链路设计

### 页面跳转映射

根据 PRD 中的用户流程，建立页面跳转表：

```
| 当前页面 | 触发元素 | 动作 | 目标页面 | PRD条目 |
|---------|---------|------|---------|---------|
| 登录页 | "登录"按钮 | 点击 | 首页 | 2.1.1 |
| 首页 | Banner图 | 点击 | 活动详情 | 3.1.2 |
| 首页 | 商品卡片 | 点击 | 商品详情 | 3.2.1 |
| 商品详情 | "加入购物车" | 点击 | Toast提示+数字更新 | 4.1.2 |
| 商品详情 | "立即购买" | 点击 | 订单确认 | 4.2.1 |
| 订单确认 | "提交订单" | 点击 | 支付页 | 5.1.1 |
| 支付页 | "支付成功" | 模拟 | 订单成功 | 5.2.1 |
```

### 交互状态模拟

原型中用 JavaScript 模拟关键状态：

```javascript
// 购物车计数
let cartCount = 0;
function addToCart() {
    cartCount++;
    document.querySelector('.cart-badge').textContent = cartCount;
    showToast('已加入购物车');
}

// 表单验证
function submitForm() {
    const name = document.querySelector('#name').value;
    if (!name) {
        showError('姓名不能为空');
        return;
    }
    navigateTo('success');
}

// Tab切换
function switchTab(tabId) {
    document.querySelectorAll('.tab-content').forEach(t => t.hidden = true);
    document.querySelector('#tab-' + tabId).hidden = false;
}
```

---

## 📱 响应式适配

### 桌面端 (>768px)
- 侧边导航展开
- 商品网格 4 列
- 表格完整显示所有列

### 移动端 (≤768px)
- 底部导航栏
- 商品网格 2 列
- 表格横向滚动
- 抽屉式筛选面板

```css
/* 响应式断点 */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .bottom-nav { display: flex; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
```

---

## 🚀 使用示例

### 示例1：电商PRD转原型

```
用户：根据以下PRD生成可交互原型

PRD：
1. 用户登录后进入首页，看到推荐商品Banner
2. 点击商品进入详情页，可选规格
3. 加入购物车或立即购买
4. 购物车可编辑数量，显示总价
5. 结算页填写地址，提交订单
6. 订单管理页查看历史订单

→ 生成原型：
  页面清单：登录页、首页、商品详情、购物车、订单确认、订单成功、订单列表
  交互链路：完整电商主流程
  输出：单文件 HTML（含所有页面，通过导航切换）
```

### 示例2：后台管理PRD转原型

```
用户：这个后台管理系统的PRD，帮我出个原型看看

PRD：
- 左侧菜单：仪表盘、用户管理、内容管理、系统设置
- 仪表盘：数据卡片 + 图表 + 最近操作记录
- 用户管理：表格（增删改查）+ 搜索筛选 + 分页
- 内容管理：列表 + 创建/编辑表单 + 发布状态

→ 生成原型：
  布局：侧边栏 + 主内容区
  页面：仪表盘、用户列表、用户表单、内容列表、内容表单
  交互：菜单切换、表格操作、表单验证
```

### 示例3：社交APP PRD转原型

```
用户：做一个社交APP的原型

PRD：
- 底部Tab：首页、发现、消息、我的
- 首页：内容Feed流（图文/视频卡片）
- 发现：搜索 + 推荐标签 + 热门内容
- 消息：聊天列表 + 聊天详情
- 我的：个人信息 + 设置入口

→ 生成原型：
  风格：移动端优先
  页面：5个主页面 + 聊天详情页
  交互：底部Tab切换、Feed滚动、聊天模拟
```

---

## 🎨 输出格式

默认输出**单文件 HTML**，包含所有页面：

```html
<!DOCTYPE html>
<html>
<head>
  <title>产品原型 - {产品名}</title>
  <style>
    /* 全局样式 */
    /* 页面容器（每个页面一个section，默认只显示一个） */
  </style>
</head>
<body>
  <!-- 页面1：登录页 -->
  <section id="page-login" class="page active">...</section>
  
  <!-- 页面2：首页 -->
  <section id="page-home" class="page">...</section>
  
  <!-- 页面3：列表页 -->
  <section id="page-list" class="page">...</section>
  
  <!-- ...更多页面 -->
  
  <!-- 需求追溯面板 -->
  <div id="prd-trace-panel">...</div>
  
  <script>
    // 页面切换
    // 交互模拟
    // Toast提示
  </script>
</body>
</html>
```

**可选输出多页面站点**（适合复杂系统）：
```
demo/
├── index.html          # 登录页/首页
├── home.html
├── list.html
├── detail.html
├── form.html
├── profile.html
└── css/
    └── prototype.css
```

---

## 🆚 与其他设计Skill的关系

| | prd-to-demo | huashu-design | frontend-design | html-ppt-skill |
|---|---|---|---|---|
| **输入** | PRD/需求文档 | 文字描述 | 文字描述 | 文字描述 |
| **输出** | 可交互原型 | 高保真HTML页面 | 前端界面代码 | 演示文稿PPT |
| **用途** | 需求验证、演示 | 品牌网站/落地页 | 产品界面开发 | 汇报演示 |
| **交互** | 完整页面跳转+状态 | 静态展示为主 | 组件级交互 | 翻页+简单动画 |
| **触发** | "PRD转原型" | "做网页" | "设计前端" | "做PPT" |

**最佳实践**：
- 需求阶段：用 `prd-to-demo` 快速出原型，与产品经理/客户对齐
- 设计阶段：用 `huashu-design` / `frontend-design` 做高保真视觉稿
- 开发阶段：用 `bmad-method` / `ai-dlc` 管理开发流程
- 汇报阶段：用 `html-ppt-skill` 做项目汇报

---

> "PRD 是蓝图，原型是模型。把蓝图变成模型，5 分钟就能看到产品的样子。"