wireframe-prototyping
aj-geddes/useful-ai-prompts
Create wireframes and interactive prototypes to visualize UIs and gather feedback before development.
What is wireframe-prototyping?
This skill guides you through creating wireframes and prototypes at varying fidelity levels—from quick sketches to high-fidelity interactive designs. Use it to validate concepts, align stakeholders, test with users, and refine designs before costly development work begins.
- Create low-fidelity sketches for rapid brainstorming and exploration
- Build medium-fidelity wireframes for team alignment and stakeholder feedback
- Develop high-fidelity prototypes with visual design and interactions for developer handoff
- Document interaction flows and edge cases (empty states, errors)
- Test prototypes with real users and iterate based on feedback
- Establish consistent grids, spacing, and design systems across wireframes
How to install wireframe-prototyping
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill wireframe-prototypingHow to use wireframe-prototyping
- 1.Start with low-fidelity sketches using paper, whiteboard, or Balsamiq to explore ideas quickly
- 2.Move to medium-fidelity wireframes in tools like Figma or Adobe XD to establish layout and content structure
- 3.Create high-fidelity prototypes with visual design and interactions when ready for user testing or developer handoff
- 4.Document interaction flows and include edge cases like empty states and error messages
- 5.Test prototypes with real users and gather feedback
- 6.Iterate on designs based on feedback before moving to development
Use cases
- Early concept validation before committing to development
- Stakeholder alignment and buy-in on design direction
- User testing and gathering feedback on proposed features
- Developer handoff with clear interaction specifications
- Rapid exploration of multiple design directions
- Product designers and UX designers
- Product managers and stakeholders
- Developers preparing for implementation
- Teams doing user research and validation
- Anyone prototyping new features or products
wireframe-prototyping FAQ
Wireframes are structural blueprints showing layout and content hierarchy with minimal visual detail. Prototypes add visual design, interactions, and animations to simulate how the product will actually work and feel.
Low-fidelity sketches take 30 minutes to 2 hours for brainstorming. Medium-fidelity wireframes take 2-8 hours for team alignment. High-fidelity prototypes take 8+ hours when you need detailed interactions and visual polish.
Start with mobile-first wireframes, as mobile constraints force you to prioritize content and functionality. This approach scales better to larger screens than the reverse.
Test early and often—even low-fidelity sketches can reveal usability issues. Don't wait for high-fidelity designs; user feedback at any stage is valuable for iteration.
Document interaction flows, define edge cases (empty states, errors, loading states), use consistent spacing and grids, and clarify any ambiguous user interactions before handing off to developers.
Full instructions (SKILL.md)
Source of truth, from aj-geddes/useful-ai-prompts.
name: wireframe-prototyping description: > Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.
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
Related skills
More from aj-geddes/useful-ai-prompts and the wider catalog.
android-kotlin-development
Develop native Android apps with Kotlin using MVVM, Jetpack, and Compose.
ansible-automation
Automate infrastructure provisioning, configuration management, and application deployment across multiple servers.
api-contract-testing
>
api-security-hardening
>
flutter-ui-ux
|
terragrunt-generator
Generate/create/scaffold Terragrunt HCL files — root.hcl, terragrunt.hcl, child modules, stacks, multi-env layouts.