Wireframe prototyping

Skill ulpi-io/plugin-marketplace/plugins/aj-geddes/skills/wireframe-prototyping

A curated collection of 7,800+ agent skills for Claude Desktop, sourced from skills.sh

Install

npx -y skills add ulpi-io/plugin-marketplace --skill wireframe-prototyping

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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

SKILL.md

2.5 KB, as published. Nobody here has run it

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