PRD Prototype Generation Skill

⚡ Quick Start

• 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

/prd-prototype  # Initiate prototype generation process

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

📚 Core Resource Navigation

commands/generate.md

commands/preview.md

templates/html_tailwind.html

templates/react_shadcn.html

🎯 Core Features

generate Command

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

prd/prototype/

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

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

preview Command

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

📋 PRD Page Mapping Rules

⚠️ Key Principles

1. One Module One Page: Each functional module generates only one page; CRUD operations are implemented via modals
2. Modal Priority: Operations like add, edit, detail, delete are completed within the page via modals, do not generate independent pages
3. Complete Navigation Structure: Each page must include Logo (click to return to homepage), sidebar menu, and breadcrumb navigation
4. 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
5. Consistent Tech Stack: The entire prototype uses the same tech stack, no mixing
6. Unified Icon Library: All tech stacks use Lucide icons uniformly to maintain visual consistency

📋 Page Planning Principles

✅ 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

• 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 - Detailed prototype generation process
• commands/preview.md - Prototype preview and export

🎨 Design Styles and Theme Colors

Supported Design Styles

Preset Theme Color Schemes

#1890ff

#1677ff

#52c41a

#00a870

#ff6b00

#722ed1

#2f54eb

#fa8c16