How to Design a UI with Claude Code Skills (2026)

To design a production-quality UI with Claude Code, install a design skill stack first. Start with web-design-guidelines (390,792 installs, skills.sh registry) for WCAG-aligned baseline rules, then shadcn-ui (40,113 installs) for component generation, tailwind (70,606 installs) for styling, and gsap (92,165 installs) for motion. This four-skill stack covers 95% of UI design work.

Why do you need design skills for Claude Code?

Claude Code without design skills generates functional but generic UIs. It defaults to inline styles, invents its own spacing values, picks arbitrary colours, and misses accessibility requirements. A design skill shifts these defaults: it loads design rules, component patterns, and quality constraints directly into the agent's context so every generated component starts from an informed baseline rather than first principles.

The skills.sh catalog (25,053 total listings, 81,930,457 total installs) has grown a dedicated frontend and design cluster - over 1,883 skills in the build/frontend subphase alone - precisely because this gap between "generates code" and "generates quality UI" is real and solvable.

What is the recommended design skill stack?

A complete Claude Code UI design stack uses four layers, each handling a distinct concern:

Layer 1: WCAG Guidelines - `web-design-guidelines` (390,792 installs) The foundation. Every component Claude Code generates starts from WCAG 2.2-aligned design rules: 4.5:1 colour contrast minimums, 44×44px touch targets, keyboard-navigable focus order, meaningful alt text. This is the most-installed design skill in the entire catalog because it is the most broadly applicable.

Layer 2: Component system - `shadcn-ui` (40,113 installs) The component layer. shadcn/ui copies owned React components into the project - Button, Form, Dialog, Table, Combobox - using Tailwind CSS variables for theming. Built on Radix UI, so standard interactive components are WAI-ARIA-compliant by construction. This is the default component framework for every major AI coding tool (v0, Lovable, Bolt, Claude Code).

Layer 3: Styling - `tailwind` (70,606 installs) The styling layer. Tailwind's utility class vocabulary is the optimal styling language for large language models: declarative, readable, no side effects. flex items-center gap-4 rounded-lg bg-primary text-primary-foreground describes exactly what Claude Code will generate and what you will review. The high-end-visual-design skill (121,468 installs) gives Claude Code stronger design taste on top of Tailwind.

Layer 4: Motion - `gsap` (92,165 installs) The animation layer. State transitions, page entrances, scroll-driven reveals, and micro-interactions - all orchestrated by GSAP's timeline API. Pair with waapi (68,750 installs) for CSS-native micro-animations. Always check prefers-reduced-motion (the gsap skill includes this pattern).

How do you install the design stack?

claude skills install web-design-guidelines
claude skills install shadcn-ui
claude skills install tailwind
claude skills install gsap

Installation order matters for Claude Code's context loading - guidelines first, then components, then styling, then animation.

How does Figma fit into this workflow?

The recommended Figma integration is a two-skill setup:

1. `figma-use` (3,951 installs) - connects Claude Code to the Figma MCP server for real-time frame reading 2. `implement-design` (5,940 installs) - generates React components from Figma frames using the installed component library

This replaces the traditional design handoff process: instead of a developer reading a Figma spec and writing components manually, Claude Code reads the Figma frame and generates components that use the shadcn/ui library already installed. For the complete Figma workflow, see Best Figma-to-Code Skills for Claude Code.

How do you add a formal design system?

If the project needs to scale beyond a single team - multiple products, a brand guidelines library, component governance - add a design system skill layer on top of the base stack:

`tailwind-design-system` (48,436 installs) maps Figma design tokens to Tailwind utility extensions, ensuring every CSS value in the codebase traces back to a named token in the design system.

`industrial-brutalist-ui` (103,576 installs) or a brand-specific equivalent provides the visual language layer - enforcing consistent spacing, colour usage, and component aesthetics across every AI-generated component.

`stitch::manage-design-system` (2,367 installs) audits the codebase for design system violations - hardcoded hex values, non-token spacing, inconsistent border radii - and proposes patches. Run quarterly to prevent drift.

For the full design system skill set, see Best Design System Skills for Claude Code.

How do you handle dark mode?

shadcn/ui ships a ThemeProvider and CSS variable strategy that treats dark mode as a first-class concern. Every component reads from --background, --foreground, --primary, etc., and the dark: Tailwind variant overrides these tokens for dark contexts.

With the shadcn-ui skill (40,113 installs) and tailwind skill (70,606 installs) both installed, asking Claude Code to "add dark mode" will: 1. Wrap the app in a ThemeProvider 2. Add a useTheme() hook and toggle button 3. Define dark-mode overrides for all CSS variables in globals.css 4. Add dark: Tailwind variants to any components that need explicit adjustments

How do you ensure accessibility throughout the design process?

The web-design-guidelines skill (390,792 installs) provides WCAG-informed generation from the start. Add audit (82,732 installs) for automated end-of-session checks that catch contrast failures, ARIA errors, and keyboard gaps. For existing codebases needing remediation, fixing-accessibility (12,985 installs) generates patches rather than reports.

For comprehensive coverage, see Best Accessibility Skills for Claude Code.

What does the complete skill stack look like?

All install numbers from the skills.sh registry, June 2026.

Key takeaways

• Start with web-design-guidelines (390,792 installs) - WCAG-aligned generation rules that apply to every component Claude Code produces.
• The base UI stack is four skills: guidelines → shadcn-ui → tailwind → gsap, covering component generation, styling, and animation.
• high-end-visual-design (121,468 installs) is the highest-installed frontend skill in the catalog - add it when visual quality matters as much as functional correctness.
• Figma integration requires figma-use (MCP connection) + implement-design (component generation from frames).
• Scale to a full design system with tailwind-design-system (tokens), industrial-brutalist-ui (visual language), and stitch::manage-design-system (governance).

Browse all frontend and design skills at skillselion.com/browse. Related deep-dives: shadcn/ui skills · Tailwind CSS skills · web animation skills · accessibility skills.

Common questions