From 4a4e41260df4af8a9f45caae96cbbdbc5dc9b55b Mon Sep 17 00:00:00 2001
From: admin <christiankrag@gmail.com>
Date: Sun, 14 Dec 2025 01:38:46 +0100
Subject: [PATCH] Add comprehensive Prototype phase skill

---
 skills/design-thinking/prototype.md | 223 ++++++++++++++++++++++++++++
 1 file changed, 223 insertions(+)
 create mode 100644 skills/design-thinking/prototype.md

diff --git a/skills/design-thinking/prototype.md b/skills/design-thinking/prototype.md
new file mode 100644
index 0000000..dd2c184
--- /dev/null
+++ b/skills/design-thinking/prototype.md
@@ -0,0 +1,223 @@
+# 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)