prototype-strategy — Claude Code skill: pick the right prototype
Decide what kind of prototype to build and how detailed it should be, before you start building it.
npx skills add Owl-Listener/designer-skills --skill prototype-strategy -a claude-codeWhat prototype-strategy does
The skill lays out three fidelity levels. Low: paper sketches, sticky notes, rough wireframes — early exploration, information architecture, flow checks. Medium: digital wireframes and clickable mockups — interaction patterns, navigation, stakeholder alignment. High: pixel-perfect mockups, coded and motion prototypes — visual validation, micro-interactions, developer handoff.
Then it lists the methods: paper prototyping, clickable wireframes with hotspots, stateful interactive prototypes, HTML/CSS/JS builds, Wizard of Oz with a fake backend, and video walkthroughs. Picking between them comes down to the question you are answering, who the audience is, how much time you have, and how many iterations you expect.
The core advice: match fidelity to the question, not the deadline. Prototype the riskiest assumption first, and build to throw away. Once a prototype exists and you need to decide what to test on it, that belongs to the companion skill test-scenario — this one stops at the build decision.
What it helps with
- pick a fidelity level for a specific design question
- choose a prototyping method before starting work
- test the riskiest assumption first
- align on an approach with stakeholders and developers
- decide how many iterations to plan for
Example prompts for the agent
- Help me choose the fidelity for testing a new navigation flow
- Which prototyping method should I use to show the flow to stakeholders?
- Should I build a clickable wireframe or go straight to a coded prototype?
How to install prototype-strategy
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill prototype-strategy -a claude-code2Manually: put the files in place
~/.claude/skills/prototype-strategy/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/prototype-strategy/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill prototype-strategy -a codex2Manually: put the files in place
.agents/skills/prototype-strategy/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill prototype-strategy -a cursor2Manually: put the files in place
.cursor/skills/prototype-strategy/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills prototype-strategy2Manually: put the files in place
.github/skills/prototype-strategy/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill prototype-strategy -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path prototyping-testing/skills/prototype-strategyManually: put the files in place
.devin/skills/prototype-strategy/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill prototype-strategy -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about prototype-strategy
How do I install prototype-strategy in Claude?
Run npx skills add Owl-Listener/designer-skills --skill prototype-strategy -a claude-code. The skill lands at ~/.claude/skills/prototype-strategy/SKILL.md.
What does prototype-strategy do?
It helps you choose the fidelity, tool and method for a prototype based on what the team needs to learn. Use it before building the prototype.
How is prototype-strategy different from test-scenario?
This skill covers what to build and how. Deciding what to test on a finished prototype is the job of test-scenario.
Source text
SKILL.md · MIT
--- name: prototype-strategy description: Choose prototype fidelity and method to match the design question and the decision at stake. Use before building a prototype. For what to test once it exists, use `test-scenario`. --- # Prototype Strategy You are an expert in choosing prototyping approaches that efficiently answer design questions. ## What You Do You help teams choose the right fidelity, tool, and method for prototyping based on what they need to learn. ## Fidelity Spectrum ### Low Fidelity Paper sketches, sticky notes, rough wireframes. Best for: early exploration, information architecture, flow validation. Fast to create, easy to discard. ### Medium Fidelity Digital wireframes, clickable prototypes, gray-box layouts. Best for: interaction patterns, navigation testing, stakeholder alignment. ### High Fidelity Pixel-perfect mockups, coded prototypes, motion prototypes. Best for: visual design validation, micro-interaction testing, developer handoff, usability testing. ## Prototyping Methods - **Paper prototyping**: Sketch screens, manually swap on user action - **Clickable wireframes**: Linked screens with hotspots - **Interactive prototypes**: Stateful with real interactions - **Coded prototypes**: HTML/CSS/JS for realistic behavior - **Wizard of Oz**: Fake backend, real frontend - **Video prototypes**: Walkthrough animations showing the concept ## Choosing Fidelity - What question are you answering? - Who is the audience (users, stakeholders, developers)? - How much time do you have? - How many iterations do you expect? - What decisions will this prototype inform? ## Best Practices - Match fidelity to the question, not the deadline - Prototype the riskiest assumption first - Don't over-invest before testing - Make it clear it is a prototype (avoid polished for early feedback) - Plan for iteration — build to throw away
© Owl-Listener · MIT · Owl-Listener/designer-skills
