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.
Transform product requirements into structured PRD, interactive prototype, and professional documentation.
User requirement → Structured PRD → User confirmation → Prototype + Documents
Receive natural language requirement description. Ask clarifying questions if needed:
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 |
Show the structured PRD and ask if modifications are needed.
If confirmed no changes, proceed to Stage 4.
Generate single-file HTML with:
File naming: [Product Name]-prototype.html
Component patterns: See references/component-styles.md
Ask which documents to generate:
PRD template: references/prd-template.md Design specs: references/design-specs.md Frontend template: references/frontend-tech.md Backend template: references/backend-tech.md
ui type annotationAsk for:
Provide options: