Design canvas loop
The /design:* slash commands. Canvas-first iteration on HTML/JSX mocks under .design/.
The canvas is the working surface. HTML or JSX, under .design/<project-or-feature>/. Commands iterate in place on the active canvas (the one open in your browser tab), so feedback like "move the CTA up" lands on the file you're looking at, not a new mock somewhere else.
A zero-dep Node dev server injects an inspector overlay. Cmd+Click any element to scope the next /design:edit "<feedback>" to that selection. The server tracks active tab and selected element via WebSocket and writes <designRoot>/_active.json for the slash commands to read.
Twelve commands
Three setup verbs run once per project. Eight daily verbs drive the canvas loop. One validator (smoke) catches regressions. The bare /design form was a v0.8 one-version compat stub redirecting to /design:edit. Removed in v0.9.
Setup. One-shot bootstrapping.
| Command | What it does |
|---|---|
/design:init | One-time project init: dependency pre-flight, install hints, skeleton .design/config.json. Mirrors /flow:init. Auto-invoked when other commands hit a missing config. |
/design:setup-ds <name> "[brief]" | Create a design system (first one, additional, or re-bootstrap with --force). Thin wrapper around skill design-system in bootstrap mode. |
/design:setup-docs [--full] | Refresh <designRoot>/README.md + INDEX.md. "READ THIS FIRST" docs that live in the design root and stay current. Auto-runs after /design:edit and /design:new. |
Daily. The canvas loop.
| Command | What it does |
|---|---|
/design:new <Name> "<brief>" | Scaffold a new multi-artboard canvas. Default --perfect (8 iterations, full critic panel, target 4.5/5). Opt out with --quick, --no-critic, --opt-out=palette|aesthetic|full. |
/design:edit "<feedback>" | Iterate on the active canvas in place. Default: auto-runs critic panel after the edit. Add --perfect [N] for N iterations of auto-fix, --no-critic to skip. |
/design:critic [--agent <name>] [--all] [--panel] | Spawn a critic panel (or single agent) against the active canvas. Design + a11y + up to 7 specialists (graphic, brand, typography, motion, copy, frontend, info-architecture). |
/design:screenshot [--area <name>] [--selector <css>] | Capture screenshot of the active canvas via agent-browser (HTTP URL, not file://). For visual review, /design:critic, or annotation loops. |
/design:rollback [--steps N] [--list] | Revert the last snapshot of the active canvas. Auto-snapshot stack lives at <designRoot>/_history/<slug>/. |
/design:browse [--port <n>] | Boot a local design browser. File tree of all canvases plus tabbed iframe preview on a free port. |
/design:handoff [--target <label>] [--force] | Migrate the active canvas (_active.json) to production code (target chosen from .design/config.json handoffTargets). |
/design:help | List all design commands grouped by category. |
Validate.
| Command | What it does |
|---|---|
/design:smoke | Batch screenshot every UI canvas + preview specimen. Flag blank iframes and visible error overlays. Catches "build green ≠ user-visible green" regressions. |
Dev server runtime files
The server writes three runtime files into <designRoot>/ that orchestrator commands rely on:
| File | Role |
|---|---|
_server.json | { pid, port, url, started }. So the orchestrator detects a live instance instead of spawning a duplicate. |
_active.json | { active, open_tabs, selected, last_change }. The inspector pushes the user's currently-selected element here over WebSocket so /design:edit "<feedback>" knows what to scope to. |
_history/<slug>/ | Auto-snapshot stack per canvas, consumed by /design:rollback. |
These are user-facing runtime state. Schemas are kept backwards-compatible across releases.
When to use which
- Bootstrap a new project.
/design:init, then/design:setup-ds <name> "<brief>" - Generating new mock.
/design:new - Iterating on what's on screen.
/design:edit - Second opinion without editing.
/design:critic - Locked-in design.
/design:handoffmigrates it to production code - Undo.
/design:rollback - Browse all canvases at once.
/design:browse - Forgotten a command name.
/design:help
Design system
A project's design root holds:
.design/system/. Tokens, type, color, radii, shadows, density, layout constants. Auto-loaded whenever Claude generates, reviews, or migrates UI in the repo..design/ui/. Reference UI prototypes and shared components (desktop / mobile / tablet).
These are pointed at by the design-system and ui-kit skills, also auto-loaded.
Configure
Per-repo behavior lives at .design/config.json (handoff targets, opt-out scopes per canvas, etc.). The schema is informal. See plugins/design/DESIGN_CONFIG.md when it lands (deferred to a later phase).