MCP Tools for Design Systems: A Practical Guide

Model Context Protocol (MCP) is the missing link between AI assistants and your design system. Instead of hoping the AI remembers your component APIs from training data, MCP tools let it query your library in real time.

What MCP tools look like in practice

Fragments ships with 9 MCP tools. Here's how a typical AI-assisted workflow looks:

1. You ask Claude to build a settings page
2. Claude calls fragments_discover to find relevant components (Form, Field, Switch, Select, Card)
3. Claude calls fragments_inspect on each component to get props, usage guidelines, and examples
4. Claude calls fragments_tokens to get your design token values
5. Claude generates code using your actual API — not guesses

The result is code that uses your real components with correct props, follows your usage guidelines, and respects your token system.

Building your own MCP tools

The pattern is straightforward:

// Define a tool
server.tool('my_component_lookup', {
  description: 'Look up component API by name',
  parameters: z.object({
    name: z.string().describe('Component name'),
  }),
  handler: async ({ name }) => {
    const contract = await loadContract(name);
    return { content: [{ type: 'text', text: JSON.stringify(contract) }] };
  },
});

The key insight is that MCP tools should return structured data, not prose. AI assistants are better at using JSON contracts than parsing documentation paragraphs.

Beyond component lookup

The real power comes from tools that encode your team's decisions:

• Governance tools — Check if generated code follows your component allowlist
• Token validation — Ensure hardcoded colors aren't used instead of tokens
• Accessibility checks — Run WCAG compliance before code is committed
• Composition discovery — Find which components are designed to work together

These tools turn your design system from a passive library into an active collaborator in every AI-assisted development session.