Everything I've found that actually makes Claude Code output better-looking frontends. Skills, plugins, MCP servers, CLAUDE.md tricks
# 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
Tools
Tools
No tool list yet. Remote servers get one after the first health check.
How do I install Claude Code Frontend Design Toolkit?
Copy the stdio config for Cursor, Claude Desktop, Claude Code, or VS Code on this page. It uses the publisher's install, not a PlugMCP proxy.
Does Claude Code Frontend Design Toolkit need an API key?
No required environment variable is listed on this record.
What transport does Claude Code Frontend Design Toolkit use?
Claude Code Frontend Design Toolkit runs locally over stdio.
When was Claude Code Frontend Design Toolkit last checked?
Last checked 2026-11-13. Everything I've found that actually makes Claude Code output better-looking frontends. Skills, plugins, MCP servers, CLAUDE.md tricks
# 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
From the publisher
Documentation
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.
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.
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.
Author
nextlevelbuilder
Install
claude plugin add nextlevelbuilder/ui-ux-pro-max-skill
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.
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.
Author
ClaudeKit (faafospecialist)
Install
claude plugin add claudekit/frontend-design-pro-demo
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.
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.
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.
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.).
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.
React-focused Tailwind styling. Component-level theming, responsive layouts, design system integration. Lighter weight than the ClaudeKit version if you don't need shadcn.
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.
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.
Five lines in CLAUDE.md. Works immediately, no install.
When to use what
You want...
Use this
"Just make it look good fast"
CLAUDE.md theme block
Full token system with OKLCH
Design Tokens or Design System Architect
shadcn/ui theming
UI Styling Skill
Auto-rules from your Figma file
Create Design System Rules
AI picks the right style for your product
UI/UX Pro Max
Named aesthetic presets
Frontend Design Pro Demo
Tunable variance knobs
Taste Skill
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.
Author
freshtechbro
Install
claude plugin marketplace add freshtechbro/claudedesignskills then install individual skills
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.
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).
Author
Figma
Install
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
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.
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.
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.
Author
Microsoft
Install
claude mcp add playwright -s user -- npx @playwright/mcp@latest
--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.
Author
Anthropic
Install
claude mcp add chrome-devtools -s user -- npx @anthropic-ai/chrome-devtools-mcp@latest
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.
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.
Author
Chromatic
Install
claude mcp add storybook-mcp --transport http https://your-storybook-url/mcp --scope project
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.
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.
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.
Author
Upstash
Install
claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
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.
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
Tool
Type
Category
Stars
Setup
Frontend Design
Skill
Design
Official
One command
UI/UX Pro Max
Skill
Design
16.9k
One command
Taste Skill
Skill
Design
—
One command
Frontend Design Pro
Skill
Design
—
One command
Bencium UX Designer
Skill
Design
—
Manual copy
Design System Architect
Skill
Theming
—
Manual copy
Design Tokens (phrazzld)
Skill
Theming
—
Manual copy
Tailwind CSS Kit
Skill
Theming
—
One command
UI Styling (ClaudeKit)
Skill
Theming
—
Manual copy
CLAUDE.md Theme Block
Config
Theming
N/A
Copy-paste
Create Design System Rules
Skill
Theming
—
Figma MCP needed
Animation Skills (freshtechbro)
Skill
Animation
—
One command
Motion Skill (jezweb)
Skill
Animation
—
Manual copy
Design Motion Principles
Skill
Animation
—
Manual copy
Figma MCP
MCP
Design to Code
Official
Config needed
Storybook MCP
MCP
Testing
—
Config needed
Playwright MCP
MCP
Testing
20k+
One command
Chrome DevTools MCP
MCP
Debug
Official
One command
Web Quality Skills (Osmani)
Skill
Perf/A11y/SEO
—
One command
Visual Regression
Skill
Testing
—
Manual copy
Context7
MCP
Docs
—
One command
TypeScript LSP
LSP
Types
Official
One command
Vercel MCP
MCP
Deploy
—
Config needed
Baseline UI
Skill
Polish
—
One command
Fixing Accessibility
Skill
A11y
—
One command
Fixing Motion/Perf
Skill
Perf
—
One command
Context budget
MCP servers eat tokens at session start. Keep 3-5 active max.
Server
~Token Cost
Playwright MCP
5.3k
Chrome DevTools
5-6k
Figma MCP
3-4k
Context7
2k (on-demand)
5 servers total
~55k before you type anything
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.
