Wireframe
- 58 installs
- 98 repo stars
- Updated April 20, 2026
- bluzir/claude-code-design
wireframe is a Claude Code skill that generates 3 or more low-fidelity greyscale UI variations on a labeled canvas so a developer can compare and choose a direction.
About
This skill produces low-fidelity greyscale wireframes with at least three variations for comparison. It builds an HTML canvas using a bundled design_canvas.jsx component and lays out options like classic, dense and novel side by side with placeholders instead of real imagery. A developer uses it early to explore UI directions and pick which one to develop into a prototype.
- Explores 3+ low-fidelity greyscale design variations on a labeled canvas for side-by-side comparison
- Varies options along different axes (layout, density, hierarchy) mixing conservative and novel directions
- Auto-detects design-system or codebase context with at most one clarifying question before proceeding
Wireframe by the numbers
- 58 all-time installs (skills.sh)
- Ranked #1,219 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 1, 2026 (Skillselion catalog sync)
wireframe capabilities & compatibility
- Capabilities
- use design system · verify artifact · ui design · web design
- Works with
- chrome
- Use cases
- ui design · web design
What wireframe says it does
Explore 3+ design variations in low-fi/greyscale on a labeled canvas for comparison.
**No color** — greyscale only (grays + single accent if needed)
Low-fidelity exploration with ≥3 variations along different axes.
npx skills add https://github.com/bluzir/claude-code-design --skill wireframeAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 58 |
|---|---|
| repo stars | ★ 98 |
| Last updated | April 20, 2026 |
| Repository | bluzir/claude-code-design ↗ |
What it does
Explore three or more low-fi greyscale UI variations side by side to choose a design direction.
Who is it for?
Exploring several rough UI directions before committing to a high-fidelity design
Skip if: Producing final colored, production-ready UI (wireframes are greyscale and pre-color)
When should I use this skill?
The user asks for wireframes, lo-fi, ideas, variants, sketches or many options
What you get
Three or more labeled greyscale variations are rendered side by side for the user to pick a direction
- An artifacts/<slug>-wireframes.html canvas with 3+ labeled greyscale options
By the numbers
- Minimum of 3 design variations
- 3-column DesignCanvas layout
Files
Wireframe
Low-fidelity exploration with ≥3 variations along different axes. Uses design_canvas.jsx for side-by-side presentation.
Phase 0 — Context pre-flight (auto-detect, ONE question max)
Before exploring variations, silently check for context: 1. Read .claude/design-tokens.json if exists (but wireframes are greyscale — use only for layout hints) 2. Bash(ls ~/.claude/design-systems/ 2>/dev/null) — brand folder match 3. Glob codebase tokens at project root 4. Scan brief for github / Figma / image / .md attachments → dispatch ingestion skills
If nothing — ONE AskUserQuestion: design system / codebase / screenshot / Figma / none / decide. Report "Using <context>. Proceeding." — then proceed greyscale regardless (wireframes are pre-color).
Rules
- No color — greyscale only (grays + single accent if needed)
- Placeholders everywhere for imagery, icons, labels — a placeholder is better than a bad attempt
- Varying axes — layout, interaction metaphor, visual treatment, density, hierarchy
- Mix conservative and novel — one "by-the-book", one exploring new territory
Build
1. artifacts/<slug>-wireframes.html with React + Babel + design_canvas.jsx 2. Bash(cp starters/design_canvas.jsx "$(dirname <html>)/") — copy next to the HTML file 3. Shell:
<DesignCanvas columns={3} label="Options for {{thing}}">
<DesignCanvas.Cell label="Option A — classic">...</DesignCanvas.Cell>
<DesignCanvas.Cell label="Option B — dense">...</DesignCanvas.Cell>
<DesignCanvas.Cell label="Option C — novel">...</DesignCanvas.Cell>
</DesignCanvas>4. Use dashed borders (border: 1px dashed #999) and greybox for placeholder content. Block letters or [Image] labels, not actual SVG.
Verify + next steps
- Run
/serve(needed because design_canvas.jsx is external), then/done http://127.0.0.1:4567/artifacts/<slug>-wireframes.html - Fix →
Skill: verify-artifactsilently - Ask user which direction(s) to develop → invoke
/interactive-prototypeon chosen option
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
How many variations does it produce?
At least three, varied along axes such as layout, density and hierarchy, mixing one by-the-book option with a novel one.
Does it use color?
No, wireframes are greyscale only with placeholders; a single accent is used only if needed.