The 18 Best Claude Code Skills for UI/UX Design: Complete Guide

If you use Claude Code to develop interfaces, you already know the problem: you ask for a landing page and you always get the same result. Inter font, purple gradient on white, cards with rounded corners, minimal animations. Anthropic calls it "distributive convergence": the model reproduces the statistical center of design decisions.

The solution? Design skills. These are markdown files that teach Claude how to design distinctive interfaces, with precise styles, curated color palettes, and refined typography. In this guide I present the 18 best skills for UI/UX design, each with its GitHub repository, the design style it produces, and instructions for installing it.

How Design Skills Work in Claude Code

Skills are SKILL.md files that are loaded into the .claude/skills/ folder of the project or in ~/.claude/skills/ for global use. When Claude detects a design task, it automatically reads the skill and applies the rules contained within, radically changing the quality of the output.

1. Anthropic Frontend Design (Official Skill)

Anthropic's official skill, with over 277,000 installations and updated February 2026, is the mandatory starting point. It works like a creative brief from an art director: before writing code, Claude chooses a precise aesthetic direction. The internal instructions were rewritten to push out of the statistical center of design decisions, with explicit rules against fonts "overused by AI" and generic purple gradients.

What It Produces

• Bold typography - Explicitly bans Inter, Roboto, Arial, and Space Grotesk ("overused by AI")
• Color palette with CSS variables - No more generic purple gradients
• Asymmetric layouts and unexpected compositions - Breaks the standard grid
• Intentional animations - Motion design only where it has real impact
• Visual details - Gradients, textures, and patterns with purpose

2. UI/UX Pro Max - The Complete Design Database

With 88,700 stars on GitHub, UI/UX Pro Max is the world's most popular community design skill. It's not just a skill: it's a reasoning engine that analyzes your project and automatically generates a complete design system.

What It Includes (v2.5.0, May 2026)

• 50+ UI styles - Glassmorphism, Claymorphism, Brutalism, Neumorphism, Swiss Design, and many more
• 161 color palettes - Aligned to specific product categories
• 57 font combinations - With ready-to-use Google Fonts imports
• 161 reasoning rules - Industry-specific
• 99 UX guidelines - Accessibility, touch, performance, responsive layout
• 25 chart types - For dashboards and data visualization
• 12 tech stacks - HTML/Tailwind, React, Next.js, Vue, Nuxt, Svelte, ShadCN, Flutter, SwiftUI, React Native, and from 2026 also Jetpack Compose for Android

The key strength is the Design System Generator: you say "fintech dashboard" and the skill automatically chooses style, colors, and typography consistent with the fintech sector.

What's new in v2.5.0 (Skills Expansion)

• Specialized sub-skills: banner design, slides, ui-styling, managed as independent modules
• Design System Persistence with a Master + Overrides pattern, similar to Interface Design but natively integrated
• Claude Code Skill Discovery: the skill auto-registers in the Claude Code /skills marketplace
• i18n cleanup: removed non-English noise from internal prompts, improving quality on smaller models

3. Taste Skill - Premium Design with Adjustable Parameters

Taste Skill by Leonxlnx (37,400 stars today, +181% vs March 2026) is the most starred third-party design skill for frontend on GitHub. It is not a single skill but a suite of 11 specialized variants plus 3 image generation skills, with a 3-parameter system that works like an audio equalizer on the AI design output.

The Three Adjustable Parameters

• DESIGN_VARIANCE (1-10) – From clean, centered layouts (1) to asymmetric, modern compositions (10)
• MOTION_INTENSITY (1-10) – From simple hover effects (1) to magnetic, scroll-triggered animations (10)
• VISUAL_DENSITY (1-10) – From luxury, airy spacing (1) to dense, compact dashboards (10)

The 11 Specialized Variants

• taste-skill – Versatile default. Premium output without forcing a narrow visual style
• elite-frontend-design-2026 🆕 (added April 18, 2026) – "Elite" variant with more aggressive typography and layout rules, built for premium portfolios and landing pages
• bugbuster 🆕 (added April 18, 2026) – Diagnostic mode: auto-detects and fixes visual hierarchy, contrast ratio and spacing issues in existing code
• gpt-taste – Stricter, more opinionated variant for GPT/Codex models with more aggressive anti-slop rules
• image-to-code-skill – Image-first workflow: generates a premium design image, deeply analyzes it, then implements faithful frontend code
• redesign-skill – Audits an existing UI and improves layout, spacing, hierarchy, styling decisions
• soft-skill – Calm, expensive-looking interfaces with softer contrast, more whitespace, premium fonts, smooth spring motion
• minimalist-skill – Editorial, clean product UI inspired by tools like Notion or Linear, restrained palette
• brutalist-skill ⚠️ BETA – Harder mechanical visual language: Swiss typography, sharp contrast, raw structure (experimental)
• stitch-skill – Google Stitch-compatible semantic design rules with extra DESIGN.md export format
• output-skill – Forces complete output, no placeholder comments, no skipped implementation steps

3 Image Generation Skills (Bonus)

• imagegen-frontend-web – Awwwards-level reference images for premium websites, strong typography and generous spacing
• imagegen-frontend-mobile – iOS, Android and cross-platform mobile app screen concepts with phone mockup framing
• brandkit – Brand identity boards: logo concepts, color systems, typography, mockups for any category

Examples Built with Taste Skill

Two screenshots from the Floria project, generated end-to-end with the taste-skill set:

👁 Taste Skill example - Floria project (top section) with premium typography and dark accents
👁 Taste Skill example - Floria project (bottom section) with magnetic hover and motion design

Impeccable: The Anti-Slop Design Language (35,800 stars)

Impeccable by Paul Bakaus (former Google Developer Advocate and creator of jQuery UI) crossed 35,800 stars on GitHub in days, becoming one of the most popular design skills in the Claude Code ecosystem. Instead of fixing the output downstream, it gives the model a different reference distribution, so aesthetic slop is never generated in the first place.

1 Skill + 23 Commands

Impeccable installs a shared design vocabulary with the AI: 23 commands like polish, audit, critique, distill, animate, bolder and quieter, to steer the design with a single word instead of long descriptions.

7 Reference Files

Every command loads 7 dedicated references: typography, color, motion, spatial, interaction, responsive and UX writing, plus a brand-vs-product register that adapts the defaults to the context (brand landing or application). This is what keeps complex animations and layout logic under control, close to the responsive design level of large companies.

Impeccable or Taste Skill?

They are complementary, not alternatives: Taste Skill tunes the style with parameters and variants (like an equalizer), Impeccable sets a curated vocabulary and anti-patterns that shift the model's baseline taste. Many developers use them together.

4. Interface Design - Persistence and Consistency Across Sessions

Interface Design by Dammyjay93 (5,000 stars) solves a problem that other skills ignore: consistency across sessions. It saves design decisions in a .interface-design/system.md file that persists from one session to the next.

Why It Matters

• Persistent memory - Design patterns are saved and reused
• No stylistic drift - Buttons, spacing, and colors remain consistent over time
• Predefined design directions - "Precision & Density", "Warmth & Approachability", and others
• Automatic enforcement - Claude declares design choices before each component

5. Frontend Design Pro Demo - 11 Distinct Aesthetics

If you want to concretely see what Claude can produce with the right skills, Frontend Design Pro Demo is a showcase of 11 completely different design styles, each with a master prompt, signature effects, and production-ready code.

The 11 Available Styles

1. Swiss Minimalism - Rigorous grids, massive typography, asymmetric magazine layouts
2. Neumorphism - Extruded elements, multiple shadows, pressed-in button effects
3. Glassmorphism - Animated mesh gradients, frosted glass cards, backdrop-blur effects
4. Brutalism - 3-4px thick borders, hard shadows, broken grids
5. Claymorphism - Inflated 3D clay shapes, candy pastel palette
6. Aurora / Mesh Gradient - Slowly breathing blobs, glass overlays
7. Retro-Futurism / Cyberpunk - Neon, CRT scanlines, HUD elements, glitch effects
8. 3D Hyperrealism - Realistic textures, cinematic lighting
9. Vibrant Block / Maximalist - Contrasting RGB blocks, thick borders
10. Dark OLED Luxury - Black background with gold accents, spotlight cursor
11. Organic / Biomorphic - Earth palette, morphing blobs, wavy dividers

6. Designer Skills - 63 Skills for Complete Design

Owl-Listener/designer-skills (1.5k stars) is the broadest collection dedicated entirely to design. With 63 skills and 27 commands organized in 8 plugins, it covers the entire design cycle, from user research to developer handoff.

The 8 Plugins

• design-research (10 skills) - Persona, empathy map, journey map with /discover command
• design-systems (8 skills) - Creation and management of design systems
• ux-strategy (8 skills) - UX strategy from vision to metrics with /strategize
• ui-design (9 skills) - UI components, accessible color palettes with /color-palette
• interaction-design (7 skills) - Interaction patterns and micro-interactions
• prototyping-testing (8 skills) - Prototyping and usability testing
• design-ops (7 skills) - Design workflow and processes
• designer-toolkit (6 skills) - Daily utilities, handoff with /handoff

6-bis. Awesome Claude Design - 28+ DESIGN.md Ready for Claude Design

Launched alongside Claude Design (April 17, 2026) and already at 704 stars, awesome-claude-design by Rohit Ghumare is the reference repo for anyone using Anthropic Labs' new visual workspace. It is not a skill in the strict sense: it is a library of production-ready DESIGN.md files to paste into Claude Design and get results aligned with real brands.

What's in the Repo

• 9 aesthetic families - Editorial Minimalism, Terminal-Core, Warm Editorial, Data-Dense Pro, Cinematic Dark, Playful Color, Glass / Soft-Futurism, Neon Brutalist, Cult / Indie
• 28+ production-ready DESIGN.md files - Real examples inspired by Linear, Claude, Figma, Arc, Runway and other reference brands
• 7 remix recipes - Token system combinations across families (e.g. Editorial + Neon Brutalist)
• 5 community prompt packs - With expected outputs and quality checklists
• Anti-slop kit - Documents Claude Design default fingerprints and counter-strategies to avoid them

7. Bencium UX Designer - Two Variants for Two Mindsets

Bencium (273 stars) offers something unique: two variants of the same skill for two completely different approaches to design.

The Two Variants

• Innovative UX Designer - Encourages bold creative choices, visual experimentation, and innovation
• Controlled UX Designer - Prioritizes consistency, control, and adherence to standards

Each variant includes over 28,000 characters of UX reference material with dedicated documents: ACCESSIBILITY.md (WCAG 2.1/2.2), RESPONSIVE-DESIGN.md, MOTION-SPEC.md, and DESIGN-SYSTEM-TEMPLATE.md.

8. Vercel Agent Skills - Performance and Accessibility

Vercel Labs (27,700 stars) offers a set of skills focused not on aesthetics but on the technical quality of UI code. They are the perfect complement to visual skills.

The Included Skills

• Web Design Guidelines - Audit against 100+ accessibility, performance, and UX rules
• React Best Practices - 57 rules in 8 categories for optimal React performance
• Composition Patterns - Scalable component architecture, compound components
• React Native - Mobile optimization with FlashList, GPU-accelerated animations

9. Refactoring UI - Automated Visual Audit

Your UI looks "off" but you can't explain why? Refactoring UI knows. This skill audits the visual hierarchy, spacing, shadows, and colors of your interface using the Refactoring UI system by Adam Wathan and Steve Schoger, and tells you exactly what to fix.

What It Does

• Visual hierarchy audit - Analyzes weight, sizes, and contrast of elements
• Spacing correction - Identifies inconsistencies in the spacing system
• Shadow optimization - Suggests shadows consistent with the elevation context
• Color palette - Verifies that colors follow a harmonic scale

10. UX Heuristics - Nielsen's 10 Heuristics Automated

UX Heuristics performs a complete audit of your interface by applying Nielsen's 10 heuristics and Steve Krug's "Don't Make Me Think" principles. It returns a report with severity score for each issue found and an explanation of why it's broken.

What It Does

• Nielsen's 10 heuristics - System status visibility, real-world match, user control, consistency, error prevention and more
• Krug's principles - "Don't make me think" applied to your UI
• Severity scoring - Each issue classified by severity with fix priority
• Detailed report - What's broken, why it's broken, how to fix it

11. iOS HIG Design - Apple Human Interface Guidelines Built-In

If you develop iOS apps, this skill is essential. iOS HIG Design knows the Apple Human Interface Guidelines by heart: safe areas, Dynamic Island, tab bars, modals, Dark Mode, Dynamic Type, VoiceOver. Everything handled correctly on the first try.

What It Does

• Safe areas - Automatic handling of notch, Dynamic Island, and home indicator
• Native components - Tab bars, navigation bars, modals, and sheets following the HIG
• Dark Mode - Full support with semantic colors and material backgrounds
• Dynamic Type - Typography that adapts to the user's accessibility preferences
• VoiceOver - Screen reader accessibility handled natively

12. Hooked UX - The Hook Model for Retention

Users sign up and then disappear? Hooked UX applies the Hook Model by Nir Eyal to your product: analyzes triggers, actions, variable rewards, and investment, and tells you where the retention loop breaks.

What It Does

• Trigger Analysis - Identifies internal and external triggers that bring users to the app
• Action Mapping - Verifies that the required action is simple enough
• Reward Audit - Checks that the variable reward is present and satisfying
• Investment Check - Evaluates whether the user is investing enough to return
• Break diagnosis - Indicates exactly where and why the loop is breaking

13. Design Sprint - 5-Day Sprint in a Single Skill

Design Sprint brings the Google Ventures Design Sprint framework directly into Claude Code. It runs a structured 5-day process in a single flow: problem framing, sketching, decision, prototyping, and testing. One skill, one complete process.

The 5 Phases

• Day 1 - Understand: Problem framing, challenge mapping, and objectives
• Day 2 - Sketch: Ideation and sketching of alternative solutions
• Day 3 - Decide: Voting and choosing the best solution
• Day 4 - Prototype: Realistic prototype of the chosen solution
• Day 5 - Test: Validation and testing of the prototype

Comparison Table: Which Skill Should You Choose?

Bonus: 5 Official Anthropic Skills from the Skills Repository

Beyond the 13 community skills, Anthropic maintains an official skills repository that includes powerful tools for design and content creation. They all install with npx skills add.

Figma to Code

Transforms Figma designs into production-ready code with 1:1 fidelity. Simply paste the Figma link and Claude handles the conversion, respecting pixel-perfect layouts, spacing and typography.

npx skills add https://github.com/anthropics/skills --skill figma

Theme Factory

Access 10 curated themes with professional color palettes and font pairings, ready to elevate any design instantly. Each theme includes CSS variables, typographic scales and accessibility-tested color combinations.

npx skills add https://github.com/anthropics/skills --skill theme-factory

Brand Guidelines

Claude automatically applies your brand colors, fonts, spacing and tone to every output, ensuring a consistent identity across all designs. Perfect for teams that need to maintain visual consistency across different projects.

npx skills add https://github.com/anthropics/skills --skill brand-guidelines

Canvas Design

Create visual art, posters and real compositions, exported directly as PNG or PDF files. Unlike other skills that generate HTML/CSS code, Canvas Design produces graphic outputs ready for print or publication.

npx skills add https://github.com/anthropics/skills --skill canvas-design

Skill Creator

The meta-skill: create custom skills tailored to your design system, brand voice or workflow, giving you total creative control. With Skill Creator you can build your own project-specific design skills.

npx skills add https://github.com/anthropics/skills --skill skill-creator

Where to Find More Skills: The Main Marketplaces

3 Extra Skills for Specific Workflows

Beyond the 18 main skills, three skills deserve a special mention for specific use cases that the others don't cover: advanced animations, App Store screenshots, and systematic design evaluation.

Emil Kowalski Design: Animations and Micro-Interactions

Based on the technical articles by Emil Kowalski (emilkowal.ski), this skill covers animations, page transitions, micro-interactions, and that level of polish that separates a professional interface from an amateur one. If your project needs serious motion design, this is the right skill.

npx skills add emilkowalski/skill

Real example: a portfolio site with masonry layout, smooth hover transitions, bold typography, parallax effects, and responsive media queries. The kind of work that gets an Awwwards score above 8.

App Store Screenshots: Production-Ready iOS Assets

A skill designed for mobile app developers who need to prepare App Store screenshots. It scaffolds a Next.js project, creates advertisement-style designs with device mockups, and exports them at all resolutions required by Apple.

npx skills add ParthJadhav/app-store-screenshots

Real example: screenshots for a coffee tracker app with multiple iPhone mockups, marketing text like "Your coffee, perfected." and "Glanceable coffee intel.", with real app screens placed inside device mockups.

GStack by Garry Tan (Y Combinator): Design Rating 0-10

Created by the CEO of Y Combinator, this skill rates every design dimension on a 0-10 scale: typography, spacing, color, hierarchy, accessibility. For each dimension, it explains what a 10 looks like and how to get there. It also includes an AI Slop Detection system that identifies and flags generic AI patterns.

git clone https://github.com/garrytan/gstack.git

Real example: it analyzes Y Combinator's page, evaluates the layout, partner cards, and hero section. For each dimension, it assigns a score and explains how to improve it. The workflow is interactive: it asks for confirmation on every design choice.

Design Inspiration: Where to Find Real Designs

Skills teach Claude how to design. But you also need visual references to pass as context. Here are the 5 best resources for finding real designs to use as a starting point.

Frequently Asked Questions (FAQ)

1. Can I use multiple design skills at the same time?

Yes, but with caution. Skills can conflict if they give opposing instructions. The best combination is a visual skill (like Pro Max or Taste) + a technical skill (like Vercel). Avoid combining two visual skills that prescribe different styles.

2. Do the skills also work on Cursor, Windsurf, and other AI editors?

Many do. UI/UX Pro Max officially supports 15+ platforms including Cursor, Windsurf, GitHub Copilot, and Gemini CLI. Skills that use the standard SKILL.md format are generally compatible with other AI editors.

3. How do I choose the right design style for my project?

It depends on the sector. For fintech and enterprise use Swiss Minimalism or Neumorphism. For creative apps and portfolios try Glassmorphism or Aurora. For bold brands, Brutalism or Maximalist. UI/UX Pro Max makes this choice automatically based on the project type.

4. Do skills slow down Claude Code?

Minimally. Skills are text files that are read at the beginning of the session. The performance impact is negligible. A skill with 28,000 characters (like Bencium) adds less than 1 second to the initial load.

5. How do I create a custom design skill?

Create a SKILL.md file in the .claude/skills/my-skill/ folder of the project. Describe the desired style, the fonts to use, the color palette, and layout rules. Claude will automatically read this file when working on design tasks in the project.

6. What is the best skill for beginners?

Anthropic Frontend Design. It is the official skill, well-tested and up to date. It produces immediately better results without requiring any configuration. After trying it, you can explore Pro Max for more options or Taste for more control.

7. Where can I find more design skills beyond these 8?

Several curated collections exist. The awesome-claude-skills and awesome-claude-code repositories on GitHub contain hundreds of skills cataloged by category, including many dedicated to design.

Conclusions

Design skills transform Claude Code from a generic interface generator into a creative assistant with aesthetic taste. The choice depends on what you need:

• Want to get started right away? Install Anthropic Frontend Design
• Want the maximum choice? Try UI/UX Pro Max with 67 styles
• Want fine control? Use Taste Skill with its 3 parameters
• Want to explore styles? Check out the demo of 11 styles
• Want the complete process? Install the 63 Designer Skills
• Using Claude Design? Clone awesome-claude-design to start from real brands

Do you have questions about design skills for Claude Code or want advice on which one to choose? Use the contact form below to write to me.

Share

Rate this article Thanks for your rating!

✉