https://github.com/bluzir/claude-code-design
Claude Design reproduced for Claude Code — HTML decks, prototypes, design systems, animated videos via skills + starters + Chrome DevTools MCP
https://github.com/bluzir/claude-code-design
claude-code claude-design
Last synced: about 18 hours ago
JSON representation
Claude Design reproduced for Claude Code — HTML decks, prototypes, design systems, animated videos via skills + starters + Chrome DevTools MCP
- Host: GitHub
- URL: https://github.com/bluzir/claude-code-design
- Owner: bluzir
- Created: 2026-04-20T05:43:30.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-20T07:49:07.000Z (about 2 months ago)
- Last Synced: 2026-06-10T10:35:45.032Z (8 days ago)
- Topics: claude-code, claude-design
- Language: JavaScript
- Homepage:
- Size: 93.8 KB
- Stars: 91
- Watchers: 0
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://www.anthropic.com/news/claude-design-anthropic-labs) 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
```bash
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`](./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 `` 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 ``. Uses component-prefixed style names (`headerStyles`, `cardStyles`) to avoid Babel multi-file collisions. Transitions via `` from `animations.jsx`. |
| `/wireframe` | to explore 3+ options side-by-side | Greyscale variations on a `` 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 `` + `` + `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 ` | github.com repo | `gh repo clone --depth 1 --branch ` into `/tmp`, then `Glob` + `Read` across theme/tokens/tailwind files, regex-extract hex colors + fonts + spacing + radii, write `artifacts/ingested/-tokens.json` |
| `/ingest-screenshot ` | 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 ` | 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 ` | `~/.claude/design-systems//` | 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 (`...`). 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/.yaml` to session log (claude-pipe file-state pattern). `git diff applied/` is the revert audit trail |
| `/inspect ""` | 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 `` 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 ` | 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 (`` → Brand; `` / `` → 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 ` | `.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 `` 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)](https://www.anthropic.com/news/claude-design-anthropic-labs)
- [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp)
- [claude-pipe](https://github.com/bluzir/claude-pipe) — file-state pattern used for Tweaks persistence
- [Remotion](https://www.remotion.dev) — API naming inspiration for `<Stage>` / `<Sprite>` / `useTime` / `interpolate`
- [monolith](https://github.com/Y2Z/monolith) — standalone HTML bundler
## License
MIT