build-prototype

Dependency Check

Run command -v python3 node npm npx — if any are missing, tell the user which tools are required. python3: brew install python or brew install uv && uv python install. node/npm/npx: brew install node (all three included). Stop if any are missing.

---

Prototype Builder

Create functional code prototypes from product requirements to validate concepts and demonstrate feasibility.

Quick Start

From a PRD or Brief

1. Read the PRD/brief to understand requirements
2. Extract requirements: python scripts/extract_requirements.py path/to/prd.md
3. Initialize project: python scripts/init_prototype.py <project-name>
4. Build prototype based on identified components and flows
5. Test and validate against requirements

From User Stories

1. Parse user stories to identify key flows and components
2. Extract requirements (manually identify UI needs)
3. Initialize project and implement core flows

Workflow

1. Understand Requirements

Read the source document (PRD, brief, or user stories):

• Identify core features and user flows
• Note technical constraints
• Understand success criteria

Extract UI components:

python scripts/extract_requirements.py path/to/prd.md

This analyzes the document and suggests:

• Shadcn components to install
• User interactions to implement
• Data requirements
• Key features

2. Initialize Project

Create new prototype:

python scripts/init_prototype.py <project-name>
cd <project-name>
npm install

This creates a complete React + TypeScript + Vite + Shadcn/ui project.

Install required components:

# Install components identified in step 1
npx shadcn@latest add button card input dialog table
# etc.

3. Build Core Features

Focus on essential flows - not production-ready implementation:

• Implement key user journeys
• Use Shadcn components for all UI
• Keep business logic simple but functional
• Add basic error handling

Reference patterns:

• See references/ui-patterns.md for common layouts
• See references/shadcn-components.md for component usage