name: idea-to-prototype
description: Takes a product idea from concept to validated interactive prototype in 7 stages - Discovery → Strategy → Requirements → Design → Engineering Spec → Prototype → Validation. Use when you have a product idea and want to validate it with users before engineering investment. Creates comprehensive documentation, designs, and working prototypes following PM best practices.

Idea to Prototype: 7-Stage Product Development Framework

When This Skill Activates

Claude uses this skill when:
- You have a product idea and want to validate it before building
- You need to go from concept to interactive prototype
- You want comprehensive product documentation (PRD, UX spec, engineering tasks)
- You're applying design-first development principles
- You need to de-risk a product investment with user validation

What This Skill Delivers

End-to-End Product Development Package:
1. Discovery Documents - User research, opportunity trees, success criteria
2. Strategic Positioning - MVP scoping
3. Requirements - Comprehensive PRD (30KB+), UX design specification (50KB+)
4. Engineering Specs - team-standard-style engineering tasks with feature flags, Heap events, QA plans
5. Interactive Prototype - HTML/Tailwind/JS clickable demo with all states

Timeline: 3-4 weeks from idea to validated prototype

The 5-Stage Framework

IDEA
  ↓
Stage 1: Discovery & Problem Validation (Days 1-2)
  → Validate user pain points
  → Create opportunity solution tree
  → Define success criteria
  ↓
Stage 2: Strategic Framing & Prioritization (Days 3-4)
  → MVP scope definition
  ↓
Stage 3: Requirements & Design (Days 5-7)
  → Comprehensive PRD (30KB)
  → UX design specification (50KB)
  → All states (loading, error, empty, success)
  ↓
Stage 4: Engineering Specification (Day 8)
  → Engineering tasks (team-standard template)
  → Feature flags strategy
  → Heap analytics events
  ↓
Stage 5: Prototype Development (Days 9-12)
  → Interactive HTML/Tailwind/JS prototype
  → All states implemented
  → Mobile-responsive


---

## Stage 1: Discovery & Problem Validation

**Objective:** Validate that the problem is real and worth solving.

### Activities

1. **User Research Synthesis**
   - Leverage existing research (if available)
   - Interview 10-15 target users
   - Identify pain points and frequency
   - Validate problem severity

2. **Opportunity Solution Tree**
   - Map business outcome → opportunities → solutions → experiments
   - Visualize how solution addresses user needs
   - Identify critical assumptions

3. **Success Criteria Definition**
   - Define learning-first metrics (usage, funnel, quality)
   - Set guardrails (what must NOT increase)
   - Plan baseline measurement approach

### Deliverables

- `discovery-[feature]-pain-points-[date].md` - User research synthesis
- `opportunity-solution-tree.md` - Visual problem-solution mapping
- `success-criteria-definition.md` - Metrics and validation approach

### Skills to Use

- `continuous-discovery` - Teresa Torres' framework
- `analyst` - Data synthesis and insights

### Validation Checkpoint

✅ **Proceed if:**
- 70%+ of users confirm the pain point
- Opportunity tree shows clear path from problem to solution
- Success criteria defined with measurable outcomes

---

## Stage 2: Strategic Framing & Prioritization

**Objective:** Validate that NOW is the right time to build this.

### Activities

 **MVP Scope Definition**
   - Apply Zero-to-Launch simplicity test
   - Identify ONE core job to be done
   - Define post-MVP features (exclude from v1)

### Deliverables
- `mvp-scope-definition.md` - What's in, what's out, why

### Skills to Use
- `zero-to-launch` - MVP scoping

### Validation Checkpoint

✅ **Proceed if:**
- MVP scope is clear and focused (ONE job)

---

## Stage 3: Requirements & Design

**Objective:** Create comprehensive product specifications covering all states and edge cases.

### Activities

1. **PRD Creation (30KB Comprehensive)**
   - User journeys (all scenarios, not just happy path)
   - Edge cases and error handling
   - Feature flag strategy
   - Functional requirements
   - Mobile app requirements (if applicable)

2. **UX Design Specification (50KB Comprehensive)**
   - All states: Loading, Success, Error, Empty
   - Mobile-first design (thumb-reach optimization)
   - Component specifications
   - Interaction patterns
   - Design system integration

3. **Supporting Documents**
   - Settings configuration spec
   - Product brief (executive summary)
   - Wireframes (Excalidraw or Figma)

### Deliverables

- `prd.md` - Comprehensive Product Requirements Document (30KB target)
- `ux-design-specification.md` - Complete UX flows (50KB target)
- `product-brief.md` - Executive summary
- `settings-configuration-spec.md` - Settings behavior
- `wireframes.excalidraw` - Visual designs

### Skills to Use

- `pm` - PRD creation
- `ux-designer` - UX design specification
- `design-first-dev` - Design-led approach
- `quality-speed` - Craft level decision

### Validation Checkpoint

✅ **Proceed if:**
- PRD covers all states, edge cases, success criteria
- UX spec includes every state (not just happy path)
- Wireframes visualize complete flow
- Cross-functional review complete

---

## Stage 4: Engineering Specification

**Objective:** Convert PRD into actionable engineering tasks following team templates.

### Activities

1. **Task Breakdown**
   - Follow team-standard engineering template (if applicable)
   - Break into 3-5 core tasks
   - Each task: Description, Acceptance Criteria, Feature Flags, Heap Events, QA Plan

2. **Feature Flags Strategy**
   - Define feature flags for gradual rollout
   - Plan kill switch for rapid disable

3. **Analytics Implementation**
   - Define Heap analytics events
   - Properties to track
   - Success metrics alignment

### Deliverables

- `epics-and-stories.md` - Task breakdown
- `task-01-[component].md` (team-standard template)
- `task-02-[component].md` (team-standard template)
- `task-03-[component].md` (team-standard template)
- `feature-flag-strategy.md` - Rollout plan

### Skills to Use

- `story-architect` (CT trigger)

### Validation Checkpoint

✅ **Proceed if:**
- Tasks follow team template
- Feature flags defined with rollout plan
- Heap events map to success criteria
- QA plans cover all states and edge cases

---

## Stage 5: Prototype Development

**Objective:** Build interactive prototype demonstrating complete product feel.

### Activities

1. **Determine Craft Quality**
   - Use `quality-speed` skill
   - Assess: Core product? Daily use? Competitive advantage?
   - Decision: HIGH CRAFT vs MOVE FAST

2. **Build Interactive Prototype**
   - HTML/Tailwind CSS/Vanilla JS (or React if preferred)
   - Mobile-first responsive design
   - Mock data (realistic scenarios)
   - All states: Loading, Success, Error, Empty
   - Smooth animations and interactions

3. **Prototype Components**
   - Main flow (primary user journey)
   - Settings/configuration screens
   - Success confirmation
   - Error recovery flows

4. **Demo Assets**
   - Screen recording (1-2 min walkthrough)
   - Screenshots of all states
   - README (how to run)

### Deliverables

- `/prototype/` folder with:
  - `index.html` - Main interface
  - `styles.css` - Component styling
  - `script.js` - Interaction logic
  - `mock-data.js` - Realistic data
  - `README.md` - Setup instructions
- `prototype-demo-video.mov` - Screen recording
- `prototype-showcase.md` - Documentation

### Skills to Use

- `design-first-dev` - Design-led development
- `quality-speed` - Craft quality decision
- `quick-flow-solo-dev` - Rapid prototyping

### Validation Checkpoint

✅ **Proceed if:**
- Prototype demonstrates complete flow (not just happy path)
- All states implemented (loading, success, error, empty)
- Mobile-responsive and smooth
- Demo video captures product feel

---

---

## Complete File Structure

/features/[feature-name]/
│
├── 01-discovery/
│ ├── discovery-[feature]-pain-points-[date].md
│ ├── opportunity-solution-tree.md
│ └── success-criteria-definition.md
│
├── 02-strategy/
│ ├── rice-scoring-[feature]-[date].md
│ ├── strategic-positioning.md
│ └── mvp-scope-definition.md
│
├── 03-requirements/
│ ├── prd.md (30KB comprehensive)
│ ├── product-brief.md
│ └── [other requirement docs]
│
├── 04-design/
│ ├── ux-design-specification.md (50KB comprehensive)
│ ├── wireframes.excalidraw
│ └── [other design specs]
│
├── 05-engineering/
│ ├── epics-and-stories.md
│ ├── task-01-[component].md
│ ├── task-02-[component].md
│ ├── task-03-[component].md
│ └── feature-flag-strategy.md
│

---

## Critical Design Principles

### 1. Design-First Development

**Always prototype before building:**
- Show, don't tell (working prototype > requirements doc)
- All states matter (loading, error, empty, success)
- Get design right, then build it right

### 2. Learning-First Metrics

**No fixed targets until baseline:**
- Measure to learn and iterate
- Track usage, funnel, quality
- Set targets after 2-4 weeks of data

### 3. Comprehensive Documentation

**30KB PRD + 50KB UX Spec:**
- Cover all states, not just happy path
- Edge cases and error handling
- Mobile-first requirements

### 4. User Validation Before Engineering

**De-risk investment:**
- Interactive prototype validates product feel
- User testing confirms desirability and usability
- Stakeholder buy-in before engineering effort

---

## When to Use This Skill

**✅ Use idea-to-prototype when:**
- You have a product idea that requires user validation
- You need comprehensive documentation before building
- You want to de-risk engineering investment
- You're applying design-first development
- You have 3-4 weeks to go from idea to validated prototype

**❌ Don't use idea-to-prototype when:**
- You're fixing a simple bug (just fix it)
- Requirements are crystal clear (skip straight to building)
- It's a one-line change (overkill)
- You're doing pure research (use `continuous-discovery` directly)

---

## Success Criteria for This Framework

**You'll know you succeeded when:**

✅ User research confirms problem is real 
✅ PRD covers all states, edge cases (30KB comprehensive)
✅ UX design includes all states (50KB comprehensive)
✅ Engineering tasks follow team template
✅ Working prototype demonstrates complete flow
✅ Engineering team has clear, validated requirements

---

## Common Pitfalls

### ❌ Mistake 1: Skip User Research
**Problem:** Build based on assumptions, not validated pain points
**Fix:** Always start with Stage 1 (Discovery)

### ❌ Mistake 2: Happy Path Only
**Problem:** Forgot loading/error/empty states
**Fix:** Design ALL states before building

### ❌ Mistake 3: PRD Too Shallow
**Problem:** 5-page PRD missing edge cases
**Fix:** Aim for 30KB comprehensive (reference one-click-trade PRD)

### ❌ Mistake 4: Skip Prototype
**Problem:** Build directly from PRD, users hate it
**Fix:** Always build interactive prototype first (Stage 5)

### ❌ Mistake 5: No User Validation
**Problem:** Ship without testing, users don't adopt
**Fix:** Run Stage 7 user testing before engineering build

---

## Templates Included

### Template 1: Discovery Synthesis

```markdown
# Discovery Research: [Feature] Pain Points

**Date:** [YYYY-MM-DD]
**Author:** [Name]
**Context:** [Background]

## Executive Summary
- [70%+ validation statement]
- [Problem severity and frequency]
- [Key insight]

## Research Overview
### Methodology
### Research Questions

## Key Findings
### Finding 1: [Pain Point]
**Evidence:**
**Severity:** HIGH/MEDIUM/LOW
**Frequency:** Daily/Weekly/Monthly
**Impact:** [User impact]

## Recommendations
1. Proceed to Stage 2: Strategic Framing
2. MVP Scope: [Core feature]
3. Safety Strategy: [Risk mitigation]

Template 2: RICE Scoring

# RICE Scoring: [Feature]

**Date:** [YYYY-MM-DD]

## Score Calculation

**Reach:** [X users/quarter]
- Justification: [Data source]

**Impact:** [Massive=3x, High=2x, Medium=1x, Low=0.5x]
- Justification: [Why this impact]

**Confidence:** [High=100%, Medium=80%, Low=50%]
- Justification: [Evidence]

**Effort:** [Person-months]
- Breakdown: [Design=X, Eng=Y, QA=Z]

**RICE Score:** (Reach × Impact × Confidence) ÷ Effort = [Score]

## Decision
- **Recommendation:** [Build now / Defer / Reject]
- **Rationale:** [Why]

Template 3: User Testing Script

# User Testing Script: [Feature]

**Date:** [YYYY-MM-DD]
**Participants:** [Target user profile]
**Success Criteria:** 80%+ task completion, 70%+ desirability

## Scenarios

### Scenario 1: [Task Name]
**Context:** [Setup]
**Task:** "[Exactly what to tell user]"
**Success:** [What successful completion looks like]
**Observe:** [What to watch for]

## Key Questions
1. Would you use this feature? Why or why not?
2. What concerns do you have?
3. What's confusing or unclear?
4. What would make this better?

## Data Collection
- [ ] Task completion rate (target: 80%+)
- [ ] Time to complete (observe)
- [ ] Desirability (target: 70%+ would use)
- [ ] Key quotes and observations

Real-World Example: One Click Close

Idea: Enable users to close positions with a single tap (Phase 2 of fast trading)

Stage 1 (Discovery):
- Pain point: 3-5 taps to close, breaks momentum
- Opportunity: Complete fast trading loop (open → close)

Stage 2 (Strategy):
- MVP: Full close only (100%), no partial close
- Positioning: Phase 2, not standalone

Stage 3 (Requirements):
- PRD: 30KB comprehensive (all states, edge cases)
- UX Spec: 50KB (loading, success, error, empty, settings)
- Mobile-first, secondary button styling

Stage 4 (Engineering):
- 3 tasks: Close logic, Position list UI, Settings integration
- Feature flags: IsOneClickCloseEnabled
- Heap events: attempted, success, error, settings_toggled

Stage 5 (Prototype):
- HTML/Tailwind interactive demo
- Position list with close buttons
- All states implemented
- Demo video showing complete flow

Related Skills

• continuous-discovery - User research framework (Teresa Torres)
• product-prioritization-manager - RICE scoring (trigger: RI)
• pm - PRD creation
• ux-designer - UX design specification
• story-architect - Engineering task creation (trigger: CT)
• design-first-dev - Design-led development
• quality-speed - Craft quality decisions
• zero-to-launch - MVP scoping
• launch-execution - Stakeholder communication
• analyst - Feedback synthesis

Key Quotes

Brian Chesky (Airbnb):

"Prototype the complete experience before writing code. Show, don't tell."

Dylan Field (Figma):

"With AI, everyone can build. The differentiator is craft. Quality is the new moat."

Teresa Torres (Continuous Discovery):

"Discover opportunities continuously with users, not once a quarter."

How to Invoke This Skill

Option 1: Direct Invocation

Use the idea-to-prototype skill to develop [feature name]

Option 2: Stage-by-Stage

Stage 1: Run discovery for [feature]
Stage 2: Run RICE scoring for [feature]
[etc.]

Option 3: Auto-Invoke
Claude will suggest this skill when you say:
- "I have a product idea for [X]"
- "How do I validate [feature] before building?"
- "Create a prototype for [X]"
- "I need comprehensive product documentation for [Y]"

Further Learning

• One Click Close Example: /features/Fast Trading/one-click-close/ - Complete 5-stage execution
• BMAD Framework: /_bmad/ - Workflow orchestration
• Teresa Torres: "Continuous Discovery Habits"
• Brian Chesky: Lenny's Podcast on design-led product development
• Dylan Field: Interview on craft quality as competitive moat