# Skill: Design Thinking - Prototype

## Description
Build rapid, low-fidelity prototypes to test solutions quickly and cheaply before full implementation.

## Input
- **solution_idea**: The idea to prototype from ideate phase (required)
- **fidelity_level**: low|medium|high (optional, default: low)
- **components_available**: Existing UI components/patterns (optional)
- **constraints**: Time/tech constraints (optional)

## Prototyping Approaches

### 1. Rapid MVP Patterns

**Lo-Fi (1-2 hours):**
- Paper sketches
- Wireframes in Figma/Excalidraw
- Clickable mockups
- No code, just flows

**Med-Fi (4-8 hours):**
- Static HTML/CSS
- Component prototypes
- Fake data, real UI
- Key interactions only

**Hi-Fi (1-2 days):**
- Working code prototype
- Real component library
- Actual data flow
- Limited features, polished

### 2. Lo-Fi to Hi-Fi Progression

**Stage 1: Sketch (30 mins)**
```
Purpose: Explore ideas fast
Tool: Paper, whiteboard, Excalidraw
Output: 3-5 rough layouts
Decision: Pick one to refine
```

**Stage 2: Wireframe (1-2 hours)**
```
Purpose: Define structure & flow
Tool: Figma, Balsamiq, HTML
Output: Clickable wireframe
Decision: Validate flow with users
```

**Stage 3: Visual Design (2-4 hours)**
```
Purpose: Define look & feel
Tool: Figma with design system
Output: High-fidelity mockups
Decision: Validate aesthetics
```

**Stage 4: Code Prototype (4-8 hours)**
```
Purpose: Test technical feasibility
Tool: React/Next.js components
Output: Working prototype
Decision: Ready for user testing
```

### 3. Component-First Approach

**Build from existing:**
```typescript
// Start with proven components
import { Button, Input, Card } from '@/components/ui'

// Compose into new patterns
function CampaignQuickCreate() {
  return (
    <Card>
      <Input placeholder="Campaign name" />
      <Button>Create in 5 seconds</Button>
    </Card>
  )
}
```

**Component Inventory:**
- List available UI components
- Identify reusable patterns
- Note what needs building
- Prioritize existing over new

### 4. "Good Enough" Quality Gates

**Lo-Fi Checklist:**
- [ ] User can see the flow
- [ ] Key interactions are clear
- [ ] No polish needed
- [ ] Can get feedback in <1 hour

**Med-Fi Checklist:**
- [ ] Looks like real product
- [ ] Core interactions work
- [ ] Uses design system
- [ ] Good enough for user testing

**Hi-Fi Checklist:**
- [ ] Production-quality code
- [ ] Accessible & responsive
- [ ] Error states handled
- [ ] Ready to ship (limited scope)

## Prototype Templates

### Quick Start Template
```typescript
// Minimal prototype structure
interface PrototypeProps {
  mode: 'demo' | 'interactive'
}

export default function Prototype({ mode }: PrototypeProps) {
  // 1. State (minimal)
  const [step, setStep] = useState(1)

  // 2. Key interactions only
  const handleNext = () => setStep(s => s + 1)

  // 3. Visual feedback
  return (
    <div className="max-w-2xl mx-auto p-8">
      <ProgressBar step={step} total={3} />

      {step === 1 && <Step1 onNext={handleNext} />}
      {step === 2 && <Step2 onNext={handleNext} />}
      {step === 3 && <Success />}
    </div>
  )
}
```

### Paper Prototype Template
```
┌─────────────────────────┐
│  Campaign Quick Create  │
├─────────────────────────┤
│                         │
│  [Campaign Name____]    │
│                         │
│  [Template ▼]           │
│    - Black Friday       │
│    - Product Launch     │
│    - Newsletter         │
│                         │
│  [Create Campaign]      │
│                         │
└─────────────────────────┘

Interactions:
1. Type name → enables template
2. Select template → preview
3. Click create → done (5 sec)
```

## Output Format
```json
{
  "status": "success",
  "prototype": {
    "type": "medium_fidelity",
    "time_spent": "6 hours",
    "tools_used": ["Figma", "React", "Tailwind"],
    "url": "https://prototype-link.com",
    "components_reused": ["Button", "Input", "Card", "Select"],
    "components_created": ["QuickCreateFlow"]
  },
  "key_features": [
    "1-click template selection",
    "Auto-filled campaign defaults",
    "5-second creation flow",
    "Inline preview"
  ],
  "limitations": [
    "Only 3 template types",
    "No advanced customization",
    "Fake data backend"
  ],
  "testing_scenarios": [
    {
      "scenario": "Create campaign from template",
      "steps": ["Select template", "Enter name", "Click create"],
      "expected_time": "5 seconds",
      "success_criteria": "Campaign created without errors"
    }
  ],
  "next_step": "Test with users using /dt test"
}
```

## Quality Gates
- [ ] Built in <8 hours (for med-fi)
- [ ] Core flow works end-to-end
- [ ] Uses existing components where possible
- [ ] Good enough for user feedback
- [ ] Testing scenarios defined
- [ ] Known limitations documented

## Token Budget
- Max input: 1000 tokens
- Max output: 1500 tokens

## Model
- Recommended: sonnet (creative problem-solving)

## Philosophy
> "Perfect is the enemy of good. Ship the prototype."
> Fast feedback beats perfect implementation.

**Keep it simple:**
- Build minimum to test hypothesis
- Reuse > rebuild
- Speed > polish
- Learn > perfect
- Fake it till you make it (use mock data)