メニュー
PRD转可交互原型：根据产品需求文档自动生成HTML高保真原型Demo，支持多页面、交互链路、响应式布局。当用户说'根据PRD生成原型'、'把需求转成Demo'、'PRD转原型'、'生成产品原型'、'需求文档转可交互页面'、'做个原型看看'、'根据需求出Demo'时触发。核心特点：自动解析PRD结构、智能页面拆分、组件映射、交互链路串联、一键生成可运行HTML。
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/gaoqiongxie/skills-ai --skill prd-to-demoコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
网络安全分析师技能库：754个结构化安全技能，覆盖威胁狩猎、数字取证、事件响应、渗透测试、代码安全审计、威胁情报、恶意软件分析等26个安全领域。映射MITRE ATT&CK v19.1、NIST CSF 2.0等五大框架。当用户说'安全分析'、'威胁狩猎'、'威胁情报'、'渗透测试'、'事件响应'、'MITRE'、'数字取证'、'恶意软件分析'、'红队'、'蓝队'、'SOC'、'网络攻防'时触发。与security-audit互补：security-audit聚焦代码层静态扫描，本Skill覆盖全栈安全分析工作流。
企业级全栈迭代工作流Agent：当用户说'开始开发这个需求'、'处理本次迭代'、'全栈开发闭环'、'跑一个迭代'、'enterprise iteration'、'迭代开发'、'需求交付'、'开发闭环'时触发。自动按需求→设计→开发→测试→Review→部署→记忆7阶段推进，维护迭代状态机，路径感知（自动读取需求目录与代码目录），协调多个子Skill协作完成企业级CRM全栈需求交付。支持状态回退、并行分支、上下文继承。
截图转可交互原型统一入口：根据UI设计稿、手绘草图或竞品截图自动生成HTML高保真原型，并自动联动screenshot-to-prd输出PRD、prd-to-demo完善交互。当用户说'根据截图生成原型'、'设计稿转Demo'、'草图转HTML'、'图片转可交互页面'、'复刻这个界面'、'仿照这个APP做原型'、'截图生成网页'时触发。核心特点：视觉分析自动还原布局、组件识别与映射、多截图串联页面流、与screenshot-to-prd/prd-to-demo形成设计驱动闭环。
SOC 職業分類に基づく
SKILL.md を表示中
| name | prd-to-demo |
| description | PRD转可交互原型：根据产品需求文档自动生成HTML高保真原型Demo，支持多页面、交互链路、响应式布局。当用户说'根据PRD生成原型'、'把需求转成Demo'、'PRD转原型'、'生成产品原型'、'需求文档转可交互页面'、'做个原型看看'、'根据需求出Demo'时触发。核心特点：自动解析PRD结构、智能页面拆分、组件映射、交互链路串联、一键生成可运行HTML。 |
来源: 自建（融合 huashu-design + frontend-design + BMAD 方法论）
发布时间: 2026-04-29
理念: "PRD 不应该只停留在文档里，5 分钟变成可点击的原型。"
把产品需求文档变成可点击、可交互的 HTML 原型 Demo。
| 能力 | 说明 |
|---|---|
| PRD 解析 | 自动识别页面列表、功能模块、交互流程 |
| 页面生成 | 首页/列表/详情/表单/个人中心/仪表盘等 |
| 组件映射 | 需求描述 → 对应 UI 组件 |
| 交互链路 | 按钮点击跳转、表单提交、状态切换、弹窗 |
| 响应式 | 桌面端 + 移动端自适应 |
| 需求追溯 | 每个元素标注对应 PRD 条目编号 |
用户输入 PRD → 解析页面结构 → 生成页面清单
→ 设计信息架构 → 生成各页面 HTML
→ 串联交互链路 → 输出单文件原型
从 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] 分页 │
└─────────────────┘
布局：
┌─────────────────────────────┐
│ [导航栏] Logo 首页 分类 搜索 登录│
├─────────────────────────────┤
│ [Banner轮播] │
│ ● ○ ○ │
├─────────────────────────────┤
│ [功能入口] 图标网格 4列 │
│ 🏠 🛒 📦 ⭐ │
├─────────────────────────────┤
│ [推荐列表] 商品卡片横向滚动 │
│ [img] [img] [img] [img] │
├─────────────────────────────┤
│ [分类区块] 标题 + 查看更多 → │
│ [商品卡片网格] 2列 │
├─────────────────────────────┤
│ [底部导航] 首页 分类 购物车 我的│
└─────────────────────────────┘
布局：
┌─────────────────────────────┐
│ [← 返回] 商品列表 [筛选]│
├─────────────────────────────┤
│ [搜索栏] 🔍 iPhone... │
├─────────────────────────────┤
│ [排序Tab] 综合 | 销量 | 价格 │
├─────────────────────────────┤
│ [筛选标签] 全部 ✓ 手机 电脑 │
├─────────────────────────────┤
│ [商品卡片] │
│ [图] iPhone 15 Pro ¥7999 │
│ 苹果旗舰店 ★4.9 月销1万+ │
├─────────────────────────────┤
│ [商品卡片] │
│ [图] MacBook Air M3 ¥8999 │
│ 苹果旗舰店 ★4.8 月销5000 │
├─────────────────────────────┤
│ [分页器] < 1 2 3 ... 10 > │
├─────────────────────────────┤
│ [底部导航] │
└─────────────────────────────┘
布局：
┌─────────────────────────────┐
│ [←] 商品详情 [分享] │
├─────────────────────────────┤
│ [图片轮播] │
│ [大图占位] │
│ ● ○ ○ ○ │
├─────────────────────────────┤
│ ¥7999 │
│ iPhone 15 Pro 256GB 白色钛金属│
│ 月销 1.2万+ | 评分 4.9 │
│ [满减] [包邮] [7天无理由] │
├─────────────────────────────┤
│ [规格选择] │
│ 颜色：⚪ ⚫ 🔵 │
│ 容量：128GB 256GB 512GB │
├─────────────────────────────┤
│ [Tab] 商品 | 评价 | 详情 │
│ [内容区域] │
├─────────────────────────────┤
│ [底部操作栏] │
│ [客服] [收藏] [加入购物车] [立即购买]│
└─────────────────────────────┘
布局：
┌─────────────────────────────┐
│ [←] 创建订单 │
├─────────────────────────────┤
│ [地址卡片] │
│ 📍 张三 138****8888 │
│ 北京市朝阳区... │
│ [更换地址 >] │
├─────────────────────────────┤
│ [商品信息] │
│ [缩略图] iPhone 15 Pro x1 │
│ ¥7999 │
├─────────────────────────────┤
│ [表单区域] │
│ 配送方式：○ 快递 ○ 自提 │
│ 发票：○ 个人 ○ 公司 │
│ 备注：______________ │
├─────────────────────────────┤
│ [金额汇总] │
│ 商品总额：¥7999 │
│ 运费：¥0 │
│ 实付：¥7999 │
├─────────────────────────────┤
│ [提交按钮] │
│ [ 提交订单 ] │
└─────────────────────────────┘
布局：
┌─────────────────────────────┐
│ [顶部导航] 管理系统 [通知][头像]│
├──────────┬──────────────────┤
│ [侧边栏] │ [数据概览] │
│ 仪表盘 │ ┌──┐ ┌──┐ ┌──┐ ┌──┐│
│ 用户管理 │ │订单│ │用户│ │收入│ │转化││
│ 商品管理 │ └──┘ └──┘ └──┘ └──┘│
│ 订单管理 │ │
│ 数据统计 │ [图表区域] │
│ 系统设置 │ [折线图] [饼图] │
│ │ │
│ │ [最近订单表格] │
│ │ 订单号 用户 金额 状态│
└──────────┴──────────────────┘
根据 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;
}
/* 响应式断点 */
@media (max-width: 768px) {
.sidebar { display: none; }
.bottom-nav { display: flex; }
.product-grid { grid-template-columns: repeat(2, 1fr); }
}
用户：根据以下PRD生成可交互原型
PRD：
1. 用户登录后进入首页，看到推荐商品Banner
2. 点击商品进入详情页，可选规格
3. 加入购物车或立即购买
4. 购物车可编辑数量，显示总价
5. 结算页填写地址，提交订单
6. 订单管理页查看历史订单
→ 生成原型：
页面清单：登录页、首页、商品详情、购物车、订单确认、订单成功、订单列表
交互链路：完整电商主流程
输出：单文件 HTML（含所有页面，通过导航切换）
用户：这个后台管理系统的PRD，帮我出个原型看看
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>
// 页面切换
// 交互模拟
可选输出多页面站点（适合复杂系统）：
demo/
├── index.html # 登录页/首页
├── home.html
├── list.html
├── detail.html
├── form.html
├── profile.html
└── css/
└── prototype.css
| 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 分钟就能看到产品的样子。"