Run any Skill in Manus with one click

wireframe

Stars95

Forks10

UpdatedApril 20, 2026 at 05:50

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

bluzir

bluzir/claude-code-design

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

SKILL.md

readonly

name	wireframe
description	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.
argument-hint	<what to wireframe>
allowed-tools	Read Write Edit Bash(cp:) Bash(open:) Bash(mkdir:) mcp__chrome-devtools__

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

<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

More from this repository

same repository

make-deck

bluzir/claude-code-design

Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote. Uses deck_stage.js starter and Claude Design taste rules.

2026-04-2096

verify-artifact

bluzir/claude-code-design

Screenshot + console sweep + visual inspection of an artifact for layout/color/typography regressions. Silent on pass, reports only on issues. Use after /done reports clean and before end-of-turn.

2026-04-2096

animated-video

bluzir/claude-code-design

Build animated motion design (explainer, transition reel, product intro). Uses Stage/Sprite timeline from animations.jsx for in-browser compositions or Remotion for full video/MP4 workflows.

2026-04-2096

apply-tweaks

bluzir/claude-code-design

Apply buffered tweaks from pending.yaml to the source HTML file. Invoked when user says "save tweaks", "apply tweaks", "persist panel changes", or runs /apply-tweaks.

2026-04-2096

copy-example

bluzir/claude-code-design

Generate a working demo artifact on dummy content so the user can see a reference implementation. Use when user says "show me an example deck", "what does a prototype look like", "give me a starter", "I want to see an example of X". Generates live — not from a static gallery.

2026-04-2096

create-design-system

bluzir/claude-code-design

Extract or build a design system (tokens, components, style guide). Use for "design system", "style guide", "tokens", "UI kit".

2026-04-2096

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

<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