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