# Wireframing And Prototyping

> Create wireframes and prototypes at the right fidelity to explore ideas, align stakeholders, and test concepts before heavy investment. Use when sketching flows, validating interaction ideas, or preparing artifacts for feedback and usability testing.

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

---


# Wireframing and Prototyping

## Overview

Wireframes and prototypes are thinking tools. The goal is learning and alignment, not pixel perfection at every stage.

## When to Use

- Exploring layout and flow options quickly
- Aligning product, design, and engineering on structure
- Preparing interactive prototypes for usability tests
- Reducing expensive rework later in the cycle

## Fidelity Guidance

- **Low** — Structure, hierarchy, flow (fast, disposable)
- **Mid** — Key interactions and content priority
- **High** — Visual design + interaction detail for final validation or handoff

## Principles

- Match fidelity to the question you’re answering
- Prototype the riskiest or least-understood interactions first
- Keep early artifacts easy to change
- Annotate intent when static wireframes hide behavior
- Don’t polish work that hasn’t been validated

## Verification

- [ ] Artifact answers a specific design or product question
- [ ] Stakeholders understand what is decided vs still open
- [ ] Prototype is sufficient for the planned test or discussion