bluzir/claude-code-design
17 skills833 installs1.7k starsGitHub
Install
npx skills add https://github.com/bluzir/claude-code-designSkills in this repo
1Animated VideoThis skill builds animated motion design such as explainers, transition reels, and product intros. It chooses between a standalone HTML path using a Remotion-compatible in-browser Stage/Sprite timeline engine and a Remotion path for long-form or MP4-export video. A developer uses it when producing web animations or exportable video from a Claude Code session.95installs2Export PdfExport-pdf converts an HTML artifact to PDF using headless Chromium (puppeteer's Page.pdf). For multi-slide decks it emits one page per section at the deck's native dimensions, and general pages default to A4. A developer runs it to produce a shareable PDF deliverable from a design artifact.66installs3Interactive PrototypeInteractive-prototype builds a working clickable React prototype wrapped in a device frame, using pinned React and Babel inline. It auto-detects a design system from tokens, a codebase, or an ingested source, then generates multi-screen navigation with mock data. A developer uses it to produce an interactive demo triggered by prototype or clickable requests.60installs4WireframeThis skill produces low-fidelity greyscale wireframes with at least three variations for comparison. It builds an HTML canvas using a bundled design_canvas.jsx component and lays out options like classic, dense and novel side by side with placeholders instead of real imagery. A developer uses it early to explore UI directions and pick which one to develop into a prototype.58installs5Ingest ScreenshotIngest-screenshot analyzes an uploaded image with Claude's vision and extracts approximate design tokens: dominant colors, typography, spacing rhythm, radii, and component patterns. It flags confidence per category because vision hex is approximate. A developer runs it when they paste a design image and want to match its style.54installs6Make DeckMake-deck builds an HTML slide deck (1920x1080, keyboard nav, exportable) from a brief, using the deck_stage.js starter and a committed visual system. It auto-detects design context, budgets each slide vertically, and runs a programmatic overflow audit before finishing. A developer uses it to produce a presentation, pitch deck, or keynote that looks designed.48installs7Use Design SystemThis skill loads a stored design system from an org-level registry at ~/.claude/design-systems into the active project. It reads the system's tokens.json (colors, fonts, spacing, radii, shadows) and copies it to .claude/design-tokens.json so later design commands reuse it. A developer runs it when they say 'use the Acme design system' and want subsequent artifacts to follow those brand tokens.44installs8Make TweakableMake-tweakable injects a floating Tweaks panel into an existing HTML artifact so a user can adjust colors, fonts, spacing, and layout variants live in the preview. It refactors values to --tweak- CSS custom properties and persists changes to pending.yaml. A developer uses it to let stakeholders tune an artifact without editing code, then applies the tweaks back to source.43installs9DoctorDoctor is a first-run setup and health-check command for the claude-code-design toolkit. It inventories dependencies (Chrome DevTools MCP, Node, gh, monolith), reports what is missing, and offers a consented install and a smoke test. A developer runs it on a fresh clone or when the toolkit feels broken.42installs10Export PptxExport-pptx turns an HTML deck into a PowerPoint file by screenshotting each deck-stage section into a 1920x1080 slide with optional speaker notes. Slides are raster images, not natively editable in PowerPoint. A developer runs it to hand a deck to stakeholders who need a .pptx.42installs11InspectInspect resolves a natural-language element description (like the red button in the hero) to a concrete DOM node in the current preview and its source-code location. It uses Chrome DevTools MCP snapshot UIDs, then greps the source HTML to return a file path, line range, and selector. A developer uses it to change a visual element without pointing at source code.42installs12Verify ArtifactThis skill runs a visual verification pass on an HTML artifact after a build. It takes a fresh screenshot, sweeps the browser console, and reasons over the rendering against design taste rules for typography, layout, color and content. For decks it runs a programmatic overflow audit because hidden overflow is visually silent. It stays silent when the artifact passes and otherwise reports issues ranked P0 to P3.41installs13Apply TweaksThis skill persists queued visual tweaks stored in pending.yaml back into a source HTML file. It reads session state, validates each pending key against the file's __tweak_schema, applies changes to CSS variables on :root or marker blocks, logs applied changes, clears the pending buffer, and supports reverting the last tweaks. A developer uses it to save panel-adjusted design values into the HTML.40installs14Ingest GithubIngest-github clones a GitHub repo via the gh CLI and extracts design tokens (colors, fonts, spacing, radii) from theme files, token files, and Tailwind configs. It writes a structured tokens.json. A developer runs it to root new design work in a repo's existing visual style.40installs15Register AssetRegister-asset adds a design artifact to design-assets.json, captures a thumbnail, and regenerates an assets.html overview grid. Each card shows name, subtitle, a color-coded status badge, and a mini-menu for approve or request-changes. A developer runs it when an artifact is ready for review or to track it in the overview.40installs16Export StandaloneExport-standalone inlines all of an HTML artifact's CSS, JS, and images into a single self-contained file using the monolith CLI. The result works offline and can be dropped in email or chat, at the cost of a larger file. A developer runs it to produce a portable, dependency-free deliverable.39installs17Ingest FigmaIngest-figma extracts design tokens and frame structure from a Figma file using the Figma REST API, writing colors, text styles, and components to a tokens.json. Without a FIGMA_TOKEN it falls back to parsing an exported SVG. A developer runs it to root new design work in an existing Figma file.39installs