Magdoub

Claude Wireframe Skill — Design skill for Claude Code

Design community

A Claude Code skill that generates B&W UX wireframe prototypes as interactive HTML files.

How to install Claude Wireframe Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Magdoub/claude-wireframe-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Wireframe Skill does

A Claude Code skill that generates B&W UX wireframe prototypes as interactive HTML files.

Alternatives in Design

Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Huashu Design — Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 23.6k ★
Learning Output Style — Interactive learning mode for skill building 14k ★

README

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

Phase 1 (~40-60s): generates 5 B&W wireframes in a single HTML file, opens it in your browser
Phase 2 (parallel): 5 agents each write CSS color variants (Clean + Polished) for their option
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`