Claude Wireframe Skill

claude-wireframe-skill

A [Claude Code](https://docs.anthropic.com/en/docs/claude-code) skill that generates 5 UX prototypes as B&W wireframes, then adds Clean and Polished color variants via parallel agents.

Installation (First Time)

Open up the terminal and run this command:

mkdir -p ~/.claude/skills
git clone https://github.com/Magdoub/claude-wireframe-skill.git ~/.claude/skills/wireframe

Or manually: download [`SKILL.md`](SKILL.md) and place it at `~/.claude/skills/wireframe/SKILL.md`.

Update (If you already have it installed)

Open up the terminal and run this command

git -C ~/.claude/skills/wireframe fetch origin && git -C ~/.claude/skills/wireframe reset --hard origin/main

What it does

• Generates 5 UX approaches (1 safe extension of your design system + 4 exploratory)
• B&W wireframes appear first (~40-60s), then 5 parallel agents add color variants
• Each option has 3 sub-tabs: Wireframe (B&W) / Clean (flat color) / Polished (gradients, shadows, animation)
• Prototypes are interactive: working tabs, accordions, hover states, all inside a browser-frame mockup
• On first run, scans your CSS, JS, templates + screenshots to build persistent design context
• Extracts optimization goals from your prompt ("more conversions", "reduce clutter", etc.)
• Includes a summary tab with scoring table and a recommended option

How it works

1. Phase 1 (~40-60s): generates 5 B&W wireframes in a single HTML file, opens it in your browser
2. Phase 2 (parallel): 5 agents each write CSS color variants (Clean + Polished) for their option
3. Sub-tabs turn colorful as each option's variants finish, no page reload needed

After running `/wireframe improve the design of my header landing it looks crammed`