Try “Claude Code skills”, “MCP servers for Cursor” or “Codex” · Esc to close

Best Design MCP servers in 2026: Top 7 Picks, Ranked

Bring Figma designs and UI components into your coding agent. Below are the 7 design MCP servers we recommend in 2026, ranked by our editor score, GitHub stars, reader upvotes and how often readers click through.

Last updated October 2026 · 7 listings reviewed

The ranking

1

Figma MCP Server Freemium

Figma's official MCP server: give agents design context from your Figma files

8.3/10

What it does Figma's official MCP server gives a coding agent structured design context from your Figma files. That context includes layout, variables and styles, components, screenshots and, if you use Code Connect, the matching components in your codebase. The generated UI then follows the real design and your design system, instead of a rough guess from a screenshot. Communication… Read more →

Pros

  • Official design-to-code context
  • Uses your design tokens and components

Cons

  • Desktop server needs a Dev or Full seat on a paid plan; the remote server is rate-limited

Pricing: Freemium  ·  figma design

🔥 Deal: Students & teachers: Figma and FigJam professional features free with a verified education account

2

Framelink Figma MCP Free

Community MCP server that gives agents Figma layout and styling data

★ 16k · +31 this week · MIT · updated 2026-09-18

8.0/10

What it does Framelink MCP for Figma, published on npm as figma-developer-mcp, is an open-source community server that helps a coding agent build a design from Figma. You paste a link to a Figma file, frame or group into the chat. The server then fetches that node through the official Figma REST API. It strips the raw response down to… Read more →

Pros

  • Free with a Figma API token
  • Simplified output saves tokens

Cons

  • Community project

Pricing: Free  ·  figma design

3

21st MCP (formerly Magic) Freemium

Generate polished UI components from a prompt inside your editor

★ 6.0k · +32 this week · ISC · updated 2026-09-09

7.6/10

What it does Magic by 21st.dev started as an MCP server that generated polished React UI components from a prompt in your editor. It has since been replaced by the unified 21st MCP, which you install with the 21st CLI. The old @21st-dev/magic npm package is still published, but only as a small compatibility proxy that forwards requests to the… Read more →

Pros

  • Good-looking components fast
  • Works in any MCP client

Cons

  • Paid beyond free usage

Pricing: Freemium  ·  ui react

4

designlang (design-extract) Open source

Extract any website's design system as DTCG tokens, Tailwind, Figma and more via CLI or MCP

★ 4.2k · +18 this week · MIT · updated 2026-09-29

7.6/10

What it does design-extract, published as designlang, reads a design system off any live website by pointing a headless browser at the URL and inspecting the rendered DOM. One run emits more than seventeen files, including W3C DTCG tokens (primitive, semantic, and composite layers), a Tailwind config, a shadcn theme, Figma variables, motion tokens, typed component anatomy, and brand-voice notes.… Read more →

Pros

  • Reads tokens, layout, motion, and states off the live DOM into 17+ files
  • Deterministic base extraction needs no API key; usable as CLI, MCP, or plugin

Cons

  • Drives a headless browser against arbitrary URLs
  • Smart classification and asset generation require paid external keys

Pricing: Open source  ·  design-tokens design-system tailwind figma accessibility

5

Talk to Figma MCP Open source

Read and edit live Figma files from your coding agent through a Figma plugin bridge

★ 7.0k · +11 this week · MIT · updated 2026-07-26

7.4/10

What it does Talk to Figma MCP, published by Grab, lets a coding agent read and edit a live Figma file. The MCP server does not call Figma's REST API. It passes commands through a small local WebSocket relay to a Figma plugin that runs inside your open document. So the agent works on the canvas you are looking at:… Read more →

Pros

  • Can write to the canvas, not just read designs
  • Bulk text replacement and instance override propagation
  • Works on the file you have open, no REST token needed

Cons

  • Three moving parts: MCP server, WebSocket relay and Figma plugin
  • Unofficial; relay has no authentication

Pricing: Open source  ·  figma design-to-code ui annotations websocket

6

Ableton MCP Free

MCP server that lets Claude and other LLMs control Ableton Live for music production

★ 3.1k · +30 this week · MIT · updated 2026-09-22

6.8/10

What it does Ableton MCP is a third-party bridge that lets Claude and other LLMs drive Ableton Live directly, turning natural-language requests into actual track creation, clip arrangement, and song composition inside a real Ableton session via two-way socket communication. Tools it gives your agent - Track and clip manipulation for both MIDI and audio - Loading instruments and effects… Read more →

Pros

  • Real two-way control of a live Ableton session: tracks, clips, instruments, arrangement and MIDI
  • Simple uv/uvx-based install with a documented Remote Script setup
  • Active, MIT-licensed community project with 3.1k stars

Cons

  • Unofficial third-party integration, not built or endorsed by Ableton
  • Anonymous telemetry is on by default and must be explicitly disabled

Pricing: Free  ·  mcp-server ableton-live music-production daw python

7

MeiGen AI Design MCP Freemium

MCP server for AI image/video generation with a 1,400+ prompt library and ComfyUI support

★ 1.8k · MIT · updated 2026-09-26

6.5/10

What it does MeiGen is an MCP server that gives an AI coding agent direct access to image and video generation tools, plus a library of over 1,400 curated prompts, so an agent can produce app assets, marketing images, or product shots without leaving the chat. Tools it gives your agent - generate_image / generate_video across multiple backend models -… Read more →

Pros

  • Wide tool surface: image/video generation, background removal, product-shot and marketing-poster generation, upscaling, and a searchable inspiration gallery
  • Free tier works without an API key (gallery search, inspiration lookup, model browsing); local ComfyUI backend avoids paid credits entirely
  • Ships install paths for several hosts: npx installer, a Claude Code plugin, and a Codex MCP-add command

Cons

  • Paid generation tools require a purchased MeiGen API key and credits; some bundled skills only work through MeiGen Cloud
  • Young project (140 commits) so its 14-cloud-tool surface and pricing are more likely to change than an established MCP server

Pricing: Freemium  ·  mcp-server image-generation video-generation comfyui claude-code

Design MCP servers compared at a glance

#NamePricingStarsScore
1Figma MCP ServerFreemium–8.3
2Framelink Figma MCPFree★ 16k8.0
321st MCP (formerly Magic)Freemium★ 6.0k7.6
4designlang (design-extract)Open source★ 4.2k7.6
5Talk to Figma MCPOpen source★ 7.0k7.4
6Ableton MCPFree★ 3.1k6.8
7MeiGen AI Design MCPFreemium★ 1.8k6.5

How we rank design MCP servers

Every listing gets an editor score from 0 to 10 based on usefulness, quality of the instructions or code, maintenance (recent commits, open issues) and adoption (GitHub stars), and we check which apps it really works with. Reader upvotes and click-throughs nudge the order over time, and we remove listings that shut down, go unmaintained or change pricing dramatically. Read our full methodology.

Other categories

Popular searches