DiscordSign up
SKILLS.SH

wireframe-prototyping

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

INSTALLATION
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill wireframe-prototyping
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

Wireframe Prototyping

Table of Contents

  • [Overview](#overview)
  • [When to Use](#when-to-use)
  • [Quick Start](#quick-start)
  • [Reference Guides](#reference-guides)
  • [Best Practices](#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

  • 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
BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Related skills

frontend-design
3/3

Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Guides design thinking before coding: establish bold aesthetic direction (brutalist, maximalist, retro-futuristic, luxury, playful, etc.) with clear purpose, tone, and differentiation Emphasizes typography, color theming, motion, spatial composition, and textural details as core design pillars; uses CSS variables, animations, and scroll-triggered effects Generates working, functional code (HTML/CSS/JS, React, Vue) that matches implementation complexity to aesthetic vision: elaborate code for maximalist designs, restrained precision for minimalist ones Explicitly avoids generic patterns: overused fonts (Inter, Roboto), clichéd color schemes (purple gradients), predictable layouts, and cookie-cutter component design

Verified authoranthropics
SKILLS.SH
422K139K
2026-05-22
web-design-guidelines
2/3

Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance. Fetches the latest guidelines from a remote source before each review, ensuring rules stay current Accepts file paths or patterns as arguments; prompts for files if none provided Outputs findings in a terse file:line format for quick scanning and remediation Covers design, accessibility, and UX best practices as defined in the guidelines repository

Verified authorvercel-labs
SKILLS.SH
318K26.9K
2026-05-22
vercel-composition-patterns
3/3

React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React 19 specific guidance on removing forwardRef and using use() instead of useContext()

Verified authorvercel-labs
SKILLS.SH
172K26.9K
2026-05-22
ui-ux-pro-max
2/3

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks. Includes 50+ design styles, 161 color palettes, 57 font pairings, and 99 UX guidelines with priority-ranked rules for accessibility, touch interaction, performance, and responsive layout Searchable database with design-system generation that recommends patterns, colors, typography, and effects based on product type and keywords; supports light/dark mode and platform-specific guidance (iOS HIG, Material Design, React Native) Covers 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS) with implementation-specific best practices and performance optimization rules Provides 25 chart types, 161 product type patterns, and pre-built templates for websites, landing pages, dashboards, admin panels, e-commerce, SaaS, portfolios, blogs, and mobile apps with component libraries (buttons, modals, forms, tables, cards, charts)

nextlevelbuilder
SKILLS.SH
158K81.3K
2026-05-22

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card