From aj-geddes-useful-ai-prompts-4
Create low-to-high fidelity wireframes and interactive prototypes using Figma, Balsamiq, Framer for UI validation, feedback, and developer handoff.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin aj-geddes-useful-ai-prompts-4This skill uses the workspace's default tool permissions.
- [Overview](#overview)
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Wireframes and prototypes bridge the gap between ideas and implementation, enabling teams to test concepts, get feedback, and refine designs before costly development.
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)
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Prototyping Tools & Techniques | Prototyping Tools & Techniques |
| Wireframe Examples | Wireframe Examples |
| Prototype Testing | Prototype Testing |