bluzir

bluzir/claude-code-design

Command Claude Code

End-of-turn handoff — preview, wait for ready, screenshot, snapshot DOM, sweep console, auto-register asset.

bluzir/claude-code-design

Command Claude Code

Open HTML in browser and navigate Chrome DevTools MCP to same URL.

bluzir/claude-code-design

Command Claude Code

Screenshot current preview; optionally run JS between captures.

bluzir/claude-code-design

Command Claude Code

Start a local http server on 127.0.0.1:4567 to avoid file:// CORS issues. Required for React/Babel artifacts that load external .jsx files.

bluzir/claude-code-design

Skill Claude CodeCodex

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 CodeCodex

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 CodeCodex

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 CodeCodex

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 CodeCodex

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 CodeCodex

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 CodeCodex

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

bluzir/claude-code-design

Skill Claude CodeCodex

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 CodeCodex

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

bluzir/claude-code-design

Skill Claude CodeCodex

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 CodeCodex

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 CodeCodex

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 CodeCodex

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 CodeCodex

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 CodeCodex

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 CodeCodex

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 CodeCodex

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 CodeCodex

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 CodeCodex

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.

bluzir/claude-code-design

Instructions file

Claude Code instructions for bluzir/claude-code-design, covering claude code design workspace, core workflow, agent-autonomy discipline (phase 0 pre-flight), org-level design systems registry and ambiguity gate.