What an MCP is, for a designer
MCP (the Model Context Protocol) is the standard way an AI agent, such as Claude, ChatGPT, Cursor or Claude Code, uses another tool. You add a server's address once; after that, the agent can call that tool's actions in the middle of a conversation. For web design it means your agent can read a Figma file, change a Webflow page or open a browser, instead of only writing code into a chat.
The servers below are the ones that come up when designers ask this question. They're not rivals so much as different layers: most designers who use one end up with two or three.
The MCP servers designers use, and what each does
| Server | What it does | What it doesn't |
|---|---|---|
| Figma | Figma's own server. Reads a selected frame's design context, variables and components so the agent can write code from it; a newer, beta mode writes designs back to the canvas. | Doesn't host a site or check a built page. The design still has to exist, or be made, in Figma. |
| Webflow | Webflow's own server. Works on a site in your Webflow account: CMS collections, pages, SEO fields, assets, and (with the Designer open) elements, styles and variables. | Works only inside Webflow. Webflow's docs say it can't yet create Interactions. The look is whatever you or the agent build. |
| Framer | Plugins in Framer's marketplace (for example the unframer MCP plugin, which says it isn't an official Framer plugin) let an agent read and edit the project you have open. | The plugin has to stay open in Framer, and works on that one project. |
| Penpot, shadcn, Storybook | Design files (Penpot), component registries (shadcn) and component docs (Storybook), so the agent builds with the right parts. | Parts, not a finished, art-directed site. |
| Playwright | Drives a real browser: opens pages, clicks, takes screenshots. Good for testing what the agent built. | Doesn't design or build anything. |
| Sonder | Reads a business's current website, fills one of 23 whole-site looks with its words and pictures, checks every page in a real browser, makes the before and after for the pitch, and publishes on a link or the client's domain. | No visual canvas and no CMS for the client to log into. Changes are made by asking your agent, or in the code once you export it. |
Where Sonder fits
Sonder, the website MCP for designers, is the only server on that list that goes from a link to a finished site. Your agent does the thinking: it reads the brief, picks a look and writes every word. Sonder does the rest, and never calls a model itself.
- Reads a business's site: up to about 20 pages and 60 of its photos, its colours, fonts and logo.
- Designs from 23 whole-site looks (editorial, Swiss, brutalist, warm and organic, product tech, chrome and more). Each is a complete designed site, not a kit of blocks.
- Checks every page in a real browser: console errors at 1440 and 390 pixels wide, sideways scroll on a phone, contrast, broken assets, weight and the tells of generated copy.
- Pitches in batches: a list of prospects in, a before and after of each out, with a page that shows who opened it.
- Hosts on a Sonder link, or on the client's own domain on a paid plan, with a review link where the client comments and approves.
Sonder sits happily beside the others. Figma's server for a design you already have, Sonder for the site and the pitch, Playwright if you want your own tests too.
Which one you need
- You hand off designs to developers: Figma's server.
- Your clients' sites live in Webflow or Framer: their servers, so the agent can work where the site already is. See the Webflow and Framer MCPs with Claude.
- You want the agent to make the site, and it has to look designed: Sonder. See getting premium sites out of Claude.
- You win work by pitching redesigns: Sonder's batch pitches. See getting more web design clients.
Adding Sonder
Sonder's address is https://app.trysonder.dev/mcp. In Claude Code:
claude mcp add --transport http sonder https://app.trysonder.dev/mcp
In Claude (web, desktop and phone): Customize, Connectors, Add custom connector, and paste the address. ChatGPT (Business, Enterprise and Edu), Cursor, VS Code, Codex and Gemini CLI are on the connect page. The first time, you sign in to your Sonder account. Then ask: “Use Sonder to redesign acme.com as a pitch.”
Questions
Is there an official MCP server for web design?
There's no single official one. Figma and Webflow publish official servers for their own tools; the Framer servers in its marketplace are made by third parties. Sonder is its own product: a remote MCP server for making whole client sites.
Which MCP is best for designing a website with Claude?
If the site should be designed and built by the agent, Sonder: it gives Claude 23 whole-site looks, browser checks and hosting. If the site already lives in Webflow or Framer, use that tool's server. If the design is in Figma, Figma's server turns it into code.
Do I need Figma to use an MCP for web design?
No. Figma's server needs a Figma file, but Sonder starts from the business's current website, or their files, and doesn't need a design file at all.
How much does Sonder cost?
The trial is free and covers one real client project, from pitch to built site. Then Solo is $39 a month, Studio $99 and Team $299, or 23% less paid yearly. See pricing.
Does Sonder work in ChatGPT and Cursor too?
Yes. It's a remote MCP server, so it works in any agent that takes one: Claude, Claude Code, ChatGPT (Business, Enterprise and Edu), Cursor, VS Code, Codex, Gemini CLI and others. The steps are on the connect page.