PaperclipOrg
Claude Agent Skill · by Aj Geddes

Wireframe Prototyping

Install Wireframe Prototyping skill for Claude Code from aj-geddes/useful-ai-prompts.

Install
Terminal · npx
$npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
Works with Paperclip

How Wireframe Prototyping fits into a Paperclip company.

Wireframe Prototyping drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md102 lines
Expand
---name: wireframe-prototypingdescription: >  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](#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: ```yamlWireframe 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