How MCP connects AI coding agents to your design system

Anthropic released the Model Context Protocol on 25 November 2024. Just over a year later, when it donated the protocol to a new fund under the Linux Foundation, Anthropic counted more than 10,000 active public MCP servers and over 97 million monthly SDK downloads.

The Model Context Protocol (MCP) is an open standard that lets AI applications call tools and read data from external servers through one common interface. For a design system, an MCP server is how a coding agent looks up your real components, props, variants, and tokens before it writes UI.

What is the Model Context Protocol?

MCP defines three roles. A host is the AI application, such as an IDE or chat app. A client is the connector inside the host. A server provides context and capabilities. Messages use JSON-RPC 2.0, and the specification credits the Language Server Protocol as inspiration: MCP aims to do for AI context and tools what LSP did for editors.

Servers offer three main features:

• Tools: functions the model can execute, such as looking up a component.
• Resources: context and data, such as a token file or a guidelines page.
• Prompts: templated messages and workflows a user can invoke.

As of October 2026, the current specification version is 2026-07-28, which makes requests stateless and self-contained. Its security section says tools represent arbitrary code execution, that hosts must get explicit user consent before invoking a tool, and that tool descriptions should be treated as untrusted unless they come from a trusted server.

How does an MCP server expose a design system?

A design system MCP server turns your library into answers an agent can request mid-task. For "build a billing settings page":

1. The agent searches for "form", "table", and "tabs" and gets matching components with one-line purposes.
2. It requests details for its picks: props with types and defaults, variants, and an example.
3. It reads token names for spacing and color instead of inventing values.
4. It writes code importing those components, then runs your type checker and tests.

Servers run locally over standard input and output, next to your repository, or remotely over HTTP, which suits hosted sources such as design files.

The quality of an agent's UI is capped by the quality of the answers your server gives it.

Keep answers small and specific. An agent that receives every component's full documentation at once spends its context window on things it won't use. Return a short list on search and full detail on request. The quality of an agent's UI is capped by the quality of the answers your server gives it.

Which design-tool MCP servers exist today?

As of October 2026, three servers cover most design system workflows.

Figma says canvas writing is free during the beta and will become a usage-based paid feature, and it needs a Full seat to write outside your drafts. Storybook labels its AI capabilities as a preview whose API may change. The shadcn server works with Claude Code, Cursor, VS Code, Codex, and OpenCode, reading registries from components.json.

These are complementary. Figma answers what the design says; a code-side server answers what exists in the codebase and how to call it.

What context does an agent need from a design system?

Agents fail in predictable ways, and each failure maps to a missing piece of context:

Usage rules are the piece most systems lack in machine-readable form. "Use Dialog for confirmations, Sheet for side panels, never nest dialogs" is one sentence for a human and the difference between correct and plausible for an agent. Write rules as short, testable statements attached to each component.

How do you evaluate what an agent builds?

A demo proves the pipeline works once. An evaluation proves it works on Tuesday. Use 10 to 20 prompts drawn from real tickets, such as a settings page or a sign-up flow, and run each several times, because output varies between runs.

First, test the server alone. The MCP Inspector, run with npx @modelcontextprotocol/inspector, opens a browser, CLI, or terminal client where you can call each tool and read the raw JSON-RPC exchange. If a tool returns the wrong props there, no agent will fix it.

The agent output scorecard

Rerun the scorecard whenever you change the server, the usage rules, or the model. When reuse drops, read the agent's tool calls first: often it searched for the wrong word, and the fix is a better component description, not a better prompt.

Where Pegasus fits

Pegasus ships a local MCP server that exposes its component catalog (components, props, variants, and tokens) to MCP clients such as Claude Code and Cursor, so AI tools compose pages from the real components instead of generating new ones. Because the Figma library and the React code share component names, variant structure, and tokens, an agent's answer about a component's variants matches what a designer sees in Figma.

The React components are TypeScript, built on shadcn/ui, Base UI primitives, recharts for charts, and Tailwind CSS, so type checking catches invalid props in the scorecard above. Storybook ships with stories and tests for the components, giving you a place to render and test what the agent produced. When you retheme, one token source updates both the Figma variables and the code's theme object, so the tokens an agent reads are the tokens a designer uses.

FAQ

What is an MCP server for a design system?

It's a small program that answers an AI agent's questions about your design system through the Model Context Protocol. It typically exposes tools for searching components and reading their props, variants, and tokens, plus resources such as guidelines. The agent calls it before writing UI, so generated code imports your real components instead of inventing look-alikes.

Does Figma have an MCP server?

Yes. As of October 2026, the Figma MCP server runs remotely at mcp.figma.com or through the desktop app. It gives agents design context, variables, screenshots, and Code Connect mappings, and it can write native content to Figma files. Writing is in beta, free for now, and planned to become a usage-based paid feature.

Is MCP only for Claude?

No. Anthropic created MCP but released it as an open standard, and in December 2025 donated it to the Agentic AI Foundation under the Linux Foundation. Anthropic lists ChatGPT, Cursor, Gemini, Microsoft Copilot, and Visual Studio Code among adopters, and design tools such as Figma document setup for many MCP clients.

Sources

• Introducing the Model Context Protocol, Anthropic (2024)
• Donating the Model Context Protocol and establishing the Agentic AI Foundation, Anthropic (2025)
• Specification, Model Context Protocol (2026)
• Figma MCP server guide, Figma Developer Docs
• Using Storybook with AI, Storybook Docs
• MCP server, shadcn/ui Docs
• MCP Inspector, Model Context Protocol