Wireframe Prototyping

This is your UI design validation workflow before you write code. It walks through low, medium, and high fidelity prototyping with specific tool recommendations (Balsamiq for sketches, Figma for collaboration, Framer for interactions) and realistic time estimates. The best practices are genuinely practical: start rough, test with real users not just your team, document edge cases like empty states. The reference guides cover testing methods and examples. Honestly, the most valuable part is the reminder to resist jumping straight to high-fidelity mockups before you've validated the basic concept. Saves you from building the wrong thing beautifully.

skills.sh installs: 1.4K
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill wireframe-prototyping --agent claude-code

Installs into .claude/skills of the current project.

Files

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

SKILL.md on GitHub

Details

Repository: github.com/aj-geddes/useful-ai-prompts
Categories: AI & Agent Building, Design & UI/UX
First seen: Apr 16, 2026

day5-fetch-and-digestai-native-camp/camp-1AI Native Camp Day 5 콘텐츠 소화 스킬 만들기. fetch-tweet, fetch-youtube, content-digest 3개 스킬을 직접 만들고 활용한다. "5일차", "Day 5", "fetch", "콘텐츠 스킬", "트윗 스킬", "유튜브 스킬", "다이제스트 1.4Kskills.sh installs

react-testing-libraryitechmeat/llm-codeReact Testing Library: user-centric component testing with queries, user-event simulation, async utilities, and accessibility-first API. Use when writing React 1.4Kskills.sh installs

email-draftergithub/awesome-copilotDraft and review professional emails that match your personal writing style. Analyzes your sent emails for tone, greeting, structure, and sign-off patterns via 1.4Kskills.sh installs

Wireframe Prototyping

Install

Files

Wireframe Prototyping

Table of Contents

Overview

When to Use

Quick Start

Details

More from aj-geddes/useful-ai-prompts

Recommended