FreeAgents / MCP

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, and Card instead 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. And it doesn’t have to be taken on trust: the checks behind this example ship as the check_conformance tool, so the agent verifies its own output — and fixes violations — before the code ever reaches you.

Setup

You already installed Inkbridge (pnpm add -D inkbridge). If you ran inkbridge setup or cloned one of the starters, this is already done — setup registers the server in a committed .mcp.json. Otherwise, register it with your agent — run it from your project directory:

claude mcp add inkbridge npx inkbridge mcp

Or 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

get_capabilities

What Inkbridge does, a summary of the loaded model, and how to use the server — the recommended first call so the agent orients before it generates anything.

list_components

Every component with its kind, variant axes, and stories — so the agent reuses what exists instead of duplicating.

get_component

The full resolved definition for one component: classes, variants, states (and the raw JSX tree on request).

get_tokens

Your design tokens — consumer-authored only, the full merged map, or a named theme's effective values.

check_conformance

The agent verifies its own output: invented palette colors, hardcoded values, and off-scale radii — in Tailwind classes AND MUI sx — are flagged before the code ever reaches you.

suggest_token

The fix half of check_conformance — the nearest existing token for a raw color or dimension, so the agent swaps in a real token instead of guessing.

check_story

Verify a story follows the authoring conventions (meta.title, one story per state, fixed-width wrapper) before it's presented.

draft_component

A correct-by-construction shadcn/CVA scaffold — component + one-story-per-variant story — modelled on an existing component so the structure already matches your system.

write_component

Write a conformant component + story to your working tree, but only after each file passes the gate — check_conformance for components, check_story for stories. All-or-nothing, no PR: you review the diff and commit. The loop-closer (draft, fill, check, write).

diagnose_component

Point it at a real component file and get a story-readiness report: which runtime couplings it has (form, store, data fetching, router, motion), which states deserve their own story, and whether the fix is a story decorator or a presentational extraction. The onboarding step for components that weren't built presentational-first.

diff_model

What changed in the model since the last check — components added, changed, or removed, and whether tokens moved. Handy for review agents.

scan

Regenerate the model by running the scanner headlessly. Runs automatically on first use; call it after the code changes.

mcpagentsai

← Back to all features