| name | fast-prototype |
| description | Transform natural language requirements into interactive prototypes and professional documentation through a 5-stage workflow. Generate structured PRD (Mermaid flowchart + ASCII UI + element table), interactive HTML prototype (Vue3 + Tailwind + Element Plus), and complete documentation (PRD, design specs, technical docs). Use for: (1) Rapid prototyping from requirements, (2) Creating structured PRD documents, (3) Generating interactive HTML prototypes, (4) Producing design specifications, (5) Creating frontend/backend technical documentation. |
Fast Prototype
Transform product requirements into structured PRD, interactive prototype, and professional documentation.
Quick Start
User requirement → Structured PRD → User confirmation → Prototype + Documents
Workflow
Stage 1: Requirement Collection
Receive natural language requirement description. Ask clarifying questions if needed:
- Target audience
- Core features
- Number of main pages
- Reference products
Stage 2: Generate Structured PRD
Generate structured PRD with three components:
1. Mermaid Flowchart (Page navigation logic)
flowchart TD
Login[登录页面] --> Home[首页]
Home --> CustomerList[客户列表]
2. ASCII UI Layout (Must use ui type annotation)
```ascii:ui
+-----------------------+
| 登录页面 |
+-----------------------+
| 账号: [________] |
| 密码: [________] |
+-----------------------+
```
3. Element Function Table
| Page | Element | Type | Function |
|---|
| Login | Username input | Input | Enter username |
| Login | Password input | Input | Enter password |
Stage 3: User Confirmation
Show the structured PRD and ask if modifications are needed.
If confirmed no changes, proceed to Stage 4.
Stage 4: Generate Interactive Prototype
Generate single-file HTML with:
- Framework: Vue 3 (CDN)
- Styling: Tailwind CSS (CDN)
- Components: Element Plus (CDN)
- Routing: Vue Router (CDN)
File naming: [Product Name]-prototype.html
Component patterns: See references/component-styles.md
Stage 5: Generate Documentation
Ask which documents to generate:
- Standard PRD document
- Interface design document
- Frontend technical document
- Backend technical document
PRD template: references/prd-template.md
Design specs: references/design-specs.md
Frontend template: references/frontend-tech.md
Backend template: references/backend-tech.md
Technical Stack
- Framework: Vue 3 Composition API
- Styling: Tailwind CSS
- Components: Element Plus
- Router: Vue Router 4
- Build: Single HTML file (no build step)
Quality Checklist
Structured PRD
Interactive Prototype
Documentation
Common Patterns
When user requirement is too simple
Ask for:
- Target audience
- Core features
- Page count
- Reference products
When user wants modifications but unclear
Provide options:
- Modify flowchart
- Modify UI layout
- Modify function table
- Add page
- Delete page
When prototype code is too complex for single file
- For simple prototypes: Keep single-file
- For complex prototypes: Inform user that multi-file structure is recommended
