MozaikaDesign references for AI coding agents

Mozaika: an MCP server that gives AI coding agents measured design references

Mozaika is an MCP server that gives AI coding agents measured design references. It decodes 588 real shipped products straight from the live DOM into design systems made of values, so your agent builds UI against the exact fonts, hex color roles, spacing and radii a product actually ships instead of against an average of everything the model was trained on.

Not screenshots. Not a prose description of a style. Values: font family, weight and size per role, letter-spacing, line-height, color roles as hex, the spacing rhythm, border radii, and button and input specs, recorded per section of a real page. Your agent asks for them over MCP while it is writing the code. MCP is the Model Context Protocol, the interface coding agents use to call external tools.

What it is: An MCP server. Streamable HTTP at https://mozaika.design/mcp, 23 tools.
Who it is for: Developers who build interfaces with an AI coding agent that speaks MCP.
What it returns: Measured design systems, full-page screens, sliced sections with per-section specs, components, recipes and ordered user flows.
Where the values come from: Computed styles read from the live DOM of the real product, not from a screenshot and not from a model's description.
Output formats: DESIGN.md, a Tailwind v4 theme, CSS variables, or W3C design tokens.
Library size: 588 products decoded, 548 measured design systems, 1,768 full-page screens, 3,873 sliced sections. These four counts are read from the live database each time this page is served.
Clients: Any MCP client that can connect to a streamable HTTP server with a bearer token.
Free tier: A real MCP key, no card: unlimited search across the whole library, plus 25 metered tool calls a month. Full decodes are limited to a rotating monthly open shelf of 30 products.
Paid
Registry name: design.mozaika/mozaika on the official MCP registry.

What Mozaika is, and what it is not

It is a source of measured values for an agent to build against, delivered over MCP while the agent codes.
It is not an image generator. It returns numbers and names, not a picture of a UI.
It is not a template pack. It does not hand you a finished page to paste.
It is not a gallery to browse by eye, although it stores the screens the measurements were taken from.
It does not replace your agent. It supplies the one thing the agent cannot get from its training: what one specific product actually ships.

The problem: an agent designs from an average

Ask a coding agent for a pricing page and it writes one from memory, and its memory is every page it was trained on, blended. You do not have to take that on trust: ask two agents for the same page and compare what comes back. It tends to be a centered heading, three equal cards, a middle-of-the-road border radius, a gray that belongs to no palette, and padding that sits on no particular grid.

Naming a product you admire does not fix it, because the name resolves against the same average: the model has an impression of the product, not its type scale. Pasting a screenshot does not fix it either, because an image carries no hex value, no letter-spacing in em, no grid step and no button height. Mozaika supplies the measurement the instruction was missing, in a format the agent already reads.

The mechanism: a measured decode from the live DOM, per section

Mozaika opens the real product in a real browser and reads computed styles off the live DOM, then reduces them to a design system:

Type: family, weight, size, letter-spacing and line-height for each role the page actually uses.
Color: the color roles as hex, with where each role is used.
Spacing: the rhythm the page is built on and the padding its sections repeat.
Shape: border radii, borders and elevation as shipped.
Components: button and input specs, including sizes and states.
Per section: the same measurements again for every sliced section, because a hero and a pricing table on the same site do not share a spec, and an agent that averages them gets neither.

Because the source is the live DOM rather than an image, the output is directly usable: get_design_system hands your agent the same system as a DESIGN.md file, a Tailwind v4 theme, CSS variables, or W3C design tokens, and the agent puts whichever form it needs into your project.

What is in the library

588 products decoded from their live sites.
548 measured design systems.
1,768 full-page screens.
3,873 sliced sections, each with its own measured spec.

The tools your agent calls

There are 23 MCP tools. These are the ones a UI session uses most:

search_screens: Find screens across the whole library. Unlimited on every plan, including the free tier.
get_design_system: The full measured system for a product, returned as DESIGN.md, a Tailwind v4 theme, CSS variables, or W3C design tokens.
get_screen_sections: The sections a screen was sliced into, in page order.
get_section: One section with its own measured spec.
compare_sections: The same kind of section across several products at once, so the agent can see which values those products agree on and where they diverge.
get_component: A single component with its measured values.
get_recipe: A component with its anatomy, motion and states.
get_user_flow: An ordered flow, screen by screen, for scaffolding a multi-step surface such as checkout or onboarding.
validate_design: Check what the agent just wrote against a measured system.
get_score: A measured design audit of a page.
get_web_benchmark: The measured norms of the corpus, for deciding whether a value is ordinary or an outlier.

Which tool for which task

Find a reference: search_screens.
Get tokens into the project: get_design_system.
See how a page is built: get_screen_sections, then get_section.
See how several products solve the same section: compare_sections.
Build one element: get_component, or get_recipe when motion and states matter.
Scaffold a multi-step surface: get_user_flow.
Check what was written: validate_design, then get_score.
Decide whether a value is ordinary or an outlier: get_web_benchmark.

How it is used inside an agent session

Nothing changes about how you work. You keep talking to your agent, and the agent calls Mozaika when it needs a number:

You ask for a pricing page in the style of a product you name.
The agent calls search_screens to find that product's pricing screen, then get_screen_sections to see how the page is built.
It calls get_section on the pricing table, and compare_sections to see how other products solve the same section.
It calls get_design_system and takes the Tailwind v4 theme or the CSS variables into your project.
It writes the component against those values, then calls validate_design on what it wrote.

The result is a page built to a spec that exists in production somewhere, with values you can check line by line against the product it names.

Example prompts

Literal sentences to type at an agent that has Mozaika connected. Replace <product> with anything search_screens finds:

Search mozaika for <product> pricing screens, then show me the section specs before you write anything.

Get the mozaika design system for <product> as a Tailwind v4 theme and apply it to this project.

Compare the pricing sections of five products in mozaika and tell me which values they agree on.

Pull the mozaika user flow for checkout and scaffold those screens in order.

Rebuild this hero against the mozaika section spec for <product>, then run validate_design on it.

Score this page with mozaika and fix the three worst findings.

Ask mozaika for the web benchmark and tell me which of my values are outliers.

Install

Get a key first at mozaika.design/connect, then add the server. In Claude Code:

claude mcp add --transport http mozaika https://mozaika.design/mcp --header "Authorization: Bearer YOUR_KEY_FROM_mozaika.design/connect"

The endpoint is streamable HTTP at https://mozaika.design/mcp and the only header it needs is Authorization: Bearer YOUR_KEY_FROM_mozaika.design/connect, so any MCP client that can connect to a streamable HTTP server configures the same way. Mozaika is also listed on the official MCP registry as design.mozaika/mozaika.

Get a free Mozaika MCP key

What is free

A real MCP key, no card.
Unlimited search across the whole library.
25 metered tool calls a month.
Full decodes on a rotating monthly open shelf of 30 products.

Pricing, including a real free tier, is on the pricing page: see Mozaika pricing and plans. The free key is a working key rather than a trial timer, so the honest way to evaluate this is to connect it and have your agent build one real screen.

How to check that the values are real

Take the free key and connect the server.
Ask your agent for the design system of a product on the open shelf.
Open that product in your own browser, inspect a heading, and compare font family, weight, size and letter-spacing with what Mozaika returned.
Do the same for the accent color as hex and for the padding a section repeats.

If a value does not match, this page is wrong and it takes a minute to prove it. That is the point of returning measurements instead of adjectives.

Limits worth knowing before you connect

A decode records a product as it was when it was decoded. If that product ships a redesign afterwards, the stored values describe the older page until it is decoded again.
Decodes cover publicly reachable pages.
On the free tier, search is unlimited but tool calls are metered at 25 a month and full decodes are limited to the 30-product open shelf.
Mozaika measures, it does not settle taste for you. get_score reports measured findings about a page, not an opinion about whether a product is beautiful.

The same measured data outside the agent

shadcn registry: npx shadcn add https://mozaika.design/r/<name>
Chrome extension: Decode Lens, for decoding a site while you are looking at it.
Figma plugin: bring a measured design system into a file.
Raycast extension: reach the library from the launcher.

Frequently asked questions

What is Mozaika?

Mozaika is an MCP server that gives AI coding agents measured design references. It decodes real shipped products from their live DOM into design systems with exact font weights and sizes, letter-spacing, color roles as hex, spacing rhythm, radii, and button and input specs, per section, and serves them to an agent over MCP at https://mozaika.design/mcp.

Is there an MCP server that gives my coding agent design references?

Yes. Mozaika is one, and its references are measured rather than visual: your agent receives values it can write into code, not an image it has to interpret. It exposes 23 tools over streamable HTTP, and a free key with unlimited search is at mozaika.design/connect.

How is Mozaika different from a screenshot gallery?

A screenshot gallery is built for a human to look at. A screenshot does not tell an agent that a heading is a particular size at a particular weight and tracking, that the accent is a specific hex, or that section padding repeats on a given rhythm. Mozaika stores those values, per section, and returns them in forms an agent can apply directly: DESIGN.md, a Tailwind v4 theme, CSS variables, or W3C design tokens.

What does get_design_system return?

The measured design system of one decoded product, in the format you ask for: a DESIGN.md file, a Tailwind v4 theme, CSS variables, or W3C design tokens. It covers type roles with family, weight, size, letter-spacing and line-height, color roles as hex, spacing, radii, and button and input specs.

How do I stop my AI-generated UI from looking generic?

Give the agent a measurement instead of an adjective. An instruction like make it feel premium resolves against the model's average, and a decoded design system with real values does not. Connect Mozaika, name a product you want to build to, have the agent pull the section spec with get_section before it writes the component, then check the result with validate_design.

Does it work with agents other than Claude Code?

The endpoint is plain streamable HTTP with a bearer token, so any MCP client that can connect to a streamable HTTP server can use it. The claude mcp add line above is the Claude Code form of the same configuration.

How do I install the Mozaika MCP server in Claude Code?

Get a key at mozaika.design/connect, then run claude mcp add --transport http mozaika https://mozaika.design/mcp --header "Authorization: Bearer YOUR_KEY_FROM_mozaika.design/connect" and restart the session so the tools load.

Is Mozaika free?

There is a free tier with a real MCP key and no card: unlimited search across the whole library plus 25 metered tool calls a month, with full decodes limited to a rotating monthly open shelf of 30 products. Pricing, including a real free tier, is on the pricing page.

Start here

Take a key, add one line to your MCP config, and ask your agent to build one screen against a product you actually admire. Then compare it with what the same agent produced yesterday.

Connect your agent over MCP

Mozaika decodes real products into measured design systems for AI coding agents: 548 design systems, 1,768 full-page screens and 3,873 sliced sections from 588 products, served over MCP at https://mozaika.design/mcp. Free key at mozaika.design/connect, plans at mozaika.design/pricing.

More: every decoded design system, The Measured Web (how the web is actually designed, measured), The Drift Ledger (what changed last night).