Give Claude Code a real design system
Claude Code writes the code. Mozaika gives it something real to design to: 3,873 sections and 548 design systems decoded from real products, served over MCP.
Mozaika is a remote MCP server. Connected to Claude Code, it lets the agent call get_design_system for a product like Linear or Stripe and get back measured values: colors with their roles, the type scale, spacing, radii and button specs. Claude Code then builds to that spec instead of its trained default.
What Claude Code gets back
Ask Claude Code to build something like Linear and it can call get_design_system("linear"). This is the start of what comes back, read from the live library when this page was served:
| Role | Value |
|---|---|
| background | #08090A |
| text | #D0D6E0 |
| button_bg | #E5E5E6 |
| button_text | #08090A |
| Token | Value |
|---|---|
| Body font | Inter |
| Type scale | h1 64px, body 15px |
| Base radius | 2px |
| Primary button | bg #E5E5E6, text #08090A, radius 9999px |
The full decode, with spacing, components and per-section specs: Linear design system.
Set it up in Claude Code
- Get a free key. Sign in at mozaika.design/connect. No card. The key is ready immediately.
- Add Mozaika to Claude Code. One command in your terminal, run inside your project. No file to edit. Pick the Claude Code tab on /connect: the block there already has your key in it, so copy it as it is.
- Check it connected, then ask. Start Claude Code in that project and run /mcp. mozaika shows as connected. From the shell, claude mcp list shows it too. Then try: "build the pricing page like Linear".
Setup checked against Claude Code's own documentation on 2026-10-04. The config itself is on /connect, printed with your key in it.
Frequently asked questions
Does it work in every project or only the one I ran the command in?
The command registers Mozaika for the project you run it in. Add --scope user to the same command to have it in every project on your machine.
Do I have to tell Claude Code to use it?
Usually not. When you ask for UI it reaches for the design tools on its own. The first time, Claude Code asks permission to call the server; approve it. If it ever skips the tools, name them once in the prompt: "use mozaika".
Is it free?
There is a free key with no card. It includes 25 tool calls a month, searching the library is not counted, and a shelf of products comes with full decodes every month. Paid plans open the whole library with no monthly cap.
What does the agent actually get back?
Measured values, not pictures: hex colors with their roles, the type scale, spacing, radii, button specs and per-section layout, read from the live site. Your agent sets those values instead of guessing them from a screenshot.
Which model does it need?
Any model your client runs can call it. Mozaika is a tool server, so it does not care which model is on the other end.