Repository
bluzir/claude-code-design agent skills
- skills
- 18
- GitHub stars
- 106
GitHub description: “Claude Design reproduced for Claude Code — HTML decks, prototypes, design systems, animated videos via skills + starters + Chrome DevTools MCP”
- Stars
- 106 (11 forks)
- Licence
- No licence
- Last push
- Apr 2026
- Created
- Apr 2026
- claude-code
- claude-design
Install all skills
npx skills add bluzir/claude-code-designAdd --skill <name> for a single skill and -a <agent> to choose the agent (see the agent guides).
Skills in bluzir/claude-code-design, ranked
Ranked by score. Sort bymost stars,trending,newest,recently updated
| # | Skill | Repository | Stars | Used in | Tokens | Auto-check | Licence | Updated |
|---|---|---|---|---|---|---|---|---|
| 1 | Apply buffered tweaks from pending.yaml to the source HTML file. | bluzir/ | 106 | — | ~726 | Automated safety check: Pass | No licence | 5 mo ago |
| 2 | Generate a working demo artifact on dummy content so the user can see a reference implementation. | bluzir/ | 106 | — | ~782 | Automated safety check: Pass | No licence | 5 mo ago |
| 3 | Extract or build a design system (tokens, components, style guide). | bluzir/ | 106 | — | ~1.1k | Automated safety check: Pass | No licence | 5 mo ago |
| 4 | Clone a GitHub repo and extract design tokens (colors, fonts, spacing) from its codebase. | bluzir/ | 106 | — | ~796 | Automated safety check: Pass | No licence | 5 mo ago |
| 5 | Analyze an uploaded image (screenshot of a design, website, app) and extract design tokens to use as a starting point. | bluzir/ | 106 | — | ~676 | Automated safety check: Pass | No licence | 5 mo ago |
| 6 | 6.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. | bluzir/ | 106 | — | ~1.1k | Automated safety check: Pass | No licence | 5 mo ago |
| 7 | Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote. | bluzir/ | 106 | — | ~2.7k | Automated safety check: Pass | No licence | 5 mo ago |
| 8 | Register a design artifact in design-assets.json, capture a thumbnail, and regenerate assets.html overview grid. | bluzir/ | 106 | — | ~753 | Automated safety check: Pass | No licence | 5 mo ago |
| 9 | Explicitly load a design system from the org-level registry at ~/.claude/design-systems/<name/ for the current project. | bluzir/ | 106 | — | ~563 | Automated safety check: Pass | No licence | 5 mo ago |
| 10 | 10.Wireframe Explore 3+ design variations in low-fi/greyscale on a labeled canvas for comparison. | bluzir/ | 106 | — | ~597 | Automated safety check: Pass | No licence | 5 mo ago |
| 11 | Build animated motion design (explainer, transition reel, product intro). | bluzir/ | 106 | — | ~1.3k | Automated safety check: Pass | No licence | 5 mo ago |
| 12 | 12.Doctor First-run setup + health check. An agent skill from bluzir/claude-code-design. | bluzir/ | 106 | — | ~931 | Automated safety check: Pass | No licence | 5 mo ago |
| 13 | 13.Export PDF Export an HTML artifact to PDF via headless Chromium (puppeteer Page.pdf). | bluzir/ | 106 | — | ~811 | Automated safety check: Pass | No licence | 5 mo ago |
| 14 | 14.Ingest Figma Pull design tokens + frame structure from a Figma URL via the Figma REST API. | bluzir/ | 106 | — | ~745 | Automated safety check: Pass | No licence | 5 mo ago |
| 15 | Build a hi-fi clickable React prototype with realistic device chrome. | bluzir/ | 106 | — | ~1.2k | Automated safety check: Pass | No licence | 5 mo ago |
| 16 | Add an in-artifact floating Tweaks panel that lets the user adjust colors, fonts, spacing, layout variants live in the preview. | bluzir/ | 106 | — | ~2.2k | Automated safety check: Pass | No licence | 5 mo ago |
| 17 | 17.Export PPTX Export an HTML deck to PPTX via per-slide screenshots. An agent skill from bluzir/claude-code-design. | bluzir/ | 106 | — | ~433 | Automated safety check: Pass | No licence | 5 mo ago |
| 18 | Bundle an HTML artifact into a single self-contained file with all CSS/JS/images inlined as data URLs. | bluzir/ | 106 | — | ~385 | Automated safety check: Pass | No licence | 5 mo ago |
Questions, answered from the data.
What is the best skill in bluzir/claude-code-design?
Apply Tweaks from bluzir/claude-code-design ranks first of the 18 skills in bluzir/claude-code-design listed here, with the highest score: its repository has 106 GitHub stars, its SKILL.md loads about 726 tokens and it passes the automated safety check with no findings. Next come Copy Example and Create Design System.
Are the skills in bluzir/claude-code-design official?
None yet. All 18 skills in bluzir/claude-code-design listed here come from community repositories; a skill counts as official when the product's own GitHub organization publishes it.
How do I install all skills from bluzir/claude-code-design?
Run npx skills add bluzir/claude-code-design in your project: the open-source skills CLI installs the repository's skills into your coding agent's skills folder. To install a single skill, open its page here for the exact command.
How are these skills ranked?
By Skill Navigator score, which combines the GitHub stars of the skill's repository (shared across that repo's skills and discounted for large collections), how many other GitHub owners carry a copy of the skill, and automated SKILL.md quality checks, minus penalties for safety-check warnings and for each further skill from the same repository. Skills that fail the safety check are not listed.