MCP servers

Design & Frontend MCP servers

Turn Figma designs into code, pull UI components and drive design and 3D tools. 17 servers, 13 of them official, with the command to add each one, GitHub stars and the last push. Updated 2026-10-24.

Design & frontend

17 of 17 servers

shadcn/uiOfficial · shadcn
Browse, search and install components from shadcn/ui and other registries, built into the shadcn CLI.
★ 126kpushed 2026-10-24MITdocs shadcn on DevHunt
Local (stdio)
claude mcp add shadcn-ui -- npx shadcn@latest mcp
Magic (21st.dev)Official · 21st.dev
Generate React UI components from a prompt, inspired by 21st.dev's library.
★ 6.2kpushed 2026-09-09ISC
Local (stdio)
claude mcp add magic -- npx -y @21st-dev/magic@latest
draw.ioOfficial · draw.io
Create draw.io diagrams from Mermaid or XML, shown live in the chat.
★ 5.7kpushed 2026-10-24Apache-2.0
Remote
claude mcp add --transport http draw-io https://mcp.draw.io/mcp
ExcalidrawOfficial · Excalidraw
Draw hand-drawn style Excalidraw diagrams that render live in the chat.
★ 5.6kpushed 2026-03-24on DevHunt
Remote
claude mcp add --transport http excalidraw https://mcp.excalidraw.com
AntV ChartOfficial · AntV
Generate charts (line, bar, maps, flow diagrams and 20+ more) with AntV.
★ 4.4kpushed 2026-08-27MIT
Local (stdio)
claude mcp add antv-chart -- npx -y @antv/mcp-server-chart
MiroOfficial · Miro
Hosted server to read Miro boards and create diagrams, docs and tables on them.
★ 163pushed 2026-09-17MITdocs on DevHunt
Remote
claude mcp add --transport http miro https://mcp.miro.com/
WebflowOfficial · Webflow
Pages, CMS collections and site settings in Webflow, with a Designer companion app.
★ 140pushed 2026-10-06MITon DevHunt
Remote
claude mcp add --transport http webflow https://mcp.webflow.com/mcp
WixOfficial · Wix
Hosted server to build and manage Wix sites, stores, bookings and CMS data.
★ 15pushed 2026-07-23docs
Remote
claude mcp add --transport http wix https://mcp.wix.com/mcp
CanvaOfficial · Canva
Search, create and export Canva designs from an AI assistant (hosted server).
Remote
claude mcp add --transport http canva https://mcp.canva.com/mcp
Figma Dev ModeOfficial · Figma
Design context, variables, components and screenshots from Figma frames for code generation.
Figma on DevHunt
Remote
claude mcp add --transport http figma-dev-mode https://mcp.figma.com/mcp
PenpotOfficial · Penpot
Read, create and change Penpot designs through a Penpot plugin bridge.
★ 62k (repo)pushed 2026-10-23MPL-2.0docs on DevHunt
See docs
Setup is in the README (it needs a build step, an app plugin or your account details).
StorybookOfficial · Storybook
Storybook addon that gives agents your component docs and helps write and test stories.
★ 91k (repo)pushed 2026-10-24MITon DevHunt
Local (stdio)
claude mcp add storybook -- npx -y @storybook/addon-mcp
tldrawOfficial · tldraw
Draw diagrams and sketch with the agent on a shared tldraw canvas.
★ 51k (repo)pushed 2026-10-24on DevHunt
Remote
claude mcp add --transport http tldraw https://tldraw-mcp-app.tldraw.workers.dev/mcp
BlenderCommunity
Create and edit 3D scenes, objects and materials in Blender from a prompt.
★ 32kpushed 2026-10-24MIT
Local (stdio)
claude mcp add blender -- uvx blender-mcp
Framelink FigmaCommunity
Simplified Figma layout and style data for coding agents, using a Figma API token.
★ 16kpushed 2026-10-24MIT
Local (stdio)
claude mcp add --env FIGMA_API_KEY=... --transport stdio framelink-figma -- npx -y figma-developer-mcp --stdio
Needs FIGMA_API_KEY
UnityCommunity
Control the Unity Editor: scenes, GameObjects, scripts and assets.
★ 15kpushed 2026-10-19MIT
See docs
Setup is in the README (it needs a build step, an app plugin or your account details).
GodotCommunity
Launch the Godot editor, run projects, read debug output and edit scenes.
★ 6.3kpushed 2026-04-16MIT
Local (stdio)
claude mcp add godot -- npx -y @coding-solo/godot-mcp

Setup guide for each server

Install for every client, tools, security notes and alternatives, one page per server.

shadcn/ui Magic (21st.dev)draw.io Excalidraw AntV Chart Miro Webflow Wix Canva Figma Dev Mode Penpot Storybook tldraw Blender Framelink Figma Unity Godot

Using Cursor, VS Code or Claude Desktop? How to add an MCP server to each client. Read a server's permissions before you connect it to real accounts, and start with read-only or test keys.

FAQ

What is the best design & frontend MCP server?+

Start with the official server for the product you use: shadcn/ui, Magic (21st.dev), draw.io, Excalidraw, AntV Chart. Popular community options: Blender, Framelink Figma, Unity.

Which design & frontend MCP servers are official?+

13 of the 17 here are built by the vendor or the MCP project: shadcn/ui, Magic (21st.dev), draw.io, Excalidraw, AntV Chart, Miro, Webflow, Wix, Canva, Figma Dev Mode, Penpot, Storybook.

Which design & frontend MCP servers need no install?+

draw.io, Excalidraw, Miro, Webflow, Wix, Canva, Figma Dev Mode, tldraw run as hosted remote servers: add the URL to your client and sign in. The rest run locally with npx, uvx or Docker.

How do I add a design & frontend MCP server to Claude Code or Cursor?+

In Claude Code, run the command shown next to the server (claude mcp add ...). In Cursor, VS Code or Claude Desktop, add the same URL or command to the client’s mcp.json; the MCP servers hub has a snippet for each client.

More MCP servers: Databases · Browser automation & web scraping · Dev tools & Git · Docs & code context · Cloud & DevOps · Monitoring & analytics · Security & code quality · Search & web data · Files & documents · Productivity & project management · Messaging & email · Payments & commerce · AI, memory & reasoning · MCP tools launched on DevHunt