bluzir/claude-code-design
19 skills · 852 total installs
$npx skills add bluzir/claude-code-designSkillInstalls
animated-videoBuild animated motion design (explainer, transition reel, product intro).export-pdfExport an HTML artifact to PDF via headless Chromium (puppeteer Page.pdf). For multi-slide decks one page per <section>.interactive-prototypeBuild a hi-fi clickable React prototype with realistic device chrome. Triggered by "prototype", "clickable", "app mockup", "interactive demo".wireframeExplore 3+ design variations in low-fi/greyscale on a labeled canvas for comparison.ingest-screenshotAnalyze an uploaded image (screenshot of a design, website, app) and extract design tokens to use as a starting point.make-deckBuild an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote.use-design-systemExplicitly load a design system from the org-level registry at ~/.claude/design-systems/<name>/ for the current project.make-tweakableAdd an in-artifact floating Tweaks panel that lets the user adjust colors, fonts, spacing, layout variants live in the preview.doctorFirst-run setup + health check. Verifies Chrome DevTools MCP, installs optional deps (monolith, pptxgenjs, puppeteer), creates working dirs, runs smoke test.export-pptxExport an HTML deck to PPTX via per-slide screenshots. Requires Node + pptxgenjs + puppeteer (run /doctor first).inspectResolve 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 +…verify-artifactScreenshot + console sweep + visual inspection of an artifact for layout/color/typography regressions. Silent on pass, reports only on issues.apply-tweaksApply buffered tweaks from pending.yaml to the source HTML file.ingest-githubClone a GitHub repo and extract design tokens (colors, fonts, spacing) from its codebase.register-assetRegister a design artifact in design-assets.json, capture a thumbnail, and regenerate assets.html overview grid.export-standaloneBundle an HTML artifact into a single self-contained file with all CSS/JS/images inlined as data URLs. Requires `monolith` CLI (brew install monolith).ingest-figmaPull design tokens + frame structure from a Figma URL via the Figma REST API. Requires FIGMA_TOKEN env var.copy-exampleGenerate a working demo artifact on dummy content so the user can see a reference implementation.create-design-systemExtract or build a design system (tokens, components, style guide). Use for "design system", "style guide", "tokens", "UI kit".