MCP server of your design system: connect the AI agent to the components directly

"Create a card like our system" without MCP - the agent looks at the codebase and guesses. Finds something like a card, adapts. The result is close but not the same: another border-radius, another props structure, another name that now needs to be searched for and corrected.

With MCP, the agent doesn't guess. Requests the system directly: what cards are, what props, how they are used. Getting an accurate answer. Makes the right component.

## What's the difference in practice

The task is to create an account settings screen.

Without MCP: The agent looks at the codebase → creates Input with a slightly different API than the existing one, Button with a different border-radius, Card with a different name. The result is visually similar but not systemic. 30-45 minutes of editing.

C Figma MCP: Agent sees open file Figma → finds Input/Default, Button/Primary, Card/Default → generates using real tokens from Variables → 5-10 minutes of edits on details.

Without MCP: background: #E94560 (guessed hex)
MCP: background: var(-color-brand-accent)

It's not about the quality of AI -- the context it gets.

## Three Approaches: Situational Choice

### Figma MCP for design-first commands

The official Figma Dev Mode MCP Server. The agent gets direct access to the open file: layer structure, Auto Layout parameters, Variables with current values, component names and their props in Figma.

** When:** Figma is the source of truth, the design-first command, Tokens Studio syncs Variables with the code.

** How do I connect:**

1. Install Claude Code Desktop
2. Settings → MCP Servers → Add Server
Figma Dev Mode MCP Server (figma.com/developers/mcp)
4. Open the file in Figma – the agent sees it automatically

What to Prepare: Components with meaningful names (not "Group 47"), Variables connected to components, Tokens Studio configured.

**Setting time: ** 15-30 minutes if the system is ready.

### Storybook MCP for code-first commands

Storybook generates component manifest – JSON with all metadata: component names, TypeScript types of props, examples from stories, documentation from MDX pages. The agent reads manifest and knows the real system in production.

The key difference from Figma MCP: Storybook shows what’s in the code, not the design. If Figma and the code diverge, Storybook reveals the truth. For code-first commands, this is more important than a design file.

In addition: autonomous correction loop. The agent creates a component, runs interaction tests and accessibility tests from Storybook, sees what went wrong, fixes. The developer intervenes when the tests are green.

** When:** code - source of truth, React design system with CI, code-first command.

npm install --save-dev @storybook/addon-mcp
# В .storybook/main.ts:
addons: ['@storybook/addon-mcp']
# В Claude Code MCP Settings:
# name: storybook, url: http://localhost:6006/mcp

### Custom MCP server

If the system lives in multiple locations (Figma + Storybook + internal portal), the custom server aggregates from all sources and provides a single interface. SDK on TypeScript and Python, documentation on modelcontextprotocol.io.

## AGENTS.md to work with MCP

# Design system - algorithm of work

MCP's on. Before creating a UI component:
1. Request a list of components via MCP
2. Find the right one.
3. Read his documentation and props.
4. Use the existing one – don’t create a new one

If not suitable:
Tell me which component is missing.
Offer the nearest existing one as the basis
Do not silently create a new component.

Prohibited without explicit request:
New versions of Button/* or Card/ *
- Hard-cut hex instead of tokens
- Changes to src/lib/billing/** and src/lib/auth/**

## Dashboard discrepancies: Figma vs Storybook

One of the most valuable use cases: the agent compares design and code, finds discrepancies.

Through Figma MCP: A list of all components in the file [file name].
Storybook MCP: A list of all components in Storybook.

Create a table:
| Component | Figma | Storybook | Status |
|-------------- |-------- |------ |------------------------- |
| Button/Primary |  |  | Synchronized
| Card/Featured | е | е | No code |
| Toast/Error | е | е | No in design |

For “Not in Code”: Figma implementation priority.
For No Design: Is it used in production? Should I add to Figma?

This is a daily health check without a manual audit once a quarter.

## What to do if MCP is not available

Sometimes MCP is temporarily unavailable. AGENTS.md with a detailed description of the system is the best fallback:

# Components (v1.3.0, current June 2026)

Button:
- variant: "primary" | "secondary" | "ghost" | "danger", default "primary"
- size: "sm" | "md" | "lg", default "md"
- disabled: boolean, loading: boolean
Use: <Button variant="primary" size="md">Text</Button >>

Input:
- label: string (required), error: string (optional)
- disabled: boolean, placeholder: string
Use: <Input label="Email" type="email" error={errorMsg} />

It’s not a replacement for MCP — but it allows AI to work more accurately when unavailable.

## Test prompt to check the connection

Check that the MCP design system is working correctly.

1. Through MCP, you get a list of all the components of the Button type.
2. For Button/Primary, show all TypeScript props.
3. Create the login form only from the components that are in the MCP:
- Email field, password field
- The "Primary" button
- Forgot my password.
4. Exact names of all components used.

Important: If the component is not found through MCP, say it explicitly. Don't make it up.

## Typical team paths range from “we don’t need MCP” to “we don’t understand how we worked without it.”

Many teams start with skepticism. “We already have AGENTS.md with component descriptions – why MCP?”

AGENTS.md describes the system in text. MCP gives the agent direct access to current data. The difference becomes apparent when the system changes.

Scenario: The developer added a new prop to Button. Updated the code. Updated Storybook. I forgot to update AGENTS.md. AI continues to generate Button without new props – because it reads the outdated AGENTS.md.

With MCP, the agent requests the current state of Button from Storybook – sees a new props. No manual documentation update.

MCP is the difference between “AI knows how the system was described” and “AI knows what the system is right now.”.

## When MCP does not solve the problem

MCP shows what the system does. But it doesn't explain why.

“Button/Danger is only used with confirm-dialogue” is a rule that should be explicitly written in AGENTS.md. MCP will reveal what Button/Danger is and what props it has. It won't tell you when to use it.

MCP and AGENTS.md complement each other: MCP provides up-to-date data on components, AGENTS.md provides rules for their use. Together, AI has both the tools and the context to apply them.

## What MCP does not replace

It’s important to understand what MCP isn’t doing so as not to place the wrong expectations on it.

MCP does not replace DESIGN.md and AGENTS.md. The MCP gives the agent component data—props, variants, examples. AGENTS.md gives you rules - when to use primary, when to use secondary, which is forbidden. We need both.

MCP does not fix a poorly organized system. If the components are named "Component 47" and "Group 203", the MCP will return those names. The agent will not be able to work with them meaningfully. MCP works as well as the system is organized.

MCP does not eliminate the need for a review. An agent with MCP generates more accurate code, but not perfect. Edge cases, business logic, UX solutions all require a human review.

MCP is a tool that reduces iteration and improves the first option. This is valuable in itself, without the expectation that the agent will operate fully autonomously.

## The team's path from skepticism to "we don't know how to work without"

Many teams start with “we don’t need MCP, we have AGENTS.md.” Skepticism is understandable.

AGENTS.md describes a system with text at a particular time. MCP gives the agent access to current data. The difference manifests itself with changes.

The developer added a new props to Button. Updated the code and Storybook. I forgot to update AGENTS.md. With AGENTS.md, AI continues to generate Button without new props. With MCP, the agent sees the current state of the component, new props are available.

The first time a team faces this discrepancy is when the value of MCP becomes clear. Not “you need to update the documentation”, but “the system always shows the current state”.

Typical path: set MCP → use week → notice that AI no longer guesses the names of components → start using more often → stop thinking without it.

**One practical tip to start with: * Don't try to set things up perfectly before MCP launches. Connect Figma MCP or Storybook MCP in the current system state. AI will immediately start using the correct component names – even if the system is incomplete. Improvements to the system will immediately be reflected as generation.

Approach selected: Figma MCP / Storybook MCP / custom
Components are meaningfully named (not Component 47)
Props documented in Storybook Stories / Figma
● Test Prompt passed: the agent uses components from the system
AGENTS.md contains instructions: request MCP before creation
Fallback: A list of API components in AGENTS. md
● Next Next post: New code audit – is the system in use?