wireframe-prototyping

SKILL.md

Design visualization and feedback tool for early-stage UI validation before development.

Covers three fidelity levels: low-fidelity sketches (30 min–2 hrs, brainstorming), medium-fidelity layouts (2–8 hrs, team alignment), and high-fidelity prototypes (8+ hrs, developer handoff)

Recommended tools span Balsamiq and whiteboards for sketches, Figma/Sketch/Adobe XD for medium fidelity, and Figma/Framer for interactive prototypes

Best practices emphasize early user testing, mobile-first design, consistent spacing, documented interaction flows, and iterative refinement based on feedback

Includes guidance on edge cases, accessibility considerations, and avoiding premature high-fidelity design before validation

Wireframe Prototyping

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

Overview

Wireframes and prototypes bridge the gap between ideas and implementation, enabling teams to test concepts, get feedback, and refine designs before costly development.

When to Use