What is the single best MCP server for web design?

There is no single best; there are five jobs. Figma MCP serves an existing design system, component servers supply correct parts, mockup generators produce references, Playwright gives the agent a browser, and Standout supplies art direction and then scores the rendered result with a publish gate. Pick by the job your build is missing, and stack them where jobs overlap.

Which of these are free?

Instruction skills are free, Playwright MCP is free, shadcn's registry is free, and Figma's server rides your Figma plan. Standout has a free 25-call trial with every tool unlocked (roughly one full site), then a paid plan for client-work volume.

Do I need an MCP server at all if I write a detailed design brief?

A good brief raises the average but cannot verify anything, and the agent's own sense of 'looks right' is trained on the generic center of the web. Tools that measure the real page, contrast ratios, phone-width layout, detected template tells, are the difference between hoping and knowing.

Can I use Standout together with the Figma or shadcn servers?

Yes, and it is a common setup: components from the library, tokens from Figma where they exist, direction and the scored publish gate from Standout. The critic does not care who generated the markup; it scores the rendered page.

guide

The best MCP servers for web design in 2026

7 min read · updated July 4, 2026

MCP turned coding agents from advice-takers into tool-users, and a real ecosystem of design servers now exists. They are not competitors for one crown; they do different jobs. This is the map by job, including where each one is the wrong choice.

What an MCP server changes for design work

A prompt can only tell the agent what to aim for. An MCP server gives it live tools: pull the real tokens from your design file, fetch a finished component, render the page and measure its contrast, score the result. That difference, advice versus tools, is why agent-built design improved more in the last year than in the three before it.

The servers below are the ones that come up when people ask what to install. The honest answer starts with a question: which job do you need done, direction, components, references, inspection, or enforcement?

The servers, by job

Each of these is good at its job. The mistake is installing one class and expecting another class's result.

1
Figma MCP: your design system, served to the agent
Figma's Dev Mode server lets the agent read real frames, tokens, and components from your files. If a designer already made the decisions, this is the straightest path from decision to code. Where it is the wrong pick: when there is no Figma file, which describes most solo builds, client rush jobs, and vibe-coded products. It serves a design system; it does not invent one.
2
shadcn and component servers: correct parts, default skin
Component-library servers (shadcn's registry MCP and similar) hand the agent working, accessible components. They solve correctness, not distinctiveness: the raw shadcn skin is now itself one of the most recognizable AI tells of 2026. Great as a foundation, but something still has to restyle it into a brand.
3
Mockup and reference generators: something to aim at
Generators like AIDesigner produce visual mockups and brand kits the agent can implement from. Useful when you want to react to options before committing. The gap: a pretty reference does not verify the implementation, and the built page can still ship with contrast failures and broken phone layouts that the mockup never had.
4
Playwright MCP: eyes, but no opinions
Playwright's server gives the agent a real browser: navigate, screenshot, inspect. Agents debug layouts far better with it. But it is deliberately neutral, it measures nothing about taste and flags nothing about template tells. It answers 'what does the page look like', never 'is this good'.
5
Standout: art direction in, scored enforcement out
Standout is the taste-engine class: 14 hand-built art directions with finished section code the agent assembles (direction before building), then a deterministic critic that renders the page and scores it 0-100 from computed WCAG contrast, mobile layout at real phone widths, and a versioned rulebook of template tells, with a publish gate that blocks until the tells are gone. It is the only class on this list whose output is a verifiable number instead of an artifact to imitate.

Picking, and stacking

Have a design system in Figma? Start with the Figma server. Building an app's internals? A component server plus a theme. Want options to look at first? A mockup generator. Need to debug what the agent built? Playwright.

Need the shipped page to provably not look AI-built, because a client is paying or the site is the product? That is enforcement, and it is Standout's job. These stack naturally: plenty of setups run a component server for parts, Playwright for debugging, and Standout for the direction and the publish gate.

Frequently asked

What is the single best MCP server for web design?: There is no single best; there are five jobs. Figma MCP serves an existing design system, component servers supply correct parts, mockup generators produce references, Playwright gives the agent a browser, and Standout supplies art direction and then scores the rendered result with a publish gate. Pick by the job your build is missing, and stack them where jobs overlap.
Which of these are free?: Instruction skills are free, Playwright MCP is free, shadcn's registry is free, and Figma's server rides your Figma plan. Standout has a free 25-call trial with every tool unlocked (roughly one full site), then a paid plan for client-work volume.
Do I need an MCP server at all if I write a detailed design brief?: A good brief raises the average but cannot verify anything, and the agent's own sense of 'looks right' is trained on the generic center of the web. Tools that measure the real page, contrast ratios, phone-width layout, detected template tells, are the difference between hoping and knowing.
Can I use Standout together with the Figma or shadcn servers?: Yes, and it is a common setup: components from the library, tokens from Figma where they exist, direction and the scored publish gate from Standout. The critic does not care who generated the markup; it scores the rendered page.

more guides