mcpField
P
prototype-strategy

prototype-strategy

github.com/infrasity-labsDesign & UI15076 installsUpdated 18w ago
Repository

About prototype-strategy

A design skill that helps teams choose a prototyping fidelity and method based on the questions they need to answer. It covers approaches from paper sketches to coded prototypes and ways to plan testing and iteration.

Key features

  1. 01Low-, medium-, and high-fidelity guidance
  2. 02Paper, clickable, and interactive methods
  3. 03Coded and video prototypes
  4. 04Wizard of Oz prototyping
  5. 05Fidelity selection questions
  6. 06Risk-first testing and iteration

Use cases

  1. 01Choosing a prototype for a design question
  2. 02Testing navigation before implementation
  3. 03Validating visual design and interactions
  4. 04Planning stakeholder or user feedback

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/infrasity-labs/dev-gtm-claude-skills --skill prototype-strategy

After installing, type/prototype-strategyin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported