Claude Code Frontend Design Toolkit

Everything I've found that actually makes Claude Code output better-looking frontends. Skills, plugins, MCP servers, CLAUDE.md tricks, organized by what you're trying to do.

April 2026 · 70+ tools · 10 sections

If this is useful, star it so others can find it. PRs welcome — see Contributing.

---

Table of Contents

• Design Skills — Kill the AI slop
• Site-Wide Theming — Make everything match
• Animation & Motion — GSAP, Framer Motion, scroll effects
• UI/UX Intelligence — Patterns, a11y, research
• Design-to-Code — Figma pipeline
• Testing & Browser Automation — Give Claude eyes
• Docs & Context — Stop hallucinating APIs
• Framework Skills — React, Tailwind, Three.js, D3
• Deploy & Preview — Ship it
• Recommended Stacks — What to install together
• Quick Reference
• Further Reading
• Contributing

---

Design Skills

The default Claude output looks like every other AI-generated page. Same fonts, same purple gradient, same card layout. These fix that.

Frontend Design (Official)

The one you install first. Anthropic's own skill that tells Claude to pick an actual aesthetic direction before writing code instead of defaulting to Inter + purple gradient + rounded cards.

What changes:

• Claude picks a direction before coding (brutalist, editorial, retro-futuristic, etc.)
• Requires real typography pairing, not just whatever sans-serif
• Blocks generic component patterns and cookie-cutter layouts
• Enforces CSS variables and cohesive color systems

Install this first. Everything else on this list assumes you have it.

UI/UX Pro Max — 62.6k stars

240+ styles, 127 font pairings, 99 UX guidelines. Tell it "fintech dashboard" and it picks a design system that makes sense for fintech. The v2.0 reasoning engine does the style matching automatically.

Also works with Cursor, Windsurf, Codex, and a dozen other agents if you're not locked into Claude Code.

Taste Skill

Tunable knobs for how wild Claude gets. You set design variance (safe to experimental), motion intensity (subtle to cinematic), and visual density (spacious to compact). Good if you want to dial in how opinionated the output is.

Frontend Design Pro Demo

11 named aesthetics with working HTML/CSS demos and the master prompts that generated them. Useful as a reference — you can tell Claude "use the Dark OLED Luxury style" and it knows what you mean.

Bencium UX Designer

Two modes: Controlled (ship to prod — WCAG, full responsive specs, motion constraints) and Innovative (explore — bold, creative, break rules). Comes with 830 lines of accessibility guidance and 600 lines of responsive patterns as separate reference files Claude loads when needed.

Files included: SKILL.md, ACCESSIBILITY.md (~830 lines), RESPONSIVE-DESIGN.md (~600 lines), MOTION-SPEC.md, DESIGN-SYSTEM-TEMPLATE.md

Brand Guidelines Skill

Anthropic's own brand colors and typography as a skill. Not useful on its own, but a great template if you want to make a brand skill for your own company.

---

Site-Wide Theming & Design Tokens

The design skills above teach Claude to think about aesthetics. These tools generate the actual config files — CSS variables, Tailwind @theme blocks, dark mode tokens — so your whole site looks consistent without re-explaining your brand on every prompt.

Design System Architect

Builds a full token system from scratch. OKLCH color space (P3 wide gamut), 4px spacing grid, semantic light/dark theming, typography scale. Outputs a Tailwind v4 @theme block you drop into your CSS.

Generates: semantic color mapping, brand-tinted neutrals (not pure white/black), typography scale, spacing grid, dark mode tokens. Everything becomes Tailwind utilities automatically.

Design Tokens Skill

This is the lazy-genius approach. It builds your entire color system off a single --brand-hue variable. Change one number and everything re-themes — primary, secondary, backgrounds, borders, muted states, all derived from that hue using OKLCH math.

The output looks like:

@import "tailwindcss";
@theme {
  --brand-hue: 250;
  --color-primary: oklch(0.6 0.2 var(--brand-hue));
  --color-background: oklch(0.995 0.005 var(--brand-hue));
  --color-foreground: oklch(0.15 0.02 var(--brand-hue));
  --color-muted: oklch(0.94 0.01 var(--brand-hue));
  --color-border: oklch(0.88 0.015 var(--brand-hue));
  /* + typography, spacing, radius, shadows */
}

One number controls the whole palette. That's the move.

Tailwind CSS Kit

Auto-activating Tailwind v4 skill. Covers the CSS-first @theme approach (no more tailwind.config.js), dark mode patterns, responsive utilities, component extraction, and plugin setup (@tailwindcss/forms, @tailwindcss/typography, etc.).

UI Styling Skill (ClaudeKit)

shadcn/ui + Tailwind + form handling in one skill. Generates themed component configs, @layer organization, dark mode toggle implementation, and react-hook-form + zod patterns. If your stack is shadcn, this is the one.

Tailwind Styling Skill (MajesticLabs)

React-focused Tailwind styling. Component-level theming, responsive layouts, design system integration. Lighter weight than the ClaudeKit version if you don't need shadcn.

Create Design System Rules (Figma)

Point it at your Figma file and it generates a rules file that Claude follows on every task. Encodes where components live, which tokens to use, how to handle spacing, what Tailwind conventions to follow. Set-and-forget consistency.

Output includes: component directory rules, token enforcement ("never hardcode hex"), spacing scale, Tailwind conventions, Figma-to-code workflow steps.

CLAUDE.md Theme Blocks (Anthropic's Approach)

Not a plugin — just a block of text in your CLAUDE.md. This is from Anthropic's official Frontend Aesthetics Cookbook and it's the fastest way to enforce a site-wide aesthetic. Five lines of config. No install.

Example — lock your whole project to a Solarpunk aesthetic:

## Frontend Theme
<always_use_solarpunk_theme>
Always design with Solarpunk aesthetic:
- Warm, optimistic color palettes (greens, golds, earth tones)
- Organic shapes mixed with technical elements
- Nature-inspired patterns and textures
- Bright, hopeful atmosphere
- Retro-futuristic typography
</always_use_solarpunk_theme>

More presets you can adapt:

Five lines in CLAUDE.md. Works immediately, no install.

When to use what

---

Animation & Motion

The design skills make Claude think about motion. These give it the actual library knowledge to implement it — GSAP timelines, Framer Motion variants, scroll-triggered effects, and motion auditing.

Animation Design Skills (freshtechbro)

23 skills covering the major animation libraries: GSAP + ScrollTrigger, Framer Motion, React Spring, Lottie, anime.js, Locomotive Scroll, Barba.js, and more. Each auto-activates when you ask for that type of animation. Also includes 3D skills (Three.js, React Three Fiber, Babylon.js, A-Frame, PixiJS).

This is the biggest gap the rest of the list doesn't cover — actually creating animations, not just polishing them.

Motion Skill (jezweb)

Focused specifically on Motion (formerly Framer Motion). Declarative animations, gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG manipulation. Includes bundle optimization patterns — LazyMotion at 4.6KB or useAnimate at 2.3KB. Tested against React 19 + Next.js 16 + Vite 7 + Tailwind v4.

Design Motion Principles

Motion design audit skill trained on Emil Kowalski, Jakub Krehel, and Jhey Tompkins. Finds conditional UI that should be animated but isn't (conditional renders without AnimatePresence, dynamic styles without transitions), then gives per-designer recommendations categorized by severity.

Good for reviewing existing code, not just generating new animations.

---

UI/UX Intelligence

Design thinking, UX research, accessibility patterns.

Wondelai UX/Growth Skills

25 skills based on actual books — Don Norman, Cialdini, Ries, Hormozi. UX design, marketing/CRO, product strategy, growth.

Google Design Skills (Stitch MCP)

From Google Labs. Includes: design-md (manage DESIGN.md files), enhance-prompt (add design vocabulary to prompts), react-components (Stitch to React), shadcn-ui (build with shadcn), stitch-loop (iterative design-code loop), remotion (generate walkthrough videos).

Jeffallan Claude Skills — 66 skills

Full-stack skill library. The frontend-relevant ones: React Expert (Server Components, hooks), Vue Expert, Angular Expert, Tailwind CSS Expert, CSS/SCSS Expert, Accessibility Specialist, Responsive Design Specialist. Each auto-activates and loads relevant reference docs.

UI/UX Design Skill (Useforclaude)

User research, personas, user flows, wireframing, prototyping, usability testing, information architecture, visual hierarchy, Gestalt principles, Fitts's Law, Hick's Law, WCAG, mobile-first, responsive layouts. Kitchen sink of UX knowledge.

---

Design-to-Code Pipeline

Figma to tokens to components to code.

Figma MCP Server (Official)

Claude reads your Figma files directly. Frames, components, tokens, layout data. Also works in reverse now — "Send this to Figma" captures your running UI as editable Figma layers (Code to Canvas, launched Feb 2026).

Key tools:

• get_design_context — structured XML of your selection (hierarchy, positions, sizes, styles)
• get_variable_defs — all variables and styles (color tokens, spacing, typography)
• get_code_connect_map — maps Figma components to your actual code components
• generate_figma_design — push running UI back to Figma as editable layers

The loop:

Figma design --> get_design_context --> Generate code --> Browser preview
     ^                                                        |
Code to Canvas <-- "Send this to Figma" <------------ Working UI

Add this to your CLAUDE.md for Figma projects:

## Figma Integration
- Use get_design_context to read design structure
- Use get_variable_defs for token definitions
- Check Code Connect mappings before creating new components
- Components: src/components/
- Tokens: src/styles/tokens.css

Figma Code Connect

Not an MCP — a Figma feature. Maps your Figma components to your actual code components. When Claude calls get_code_connect_map, it uses your existing <Button> instead of making a new one. Kills duplicate components.

Web Artifacts Builder

For building multi-component claude.ai HTML artifacts with React, Tailwind, and shadcn/ui. Teaches Claude component composition, proper Tailwind usage, and modern React patterns.

---

Testing & Browser Automation

Claude can't see your UI by default. These give it a browser.

Playwright MCP (Microsoft)

The standard. 25+ tools for browser control via accessibility tree snapshots (2-5KB) instead of screenshots (500KB+). Claude navigates, clicks, fills forms, takes screenshots, and reads your rendered DOM.

2026 updates worth knowing:

• --vision auto — accessibility tree most of the time, auto-switches to vision for canvas/WebGL
• --save-video=800x600 — record test sessions
• Chrome Extension bridge — uses your existing logged-in browser
• @playwright/cli companion — 4x fewer tokens than MCP (27k vs 114k)
• Core Web Vitals (LCP, CLS, INP) via --caps=devtools

Chrome DevTools MCP

For when Playwright isn't enough. Console inspection, network request analysis, performance profiling, DOM exploration, HAR export, device emulation. Think of it as the Network and Performance tabs, but Claude can read them.

The combo:

DEVELOP  --> Claude Code (terminal)
TEST     --> Playwright MCP (E2E, cross-browser)
DEBUG    --> Chrome DevTools MCP (perf, network)
VERIFY   --> Claude in Chrome (quick visual checks)

Webapp Testing Skill

Model-invoked Playwright automation. Auto-activates when Claude detects it needs to test something.

Storybook MCP (Chromatic)

Gives Claude access to your Storybook component library. It can look up existing components, read their docs and stories, and get build instructions before generating new UI. Also supports visual regression testing through Chromatic — screenshot diffs on every PR.

If you use Storybook, this stops Claude from reinventing components you already have.

Visual Regression Skill

Generates Storybook stories, Chromatic/Percy/BackstopJS config, and CI workflows for visual regression testing. Tell it "set up visual regression for my Button component" and it detects your stack, creates stories covering all variants, and wires up the CI pipeline.

Web Quality Skills (Addy Osmani)

From the author of web performance at Google. Five skills that cover Core Web Vitals (LCP, INP, CLS), accessibility (WCAG 2.1), SEO, and best practices. The orchestrator skill runs a full-site audit. Framework-aware — has specific patterns for Next.js, Vue/Nuxt, Svelte, and plain HTML.

---

Docs & Context

Claude's training data is stale. These give it current docs.

Context7

Fetches live, version-specific docs for whatever framework you're using. When you're on React 19, it pulls React 19 docs, not the React 18 APIs from Claude's training data. Covers 1000+ libraries.

Matters most for: React 19 vs 18 (different APIs), Tailwind v4 vs v3 (complete rewrite), Next.js App Router vs Pages Router.

Skill Seekers

Point it at any docs site and it generates a Claude skill from the content. Good for internal component libraries or frameworks Context7 doesn't cover.

Firecrawl MCP

Web scraping as an MCP server. Scrape docs, competitor sites, design inspiration. Fills gaps when Context7 doesn't have what you need.

---

Framework Skills

Specialized knowledge for specific frontend tech.

D3.js Visualization

Teaches Claude to produce D3 charts and interactive data visualizations. By @chrisvoncsefalvay.

Three.js Skills

3D elements and interactive experiences.

shadcn/ui Skill (Google)

Build UI components with shadcn/ui. Part of the Stitch MCP ecosystem.

TypeScript LSP

Real-time type checking via Language Server Protocol. Catches errors before Claude even finishes writing. If you write TypeScript, just install this.

Baseline UI / Accessibility / Motion+Performance

Three-skill pipeline. Run them in sequence after Claude generates a page:

1. /frontend-design             --> Generate the page
2. /baseline-ui                 --> Fix spacing, typography, states
3. /fixing-accessibility        --> Keyboard, labels, focus, semantics
4. /fixing-motion-performance   --> Reduced-motion, perf budgets

Install:

npx ui-skills add baseline-ui
npx ui-skills add fixing-accessibility
npx ui-skills add fixing-motion-performance

Design, then craft, then a11y, then perf. That's the loop.

---

Deploy & Preview

Vercel MCP

Manage deployments, builds, logs, domains from Claude Code. Deploy preview branches, check build status, manage env vars.

PinMe

Zero-config deploy. No servers, no accounts. Point it at a directory, get a URL.

---

Recommended Stacks

What to install together, depending on how you work.

Essentials (every project)

These three cover most of what you need. Start here.

claude plugin add anthropic/frontend-design
claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
claude mcp add playwright -s user -- npx @playwright/mcp@latest

Design-First (Figma to Code)

For teams with a designer handing off Figma files.

claude plugin add anthropic/frontend-design
claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
claude mcp add playwright -s user -- npx @playwright/mcp@latest
claude plugin add anthropic/typescript-lsp

Add to CLAUDE.md:

## Figma Integration
- Use get_design_context to read design structure
- Use get_variable_defs for token definitions
- Check Code Connect mappings before creating new components
- Components: src/components/
- Tokens: src/styles/tokens.css

Solo Builder (MVP speed)

Ship fast, look good. Minimal config.

claude plugin add anthropic/frontend-design
claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
claude plugin add nextlevelbuilder/ui-ux-pro-max-skill
claude mcp add playwright -s user -- npx @playwright/mcp@latest

Full Stack (component library + design system)

For teams that maintain their own component library.

# Design
claude plugin add anthropic/frontend-design
claude plugin add nextlevelbuilder/ui-ux-pro-max-skill

# Docs + types
claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
claude plugin add anthropic/typescript-lsp

# Figma
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

# Testing + debugging
claude mcp add playwright -s user -- npx @playwright/mcp@latest
claude mcp add chrome-devtools -s user -- npx @anthropic-ai/chrome-devtools-mcp@latest

# Polish pipeline
npx ui-skills add baseline-ui
npx ui-skills add fixing-accessibility
npx ui-skills add fixing-motion-performance

---

Quick Reference

Context budget

MCP servers eat tokens at session start. Keep 3-5 active max.

Mitigate with: /mcp disable <name> when not in use, Tool Search (lazy loading, cuts cost up to 95%), and preferring skills over MCP servers where possible. Skills only load ~100 tokens at session start.

---

Further Reading

---

Contributing

Know something that should be on this list? Open a PR.

To get included:

• Has to be specifically useful for frontend/design work
• Has to work with Claude Code
• Has to be maintained or from a trusted source
• High star count or official backing helps

---

License

MIT

---

wilwaldon.com · February 2026