SkillsAdd

aj-geddes/useful-ai-prompts

wireframe-prototyping

Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.

All-time #7935 First seen Jan 21, 2026
8-week activity · all time api

Installation

$ npx skills add aj-geddes/useful-ai-prompts --skill wireframe-prototyping
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

figma-prototyping Similar name
dylantarre/animation-principles

Use when implementing Disney's 12 animation principles in Figma prototypes and Smart Animate

446 installs
ai-assisted-prototyping Similar name
refoundai/lenny-skills

Help users build functional product prototypes from natural language or visual mocks using AI c…

237 installs

Also in this package

Other skills from aj-geddes/useful-ai-prompts · top by installs.

npx skills add aj-geddes/useful-ai-prompts
nodejs-express-server 3.2K code-review-analysis 2.4K rest-api-design 2K architecture-diagrams 1.9K ansible-automation 1.6K ios-swift-development 1.5K android-kotlin-development 1.4K flask-api-development 1.4K jenkins-pipeline 1.3K nginx-configuration 1.3K

Browse all from aj-geddes/useful-ai-prompts

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Also listed on

Alternate registries and mirrors of this skill.

Repository health

Stars 334
License LICENSE
Default branch main
Open issues 1
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,561 B
  • docs SUMMARY.md 2,483 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 1,400 installs

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](references/prototyping-tools-techniques.md) Prototyping Tools & Techniques
[Wireframe Examples](references/wireframe-examples.md) Wireframe Examples
[Prototype Testing](references/prototype-testing.md) 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