Best MCP Servers for Design in 2026: Figma, Canva, Webflow + 6 more
Nine MCP servers that connect a design tool to your AI agent: the official Figma Dev Mode server and Framelink for Figma-to-code, Canva and Webflow and Framer for the no-code builders, Penpot for the open-source camp, Magic UI and shadcn/ui for component libraries, and MasterGo for teams on that platform. These are connectors for the design tool you already use — not UI generators. Every fact below comes from the catalog row, the server repo, or official docs.
On this page · 17 sections▾
TL;DR + decision tree
- Your design lives in Figma, paid seat? Figma Dev Mode MCP — the official server reads your selected frames, variables, and Code Connect mappings. The most accurate Figma-to-code path.
- Figma on a free plan? Framelink (Figma Context) — open-source, reads files via the REST API with a personal access token, works on any plan.
- You build sites in a no-code tool? Match the server to the tool: Webflow, Framer, or Canva for marketing assets and brand kits.
- Open-source design tool? Penpot MCP — browses projects, retrieves files, and exports components with screenshots for design-to-code.
- You generate UI from a component library? Magic UI for animated marketing components, or shadcn/ui for the components, blocks, and demos most React apps already use.
- Your team is on MasterGo? MasterGo MCP extracts design-file metadata for analysis and code generation.
The working pattern is two servers, not nine: one that reads your design source (Figma, Penpot, a no-code builder) and one component layer (shadcn/ui or Magic UI) the agent can pull vetted markup from. Browse the full set on the design category page.
What a design MCP server does
A design MCP server is a thin tool layer over a design source. The agent doesn’t render your file or invent your spacing scale — that lives upstream in Figma’s document model, Penpot’s project tree, or Webflow’s CMS. The MCP server gives the model a structured way to read or edit that source: no exported PNGs, no hand-copied hex values, no guessing at padding from a screenshot. New to the protocol? The What is MCP primer covers the wire format these servers speak.
The work splits into three job shapes:
- Design-to-code. Read a frame or file and emit layout, styles, and component structure. Figma Dev Mode, Framelink, MasterGo, and Penpot live here. Quality tracks how well the design uses real variables and named components, because the agent maps those to your tokens instead of inventing one-offs.
- Build and edit in place. Create or change the design artifact itself — pages, CMS entries, brand assets. Webflow, Framer, and Canva can act, not just read, which makes them the rare write-capable design servers.
- Component retrieval. Hand the agent vetted UI primitives with correct install instructions. shadcn/ui and Magic UI cover this, so generated screens use components your project can actually render rather than fabricated JSX.
Scope: connectors, not generators
One boundary worth stating up front, because it’s the most common mix-up. This post is about MCP connectors — servers that plug a design tool you already use into your own agent. It is not about UI generators like Claude Design, Stitch, v0, Lovable, or Figma Make, which produce a fresh interface from a prompt. Those are products; these are pipes. If you want the head-to-head on the generators, that’s a different article: Claude Design vs Stitch vs v0 vs Figma Make. The two pair well in practice — generate a first draft with one, then wire the result into your real design tool with a connector here — but they answer different questions, so we keep them in separate posts.
Side-by-side matrix
Sourced from official docs and the server repos, checked 2026-06-23. Plan requirements are described in shape, not numbers — vendor tiers move faster than blog posts.
| Server | Design source | Official? | Can edit / act | Plan needed | Best for |
|---|---|---|---|---|---|
| Figma (Dev Mode) | Your Figma frames + variables | Yes | Read | Paid Figma seat | Accurate Figma-to-code |
| Framelink | Figma files via REST API | Community | Read | Any Figma plan | Figma-to-code, free |
| Canva | Canva designs + brand kits | Yes | Create + export | Canva Connect account | Marketing assets, brand |
| Webflow | Sites, pages, CMS | Yes | Publish + edit | Webflow account | Site + CMS automation |
| Penpot | Penpot projects + files | Community | Read + export | Free (open source) | Open-source design-to-code |
| Framer | Framer sites + CMS | Yes | Generate + publish | Framer account | No-code sites + CMS |
| Magic UI | Magic UI component library | Yes | Read | Free (open source) | Animated marketing UI |
| shadcn/ui | shadcn/ui v4 components | Community | Read | Free (open source) | React components + blocks |
| MasterGo | MasterGo design files | Yes | Read | MasterGo account | MasterGo-to-code |
Three takeaways. First, most design servers are read-only — they translate design into code; only Canva, Webflow, and Framer actually write back. Second, the free path through Figma is Framelink, not the official server, because Dev Mode is gated behind a paid seat. Third, the component servers (Magic UI, shadcn/ui) solve a different problem than the design-source servers — they supply the building blocks the agent assembles, so they pair with a Figma or Penpot server rather than replacing it.
Figma Dev Mode MCP — install + recipe
What it does best
This is the first-party path, and the difference is what the agent reads. Dev Mode exposes the actual document — selected frames, design variables, and Code Connect mappings — so when the model writes a button, it reaches for your token names and your coded component, not a hex value it inferred from a flattened image. For a Figma team that already maintains variables and a component library, no screenshot-based tool comes close on fidelity.
Pick this if you...
- Maintain a real Figma design system with variables and named components you want code to honor
- Use Code Connect and want the agent to map design components to your existing React components by name
- Work frame-by-frame in the Figma desktop app and want the agent to read whatever you have selected
- Already pay for the Figma seats that unlock Dev Mode
Recipe: turn a selected frame into a component
With the Dev Mode MCP enabled and a frame selected in Figma, in your connected client:
Build a React component from my current Figma selection. Use the
design variables for color and spacing, map any Code Connect
components to their existing implementations, and output a
typed component plus the Tailwind classes that match the tokens.The agent reads the selected node, resolves variables to your token names, substitutes mapped components, and emits the component — so the output drops into your codebase speaking the same vocabulary your team already uses, instead of a pile of magic numbers you have to reconcile by hand.
Skip it if...
You’re on Figma’s free plan — Dev Mode access needs a paid seat, and the Framelink server below covers the same read-the-file job without one. Also skip if your design lives anywhere other than Figma; this server only sees Figma.
Framelink (Figma Context) MCP — install + recipe
What it does best
Framelink is the route most people actually start with: it pulls a Figma file through the REST API and, crucially, trims the response down to the layout and styles the model needs instead of dumping the entire raw API payload into context. That trimming is the whole point — it’s why design-to-code stays coherent across a multi-frame screen instead of collapsing under token bloat. And because it only needs a personal access token, it works on the free Figma plan.
Pick this if you...
- Want Figma-to-code without paying for Dev Mode seats
- Prefer pasting a file or frame link in the prompt over driving the desktop app’s selection
- Care about context efficiency on large files — the trimmed payload keeps long conversions stable
- Use Cursor, Claude Code, or Windsurf and want a config that works the same across all of them
Recipe: implement a screen from a Figma link
In any MCP client connected to Framelink:
Here's the Figma link for our pricing page (paste URL). Implement
it as a responsive React + Tailwind page. Match the spacing and
type scale from the frame, extract the three plan cards as a
reusable component, and list any styles you had to approximate.The agent fetches the frame, reads the trimmed layout and style data, and builds the page — and because you asked it to flag approximations, you get an honest list of where the design used values it couldn’t resolve cleanly, which is exactly where you’ll want to eyeball the result.
Skip it if...
You rely on Code Connect to map components to code — that mapping lives in Dev Mode, so the official Figma server above is the better fit. Framelink reads the file; it doesn’t know about your component-to-code bindings.
Canva MCP — install + recipe
What it does best
Canva is the marketing-asset server, and one of the few here that creates rather than reads. Through the Canva Connect API it lets the agent spin up designs, reach into brand kits for on-brand colors and logos, and export finished assets — so “make five social variants of this announcement, on brand” becomes a prompt instead of an afternoon in the editor. It’s aimed at content and social workflows, not product-UI engineering.
Pick this if you...
- Produce social, ad, or marketing graphics at volume and want them generated on brand
- Keep a Canva brand kit and want the agent to pull its colors, fonts, and logos automatically
- Need finished, exportable assets — not code — out of the workflow
- Want to wire design creation into a content pipeline alongside copywriting
Recipe: on-brand social pack from one announcement
In any MCP client connected to Canva MCP:
We're announcing a new feature (paste the headline + one-line
description). Using our brand kit, create a square Instagram post,
a landscape LinkedIn banner, and a story-format graphic. Keep the
type hierarchy consistent and export all three as PNGs.The agent reads the brand kit, generates the three formats with consistent styling, and exports them — the kind of repetitive resizing-and-rebranding work that eats a designer’s morning, handed off to one prompt.
Skip it if...
You’re building product UI or need design tokens for code — Canva makes finished graphics, not component specs. For Figma-to-code, the Figma servers above are the tools.
Webflow MCP — install + recipe
What it does best
Webflow’s official server is a site operator, not a design-reader. Through the Data API the agent manages sites and pages, edits CMS collections, reads form submissions, and publishes drafts — so the work that lands here is content and structure automation, not visual design. The standout is the CMS surface: bulk-updating collection items or wiring up a content model is exactly the tedious, error-prone work an agent does well.
Pick this if you...
- Run a Webflow site and want the agent to manage CMS collections and content at scale
- Publish frequently and want drafts updated and pushed live conversationally
- Process form submissions and want them read and routed without a dashboard visit
- Need site operations automated as part of a larger content workflow
Recipe: bulk CMS update from a content brief
In any MCP client connected to Webflow MCP:
In our Blog CMS collection, find every item missing a meta
description, draft one from the post body in under 155 characters,
set it on the item, and leave the items as drafts so I can review
before publishing.The agent queries the collection, identifies the gaps, drafts each field, and writes it back as drafts — the sort of collection-wide hygiene pass that nobody wants to do by hand across fifty entries.
Skip it if...
You want visual design or design-to-code — Webflow’s server operates the site’s data and structure, not its pixels. It’s a CMS-and-publishing tool that happens to live in a design product.
Penpot MCP — install + recipe
What it does best
Penpot is the open-source pick, and the MCP matches that ethos: it browses projects, retrieves files, searches objects, and exports components with automatic screenshot generation, all aimed at turning UI designs into working code. The screenshot step is a nice touch — the agent gets a visual reference alongside the structure, which helps it reason about a component it’s about to translate. For teams who keep design out of proprietary tools, this is the design-to-code path.
Pick this if you...
- Design in Penpot and want an agent that reads your real files, not exports
- Prefer a fully open-source stack end to end, design tool included
- Want component exports with screenshots so the agent has a visual reference while it codes
- Self-host your design tooling and need an MCP that fits that setup
Recipe: export a component for implementation
In any MCP client connected to Penpot MCP:
Open our design system project in Penpot, find the "Card"
component, export it with a screenshot, and implement it as a
React component. Use the exported structure for layout and the
screenshot to sanity-check spacing and visual hierarchy.The agent locates the component, exports its structure plus a rendered screenshot, and writes the implementation — pairing the machine-readable layout with a visual check so the result matches both the data and the intent.
Skip it if...
Your team is committed to Figma — Penpot’s server only reads Penpot files, so adopting it means moving design work, not just adding a connector. The Figma servers above fit that case.
Framer MCP — install + recipe
What it does best
Framer’s server treats the whole site as addressable: the agent generates, edits, and publishes Framer sites, and works with components, CMS, and design-system primitives through the platform API. That “generate and publish” reach is what sets it apart from the read-only crowd — it can take a site from prompt to live URL. For landing pages and marketing sites where Framer is already the build tool, the agent becomes a fast way to spin up and iterate on pages.
Pick this if you...
- Build marketing sites or landing pages in Framer and want the agent to generate and publish them
- Manage a Framer CMS and want content and pages handled conversationally
- Work within Framer’s design-system primitives and want them addressable from your agent
- Need a single tool that goes from prompt to live page without leaving the platform
Recipe: spin up a landing page section
In any MCP client connected to Framer MCP:
Add a three-column features section to our product landing page
in Framer. Pull the three feature blurbs from the CMS, use our
existing design-system components for the cards, and publish it
to the staging site when it's ready for review.The agent assembles the section from CMS content and existing components, then publishes to staging — closing the loop from request to a reviewable URL inside one tool, which is the part the read-only servers can’t do.
Skip it if...
You don’t build in Framer — its server is tied to the Framer platform, so it’s only useful if that’s where your sites live. It won’t read Figma or export to a generic codebase.
Magic UI MCP — install + recipe
What it does best
Magic UI flips the model: instead of reading your design, it hands the agent a curated React component library — animated marketing primitives like marquees, shimmer buttons, and gradient effects — with the correct install instructions attached. So the agent doesn’t hallucinate a fancy animation; it reaches for a real, copy-pasteable component and tells you how to add it. It’s the difference between generated JSX that looks plausible and code that actually runs.
Pick this if you...
- Build marketing pages and want polished, animated components without writing the motion code
- Want the agent to suggest real library components with correct install steps, not invented ones
- Already lean on Tailwind and React and want components that drop straight in
- Need eye-catching hero and landing-page effects on a deadline
Recipe: animated hero from the library
In any MCP client connected to Magic UI MCP:
Build a landing-page hero using Magic UI components. I want an
animated gradient background, a shimmer CTA button, and a marquee
of customer logos below the fold. Show the exact install commands
for each component you use.The agent picks the matching components from the library, assembles the hero, and lists each install command — so what you get compiles on the first try instead of referencing animations that don’t exist in your project.
Skip it if...
You need to implement your specific design — Magic UI offers its own components, not a way to read your Figma file. It pairs with a design-source server rather than replacing one.
shadcn/ui MCP — install + recipe
What it does best
This server puts the component set a huge share of React apps already use directly in front of the agent: shadcn/ui v4 components, blocks, and demos, with framework detection that also covers Svelte and Vue. Because the agent reads real component source and install scripts, the UI it builds uses the same primitives your project does — so generated screens are consistent with what your team already ships, not a parallel set of one-off elements.
Pick this if you...
- Build on shadcn/ui and want the agent to use the exact components and blocks you already have
- Want pre-built blocks (dashboards, auth screens) the agent can drop in and adapt
- Work across React, Svelte, or Vue and want framework-aware component code
- Care that generated UI stays consistent with your existing component vocabulary
Recipe: build a settings screen from blocks
In any MCP client connected to shadcn/ui MCP:
Build a user settings page using shadcn/ui. Use the form, tabs,
and card components, pull a relevant block if one fits, and give
me the install commands plus the component source so it matches
our existing shadcn setup.The agent retrieves the relevant components and blocks, composes the screen, and returns source plus install steps — keeping the new page inside the same design language as the rest of your app instead of introducing a fork.
Skip it if...
Your project isn’t built on shadcn/ui — the value is consistency with that system, and pulling its components into an unrelated stack just adds a dependency. It also reads components, not your design file.
MasterGo MCP — install + recipe
What it does best
MasterGo’s server is the design-to-code bridge for teams on that platform: with a personal access token it extracts design-file metadata — element details, structure — for analysis and code generation. If MasterGo is where your design lives, this is the connector that lets an agent read it directly rather than working from exported images, the same role the Figma servers play for Figma.
Pick this if you...
- Use MasterGo as your design tool and want an agent to read its files
- Want design-to-code without leaving the MasterGo ecosystem
- Need element-level metadata for the agent to reason about layout and structure
- Work on a team standardized on MasterGo rather than Figma
Recipe: implement a MasterGo screen
In any MCP client connected to MasterGo MCP:
Read this MasterGo file (provide the file reference), extract the
layout and element details for the login screen, and implement it
as a React component with Tailwind. Note anywhere the metadata was
ambiguous so I can check it against the design.The agent pulls the file metadata, reconstructs the screen structure, and writes the component — with a flagged list of ambiguous spots so you know exactly where to verify against the original design.
Skip it if...
You don’t use MasterGo — it only reads MasterGo files, so for Figma, Penpot, or anywhere else, the matching server above is the right tool.
Common pitfalls
Expecting pixel-perfect output
Design-to-code servers produce a strong first draft, not final markup. The quality tracks how clean the design is — a file built on real variables and named components converts far better than one full of detached, one-off values. Treat the output as a head start you refine, and ask the agent to flag where it had to approximate.
Confusing read-only with write-capable
Most of these read your design; only Canva, Webflow, and Framer change the artifact itself. If your plan is “the agent edits the design,” check the matrix first — pointing a read-only Figma server at an “update the spacing in Figma” task just won’t do anything.
Token bloat from raw design payloads
Design APIs return enormous nested JSON. A server that dumps a full Figma document into context burns tokens and degrades reasoning on multi-frame screens. This is exactly why Framelink trims its responses — prefer servers that send only the layout and styles the model needs. For the general problem, see our context bloat post.
Paying for Dev Mode when Framelink would do
The official Figma server’s edge is Code Connect mappings and live document variables. If you don’t use Code Connect, the free Framelink server reads the same files without a paid seat. Match the server to whether you actually rely on component-to-code bindings.
Skipping the component layer
A Figma server tells the agent what to build; it doesn’t supply runnable components. Without a component server (shadcn/ui, Magic UI) or your own library in context, the agent invents JSX that may not exist in your project. Pair a design-source server with a component source for code that compiles.
Community signal
The demand for this is concrete. Developers building polished front-ends with Claude Code keep asking the same question on Reddit: which MCP tools actually improve UI precision? A recent r/FlutterDev thread lays it out plainly — the worry is the “prototype look,” and the instinct is to reach for a design connector like Figma or a design tool to enforce real spacing and type hierarchy.
“LLMs can sometimes generate clunky layouts, poor spacing, or messy widget trees if not guided properly. I want to avoid the 'prototype look' ... Are there any specific custom Agent Skills, custom system prompts, or MCP tools you recommend loading into the session to improve UI precision (e.g., Stitch, Figma)?”
r/FlutterDev · Reddit
A developer building a Flutter app with Claude Code, asking how to enforce strict UI design systems via MCP.
That instinct is right, and it’s the whole case for a design MCP: an agent that reads your real Figma frames or pulls vetted shadcn/ui components stops guessing at spacing and starts honoring a system. If you’re pairing these servers with a UI-discipline workflow, the UI/UX Pro Max skill encodes design-system constraints the agent follows across a session, and the Flutter development skill does the same for that stack specifically.
Frequently asked questions
What is the best MCP server for design?
There is no single best — it depends on where your design lives. If your source of truth is Figma, the official Figma Dev Mode MCP (slug: figma) gives the agent your real frames, variables, and Code Connect mappings; Framelink (figma-context) is the popular community route that works on any plan. If you build in a no-code tool, pick the server that matches it: Webflow, Framer, Canva, or Penpot. If you generate UI from a component library, Magic UI and shadcn/ui hand the agent vetted React components. Most people wire one design-source server plus one component server.
Is there an official Figma MCP server?
Yes. Figma ships a first-party Dev Mode MCP server that exposes your selected frames, design variables, and Code Connect component mappings to an AI client over a local connection. It is the most accurate Figma-to-code path because the agent reads the actual design tokens instead of guessing from a screenshot. The catch: Dev Mode access is tied to a paid Figma seat. For free or hobby use, the Framelink Figma MCP (figma-context) reads files through Figma's REST API and runs on any plan.
What is a design MCP server?
A design MCP server is a connector that exposes a design tool — Figma, Canva, Webflow, Penpot, Framer — or a component library as tools an AI agent can call directly over the Model Context Protocol. Instead of pasting screenshots or hand-copying spacing values, the agent reads frames, variables, CMS collections, or component source straight from the source of truth. The design data still lives in the upstream tool; the MCP server just makes it callable inside Claude, Cursor, or another MCP client.
How do I connect Figma to Claude or Cursor?
Two routes. For the official server, enable Dev Mode MCP in the Figma desktop app (Preferences → enable the MCP server), then point your client at the local endpoint — the agent reads whatever frame you have selected. For Framelink, add the figma-context server to your MCP config with a Figma personal access token, then paste a Figma file or frame link in your prompt. The official path needs a paid seat; Framelink works on the free plan. Both have one-click or copyable configs on their /servers pages.
Can an MCP server turn a Figma design into code?
Yes, and that is the main job for most of these. Figma Dev Mode and Framelink translate selected frames into layout, styles, and component structure; MasterGo and Penpot do the same for their own file formats. The quality jumps when the design uses real variables and named components, because the agent maps them to your tokens and existing code instead of inventing one-off values. Treat the output as a strong first draft you refine, not pixel-perfect final markup.
Are there free design MCP servers?
Several. Framelink (figma-context) is open source and works on Figma's free plan with a personal access token. Penpot is fully open source end to end. Magic UI and shadcn/ui expose open-source component libraries at no cost. The component data and most Figma-read tooling are free; the metered parts are the paid seats behind Figma Dev Mode, Canva Connect, Webflow, and Framer, where the MCP inherits whatever plan the underlying account is on.
What is the difference between this and Claude Design or v0?
Different category. Claude Design, Stitch, v0, Lovable, and Figma Make are products that generate a UI for you from a prompt. The servers here are MCP connectors that plug an existing design tool into your own agent so it can read or edit your real files. One generates new design; the other gives your agent eyes and hands inside the design tool you already use. For the product comparison, see our Claude Design vs Stitch vs v0 vs Figma Make post.
Which MCP server is best for a design system?
For a Figma-based design system, the official Figma server plus Code Connect is strongest because it maps design components to your coded components by name. For a code-first design system, shadcn/ui and Magic UI let the agent pull vetted components and blocks directly into the project. Framer keeps its own design-system primitives addressable through its API. Match the server to where the system's source of truth actually lives.
Sources
Figma
- /servers/figma — catalog entry + install card
- developers.figma.com — Figma Dev Mode MCP server
- /servers/figma-context — Framelink catalog entry
- github.com/glips/figma-context-mcp — Framelink repo
Canva / Webflow / Framer
- /servers/canva — github.com/canva/canva-mcp
- /servers/webflow — github.com/webflow/webflow-mcp-server
- /servers/framer — github.com/framer/framer-mcp
Penpot / Magic UI / shadcn/ui / MasterGo
- /servers/penpot — github.com/montevive/penpot-mcp
- /servers/magic-ui — github.com/magicuidesign/mcp
- /servers/shadcn-ui — github.com/jpisnice/shadcn-ui-mcp-server
- /servers/mastergo-design — github.com/mastergo-design/mastergo-magic-mcp
Community
Related on MCP.Directory
- Claude Design vs Stitch vs v0 vs Figma Make — the UI-generator products (different category)
- /skills/ui-ux-pro-max — the design-discipline skill that pairs with these servers
- /categories/design — browse all design servers in the catalog
- What is MCP — the protocol these servers speak
The pragmatic stack
Start with the server that matches where your design lives — Figma Dev Mode if you pay for seats, Framelink if you don’t, Penpot or a no-code builder otherwise. Then add a component server (shadcn/ui or Magic UI) so the agent builds with primitives that actually run. Two servers — one design source, one component source — covers nearly every design-to- code workflow in 2026.