Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

wireframe

Estrellas95

Forks10

Actualizado20 de abril de 2026 a las 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.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

bluzir

bluzir/claude-code-design

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Diseñadores de interfaces web y digitalesOcupaciones informáticas y matemáticas·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

Más de este repositorio

mismo repositorio

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