Design canvas loop
The /design:* slash commands. Canvas-first iteration on TSX canvases under .design/.
The canvas is the working surface. A .tsx file (React 19, transpiled by Bun), 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 Bun dev server mounts every canvas in a shared shell. Cmd+Click any element (Move tool) to scope the next /design:edit "<feedback>" to that selection. The server tracks the active tab and your selection over WebSocket and writes <designRoot>/_active.json for the slash commands to read.
- Cmd+Click the element
- selection persists to _active.json
- /design:edit reads from here
Thirteen commands
Three setup verbs run once per project. Nine 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:export <png|pdf|svg|html|pptx|canva|zip> | Export the active canvas — PNG / PDF / SVG / HTML / PPTX / Canva bundle / project ZIP. Same engine as the UI ⌘E dialog. |
/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. |
Edit directly in the browser
Not every change needs a command. The canvas browser carries a built-in editor for small, precise tweaks — and it writes straight back to the source .tsx, so there's no AI round-trip and nothing to reconcile.
Cmd+Click any element to select it, then open the right-hand Inspector (press I). Three tabs:
| Tab | What it does |
|---|---|
| Inspect | Position, size, ancestry and markup of the selected element, read-only — using the maude coordinate-field + swatch anatomy. |
| Layers | A browsable tree of the artboard's elements with type icons. Click to select, hover to highlight, and toggle any layer's visibility from its row. |
| CSS | A Figma-style design-token editor (see below). |
The CSS token editor
The CSS tab is a real token editor, not a textarea:
- Figma-style rows. Each property leads with a glyph. Numeric fields scrub left/right to change (or you type the value), and spacing fields accept Webflow-style modifiers.
- Bind to a Variable. Click a field's token chip to open a popover with two tabs — Custom for a literal value, Variables for the design system's tokens. The list is searchable, and each Variable shows its provenance so you know where it's defined. Multi-DS projects resolve the right system, and applying a token works across design systems.
- One colour picker. Every colour field — fill and border alike — opens the same unified picker, with a Custom SV/hue surface and a Variables tab.
- Scannable diff. Values you've set stand out; untouched rows recede, so the difference from the default is obvious at a glance. The leading dot on each row carries its status and resets it.
Edits commit on blur and write back to the canvas source, so what you see in the browser is what's in the file.
Edit text in place. Double-click any text element to retype its copy directly on the canvas — the new string is written back to the source too.
Dev server runtime files
The server writes three runtime files into <designRoot>/ that orchestrator commands rely on:
| File | Keys | Role |
|---|---|---|
| _server.json | pid (number), port (number), url (string), started (iso-8601) | Written by the dev-server; read by the orchestrator to detect a live instance. |
| _active.json | active (path), open_tabs (path[]), selected (element | null), last_change (iso-8601) | Pushed by the injected inspector; read by /design:edit to scope the next edit. |
| _history/<slug>/ | 000-envelope.md (brief), NNN-screen-*.png (snapshot), chat.md (transcript) | Auto-snapshot stack per canvas; read 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, the design-system list, theme, tokens path). It's written by /design:init and /design:setup-ds. See Bootstrap for the full shape and Multi-DS for the designSystems[] layout.