wireframe
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.jsonif exists (but wireframes are greyscale — use only for layout hints)Bash(ls ~/.claude/design-systems/ 2>/dev/null)— brand folder matchGlobcodebase tokens at project root- Scan brief for github / Figma / image /
.mdattachments → 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
More from bluzir/claude-code-design
export-pptx
Export an HTML deck to PPTX via per-slide screenshots. Requires Node + pptxgenjs + puppeteer (run /doctor first).
11make-deck
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.
11doctor
First-run setup + health check. Verifies Chrome DevTools MCP, installs optional deps (monolith, pptxgenjs, puppeteer), creates working dirs, runs smoke test. Use on fresh clone or when things feel broken.
10animated-video
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.
10make-tweakable
Add an in-artifact floating Tweaks panel that lets the user adjust colors, fonts, spacing, layout variants live in the preview. Persists via claude-pipe pattern (pending.yaml + apply-tweaks skill).
10interactive-prototype
Build a hi-fi clickable React prototype with realistic device chrome. Triggered by "prototype", "clickable", "app mockup", "interactive demo".
10