# Prototyping Strategy

> Prototyping fidelity decisions, tools selection, prototype testing, and interactive prototype design.

- Skill: `dragoon0x/prototyping-strategy` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/prototyping-strategy`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/prototyping-strategy/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/prototyping-strategy

---


# Prototyping Strategy

## Fidelity Spectrum
| Fidelity | Tool | Best For | Time |
|----------|------|----------|------|
| Paper | Paper + pen | Early concepts, team brainstorming | Minutes |
| Lo-fi wireframe | Balsamiq, Whimsical | Structure validation, flow testing | Hours |
| Mid-fi | Figma wireframes | Usability testing, stakeholder alignment | Days |
| Hi-fi | Figma, Framer | Final design validation, development spec | Days-weeks |
| Code | HTML/CSS, React | Production-ready, complex interactions | Weeks |

## When to Use Each
- **Paper:** When you need to explore 10+ ideas quickly
- **Lo-fi:** When testing navigation and flow (not visual design)
- **Mid-fi:** When testing usability before investing in visual design
- **Hi-fi:** When testing visual design, brand response, and polish
- **Code:** When testing complex interactions, animations, or real data

## Prototype Testing Rules
1. Match fidelity to the question you're testing
2. Use real content (not lorem ipsum)
3. Build only the paths you're testing (not the whole app)
4. Let users find their own way (don't guide them)
5. Prototype the error states and edge cases too