Awesome Design Skills: A Curated Guide
A verified, curated directory of design skills for AI coding agents. Helps you pick the right skill for logos, UI components, animations, presentations, icons, and full design systems.
Skill Directory
Visual Design & UI Systems
| Skill | What It Does | Install | Source |
|---|---|---|---|
| UI/UX Pro Max | 67 UI styles, 161 industry rules, 161 color palettes, 57 font pairings, 25 chart types. Most comprehensive UI system. | git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill ~/.claude/skills/ui-ux-pro-max |
GitHub |
| Taste | Senior UI/UX engineering with metric-based rules. 7 variants: core taste + soft (premium), minimalist (editorial), brutalist, stitch (Google Stitch), output (anti-truncation), redesign. | git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste |
GitHub |
| Impeccable | 18 design sub-skills (/polish, /audit, /typeset, /overdrive, /colorize, /layout, etc.). Anti-pattern detection. CLI scanner with 24 design quality checks. | git clone https://github.com/pbakaus/impeccable ~/.claude/skills/impeccable |
GitHub |
| Design & Refine | Generates multiple distinct UI variations with side-by-side comparison at /__design_lab. Figma-style commenting. Next.js, Vite, Remix, Astro. |
git clone https://github.com/0xdesign/design-plugin ~/.claude/skills/design-plugin |
GitHub |
| Interface Design | Design engineering with craft, memory, and enforcement. 6 design directions (precision, warmth, sophistication, etc.) for consistent UI across projects. | git clone https://github.com/Dammyjay93/interface-design ~/.claude/skills/interface-design |
GitHub |
Components & Icons
| Skill | What It Does | Install | Source |
|---|---|---|---|
| Shadcnblocks | Expert knowledge of 1,338 blocks and 1,189 shadcn/ui components. Intelligent component selection and composition. | git clone https://github.com/masonjames/Shadcnblocks-Skill ~/.claude/skills/shadcnblocks |
GitHub |
| Better Icons | Search 200,000+ icons from 150+ collections (Lucide, Material, Heroicons, Tabler). Auto-learns your preferred icon sets. React/Vue/Svelte/SVG export. | git clone https://github.com/better-auth/better-icons ~/.claude/skills/better-icons |
GitHub |
SVG & Logo Design
| Skill | What It Does | Install | Source |
|---|---|---|---|
| SVG Logo Designer | Professional vector logos with 3-5 concepts per project. Horizontal, vertical, square, icon-only layouts. Clean semantic SVG. | git clone https://github.com/rknall/claude-skills ~/.claude/skills/rknall-claude-skills |
GitHub |
| Algorithmic Art | Parametric geometry, custom color theory, and interactive visualizations. Generative art with SVG. | Part of Anthropic Skills | GitHub |
Image Generation
| Skill | What It Does | Install | Source |
|---|---|---|---|
| Z-Image | Generate images from text using Alibaba's free Z-Image-Turbo model (ModelScope API). 2,000 free calls/day. Custom dimensions 512-2048px. English + Chinese prompts. | git clone https://github.com/FuturizeRush/zimage-skill ~/.claude/skills/zimage |
GitHub |
Animation & Motion
| Skill | What It Does | Install | Source |
|---|---|---|---|
| Animate | Animation patterns for Next.js/React based on Emil Kowalski's course. 8 working examples. | git clone https://github.com/delphi-ai/animate-skill ~/.claude/skills/animate |
GitHub |
| CSS Animation | Self-contained HTML/CSS animations for feature walkthroughs, demos, onboarding. No JS dependencies (uses Google Fonts). | git clone https://github.com/neonwatty/css-animation-skill ~/.claude/skills/css-animation |
GitHub |
Data Visualization
| Skill | What It Does | Install | Source |
|---|---|---|---|
| Visualise | Inline interactive visuals: SVG diagrams, HTML widgets, Chart.js charts, explainers. Progressive loading. No dependencies. | git clone https://github.com/bentossell/visualise ~/.claude/skills/visualise |
GitHub |
Presentations & Documents
| Skill | What It Does | Install | Source |
|---|---|---|---|
| PPTX | Full PowerPoint toolkit: read, edit, create .pptx files. Thumbnail grids, XML access, PDF conversion. | Part of Anthropic Skills. Deps: pip install "markitdown[pptx]" Pillow + npm install -g pptxgenjs |
GitHub |
Theming & Branding
| Skill | What It Does | Install | Source |
|---|---|---|---|
| Theme Factory | 10 pre-set themes with colors/fonts. Apply to any artifact. | Part of Anthropic Skills | GitHub |
| Brand Guidelines | Apply Anthropic's brand colors and typography. Template for creating brand guideline skills. | Part of Anthropic Skills | GitHub |
| Canvas Design | Advanced typography with 80+ fonts, color harmony, and text rendering effects. | Part of Anthropic Skills | GitHub |
| Web Artifacts Builder | Multi-component HTML artifacts using React, Tailwind, shadcn/ui. For claude.ai web artifacts. | Part of Anthropic Skills | GitHub |
Which Skill Should I Use?
By Task
| Task | Recommended Skill | Why |
|---|---|---|
| "Design a landing page" | UI/UX Pro Max + Taste (soft) | Pro Max gives structure, Taste gives premium feel |
| "Make a logo" | SVG Logo Designer | Purpose-built for logo workflows |
| "Add animations" | Animate (React/Next.js) or CSS Animation (vanilla) | Animate for frameworks, CSS Animation for zero-dep |
| "Find icons" | Better Icons | 200K+ icons, auto-learns preferences |
| "Build a component library" | Shadcnblocks + Impeccable | Shadcnblocks for components, Impeccable for QA |
| "Create a presentation" | PPTX | Full PowerPoint read/write/create |
| "Redesign my app" | Taste (redesign variant) | Audits and upgrades without breaking functionality |
| "Make a chart/diagram" | Visualise | Inline interactive charts and diagrams |
| "Design review / audit" | Impeccable | 25 deterministic checks + /audit command |
| "Apply a theme" | Theme Factory | 10 pre-built themes, instant application |
| "Generate data art" | Algorithmic Art | Parametric geometry and generative visuals |
| "Generate an image" | Z-Image | Free, 2K calls/day, no OpenAI key needed |
| "Compare UI options" | Design & Refine | Side-by-side variations with commenting |
By Framework
| Framework | Best Skills |
|---|---|
| Next.js / React | Taste, Animate, Shadcnblocks, Design & Refine |
| Tailwind CSS | UI/UX Pro Max, Impeccable, Shadcnblocks |
| Vanilla HTML/CSS | CSS Animation, Visualise, SVG Logo Designer |
| Vue / Svelte | Better Icons (multi-framework), UI/UX Pro Max |
| PowerPoint | PPTX |
Security Notes
All skills listed here have been reviewed for safety:
- No
curl | shpipes or obfuscated code - No credential harvesting (env var collection)
- No base64 decoding of hidden payloads
- No raw IP URL connections
Before installing any skill not listed here, check for these patterns:
# Quick security scan
grep -rn 'curl.*|.*sh\|base64.*decode\|eval(\|exec(' /path/to/skill/ --include="*.md" --include="*.js" --include="*.ts" --include="*.py" --include="*.sh"
Tips
- Start with one skill per category. Don't install everything at once.
- Taste + UI/UX Pro Max is the most popular combination for general UI work.
- Impeccable is the best for design QA and catching anti-patterns.
- Skills that are "Part of Anthropic Skills" come from the official Anthropic collection and are the safest option.
- Check skill GitHub repos for recent activity — abandoned skills may have outdated patterns.
- When skills conflict (different design opinions), the last-installed skill's rules typically take precedence.