bluzir/claude-code-design

bluzir/claude-code-design

Skill Claude Code

Build animated motion design (explainer, transition reel, product intro). Uses Stage/Sprite timeline from animations.jsx for in-browser compositions or Remotion for full video/MP4 workflows.

bluzir/claude-code-design

Skill Claude Code

Apply buffered tweaks from pending.yaml to the source HTML file. Invoked when user says "save tweaks", "apply tweaks", "persist panel changes", or runs /apply-tweaks.

bluzir/claude-code-design

Skill Claude Code

Generate a working demo artifact on dummy content so the user can see a reference implementation. Use when user says "show me an example deck", "what does a prototype look like", "give me a starter", "I want to see an example of X". Generates live — not from a static gallery.

bluzir/claude-code-design

Skill Claude Code

Extract or build a design system (tokens, components, style guide). Use for "design system", "style guide", "tokens", "UI kit".

bluzir/claude-code-design

Skill Claude Code

First-run setup + health check. Verifies Chrome DevTools MCP, installs optional deps (monolith, pptxgenjs, puppeteer), creates working dirs, runs smoke test. Use on fresh clone or when things feel broken.

bluzir/claude-code-design

Skill Claude Code

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

bluzir/claude-code-design

Skill Claude Code

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

bluzir/claude-code-design

Skill Claude Code

Bundle an HTML artifact into a single self-contained file with all CSS/JS/images inlined as data URLs. Requires monolith CLI (brew install monolith).

bluzir/claude-code-design

Skill Claude Code

Pull design tokens + frame structure from a Figma URL via the Figma REST API. Requires FIGMATOKEN env var.

bluzir/claude-code-design

Skill Claude Code

Clone a GitHub repo and extract design tokens (colors, fonts, spacing) from its codebase. Use when user gives a github.com URL and wants a design system or design work rooted in the repo's style.

bluzir/claude-code-design

Skill Claude Code

Analyze an uploaded image (screenshot of a design, website, app) and extract design tokens to use as a starting point. Use when user pastes or attaches an image and says "recreate this", "match this image", "use this style".

bluzir/claude-code-design

Skill Claude Code

Resolve a natural-language element description ("the red button in the hero", "the third card from the top") to a concrete DOM element in the current preview + source-code location. Uses Chrome DevTools MCP takesnapshot UIDs for deterministic targeting. Use when user asks to change/style/remove a specific visual…

bluzir/claude-code-design

Skill Claude Code

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

bluzir/claude-code-design

Skill Claude Code

Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote. Uses deckstage.js starter and Claude Design taste rules.

bluzir/claude-code-design

Skill Claude Code

Add an in-artifact floating Tweaks panel that lets the user adjust colors, fonts, spacing, layout variants live in the preview. Persists via claude-pipe pattern (pending.yaml + apply-tweaks skill).

bluzir/claude-code-design

Skill Claude Code

Register a design artifact in design-assets.json, capture a thumbnail, and regenerate assets.html overview grid. Use when an artifact is ready for review, or user says "add to overview", "register", "track this".

bluzir/claude-code-design

Skill Claude Code

Explicitly load a design system from the org-level registry at /.claude/design-systems/ / for the current project. Use when user says "use the Acme design system", "apply company-x tokens", or similar.

bluzir/claude-code-design

Skill Claude Code

Screenshot + console sweep + visual inspection of an artifact for layout/color/typography regressions. Silent on pass, reports only on issues. Use after /done reports clean and before end-of-turn.

bluzir/claude-code-design

Skill Claude Code

Explore 3+ design variations in low-fi/greyscale on a labeled canvas for comparison. Use when user asks for wireframes, lo-fi, ideas, variants, sketches, many options.