Read your design system from an AI agent (MCP)
Your Storybook stories compile to one design-system model. Figma renders it — and now any AI agent reads the same model over MCP. Point an agent at your project and it builds components that match your tokens and variants, with no Figma in the loop.
Reads the system — no Figma
The same model the Figma plugin renders from (components, CVA variants, per-state classes, tokens) is exposed to any MCP-speaking agent. Figma is optional; the model is generated from your code.
Conformant by default
The agent uses your real tokens (bg-primary, text-muted-foreground) and your CVA variant conventions — it doesn't invent bg-blue-500 or a parallel design language.
Plain-language requests
The server tells the agent how to use the model on connect, so you just ask. No need to call tools by hand.
Just ask
The server ships instructions that tell your agent to consult the design system before building UI — so you describe what you want and the agent does the rest.
“Create a login form with email and password, plus a primary submit button.”
- list_components → finds your
Input,Button, andCardinstead of inventing new ones. - get_component + get_tokens → reads the Button’s variants and your real color/spacing tokens.
- Writes a login form that uses
<Button variant="default">, your spacing scale, and your semantic colors — conformant on the first try.
Worked example: an agent builds a conformant component
We pointed an agent at a real project’s model — nothing else, no Figma — and asked it to build a brand-new Callout component. It read the design system first: the project’s CVA template and its 18 color tokens. Then it generated a Callout that:
- ✓ used only the project’s tokens (
bg-card,text-destructive,border-border…) - ✓ followed the same
cva()variant convention as the rest of the system - ✓ invented zero palette colors — when it wanted a “success” intent with no matching token, it reused an existing one instead of reaching for
bg-green-500
That’s the point: the model carries enough of your system — variants, tokens, conventions — that an agent produces code that looks like it belongs, not a generic approximation.
Setup
You already installed Inkbridge (pnpm add -D inkbridge). Register the MCP server with your agent — run it from your project directory:
claude mcp add inkbridge npx inkbridge mcpOr add it to your .mcp.json:
{
"mcpServers": {
"inkbridge": { "command": "npx", "args": ["inkbridge", "mcp"] }
}
}No Figma, and no manual scan step: the server generates the model itself (it runs the scanner headlessly on first use, and you can ask it to scan again whenever the code changes).
Tools the agent uses
list_componentsEvery component with its kind, variant axes, and stories — so the agent reuses what exists instead of duplicating.
get_componentThe full resolved definition for one component: classes, variants, states (and the raw JSX tree on request).
get_tokensYour design tokens — consumer-authored only, or the full merged map including Tailwind defaults.
scanRegenerate the model by running the scanner headlessly. Runs automatically on first use; call it after the code changes.