your ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/weekyour ad here · $149/week

MCP servers

Design & Frontend MCP servers

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

Design & frontend

11

11 of 11 servers

  • shadcn/uiOfficial · shadcn

    Browse, search and install components from shadcn/ui and other registries, built into the shadcn CLI.

    ★ 126kpushed 2026-10-20MITdocsshadcn 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.1kpushed 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-20Apache-2.0

    Remote
    claude mcp add --transport http draw-io https://mcp.draw.io/mcp
  • 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
  • WebflowOfficial · Webflow

    Pages, CMS collections and site settings in Webflow, with a Designer companion app.

    ★ 141pushed 2026-10-06MITon DevHunt

    Remote
    claude mcp add --transport http webflow https://mcp.webflow.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
  • tldrawOfficial · tldraw

    Draw diagrams and sketch with the agent on a shared tldraw canvas.

    ★ 51k (repo)pushed 2026-10-20on 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-20MIT

    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-16MIT

    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).

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, AntV Chart, Webflow. Popular community options: Blender, Framelink Figma, Unity.

Which design & frontend MCP servers are official?+

8 of the 11 here are built by the vendor or the MCP project: shadcn/ui, Magic (21st.dev), draw.io, AntV Chart, Webflow, Canva, Figma Dev Mode, tldraw.

Which design & frontend MCP servers need no install?+

draw.io, Webflow, 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