Give Claude Desktop a real design system
Claude Desktop builds UI when you ask. 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 Desktop, 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 Desktop then builds to that spec instead of its trained default.
What Claude Desktop gets back
Ask Claude Desktop to build something like Notion and it can call get_design_system("notion"). This is the start of what comes back, read from the live library when this page was served:
| Role | Value |
|---|---|
| background | #FFFFFF |
| text | #0D0D0D |
| button_bg | #0075DE |
| button_text | #FFFFFF |
| Token | Value |
|---|---|
| Body font | Notion Inter |
| Type scale | h1 64px, body 16px |
| Base radius | 8px |
| Primary button | bg #0075DE, text #FFFFFF, radius 8px |
The full decode, with spacing, components and per-section specs: Notion design system.
Set it up in Claude Desktop
- Get a free key. Sign in at mozaika.design/connect. No card. The key is ready immediately.
- Add Mozaika to Claude Desktop. Settings, then Developer, then Edit Config. The block runs a small bridge (mcp-remote), so you need Node.js installed. Restart Claude Desktop after. Pick the Claude Desktop tab on /connect: the block there already has your key in it, so copy it as it is.
- Check it connected, then ask. After the restart, click + in the chat box, then Connectors. mozaika is listed with its tools. Then try: "lay out the docs page like Notion".
Setup checked against Claude Desktop's own documentation on 2026-10-04. The config itself is on /connect, printed with your key in it.
Frequently asked questions
Why a bridge instead of adding Mozaika as a custom connector?
Mozaika's key travels in a request header. Custom connectors can send a request header only in a beta that is open to a limited set of organizations, and without the header every real call is refused. The mcp-remote bridge sends the header from your machine, which works for everyone today.
Do I need anything besides Node.js?
No. npx downloads the bridge the first time Claude Desktop starts it.
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.