Add comprehensive Prototype phase skill
This commit is contained in:
223
skills/design-thinking/prototype.md
Normal file
223
skills/design-thinking/prototype.md
Normal file
@@ -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)
|
||||
Reference in New Issue
Block a user