Generate On-Brand React Components from Your Design System, Then Hand Them to Claude Code via MCP

Magic Patterns MCP lets Claude Code pull AI-generated components straight from your design system spec — no copy-paste, no manual cleanup of token names or import paths.

The workflow gap: you prototype a UI in an AI design tool, then manually translate the generated code into your codebase's conventions — fixing token names, swapping component aliases, correcting import paths. Magic Patterns' MCP server closes that gap by making the generated component visible to Claude Code as a machine-readable spec, not a blob of pasted JSX.

Setup (~5 minutes)

1. In Magic Patterns, import your design system: upload your @company/tokens package or link your Figma library. Magic Patterns reads your primitives, components, and brand tokens.
2. Run /mcp inside Claude Code to trigger OAuth — the Magic Patterns Remote MCP Server connects automatically.
3. Add the Integration Skill via /install magic-patterns. This tells Claude Code to treat the Magic Patterns output as a spec and adapt it to your codebase's conventions rather than pasting the prototype verbatim.

The workflow

Once connected, you describe the component you need inside Claude Code and it calls the MCP server, retrieves the component spec that matches your design system, and writes a file that uses your existing packages:

# In Claude Code:
Generate a FilterBar component using our design system tokens for the dashboard sidebar
# Claude Code calls Magic Patterns MCP, retrieves the spec,
# adapts it to your Button, Chip, and TextField components, and writes FilterBar.tsx

Before merging, always check

• Token usage: does the component use color.primary.600 from your tokens, or re-declare it as #1d4ed8?
• Import paths: are packages referenced in the file actually in your package.json?
• Component aliases: did it map Magic Patterns' Tag to your codebase's Chip, or introduce a new primitive?

The Integration Skill handles token mapping well; component-name aliases between your system and Magic Patterns still need a spot-check on the first few components until you've confirmed the mapping is right.

Sources: Magic Patterns MCP Overview · Design Systems — Magic Patterns