Updated 5mo ago
by bluzir
claude-code-design
Claude Design reproduced for Claude Code — HTML decks, prototypes, design systems, animated videos via skills + starters + Chrome DevTools MCP
106 GitHub stars (106)
+1 in 16 days
| Period | New stars |
|---|---|
| Oct 1 | 0 |
| Oct 2 | 0 |
| Oct 3 | 0 |
| Oct 4 | 0 |
| Oct 5 | +1 |
| Oct 6 | 0 |
| Oct 7 | 0 |
| Oct 8 | 0 |
| Oct 9 | 0 |
| Oct 10 | 0 |
| Oct 11 | 0 |
| Oct 12 | 0 |
| Oct 13 | 0 |
| Oct 14 | 0 |
| Oct 15 | 0 |
| Oct 16 | 0 |
- 19 skills (19 skills found in its SKILL.md files)
- 11 forks (11 forks)
- 5mo ago last update (Last updated 5mo ago)
Install
Skills CLI
npx skills add bluzir/claude-code-design
Asks which skills and agents to install. Just one: npx skills add bluzir/claude-code-design --skill animated-video — add -g for every project.
Claude Code
git clone https://github.com/bluzir/claude-code-designcp -r "claude-code-design/.claude/skills/animated-video" ~/.claude/skills/
Copies the animated-video skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add bluzir/claude-code-design
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md.
-
animated-video
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.
.claude/skills/animated-video/SKILL.md on GitHub (opens in a new tab) -
apply-tweaks
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.
.claude/skills/apply-tweaks/SKILL.md on GitHub (opens in a new tab) -
copy-example
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.
.claude/skills/copy-example/SKILL.md on GitHub (opens in a new tab) -
create-design-system
Extract or build a design system (tokens, components, style guide). Use for "design system", "style guide", "tokens", "UI kit".
.claude/skills/create-design-system/SKILL.md on GitHub (opens in a new tab) -
doctor
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.
.claude/skills/doctor/SKILL.md on GitHub (opens in a new tab) -
export-pdf
Export an HTML artifact to PDF via headless Chromium (puppeteer Page.pdf). For multi-slide decks one page per <section>.
.claude/skills/export-pdf/SKILL.md on GitHub (opens in a new tab) -
export-pptx
Export an HTML deck to PPTX via per-slide screenshots. Requires Node + pptxgenjs + puppeteer (run /doctor first).
.claude/skills/export-pptx/SKILL.md on GitHub (opens in a new tab) -
export-standalone
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).
.claude/skills/export-standalone/SKILL.md on GitHub (opens in a new tab) -
ingest-figma
Pull design tokens + frame structure from a Figma URL via the Figma REST API. Requires FIGMA_TOKEN env var.
.claude/skills/ingest-figma/SKILL.md on GitHub (opens in a new tab) -
ingest-github
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.
.claude/skills/ingest-github/SKILL.md on GitHub (opens in a new tab) -
ingest-screenshot
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".
.claude/skills/ingest-screenshot/SKILL.md on GitHub (opens in a new tab) -
inspect
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 take_snapshot UIDs for deterministic targeting. Use when user asks to change/style/remove a specific visual element without pointing at source code.
.claude/skills/inspect/SKILL.md on GitHub (opens in a new tab) -
interactive-prototype
Build a hi-fi clickable React prototype with realistic device chrome. Triggered by "prototype", "clickable", "app mockup", "interactive demo".
.claude/skills/interactive-prototype/SKILL.md on GitHub (opens in a new tab) -
make-deck
Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote. Uses deck_stage.js starter and Claude Design taste rules.
.claude/skills/make-deck/SKILL.md on GitHub (opens in a new tab) -
make-tweakable
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).
.claude/skills/make-tweakable/SKILL.md on GitHub (opens in a new tab) -
register-asset
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".
.claude/skills/register-asset/SKILL.md on GitHub (opens in a new tab) -
use-design-system
Explicitly load a design system from the org-level registry at ~/.claude/design-systems/<name>/ for the current project. Use when user says "use the Acme design system", "apply company-x tokens", or similar.
.claude/skills/use-design-system/SKILL.md on GitHub (opens in a new tab) -
verify-artifact
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.
.claude/skills/verify-artifact/SKILL.md on GitHub (opens in a new tab) -
wireframe
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.
.claude/skills/wireframe/SKILL.md on GitHub (opens in a new tab)
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.
Similar skills
-
baoyu-designby JimLiu Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as se…
-
ECCby affaan-m The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Cod…
-
reaby morluto Reverse engineer anything with agents, from app behavior down to native binaries.
-
ponytailby DietrichGebert Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
-
ui-ux-pro-max-skillby nextlevelbuilder An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
-
graphifyby Graphify-Labs Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Curs…