The best MCP servers for web design in Claude and Cursor

The MCP servers worth adding for web design each do one job. Figma's server brings a design file into the assistant, 21st and shadcn bring components, Playwright and Chrome DevTools let the assistant see and measure the page, Context7 supplies current library docs, and the Thanor MCP supplies a full art direction. None of them invents the look of a site: that arrives from a design file or a written specification, and the assistant builds what it receives.

The Model Context Protocol (MCP) is the open standard that lets an assistant call outside tools. Add a server once and Claude, Claude Code or Cursor can use its tools whenever a task calls for them. Below: how to add one, how these seven were chosen, and what each does for someone building websites.

How to add an MCP server to Claude, Claude Code and Cursor#

The same server can serve all three. Only the place you register it changes.

In the Claude apps#

Open Customize, then Connectors, press + Add and choose Add custom connector. Give it a name, paste the server's URL, and sign in if the server asks (Anthropic help). Free Claude accounts can add one custom connector. Claude connects to remote servers from Anthropic's cloud, not from your computer, so a server must be reachable on the public internet. Many servers are also listed in the Claude connectors directory, which skips the URL step.

In Claude Code#

claude mcp add --transport http figma https://mcp.figma.com/mcp
claude mcp add playwright -- npx @playwright/mcp@latest

The first form adds a remote server; the second starts a local one with npx. Run /mcp in a session to sign in to servers that use OAuth. Servers default to the current project, --scope user makes one available everywhere, and --scope project writes it to a .mcp.json file you can commit for the team (MCP docs). Several servers below also ship as plugins in Anthropic's official marketplace, which bundle the server with skills.

In Cursor#

Servers go in .cursor/mcp.json for one project or ~/.cursor/mcp.json for all of them. A remote server takes a url and, if it uses a key, headers; a local one takes a command and args (Cursor MCP docs). Cursor supports OAuth and asks before running a tool by default.

How these seven were chosen#

Four tests, applied to every candidate:

1. A distinct job. Each server does something for a web build that no other server on the list does.
2. Published by its own maker. Figma's server is Figma's, shadcn's is shadcn's, and so on. No unofficial wrappers.
3. Maintained. Current documentation and recent releases at the time of writing.
4. Works in both Claude Code and Cursor.

Every fact below comes from the vendor's documentation or repository, read on 9 November 2026. No benchmark was run. One disclosure: the Thanor MCP is ours. It is in the list because supplying an art direction is a job none of the others does, and its entry follows the same format as the rest.

The seven at a glance#

The first two answer the question every build starts with: where does the look come from? A Figma file is one answer. A written art direction is the other, and this is what one builds when it carries every value, down to the media:

For a Figma file: the Figma MCP server#

If your design already exists in Figma, this is the first server to add. It gives the assistant the design context of a frame instead of a screenshot to guess from (Figma docs).

The remote server at https://mcp.figma.com/mcp is the one Figma recommends for most people, and it needs no desktop app. In Claude Code, Figma suggests its plugin, which bundles the server with Figma's skills: claude plugin install figma@claude-plugins-official. In Cursor, type /add-plugin figma in the chat (setup).

The tools that matter for a web build (tools and prompts):

• get_design_context returns code for a frame or layer, React and Tailwind by default, or another framework if you ask.
• get_variable_defs lists the variables and styles a selection uses, which is your token file.
• get_screenshot lets the assistant see the frame it is building.
• get_motion_context returns keyframe animation data and code snippets.
• generate_figma_design goes the other way and turns live web UI into Figma layers.

With the remote server you pass a link to the frame; working from the current selection needs the desktop server. Limits depend on plan and seat: at the time of writing, Starter plans and View or Collab seats get up to 20 tool calls a month, Full and Dev seats on Professional up to 200 a day, and Enterprise up to 600 a day (rate limits).

The server carries what is in the file, exactly. A file with real type, color variables and motion produces code with them. A wireframe produces a faithful wireframe.

For an art direction: the Thanor MCP#

When there is no design file, the direction has to be written, and that is what this server supplies. Thanor is a library of website designs, each shown as a live preview and each with a long prompt that is a full art direction written as values: the palette in hex, typefaces and scale, spacing, easing curves and durations, the section order, every interaction, and hosted films, cut-outs or stills that the built page uses.

The server is at https://thanor.ai/api/mcp, over streamable HTTP. Claude, ChatGPT and Claude Code sign in with OAuth, so nothing is pasted; editors that take a header, such as Cursor, VS Code and Zed, use a personal token generated in your Thanor account (docs). In Claude Code:

claude mcp add --transport http thanor https://thanor.ai/api/mcp

It has three tools, all read-only:

• search_designs finds directions by words in the name or by category, and returns names and categories only.
• get_design returns one design's details, including whether it is free.
• get_prompt returns the full art direction to build from, and spends one copy from your plan's daily allowance.

The server cannot change your account, and your conversation is not sent to Thanor; it sees only the search words and design names the assistant asks for. It is included in every paid plan and listed in the Claude connectors directory. NightMarquee delivers its prompts through an MCP server too, with a sign-in for the paid ones. A typical request reads "find a Thanor hero with a looping film, get its prompt, and build it in this project":

For components: the 21st MCP#

21st.dev is a large community catalog of React and Tailwind components, and its server lets the assistant search that catalog and pull a component's code without leaving the editor. The server once known as Magic MCP is now the 21st MCP; the old package still works as a thin proxy to the new server (repository).

Setup is one command, npx @21st-dev/cli@latest init --client claude (or cursor), or a manual entry pointing at https://21st.dev/api/mcp with an x-api-key header. Keys come from 21st.dev. The tools that matter:

• search and get_component find components and return their code.
• get_inspiration returns examples to adapt.
• generate and iterate_generation build new UI with 21st's hosted AI, and appear only when AI access is enabled on the account.
• search_logo finds brand logos.

It is the right server when the job is "a pricing table that already exists somewhere": you get working code fast and adapt it. What it returns is a component in its author's style, so the result reads as assembled unless your token file restyles every piece. That trade is the subject of paid prompts or free components, and the wider field is in 21st.dev alternatives.

For registry components: the shadcn MCP#

The shadcn server lets the assistant browse, search and install components from shadcn registries in plain language: "add the dialog component" or "find a login form in the registry" (shadcn docs). It works with the default shadcn/ui registry with no setup, and with any third-party, private or namespaced registry you list in components.json, including ones behind a bearer token.

npx shadcn@latest mcp init --client claude

That writes a .mcp.json entry that runs npx shadcn@latest mcp. For Cursor, add the same command to .cursor/mcp.json.

The best use is a team registry. If your design system already lives as a shadcn registry, the server makes the assistant install your components instead of writing near-copies. Magic UI runs a similar server for its animated components (npx @magicuidesign/cli@latest install claude), with tools to list, search and fetch registry items (repository); Aceternity UI vs Magic UI compares those libraries.

Like 21st, these servers deliver structure and behavior. The look still comes from your tokens: a shadcn component is deliberately neutral and takes whatever values you give it.

For current docs: Context7#

Libraries move faster than any model's training data. Tailwind, GSAP, Three.js and every framework change their APIs, and an assistant working from memory writes the version it learned. Context7 fetches current, version-specific documentation and examples into the conversation (repository).

The remote server is https://mcp.context7.com/mcp, and npx ctx7 setup configures it for Claude Code or Cursor, with a choice between MCP and a CLI plus skill. It works without a key; a free key from Context7 raises the rate limits. Two tools do the work: resolve-library-id turns a library name into Context7's ID, and query-docs fetches the documentation. Adding "use context7" to a prompt, or a rule that says so, makes the assistant reach for it.

For web design work, it earns its place on animation and 3D code, where an outdated API produces scroll timelines or materials that silently do nothing. The scroll values in GSAP ScrollTrigger with AI and the scene values in the 3D website guide both assume current APIs.

For eyes on the page: Playwright MCP#

An assistant that cannot see the page ships whatever the code implies. Microsoft's Playwright server lets it open the site, click, type, resize and read what is there (repository). It works from the page's accessibility tree rather than pixels, so it needs no vision model, and it can also take screenshots.

claude mcp add playwright -- npx @playwright/mcp@latest

The tools a designer uses most are browser_navigate, browser_snapshot, browser_take_screenshot and browser_resize, which together cover "open the page at 375px, 768px and 1440px, screenshot each section and fix what overlaps".

Two notes. The README itself suggests that coding agents may do better with Playwright's CLI and skills, because they avoid loading large tool schemas and page trees into context; the MCP suits longer explorations that need persistent browser state. And in Claude Code you may not need it at all: claude --chrome connects your own Chrome, and the desktop app has a built-in Browser pane that checks changes after each edit. The check prompts in Claude Code prompts for UI work with any of the three.

For measurements: Chrome DevTools MCP#

Where Playwright drives the page, Chrome DevTools measures it. The server, published by the Chrome DevTools team, gives the assistant the DevTools panels as tools (repository).

claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest

The tools that matter for a designed site:

• performance_start_trace records a trace for finding performance problems, Core Web Vitals included: LCP, INP and CLS.
• lighthouse_audit scores accessibility, SEO and best practices and flags the failing nodes. Performance is handled by the trace instead.
• get_css_styles returns the CSS rules and custom properties that apply to an element, with the winning declarations marked, which is how you check that a token actually reached it.
• emulate and resize_page test devices and widths.
• take_screenshot and take_snapshot show the page as an image or as text.

This is the server that catches the costs of motion: a hero film that delays Largest Contentful Paint past Google's 2.5 second target, or a late-loading font that shifts the layout. It is also in Anthropic's official plugin marketplace as chrome-devtools-mcp.

Which servers to run together#

Each server adds tools the assistant has to choose between, and their descriptions can take up context, which is the reason Playwright's README gives for its CLI. More is not better. Pick by how the project starts.

Commit the chosen servers to .mcp.json with --scope project in Claude Code, or to .cursor/mcp.json, so everyone on the project works with the same tools. If you use both editors, Claude Code vs Cursor for frontend work covers keeping one setup in sync.

What no MCP server decides#

Look at the list again by what each server returns. Figma returns what the designer drew. 21st, shadcn and Magic UI return components in their authors' styles. Context7 returns documentation. Playwright and DevTools return what is on the page. Each one makes the assistant more capable, and none of them decides the palette, the type, the motion or the media. The same is true of the model behind the assistant, as the frontend model comparison shows.

That gap is why so many well-built sites still look alike: capable tools filling open decisions with the same defaults, as set out in why AI websites look the same. Something has to supply the decisions, either a designer's file or a written art direction. For a full build that uses these servers in order, see how to build a website with Claude Code.

Start with one direction#

Open Vesperion and copy its prompt; it is free with an account. Paste it into Claude Code or Cursor with Context7 and Chrome DevTools connected, and you have the "nothing but a brief" stack from the table above working on a real direction. When you want the assistant to fetch directions itself, the Thanor MCP is included in every paid plan on pricing, and the library shows what each one builds.