prd-to-demo

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

来源: 自建（融合 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)

原型标注规范

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

<!-- [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 模拟关键状态：

// 购物车计数
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 列
• 表格横向滚动
• 抽屉式筛选面板

/* 响应式断点 */
@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，包含所有页面：

<!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 分钟就能看到产品的样子。"