The Problem in Two Prompts
You ask Claude to create a profile card. It generates:
<div className="bg-white rounded-lg p-6 shadow-md">
<h3 className="text-xl font-bold text-gray-900">John Doe</h3>
<span className="bg-green-500 text-white px-3 py-1 rounded-full text-sm">Active</span>
</div>
Two days later, you ask for a notification card:
<div className="bg-slate-50 rounded-xl p-4 border border-gray-200">
<p className="text-base text-slate-800">New message received</p>
<time className="text-xs text-gray-500">2 minutes ago</time>
</div>
Both look fine in isolation. But side by side: bg-white vs. bg-slate-50. rounded-lg vs. rounded-xl. p-6 vs. p-4. text-gray-900 vs. text-slate-800. Your AI just produced two components that look like they belong to different apps.
This isn't a bug. It's a context gap.
Why AI Drifts
LLMs generate UI code by pattern-matching against training data — thousands of card implementations from Material Design, Tailwind UI, shadcn/ui, and random GitHub repos. Each uses different color palettes, spacing scales, and border radii. When you say "card component," the model samples from all of them.
The model has no way to know which pattern is yours.
The obvious fix is to paste your design system into the prompt. This helps for a single generation, but it breaks down fast. In long conversations, early context loses influence — a phenomenon sometimes called context decay. Your tokens from message one carry less weight by message ten. And pasting 2,000+ tokens of design definitions into every conversation is tedious, expensive, and doesn't scale across a team.
You could also try telling the AI to "be consistent." But "consistent" is vague. The model will be internally consistent within one response. Across sessions, across developers, across weeks — it drifts back to statistical defaults. Blue-600 for buttons. Rounded-md for corners. The internet's median design system.
The Fix: Give AI Programmatic Access
The core insight is simple. Instead of describing your design system in natural language and hoping the model remembers, you connect it as a structured data source the model can query on demand.
This is what MCP (Model Context Protocol) enables:
┌──────────────┐ MCP ┌─────────────────┐
│ Cursor / │ ◄─────────────────► │ Design Token │
│ Claude │ "What's primary?" │ Server │
│ │ ◄─────────────────► │ │
└──────────────┘ Returns: #4338CA └─────────────────┘
When the AI detects it's generating a UI component, it queries your token server. Instead of guessing bg-blue-600, it receives primary: '#4338CA' and uses your actual value. Every time, every session, every developer on the team.
The result: two components generated a month apart produce identical design language — same spacing classes, same color tokens, same border radii — without anyone copy-pasting anything.
Setup in One Command
FramingUI's init command handles the entire setup — package installation, Tailwind configuration, MCP connection, and guide generation:
npx -y @framingui/mcp-server@latest init
This detects your project type (Next.js / Vite), installs @framingui/ui, configures Tailwind CSS, and registers the MCP server in .mcp.json:
{
"mcpServers": {
"framingui": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@framingui/mcp-server@latest"]
}
}
}
After restarting Claude Code, the AI can query your design tokens directly — CSS variables like var(--bg-primary-default) and var(--spacing-4) instead of guessing bg-blue-600 or p-4.
The tokens follow a semantic structure: backgrounds (bg.surface, bg.primary), foregrounds (fg.primary, fg.muted), spacing (4px-based scale), radius, typography, shadows, and motion. The AI reads these from the MCP server on every generation, so it never has to guess.
What Changes in Practice
The shift is subtle but compounding. Individual prompts don't feel different — you still ask for buttons and cards in plain English. But across a week of development, you stop finding color mismatches during design review. New team members generate components that match existing ones without reading a style guide. The codebase converges on a single spacing scale instead of accumulating twelve variations of padding.
The underlying principle applies beyond any specific tool. If your AI workflow involves generating UI code repeatedly, the highest-leverage investment is making your design decisions queryable — not repeatable in conversation, but accessible as structured data. MCP is one protocol for doing this. The pattern matters more than the implementation.
The problem was never AI's capability. It was AI's context. Give it your design system as a live data source, and consistency becomes the default instead of the exception.