Functional Prototype Builder
Build working prototypes from PRDs with realistic mock data and stubbed dependencies.
Workflow
1. Analyze PRD
Extract:
- •User stories: Each user-facing flow to demonstrate
- •Screens: All unique views needed
- •Data entities: Users, posts, products, etc.
- •External dependencies: Database, auth, payment, APIs
- •Tech stack: Ask user if not specified
2. Create Mock Layer
Create a dedicated mocks directory with:
- •Mock data file: Precanned realistic data (5-10 items per entity, realistic names/content, edge cases like empty states)
- •Stub API file: Functions that return mock data with simulated delays (100-300ms)
Stub patterns by dependency type:
| Dependency | Stub Pattern |
|---|---|
| Database | Return filtered/sorted mock data |
| Auth | Return mock user, always succeed |
| File upload | Store in memory/localStorage |
| Payment | Return success with fake transaction ID |
| External API | Return realistic mock response |
| Email/SMS | Console.log the message |
| Search | Filter mock data client-side |
3. Build Screens
For each screen:
- •Import from stub layer (never real dependencies)
- •Implement full UI with interactions
- •Handle loading states (stubs have delays)
- •Handle empty/error states
- •Complete navigation between screens
4. Generate Integration Guide (Optional)
After prototype is complete, ask user: "Would you like me to generate an integration guide documenting how to replace stubs with real implementations?"
If yes, create docs/integration-guide.md following references/integration-guide-template.md.
Output Checklist
- • All user stories from PRD are demonstrable
- • Every screen is implemented and navigable
- • Mock data looks realistic
- • Stubs simulate async behavior (delays)
- • Loading and empty states handled