You spent three weeks building out a token system. Colors documented, spacing scale finalized, typography hierarchy locked. Two weeks later a developer's PR shows buttons with the wrong blue and 20px padding where your system specifies 16px. They weren't being careless—they just couldn't find your tokens at the moment they needed them.
Model Context Protocol changes what AI tools can access when they write code. When an AI agent has a direct connection to your design system, it uses your actual tokens rather than guessing from patterns it saw during training.
What MCP Does
MCP is an open standard created by Anthropic. It gives AI assistants a way to query external data sources—files, APIs, databases, design systems—during a conversation rather than relying on what was in their training data.
For design systems, this means the gap between your token definitions and generated code closes. An AI agent connected to a FramingUI MCP server can ask "what is the primary action color?" and get back your current token value, not a generic blue.
The difference is consequential. Without a live connection, AI falls back to its training distribution—which means widely-used defaults like #3b82f6 for blue, padding: 16px for spacing, and Tailwind's built-in scale for typography. Those values are plausible but wrong for your system. With an MCP connection, the AI queries your tokens directly and generates code that references them.
The Handoff Problem, Restated
Traditional handoff has a latency problem. A designer updates a color token. The documentation gets updated, maybe a few hours later. A developer generating code in the meantime uses the old value. A week later someone notices a mismatch in production.
With token-based MCP access, there's no lag. The AI reads the current state of your design system at the moment of code generation. Update --primary-600 and the next generated button uses the new value automatically.
This isn't just a convenience—it changes how you think about the design-to-code relationship. The tokens become the contract. Both sides of the handoff—designer defining, developer generating—work from the same live source.
What AI Can Read Through MCP
When Claude Code connects to FramingUI's MCP server, it gains access to the design token catalog: color scales and semantic color assignments, spacing values, typography definitions (families, sizes, weights, line heights), border radii, shadow levels, and semantic state tokens for success, warning, and error states.
Beyond raw values, the tokens carry semantic meaning. The AI doesn't just get a hex code for primary-600—it knows this token is intended for interactive elements. It knows neutral-100 is a background, not a text color. It knows spacing-4 is button padding, not page margin. That semantic understanding is what makes generated code compositionally correct, not just numerically accurate.
How This Changes the Developer Workflow
A developer on your team asks Claude Code: "Create a settings form with email, password, and notification preferences."
Without MCP: Claude generates a plausible form using Tailwind defaults. bg-blue-600 for the submit button. p-4 for field padding. text-gray-700 for labels. The structure is right; the values drift from your system.
With MCP: Claude queries the token server before generating. It uses bg-primary-600, your actual padding tokens, your text color semantics. The first draft matches the design system. Review time drops because there's nothing to correct on the token level.
The developer doesn't need to paste your token documentation into the chat or describe your spacing scale. The connection handles it.
What Designers Need to Do
The minimal requirement is that your design decisions live in tokens rather than scattered as Figma annotations. Tokens that exist only in design files can't be queried by an MCP server—they need to exist in code.
This doesn't require learning to write code. FramingUI provides tooling to define tokens through a visual interface. Once they're defined there, the MCP server exposes them automatically.
The practical workflow:
- Define your palette, spacing scale, and typography in token form. Semantic naming matters—
primary-actionis more useful to an AI agent thanblue-600when the color happens to be blue. - Run the FramingUI MCP server. This is a one-time config change in Claude Code's
.mcp.json. - When reviewing AI-generated components, focus your attention on structure and interaction patterns rather than checking that hex values are correct. Token fidelity is handled at the connection level.
Common Concerns
Does this replace Figma? No. Figma is where you explore, prototype, and produce high-fidelity specs. MCP is a bridge between the decisions you make in Figma and the code that developers generate. You still design in your preferred tool; the tokens capture the decisions that code needs to know about.
What happens when I update a token? The next code generation reads the updated value. Components already in the codebase that reference the token by name update automatically when the CSS variable changes. Components that used hardcoded values don't—which is exactly why token references in generated code matter.
What if AI generates something that doesn't match the mockup? That's usually a structural or interaction issue, not a token issue. With MCP connected, color and spacing mismatches become rare. What remains are decisions about layout, state handling, and component composition—which is the interesting design feedback to give.
The design system you built carefully can now be read directly by the tools your developers use every day. The gap between your token file and production components gets a lot narrower.