prd-prototype

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

PRD 原型生成技能

PRD Prototype Generation Skill

⚡ 快速开始

⚡ Quick Start

何时使用：

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

使用方式：

/prd-prototype  # 启动原型生成流程

产物路径：

PRD 文档位置        → 原型产物位置
prd/                → prd/prototype/

When to Use:

PRD document is completed and needs to generate interactive prototypes for demonstration
Need to quickly validate product design and page flows
Need visual prototypes for team review before development
User uploaded a PRD document and requested prototype generation

How to Use:

/prd-prototype  # Initiate prototype generation process

Output Path:

PRD Document Location        → Prototype Output Location
prd/                → prd/prototype/

📚 核心资源导航

📚 Core Resource Navigation

资源	用途	何时读取
`commands/generate.md`	原型生成详细流程	执行 generate 命令时
`commands/preview.md`	原型预览和导出流程	执行 preview 命令时
`templates/html_tailwind.html`	HTML+Tailwind 模板	生成 Tailwind 原型时
`templates/react_shadcn.html`	React+shadcn/ui+Tailwind 模板	生成 React 原型时

Resource	Purpose	When to Access
`commands/generate.md`	Detailed prototype generation process	When executing the generate command
`commands/preview.md`	Prototype preview and export process	When executing the preview command
`templates/html_tailwind.html`	HTML+Tailwind template	When generating Tailwind-based prototypes
`templates/react_shadcn.html`	React+shadcn/ui+Tailwind template	When generating React-based prototypes

🎯 核心功能

🎯 Core Features

generate 命令

generate Command

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

支持的技术栈：

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

生成的目录结构：

prd/prototype/                  # 原型目录（固定路径）
├── index.html              # 首页/登录页
├── dashboard.html          # 仪表盘
├── user-management.html    # 用户管理（含 CRUD 弹窗）
├── order-management.html   # 订单管理（含详情抽屉）
└── settings.html           # 系统设置

⚠️ 重要：所有页面都直接放在

prd/prototype/

目录下，不要创建子目录。链接直接写文件名即可。

每个页面包含：

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

执行流程：

检查 PRD 文档，确定产物路径（prd/prototype/）
读取 PRD 文档（main_prd.md + modules/）
分析功能模块和业务流程
生成页面列表和跳转关系
选择技术栈（HTML+Tailwind、Vue+Naive UI、React+Ant Design）
逐页生成原型内容
生成路由和导航
检查和修复链接路径（确保跨目录跳转正确）
确认完成并提示预览

Function: Generate interactive prototypes from PRD documents

Supported Tech Stacks:

Tech Stack	Applicable Scenario	Output
HTML + Tailwind CSS	Quick prototypes, lightweight demos	Multiple HTML files + Tailwind CDN
React + shadcn/ui + Tailwind	Modern applications, aesthetic and practical	React components + shadcn/ui style

Generated Directory Structure:

prd/prototype/                  # Prototype directory (fixed path)
├── index.html              # Homepage/Login page
├── dashboard.html          # Dashboard
├── user-management.html    # User Management (includes CRUD modals)
├── order-management.html   # Order Management (includes detail drawer)
└── settings.html           # System Settings

⚠️ Important: All pages should be placed directly in the

prd/prototype/

directory, do not create subdirectories. Links should use filenames directly.

Each Page Includes:

Logo (click to return to dashboard)
Sidebar navigation menu
Breadcrumb navigation
Main content area (table/form + modal)

Execution Flow:

Check PRD document and confirm output path (prd/prototype/)
Read PRD document (main_prd.md + modules/)
Analyze functional modules and business flows
Generate page list and navigation relationships
Select tech stack (HTML+Tailwind, Vue+Naive UI, React+Ant Design)
Generate prototype content page by page
Generate routes and navigation
Check and fix link paths (ensure cross-directory navigation works correctly)
Confirm completion and prompt for preview

preview 命令

preview Command

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

执行流程：

检查原型目录是否存在
在浏览器中打开原型首页
提供导出选项（ZIP 打包等）

Function: Preview and export generated prototypes

Execution Flow:

Check if prototype directory exists
Open prototype homepage in browser
Provide export options (ZIP packaging, etc.)

📋 PRD 页面映射规则

📋 PRD Page Mapping Rules

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

PRD 内容	映射为
功能模块清单	主要页面列表
业务流程图	页面跳转关系
用户角色	权限控制和导航菜单
详细功能需求	页面元素和交互
用户故事	页面操作和反馈

Extract page information from PRD documents:

PRD Content	Mapped to
Functional module list	Main page list
Business flow diagram	Page navigation relationships
User roles	Permission control and navigation menu
Detailed functional requirements	Page elements and interactions
User stories	Page operations and feedback

⚠️ 重要原则

⚠️ Key Principles

一个模块一个页面：每个功能模块只生成一个页面，CRUD 操作通过弹窗实现
弹窗优先：新增、编辑、详情、删除等操作都在页面内通过弹窗完成，不生成独立页面
完整导航结构：每个页面必须包含 Logo（点击返回首页）、侧边栏菜单、面包屑导航
内容完整：表格必须有数据和操作列，表单必须有完整字段，禁止使用 alert/confirm/prompt
技术栈一致：整个原型使用同一技术栈，不混用
统一图标库：所有技术栈统一使用 Lucide 图标，保持视觉一致

One Module One Page: Each functional module generates only one page; CRUD operations are implemented via modals
Modal Priority: Operations like add, edit, detail, delete are completed within the page via modals, do not generate independent pages
Complete Navigation Structure: Each page must include Logo (click to return to homepage), sidebar menu, and breadcrumb navigation
Complete Content: Tables must have data and operation columns; forms must have complete fields;禁止使用 alert/confirm/prompt → wait, no, 这里要翻译：Forms must have complete fields; do not use alert/confirm/prompt
Consistent Tech Stack: The entire prototype uses the same tech stack, no mixing
Unified Icon Library: All tech stacks use Lucide icons uniformly to maintain visual consistency

📋 页面规划原则

📋 Page Planning Principles

✅ 正确做法：
- 用户管理 → user-management.html（含新增/编辑/详情/删除弹窗）
- 订单管理 → order-management.html（含详情抽屉）
- 系统设置 → settings.html

❌ 错误做法：
- 用户列表 → user-list.html
- 用户新增 → user-add.html      ← 不应该独立页面
- 用户编辑 → user-edit.html     ← 不应该独立页面
- 用户详情 → user-detail.html   ← 不应该独立页面

✅ Correct Practice:
- User Management → user-management.html (includes add/edit/detail/delete modals)
- Order Management → order-management.html (includes detail drawer)
- System Settings → settings.html

❌ Incorrect Practice:
- User List → user-list.html
- User Add → user-add.html      ← Should not be an independent page
- User Edit → user-edit.html     ← Should not be an independent page
- User Detail → user-detail.html   ← Should not be an independent page

🔗 与其他技能的协作

🔗 Collaboration with Other Skills

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

Pre-dependency: PRD documents must exist first (generated by
```
/prd-suite
```
)
Subsequent process: After prototype confirmation, development phase can begin

📖 详细流程

📖 Detailed Process

完整工作流程请参考：

commands/generate.md - 原型生成详细流程
commands/preview.md - 原型预览和导出

For complete workflow, please refer to:

commands/generate.md - Detailed prototype generation process
commands/preview.md - Prototype preview and export

🎨 设计风格和主题色

🎨 Design Styles and Theme Colors

在生成原型前，会根据 PRD 内容分析项目类型，推荐合适的设计风格和主题色。

Before generating prototypes, the project type will be analyzed based on PRD content to recommend suitable design styles and theme colors.

支持的设计风格

Supported Design Styles

风格	特点	适用场景
商务简约	简洁大气、信息清晰、层级分明	企业管理、后台系统
科技现代	深色背景、渐变色彩、科技感	数据大屏、监控平台
清新活力	明亮配色、圆润卡片、年轻感	社交、教育、工具类
专业稳重	低饱和度、稳重配色、信任感	金融、医疗、政务

Style	Features	Applicable Scenario
Business Minimalist	Clean and elegant, clear information, distinct hierarchy	Enterprise management, backend systems
Tech Modern	Dark background, gradient colors, tech feel	Data dashboards, monitoring platforms
Fresh and Vibrant	Bright color scheme, rounded cards, youthful vibe	Social, education, tool applications
Professional and Stable	Low saturation, stable color scheme, trustworthy	Finance, healthcare, government services

预设主题色方案

Preset Theme Color Schemes

方案	主色	适用场景
商务蓝	`#1890ff`	企业管理、后台系统
科技蓝	`#1677ff`	数据平台、SaaS
金融绿	`#52c41a`	金融、支付、银行
医疗绿	`#00a870`	医疗、健康
电商橙	`#ff6b00`	电商、零售
活力紫	`#722ed1`	社交、创意工具
教育蓝	`#2f54eb`	教育、培训
物流橙	`#fa8c16`	物流、供应链

用户也可自定义主题色。

最后更新：2026-03-25 (移除 Vue 技术栈 + React 改用 shadcn/ui + 移除 pages 子目录)

Scheme	Primary Color	Applicable Scenario
Business Blue	`#1890ff`	Enterprise management, backend systems
Tech Blue	`#1677ff`	Data platforms, SaaS
Financial Green	`#52c41a`	Finance, payment, banking
Healthcare Green	`#00a870`	Healthcare, wellness
E-commerce Orange	`#ff6b00`	E-commerce, retail
Vibrant Purple	`#722ed1`	Social, creative tools
Education Blue	`#2f54eb`	Education, training
Logistics Orange	`#fa8c16`	Logistics, supply chain

Users can also customize theme colors.

Last updated: 2026-03-25 (Removed Vue tech stack + React switched to shadcn/ui + Removed pages subdirectory)