claude-code-design

Claude Design (by Anthropic Labs), reproduced for Claude Code CLI. Same outputs — HTML decks, interactive prototypes, design systems, animated videos — through an agent in your terminal instead of a canvas-based web app.

Why this exists

Claude Design is Anthropic Labs' chat+canvas for producing polished designs. It lives on claude.ai.

This repo gives you the same generative power — minus the canvas — through skills + starter components + Chrome DevTools MCP, all inside Claude Code. Same endpoint (HTML artifacts with designer-grade polish), different medium (terminal, not browser).

The philosophy: every Claude Design "user clicks a tab / drops a chip / toggles a switch" moment becomes an agent-autonomy moment here. Phase 0 auto-detects context. Skill triggers route by keyword. Heuristics decide speaker-notes vs self-sufficient slides. /done auto-registers every artifact. You tell the agent what you want; it handles the orchestration.

Install

git clone https://github.com/bluzir/claude-code-design.git
cd claude-code-design

In a Claude Code session in this folder:

/doctor

First-run setup: installs Chrome DevTools MCP (claude mcp add chrome-devtools), monolith (brew install), pptxgenjs + puppeteer (npm install -D), creates working dirs, runs a smoke test.

Full requirements + walkthrough in GETTING_STARTED.md.

Features

Creating artifacts

Skills that produce the five primary output kinds. All trigger by keyword in the brief — no launcher UI.

Skill	Use when you need	What it does
/make-deck	a pitch deck, slides, keynote	Generates a 1920×1080 HTML deck using the <deck-stage> web component. Handles keyboard nav (←/→/Space/Home/End), tap-edge navigation on mobile, overlay slide counter, @media print one-page-per-slide, localStorage position, speaker-notes postMessage. Notes on/off is decided by a heuristic over brief length + audience keywords.
/interactive-prototype	a clickable app mockup	Scaffolds a React+Babel (pinned 18.3.1 + @babel/standalone 7.29.0 with integrity hashes) inside `<DeviceFrame kind="ios
/wireframe	to explore 3+ options side-by-side	Greyscale variations on a <DesignCanvas columns=N> grid. Placeholders instead of SVG-drawn imagery. Mixes conservative and novel patterns per the original spec's variation guidelines.
/animated-video	a motion reel, product intro, explainer	Composes scenes with <Stage duration width height> + <Sprite start end easing> + useTime() / useSprite() (Remotion-compatible API). Auto-scale canvas, built-in scrubber with play/pause, postMessage {seekMs} protocol for frame export. MP4 path delegates to remotion-best-practices.
/create-design-system	to extract or build a brand	Reads theme.*, tokens.*, tailwind.config.*, _variables.* from a codebase; or builds from brief via frontend-design. Renders a living style guide with sections tagged data-design-group (Colors / Type / Spacing / Components / Brand). Offers to persist to the cross-project registry (see below).

Context ingestion

When the brief references an external source, these skills load it before the workflow skill runs. Auto-detected at Phase 0 — manual invocation rarely needed.

Skill	Source	Mechanism
/ingest-github <url>	github.com repo	gh repo clone --depth 1 --branch <ref> into /tmp, then Glob + Read across theme/tokens/tailwind files, regex-extract hex colors + fonts + spacing + radii, write artifacts/ingested/<repo>-tokens.json
/ingest-screenshot <path>	PNG / JPG / WebP	Multimodal Read loads the image; Claude's vision infers dominant colors (hex approximate), typography family, component patterns, spacing rhythm. Output includes per-category confidence flags
/ingest-figma <url>	figma.com file/frame	Requires FIGMA_TOKEN env var. curl to /v1/files/{key}/nodes?ids={id} + /v1/files/{key}/styles. SVG fallback path for users without a token
/use-design-system <name>	~/.claude/design-systems/<name>/	Loads tokens.json from the cross-project registry into .claude/design-tokens.json for the current project

Iteration

For refining an artifact after the first /done.

Skill	Use when you need	Mechanism
/make-tweakable	a floating panel so a viewer can change colors/fonts/spacing live in the preview	Injects a panel bound to CSS custom properties (--tweak-*) + marker blocks (<!-- tweak:key -->...<!-- /tweak:key -->). Panel writes to pending.yaml via File System Access API (falls back to clipboard / copy-paste). Shift+T toggles visibility. Hidden in "final" view
/apply-tweaks	to persist panel changes to disk	Reads pending.yaml, validates against __tweak_schema JSON in the artifact, applies each change via Edit to the source HTML, appends applied/<ISO8601>.yaml to session log (claude-pipe file-state pattern). git diff applied/ is the revert audit trail
/inspect "<description>"	to reference a specific visual element without pointing at source	Uses .claude/last-snapshot.json from mcp__chrome-devtools__take_snapshot (accessibility tree with UIDs). Matches description → UID → source location via id > data-* > unique class > outerHTML substring. Replaces Claude Design's <mentioned-element> pointer protocol
/verify-artifact	a visual QA pass before claiming done	Silent-on-pass. Fresh screenshot + console sweep; vision reads the image and checks Claude Design anti-pattern list (min 24px text on slides, contrast ≥ 4.5:1, no gradient backgrounds, no Inter/Roboto, no AI-slop card patterns, no filler). Reports P0/P1/P2/P3 with coordinates or element descriptions

Organization

Produced and maintained automatically — no explicit user action required.

Skill / output	Mechanism
/done <path-or-url>	End-of-turn gate. /preview + async await for document.readyState === 'complete' + document.fonts.ready (2s race). Screenshot → .claude/last-preview.png. DOM snapshot → .claude/last-snapshot.json. Console sweep for errors. On clean, auto-invokes /register-asset --auto with group inferred from content (<deck-stage> → Brand; <DeviceFrame> / <DesignCanvas> → Components; data-design-group attrs → per-section)
/register-asset	Upserts entry in design-assets.json, reuses .claude/last-preview.png as thumbnail when --auto, regenerates assets.html via scripts/make-assets-index.mjs
assets.html	Auto-generated grid, grouped by Type / Colors / Spacing / Components / Brand. Cards show thumbnail, name, subtitle, status badge (needs-review / approved / changes-requested), updated date. The persistent workspace — equivalent of Claude Design's Recent tab

Export

Four paths from HTML artifact to external formats.

Skill	Produces	Pipeline
/export-pptx <deck.html>	.pptx	Puppeteer loads the artifact at 1920×1080, iterates slides via deck-stage.goToSlide(i) with noscale attr for natural dims, screenshots each, builds the PPTX with pptxgenjs. Speaker notes from <script id="speaker-notes"> attach per slide. Screenshots-only (not editable native shapes)
/export-pdf <path>	.pdf	Puppeteer Page.pdf() with print media emulation + deck-aware page size (reads width/height attrs off <deck-stage> via public getters; falls back to A4 for non-deck artifacts)
/export-standalone <in> <out>	single-file .html	monolith --isolate --no-metadata. Inlines all CSS/JS/images as data URLs. Works offline. Trade-off: 5–10× file size
/handoff <path>	handoff/<name>/	Extracts React components from inline <script type="text/babel"> blocks to separate src/components/*.jsx. Pulls tokens from --tweak-* vars and <style> blocks into src/tokens.css + src/tokens.json. Writes README with integration steps (Vite / CRA / standalone). Copies .claude/last-preview.png as reference

Reference / cold-start

Skill	Purpose
/doctor	First-run health check. claude mcp list, which monolith / node / gh, verifies project structure, offers to install missing pieces (each with user consent), creates working dirs, runs a smoke test, prints skill cheat-sheet
/copy-example <kind>	Generates a working reference artifact in examples/<kind>-<ts>/ via a real skill run on a curated dummy brief. Live — not from a static gallery. kind ∈ {deck, prototype, wireframe, animation, design-system}
/preview <path-or-url>	open in default browser + Chrome DevTools MCP navigate_page. Accepts file:// path or http:// URL
/screenshot <out.png> [--step "js"]	One or more screenshots of current preview; runs JS via evaluate_script between frames. Multi-step saves as <base>-01.png, <base>-02.png, …
/serve [port]	python3 -m http.server 4567 --bind 127.0.0.1 in background. Required for artifacts that load external .jsx starters — Babel-standalone fetches via XHR which CORS-blocks on file://

Architecture

claude-code-design/
├── CLAUDE.md                           # project agent instructions (read by Claude)
├── GETTING_STARTED.md                  # human-facing setup + walkthrough
├── starters/                           # scaffolds copied into artifacts on demand
│   ├── deck_stage.js                   #   <deck-stage> web component (~260 LOC)
│   ├── device_frame.jsx                #   <DeviceFrame kind=...> (~230 LOC)
│   ├── design_canvas.jsx               #   <DesignCanvas columns=N> (~65 LOC)
│   └── animations.jsx                  #   Stage/Sprite + hooks + Easing + primitives (~400 LOC)
├── .claude/
│   ├── skills/                         # 20 skills
│   └── commands/                       # 4 atomic slash commands
├── scripts/
│   ├── export-pptx.mjs                 # puppeteer + pptxgenjs
│   ├── export-pdf.mjs                  # puppeteer Page.pdf
│   └── make-assets-index.mjs           # assets.html generator
├── test/                               # smoke tests (deck, canvas, stage)
├── package.json                        # dev deps: pptxgenjs, puppeteer
└── artifacts/                          # user work (git-ignored)

Cross-project brand registry (lives outside the repo, shared across all Claude Code projects on the machine):

~/.claude/design-systems/
├── <name>/
│   ├── tokens.json           # required — colors, fonts, spacing, radii, shadows
│   └── preview.html          # optional visual reference

Session state for /make-tweakable + /apply-tweaks:

artifacts/tweaks/<session-id>/    # session-id = tweaks-<slug>-<YYYYMMDD>
├── state.yaml                    # phase, last_applied_at, target_html
├── pending.yaml                  # buffered panel edits
└── applied/<ISO8601>.yaml        # append-only apply log for revert

External dependencies

One MCP + two native CLIs + two npm packages. All installed by /doctor.

	Installed via	Used by
Chrome DevTools MCP	claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest	/preview, /done, /screenshot, /inspect, /verify-artifact, /register-asset
monolith (Rust)	brew install monolith	/export-standalone
pptxgenjs	npm install -D pptxgenjs	/export-pptx
puppeteer	npm install -D puppeteer	/export-pptx, /export-pdf
gh (optional)	brew install gh && gh auth login	/ingest-github
FIGMA_TOKEN env (optional)	export FIGMA_TOKEN=...	/ingest-figma

Parity status

Reproduced: deck-stage scaling + letterboxing + keyboard nav + speaker notes + print CSS, device frames (iPhone 15 Pro with Dynamic Island, Pixel 8 with punch-hole, macOS traffic lights, Chromium browser chrome), design canvas, Stage/Sprite timeline with Remotion-compatible API, ingestion from codebase / screenshot / Figma, tweakable panel with claude-pipe on-disk persistence, PPTX / PDF / standalone export, visual verification with vision, cross-project design-system registry, auto-register on /done.

Adapted (different form, same outcome):

• No canvas workspace → assets.html auto-populated grid
• No click-to-comment on elements → /inspect "<description>" via DOM snapshot UIDs
• No pointer-drag to edit → natural-language references resolved to source locations
• No toggle UI → heuristics (speaker notes, context detection, ambiguity gate)

Not reproducible in a terminal (explicit skip):

• Sub-second live preview loop — Chrome DevTools MCP round-trip is ~6–10s
• Real-time multi-user group mode
• Share URL (single-user local tool)
• Canvas sketch pad

Status

Research / personal tool. Single-user local. macOS-first (uses open, brew). All state lives in the repo folder or ~/.claude/design-systems/ — not cloud-synced.

References

• Claude Design announcement (Anthropic Labs, April 2026)
• Chrome DevTools MCP
• claude-pipe — file-state pattern used for Tweaks persistence
• Remotion — API naming inspiration for <Stage> / <Sprite> / useTime / interpolate
• monolith — standalone HTML bundler

License

MIT