10 MCP Tools That Actually Work for Frontend Design in Claude Code
Most "design" MCP servers are shadcn generators with extra steps. These ten detect, validate, or generate against your real project — screenshots, contrast ratios, font load impact, and a scanner that flags your fourth identical grid-cols-3.
The Model Context Protocol (MCP) lets Claude Code call external tools directly in a session. For frontend work, that means Claude can scan your code, read your real design tokens, screenshot a running page, and check contrast ratios without you ever switching windows.
Most MCP "design" servers are glorified component generators. They emit shadcn output with an extra layer of indirection — a
What makes a frontend MCP tool useful
A filter, before the list. A useful frontend tool does one of three things:
- Detect something specific about your existing code (not just generate new code)
- Generate something that varies with your project (not template output)
- Validate against a standard Claude Code cannot check on its own — color contrast, WCAG, real device rendering
A tool that emits another set of components with slightly different defaults fails all three. You already have that from the model. If it only produces text-3xl font-bold tracking-tight heroes faster, it is part of the problem this site keeps documenting — see why every AI-generated website looks the same.
1. sailop — design pattern scanner
The core tool. sailop scan analyzes your codebase across 7 dimensions and returns a score. The MCP integration exposes it inside Claude Code:
use sailop:scan on ./src/componentsClaude gets the full report and can act on a specific finding: "you have 4 instances of grid-cols-3 with three near-identical children — here are four alternative layouts." That exact pattern has its own writeup in the card grid problem.
Sailop ships 18 MCP tools covering the workflow: scan, score, compare, transform, generate a design system, check one file, check one rule, generate font pairings, and more.
Best for: Detecting AI pattern accumulation in an existing codebase. Run it on any project that has had multiple AI sessions.
2. Figma MCP — design token sync
Figma's official MCP server exposes your design file's variables to Claude Code:
use figma:get_design_tokens for file [file-id]Claude reads your actual brand tokens — the exact hex values, type scale, and spacing units from the file — and uses them when generating code. It replaces the model's defaults with yours.
Best for: Teams with an existing Figma design system. It kills the "AI used #3b82f6 instead of our brand blue" problem by feeding it the right blue.
3. Storybook MCP — component state viewer
Storybook's MCP integration lets Claude query the state of existing components:
use storybook:get_component Button with variant="primary" size="lg"Claude sees the rendered props of a component before modifying it. That prevents the common failure where the model invents a new variant="cta" that visually fights the three variants already in your system.
Best for: Component-driven design systems. Stops visual regressions when adding variants.
4. Playwright MCP — visual review
Playwright's MCP server screenshots any URL and returns it as an image Claude can actually read:
use playwright:screenshot url="http://localhost:3000" fullPage=trueClaude sees the rendered page, not the source. This is the closest thing to a human glance at the output, and it catches what the code hides: text overlapping at 375px, a footer that collapses at the md breakpoint, a hero where white-on-#f5f5f4 is unreadable.
Best for: Catching visual bugs before production. Run it after each design change.
5. axe-core MCP — accessibility audit
The axe-core engine has an MCP wrapper that runs against a live URL:
use axe:audit url="http://localhost:3000/pricing"It returns a structured list of WCAG violations with severity, element paths, and remediation notes. Claude then fixes each one in source.
Best for: Auditing AI-generated code, which routinely ships A narrower, focused tool that checks one pair at a time: It returns the ratio (here roughly 2.1:1 — a fail), the AA/AAA verdict, and the minimum lightness adjustment to pass. Useful the moment you change a brand color and need to know whether body text still clears 4.5:1. Best for: Verifying readability after color changes. Pair it with Sailop's color dimension for the full picture. Extracts every CSS custom property in a codebase, maps where each is defined and used, and flags conflicts: After a few AI sessions, Best for: Projects that have accumulated CSS variable debt across sessions. Queries the Google Fonts API and returns pairing suggestions with usage stats: It returns 3-5 body fonts that sit well under the display face, with example Best for: Picking a body font once you've chosen a display font. Faster than scrolling fonts.google.com. Generates a full CSS custom property system from minimal input: It returns the whole ladder — This is what Sailop's autotune does internally. When you want a token system from scratch without a full scan, reach for this. Best for: Starting a project on a coherent, non-default palette instead of Analyzes which font files load and what they cost at first paint: It returns which fonts load, their combined size, subset coverage, and whether they block rendering. AI tools love to Best for: Performance audits on font-heavy designs. Run it after adding a display font. Two commands: The second writes the MCP server config into your Claude Code settings. After that, any conversation can call: The full Sailop MCP tool list lives at sailop.com/docs/mcp. These tools earn their keep in order, not in isolation. A real pass on a new pricing page: Roughly 10-15 minutes in Claude Code, and it catches the most common AI design failures before a user sees them. These tools are analytical and generative. They cannot make taste decisions. Editorial or technical, dramatic hero or understated, generous spacing or dense — those are yours. An MCP tool can tell you your headings run on the same Inter as 10,000 other sites. It cannot tell you which face is right for your brand. The detection is automated. The direction is not. Scan your frontend for AI patterns. Generate a unique design system. Stop shipping the same blue gradient as everyone else., missing aria-labels, and contrast that fails AA. The patterns to expect are catalogued in pricing page anti-slop layouts.6. color-contrast MCP — WCAG checker
use color-contrast:check fg="#e8b931" bg="hsl(347, 72%, 48%)"7. CSS variables MCP — token management
use css-variables:list in ./src
use css-variables:check-conflicts in ./src--accent ends up declared in three files with two different values. This tool hands Claude a complete map of the token system before it touches anything that depends on it.8. Google Fonts MCP — font pairing
use google-fonts:suggest-pairing display="Fraunces" criteria="clean-body"font-family CSS. Note what a good pairing tool steers you away from: defaulting to Inter or Geist on everything. That fingerprint is its own article — Inter is killing your brand.9. design-tokens MCP — token generation
use design-tokens:generate hue=347 mode=light saturation=72bg, bg-raised, bg-inset, fg, fg-muted, fg-faint, accent, accent-soft, border, border-strong — all derived from the base hue, so the system stays internally consistent instead of being ten hand-picked grays. Claude pastes the result into globals.css.slate-50 through slate-900.10. bundle-analyzer MCP — font load impact
use bundle-analyzer:fonts url="http://localhost:3000"@import an entire family — 9 weights of a display face when the design uses two — adding 200KB+ for glyphs no one renders. This catches it.Setting up Sailop MCP in Claude Code
npx sailop install
sailop mcp installuse sailop:scan on ./src
use sailop:transform ./src/components/Hero.tsx
use sailop:generate-design-system hue=347 mode=light
use sailop:check-rule color-ai-band in ./src/stylesA worked sequence
1. use design-tokens:generate hue=347 mode=light saturation=72
→ paste ladder into globals.css
2. [build the page, then]
use sailop:scan on ./src/app/pricing
→ flags 3 identical grid-cols-3 cards; rebuild as one feature row
3. use color-contrast:check fg="#fafaf9" bg="hsl(347,72%,48%)"
→ 4.8:1, passes AA; keep it
4. use playwright:screenshot url="http://localhost:3000/pricing" fullPage=true
→ CTA wraps to two lines at 375px; tighten copy
5. use axe:audit url="http://localhost:3000/pricing"
→ one missing label on the plan toggle; fix in sourceWhat MCP tools cannot do
SHIP CODE THAT LOOKS INTENTIONAL