bluzir/claude-code-design

1

animated-video Build animated motion design (explainer, transition reel, product intro). Uses Stage/Sprite timeline from animations.…

bluzir/claude-code-design

104

2

export-pdf Export an HTML artifact to PDF via headless Chromium (puppeteer Page.pdf). For multi-slide decks one page per <sectio…

bluzir/claude-code-design

74

3

interactive-prototype Build a hi-fi clickable React prototype with realistic device chrome. Triggered by "prototype", "clickable", "app moc…

bluzir/claude-code-design

71

4

wireframe Explore 3+ design variations in low-fi/greyscale on a labeled canvas for comparison. Use when user asks for wireframe…

bluzir/claude-code-design

65

5

ingest-screenshot Analyze an uploaded image (screenshot of a design, website, app) and extract design tokens to use as a starting point…

bluzir/claude-code-design

61

6

make-deck Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides,…

bluzir/claude-code-design

52

7

use-design-system Explicitly load a design system from the org-level registry at ~/.claude/design-systems/<name>/ for the current proje…

bluzir/claude-code-design

49

8

export-pptx Export an HTML deck to PPTX via per-slide screenshots. Requires Node + pptxgenjs + puppeteer (run /doctor first).

bluzir/claude-code-design

48

9

inspect Resolve a natural-language element description ("the red button in the hero", "the third card from the top") to a con…

bluzir/claude-code-design

47

10

make-tweakable Add an in-artifact floating Tweaks panel that lets the user adjust colors, fonts, spacing, layout variants live in th…

bluzir/claude-code-design

47

11

doctor First-run setup + health check. Verifies Chrome DevTools MCP, installs optional deps (monolith, pptxgenjs, puppeteer)…

bluzir/claude-code-design

46

12

ingest-github Clone a GitHub repo and extract design tokens (colors, fonts, spacing) from its codebase. Use when user gives a githu…

bluzir/claude-code-design

45

13

verify-artifact Screenshot + console sweep + visual inspection of an artifact for layout/color/typography regressions. Silent on pass…

bluzir/claude-code-design

45

14

apply-tweaks Apply buffered tweaks from pending.yaml to the source HTML file. Invoked when user says "save tweaks", "apply tweaks"…

bluzir/claude-code-design

44

15

register-asset Register a design artifact in design-assets.json, capture a thumbnail, and regenerate assets.html overview grid. Use …

bluzir/claude-code-design

44

16

export-standalone Bundle an HTML artifact into a single self-contained file with all CSS/JS/images inlined as data URLs. Requires `mono…

bluzir/claude-code-design

43

17

ingest-figma Pull design tokens + frame structure from a Figma URL via the Figma REST API. Requires FIGMA_TOKEN env var.

bluzir/claude-code-design

43