| 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)
原型标注规范
每个可交互元素必须带有需求追溯标注：
<div class="search-bar" data-prd="3.2.1">...</div>
<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');
}
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>
</style>
</head>
<body>
<section id="page-login" class="page active">...</section>
<section id="page-home" class="page">...</section>
<section id="page-list" class="page">...</section>
<div id="prd-trace-panel">...</div>
<script>
</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 分钟就能看到产品的样子。"
