skills-library/skills/design-thinking/prototype.md

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:

// 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

// 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

{
  "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)