Design System MCP Servers

What counts as a design system MCP server?#

The Model Context Protocol (MCP) is an open standard for connecting AI agents to external tools and data. Many MCP servers exist for design work, and most search results for "best design MCP servers" mix very different things: 3D tools, inspiration libraries, image generators, and general design apps. This directory is narrower. It lists servers whose job is to give a coding agent access to a design system: its tokens, its components, and the rules for using them.

Inclusion rules for this page:

• Every entry is described from the publisher's own documentation, repository page, or announcement, linked in the table.
• "Official" means the design system's owner publishes the server. Community wrappers are not listed, even when they are popular.
• Tool names and requirements are taken from the linked page as read on November 2, 2026. Where a page did not state something, such as a release status, this page does not state it either.
• md-design.io is independent and not affiliated with any vendor listed here. We have not run these servers ourselves.

This is a snapshot as of November 2026. MCP servers are changing quickly: endpoints move, tools are renamed, and preview features change. Check the linked page before you build on any entry.

Directory at a glance#

For tools and platforms, "Official" means the vendor publishes the server for its own product. It does not mean the vendor owns your design system.

Servers published by design system owners#

These servers answer questions about one specific design system, written and maintained by the people who own it.

IBM Carbon. Carbon's onboarding page gives the server URL as https://mcp.carbondesignsystem.com/mcp and says it uses IBMid (w3id for IBMers) for authentication. Clients without OAuth discovery can use a token and session ID generated from the Carbon MCP auth page. The page also asks you to install a carbon-builder skill, downloaded from the Carbon MCP GitHub repository, for Carbon-specific context. The tools it names for Figma Make setup are docs_search, code_search, get_charts, labs_search, and code_audit, with an option to enable write tools. Carbon's overview page says the product continues to evolve and lists planned additions such as Carbon Labs and Carbon Patterns context and migration support from Carbon v10 to v11.

GitHub Primer. The Primer documentation describes @primer/mcp, a local stdio server started with npx @primer/mcp@latest, with configuration examples for VS Code and for clients that read .mcp.json or .github/mcp.json. Its page lists 19 tools, grouped as setup (init), React components (list, get, examples, usage guidelines, accessibility guidelines), patterns, design tokens and styling (token search, token specs, usage patterns, lint_css, color and typography usage), icons, and guidance and review (primer_coding_guidelines, review_alt_text). The page does not state a release status. The source lives in the primer/react repository.

Ant Design. The Ant Design docs describe an MCP server shipped in @ant-design/cli from version 6.3.5, started with npx -y @ant-design/cli mcp or antd mcp. You can pin an antd version with --version. It lists 8 tools: antd_list, antd_info, antd_doc, antd_demo, antd_token, antd_design_md, antd_semantic, and antd_changelog, plus two prompts, antd-expert and antd-page-generator. A tool named antd_design_md returns what the page calls the design-language document, a reminder that file formats and servers are converging. Older snapshots of this page recommended a community server instead, so confirm you are reading the current version.

Chakra UI. The Chakra docs describe @chakra-ui/react-mcp, which supports only stdio transport. Its tools cover listing components, looking up props and examples, fetching design tokens and creating or modifying custom theme tokens, and reviewing code for v2-to-v3 migration. Two Pro template tools require an active Chakra UI Pro license and a CHAKRA_PRO_API_KEY environment variable. A separate docs build lists a different tool set, so check that the page matches your Chakra version.

Material UI (MUI). The Material UI docs describe @mui/mcp, run with npx -y @mui/mcp@latest. It gives assistants access to the official Material UI docs and code examples. The page names two tools, useMuiDocs and fetchDocs, and says the full list appears when you connect with the MCP Inspector. The page does not name a publisher; it is part of MUI's documentation site, which is why it is listed here. This is the Material UI library, not Google's Material Design guidelines, for which we found no server in the owner's documentation.

Design tools that expose your system#

These servers act on a design file or design platform where your system lives. They expose your design system, not a public one.

Figma. Figma's developer documentation describes a remote server hosted by Figma at https://mcp.figma.com/mcp and a desktop server that runs through the Figma desktop app, aimed at specific organization and enterprise needs. The page says it exposes design context (variables, components, and layout data, especially for design systems), code generation from frames, Code Connect for reusing your codebase components, and writing to the canvas. Write to canvas is described as still being improved and free during beta. Seat and plan requirements apply, listed on the page.

Google Stitch. Stitch's MCP setup page describes a remote server, hosted by Google at https://stitch.googleapis.com/mcp, that lets tools such as Cursor, Antigravity, the Gemini CLI, VS Code and Claude Code work with your Stitch projects. It authenticates with an API key created in the Stitch settings or through OAuth for clients that need a sign-in flow. The design-system tools it lists are create_design_system, update_design_system, list_design_systems and apply_design_system, next to tools for projects and screens. Google's March 18, 2026 announcement introduced it: "Using the recently released Stitch MCP server and SDK, you can leverage Stitch's capabilities via skills and tools." For how Stitch relates to DESIGN.md itself, see Google Stitch and DESIGN.md.

Penpot. Penpot's help center describes an MCP server that lets an MCP-compatible client read and modify components, styles, tokens, pages, and layers in your Penpot files. Remote and local options exist. The remote server is hosted by Penpot and connects with a key generated in Integrations; the local one runs through an npm package. Both need the Penpot plugin connected to the open file, and the server works on the page currently focused in the active Penpot tab. The local tools named are execute_code, high_level_overview, penpot_api_info, export_shape, and import_image. The page does not state a release stage.

Component library servers#

These servers sit next to the code. They expose components that exist in a repository or registry rather than a brand-level specification.

shadcn/ui. The shadcn documentation describes a server that lets assistants browse, search, and install components from registries: the default shadcn/ui registry, third-party registries that follow the registry spec, and private or company registries configured in components.json, with optional authentication through environment variables. Setup for Claude Code is pnpm dlx shadcn@latest mcp init --client claude, and other clients can run npx shadcn@latest mcp.

Storybook. Storybook's documentation describes a server that runs as part of the Storybook dev server at /mcp, using the @storybook/addon-mcp addon. It has three toolsets: development (write and preview stories, find stories by component), docs (list components and read their props, stories, and docs, which depends on the components manifest and supported frameworks), and testing (run story tests, including accessibility checks if configured). The page labels it preview and says the API may change. Storybook is described there as maintained by Chromatic.

Documentation platforms#

These servers expose a design system documented in a platform such as zeroheight or Supernova, which many teams use as their source of truth.

zeroheight. zeroheight's help center describes a remote server that connects AI tools to the design system documented in your zeroheight organization. Admins manage access per styleguide under the organization's MCP settings. Write access is on by default for connections made by admins and editors, who can create and update pages; viewer connections stay read-only. The page says the server is available on all plans, with Free and Starter limited to 500 calls per month, and that search requires an Enterprise plan with AI features enabled.

Supernova. Supernova describes a server with read and write access to documentation, tokens, and components, including bulk property changes across a group, and says it returns entities such as a token, its resolved value, and the components that use it. The only source we found is Supernova's own blog post, which does not give the endpoint or the authentication method. That post also compares Figma's server and zeroheight's, and as a vendor comparison it should be read as one.

How does this compare with a DESIGN.md file?#

A server and a file carry the same kind of content: tokens, components, and rules. They differ in how the content reaches the agent.

Atlassian published a test comparing the two for its own design system. Its MCP server and skills covered about 80% of the system, while DESIGN.md covered about 30% and needed roughly 92% more tokens as the sole source, yet DESIGN.md produced the best one-shot prototypes. The numbers and the source link are in DESIGN.md vs MCP Servers, which also covers the trade-offs in detail and a hybrid setup. We do not repeat them here.

For choosing, the factors that matter most are system size, how often it changes, and who consumes it:

• Use a server when the agent works on production code against a large or fast-changing system, and when the publisher already maintains one. If you use Carbon, Primer, Ant Design, Chakra UI, or Material UI, the owner's server is probably the first thing to try.
• Use a DESIGN.md file when you need portable context that works in any tool, offline, with review in pull requests, or when your system is small enough for a single file to cover it. See what DESIGN.md is and the spec guide.
• Use both when the file is derived from the same source the server reads, as described in agentic design systems.

Some tools blur the line. Ant Design's server returns a design-language document through a tool, and Stitch's documentation describes generating, applying and exporting DESIGN.md files next to its MCP server. A different route is reading the code directly: Anthropic's Claude Design setup guide documents /design-sync in Claude Code, which reads your tokens and components from React design systems and is not an MCP server. That route is compared in Claude Design vs Google Stitch.

Before you connect a server#

MCP servers run with the permissions you give them, and some can write.

• Check write access. Figma's canvas writing, Penpot's execute_code, Supernova's editing, zeroheight's page creation, and Carbon's optional write tools can change real assets. Prefer read-only access for coding agents unless you need otherwise.
• Check where it runs. Primer, Ant Design, Chakra UI, MUI, and shadcn run locally through npx according to their docs; Carbon, Figma, Stitch, and zeroheight describe hosted servers. A hosted server sees your queries.

If you want to see what a DESIGN.md contains before pairing it with a server, the DESIGN.md viewer renders and lints a file in your browser. It never generates files, and files are never uploaded or stored.

---

Next step: read DESIGN.md vs MCP Servers for the trade-off in detail, then see how the pieces fit in the AI coding agents guide.