wireframe

Original：🇺🇸 English

Translated

Explore 3+ design variations in low-fi/greyscale on a labeled canvas for comparison. Use when user asks for wireframes, lo-fi, ideas, variants, sketches, many options.

2installs

Sourcebluzir/claude-code-design

Added on2026-05-16

NPX Install

npx skill4agent add bluzir/claude-code-design wireframe

SKILL.md Content

View Translation Comparison →

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:

```
Read .claude/design-tokens.json
```
if exists (but wireframes are greyscale — use only for layout hints)

Bash(ls ~/.claude/design-systems/ 2>/dev/null)

— brand folder match

```
Glob
```
codebase tokens at project root
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

artifacts/<slug>-wireframes.html

with React + Babel +

design_canvas.jsx

Bash(cp starters/design_canvas.jsx "$(dirname <html>)/")

— copy next to the HTML file

Shell:

html

<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>

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-artifact
```
silently
Ask user which direction(s) to develop → invoke
```
/interactive-prototype
```
on chosen option