SkillsSKILLS
Productivity

wireframe-prototyping▌

aj-geddes/useful-ai-prompts · updated Apr 8, 2026

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill wireframe-prototyping
summary

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 d
skill.md

Wireframe Prototyping

Table of Contents

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

  • Early concept validation
  • Stakeholder alignment
  • User testing and feedback
  • Developer handoff
  • Feature exploration
  • UX problem-solving
  • Rapid iteration

Quick Start

Minimal working example:

Wireframe Principles:

Low Fidelity (Sketches):
  Tools: Paper, whiteboard, Balsamiq
  Time: 30 minutes - 2 hours
  Detail: Basic layout, no colors/fonts
  Best For: Brainstorming, exploration
  Cost: Free

Medium Fidelity:
  Tools: Figma, Sketch, Adobe XD
  Time: 2-8 hours
  Detail: Layout, content, basic interaction
  Best For: Team alignment, feedback
  Cost: Low

High Fidelity:
  Tools: Figma, Framer, web dev tools
  Time: 8+ hours
  Detail: Visual design, interactions, animations
  Best For: Developer handoff, user testing
  Cost: Medium

---
## Wireframe Components
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide Contents
Prototyping Tools & Techniques Prototyping Tools & Techniques
Wireframe Examples Wireframe Examples
Prototype Testing Prototype Testing

Best Practices

✅ DO

  • Start with low-fidelity sketches
  • Get feedback early and often
  • Test with real users
  • Iterate based on feedback
  • Use consistent grids and spacing
  • Document interaction flows
  • Include edge cases (empty states, errors)
  • Create mobile-first wireframes
  • Share prototypes for collaboration
  • Keep wireframes simple and focused

❌ DON'T

  • Jump directly to high-fidelity
  • Over-design before validation
  • Ignore mobile/responsive needs
  • Create wireframes without user input
  • Leave interactions undefined
  • Make wireframes too detailed
  • Test only with team members
  • Ignore accessibility
  • Lock into designs too early
  • Create unrealistic user flows