Agent skill · design visual · aj-geddes
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.
Why this skill is useful
Codifies best practices for wireframing and prototyping that the AI could infer but now doesn't have to guess.
What it needs
About 1k tokens when loaded. Last updated 2026-03-04. 307 stars on the source repository.
What this skill does
Wireframe Prototyping Table of Contents Overview When to Use Quick Start Reference Guides 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: 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
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aj-geddes/wireframe-prototyping