{"id":50932103,"url":"https://github.com/bluzir/claude-code-design","last_synced_at":"2026-06-17T05:11:41.789Z","repository":{"id":363779128,"uuid":"1215641367","full_name":"bluzir/claude-code-design","owner":"bluzir","description":"Claude Design reproduced for Claude Code — HTML decks, prototypes, design systems, animated videos via skills + starters + Chrome DevTools MCP","archived":false,"fork":false,"pushed_at":"2026-04-20T07:49:07.000Z","size":96,"stargazers_count":91,"open_issues_count":1,"forks_count":10,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-10T10:35:45.032Z","etag":null,"topics":["claude-code","claude-design"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bluzir.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-20T05:43:30.000Z","updated_at":"2026-06-02T08:18:27.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/bluzir/claude-code-design","commit_stats":null,"previous_names":["bluzir/claude-code-design"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/bluzir/claude-code-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluzir%2Fclaude-code-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluzir%2Fclaude-code-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluzir%2Fclaude-code-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluzir%2Fclaude-code-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bluzir","download_url":"https://codeload.github.com/bluzir/claude-code-design/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluzir%2Fclaude-code-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34434817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-17T02:00:05.408Z","response_time":127,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["claude-code","claude-design"],"created_at":"2026-06-17T05:11:41.088Z","updated_at":"2026-06-17T05:11:41.780Z","avatar_url":"https://github.com/bluzir.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# claude-code-design\n\n**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.\n\n## Why this exists\n\n[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.\n\nThis 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).\n\n**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.\n\n## Install\n\n```bash\ngit clone https://github.com/bluzir/claude-code-design.git\ncd claude-code-design\n```\n\nIn a Claude Code session in this folder:\n\n```\n/doctor\n```\n\nFirst-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.\n\nFull requirements + walkthrough in [`GETTING_STARTED.md`](./GETTING_STARTED.md).\n\n## Features\n\n### Creating artifacts\n\nSkills that produce the five primary output kinds. All trigger by keyword in the brief — no launcher UI.\n\n| Skill | Use when you need | What it does |\n|---|---|---|\n| `/make-deck` | a pitch deck, slides, keynote | Generates a 1920×1080 HTML deck using the `\u003cdeck-stage\u003e` 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. |\n| `/interactive-prototype` | a clickable app mockup | Scaffolds a React+Babel (pinned 18.3.1 + `@babel/standalone` 7.29.0 with integrity hashes) inside `\u003cDeviceFrame kind=\"ios|android|mac|browser\"\u003e`. Uses component-prefixed style names (`headerStyles`, `cardStyles`) to avoid Babel multi-file collisions. Transitions via `\u003cTransition\u003e` from `animations.jsx`. |\n| `/wireframe` | to explore 3+ options side-by-side | Greyscale variations on a `\u003cDesignCanvas columns=N\u003e` grid. Placeholders instead of SVG-drawn imagery. Mixes conservative and novel patterns per the original spec's variation guidelines. |\n| `/animated-video` | a motion reel, product intro, explainer | Composes scenes with `\u003cStage duration width height\u003e` + `\u003cSprite start end easing\u003e` + `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`. |\n| `/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). |\n\n### Context ingestion\n\nWhen the brief references an external source, these skills load it before the workflow skill runs. Auto-detected at Phase 0 — manual invocation rarely needed.\n\n| Skill | Source | Mechanism |\n|---|---|---|\n| `/ingest-github \u003curl\u003e` | github.com repo | `gh repo clone --depth 1 --branch \u003cref\u003e` into `/tmp`, then `Glob` + `Read` across theme/tokens/tailwind files, regex-extract hex colors + fonts + spacing + radii, write `artifacts/ingested/\u003crepo\u003e-tokens.json` |\n| `/ingest-screenshot \u003cpath\u003e` | 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 |\n| `/ingest-figma \u003curl\u003e` | 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 |\n| `/use-design-system \u003cname\u003e` | `~/.claude/design-systems/\u003cname\u003e/` | Loads tokens.json from the cross-project registry into `.claude/design-tokens.json` for the current project |\n\n### Iteration\n\nFor refining an artifact after the first `/done`.\n\n| Skill | Use when you need | Mechanism |\n|---|---|---|\n| `/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 (`\u003c!-- tweak:key --\u003e...\u003c!-- /tweak:key --\u003e`). Panel writes to `pending.yaml` via File System Access API (falls back to clipboard / copy-paste). Shift+T toggles visibility. Hidden in \"final\" view |\n| `/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/\u003cISO8601\u003e.yaml` to session log (claude-pipe file-state pattern). `git diff applied/` is the revert audit trail |\n| `/inspect \"\u003cdescription\u003e\"` | 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` \u003e `data-*` \u003e unique class \u003e `outerHTML` substring. Replaces Claude Design's `\u003cmentioned-element\u003e` pointer protocol |\n| `/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 |\n\n### Organization\n\nProduced and maintained automatically — no explicit user action required.\n\n| Skill / output | Mechanism |\n|---|---|\n| `/done \u003cpath-or-url\u003e` | 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 (`\u003cdeck-stage\u003e` → Brand; `\u003cDeviceFrame\u003e` / `\u003cDesignCanvas\u003e` → Components; `data-design-group` attrs → per-section) |\n| `/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` |\n| `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 |\n\n### Export\n\nFour paths from HTML artifact to external formats.\n\n| Skill | Produces | Pipeline |\n|---|---|---|\n| `/export-pptx \u003cdeck.html\u003e` | `.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 `\u003cscript id=\"speaker-notes\"\u003e` attach per slide. Screenshots-only (not editable native shapes) |\n| `/export-pdf \u003cpath\u003e` | `.pdf` | Puppeteer `Page.pdf()` with `print` media emulation + deck-aware page size (reads `width`/`height` attrs off `\u003cdeck-stage\u003e` via public getters; falls back to A4 for non-deck artifacts) |\n| `/export-standalone \u003cin\u003e \u003cout\u003e` | single-file `.html` | `monolith --isolate --no-metadata`. Inlines all CSS/JS/images as data URLs. Works offline. Trade-off: 5–10× file size |\n| `/handoff \u003cpath\u003e` | `handoff/\u003cname\u003e/` | Extracts React components from inline `\u003cscript type=\"text/babel\"\u003e` blocks to separate `src/components/*.jsx`. Pulls tokens from `--tweak-*` vars and `\u003cstyle\u003e` blocks into `src/tokens.css` + `src/tokens.json`. Writes README with integration steps (Vite / CRA / standalone). Copies `.claude/last-preview.png` as reference |\n\n### Reference / cold-start\n\n| Skill | Purpose |\n|---|---|\n| `/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 |\n| `/copy-example \u003ckind\u003e` | Generates a working reference artifact in `examples/\u003ckind\u003e-\u003cts\u003e/` via a real skill run on a curated dummy brief. Live — not from a static gallery. `kind ∈ {deck, prototype, wireframe, animation, design-system}` |\n| `/preview \u003cpath-or-url\u003e` | `open` in default browser + Chrome DevTools MCP `navigate_page`. Accepts `file://` path or `http://` URL |\n| `/screenshot \u003cout.png\u003e [--step \"js\"]` | One or more screenshots of current preview; runs JS via `evaluate_script` between frames. Multi-step saves as `\u003cbase\u003e-01.png`, `\u003cbase\u003e-02.png`, … |\n| `/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://` |\n\n## Architecture\n\n```\nclaude-code-design/\n├── CLAUDE.md                           # project agent instructions (read by Claude)\n├── GETTING_STARTED.md                  # human-facing setup + walkthrough\n├── starters/                           # scaffolds copied into artifacts on demand\n│   ├── deck_stage.js                   #   \u003cdeck-stage\u003e web component (~260 LOC)\n│   ├── device_frame.jsx                #   \u003cDeviceFrame kind=...\u003e (~230 LOC)\n│   ├── design_canvas.jsx               #   \u003cDesignCanvas columns=N\u003e (~65 LOC)\n│   └── animations.jsx                  #   Stage/Sprite + hooks + Easing + primitives (~400 LOC)\n├── .claude/\n│   ├── skills/                         # 20 skills\n│   └── commands/                       # 4 atomic slash commands\n├── scripts/\n│   ├── export-pptx.mjs                 # puppeteer + pptxgenjs\n│   ├── export-pdf.mjs                  # puppeteer Page.pdf\n│   └── make-assets-index.mjs           # assets.html generator\n├── test/                               # smoke tests (deck, canvas, stage)\n├── package.json                        # dev deps: pptxgenjs, puppeteer\n└── artifacts/                          # user work (git-ignored)\n```\n\nCross-project brand registry (lives outside the repo, shared across all Claude Code projects on the machine):\n\n```\n~/.claude/design-systems/\n├── \u003cname\u003e/\n│   ├── tokens.json           # required — colors, fonts, spacing, radii, shadows\n│   └── preview.html          # optional visual reference\n```\n\nSession state for `/make-tweakable` + `/apply-tweaks`:\n\n```\nartifacts/tweaks/\u003csession-id\u003e/    # session-id = tweaks-\u003cslug\u003e-\u003cYYYYMMDD\u003e\n├── state.yaml                    # phase, last_applied_at, target_html\n├── pending.yaml                  # buffered panel edits\n└── applied/\u003cISO8601\u003e.yaml        # append-only apply log for revert\n```\n\n## External dependencies\n\nOne MCP + two native CLIs + two npm packages. All installed by `/doctor`.\n\n| | Installed via | Used by |\n|---|---|---|\n| Chrome DevTools MCP | `claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest` | `/preview`, `/done`, `/screenshot`, `/inspect`, `/verify-artifact`, `/register-asset` |\n| monolith (Rust) | `brew install monolith` | `/export-standalone` |\n| pptxgenjs | `npm install -D pptxgenjs` | `/export-pptx` |\n| puppeteer | `npm install -D puppeteer` | `/export-pptx`, `/export-pdf` |\n| `gh` (optional) | `brew install gh \u0026\u0026 gh auth login` | `/ingest-github` |\n| `FIGMA_TOKEN` env (optional) | `export FIGMA_TOKEN=...` | `/ingest-figma` |\n\n## Parity status\n\n**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`.\n\n**Adapted (different form, same outcome):**\n- No canvas workspace → `assets.html` auto-populated grid\n- No click-to-comment on elements → `/inspect \"\u003cdescription\u003e\"` via DOM snapshot UIDs\n- No pointer-drag to edit → natural-language references resolved to source locations\n- No toggle UI → heuristics (speaker notes, context detection, ambiguity gate)\n\n**Not reproducible in a terminal (explicit skip):**\n- Sub-second live preview loop — Chrome DevTools MCP round-trip is ~6–10s\n- Real-time multi-user group mode\n- Share URL (single-user local tool)\n- Canvas sketch pad\n\n## Status\n\nResearch / personal tool. Single-user local. macOS-first (uses `open`, `brew`). All state lives in the repo folder or `~/.claude/design-systems/` — not cloud-synced.\n\n## References\n\n- [Claude Design announcement (Anthropic Labs, April 2026)](https://www.anthropic.com/news/claude-design-anthropic-labs)\n- [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp)\n- [claude-pipe](https://github.com/bluzir/claude-pipe) — file-state pattern used for Tweaks persistence\n- [Remotion](https://www.remotion.dev) — API naming inspiration for `\u003cStage\u003e` / `\u003cSprite\u003e` / `useTime` / `interpolate`\n- [monolith](https://github.com/Y2Z/monolith) — standalone HTML bundler\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluzir%2Fclaude-code-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbluzir%2Fclaude-code-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluzir%2Fclaude-code-design/lists"}