functional-prototype

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