Give Codex a real design system
Codex 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 Codex, 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. Codex then builds to that spec instead of its trained default.
What Codex gets back
Ask Codex to build something like Stripe and it can call get_design_system("stripe"). This is the start of what comes back, read from the live library when this page was served:
| Role | Value |
|---|---|
| background | #FFFFFF |
| text | #0A0A0B |
| button_bg | #533AFD |
| button_text | #FFFFFF |
| Token | Value |
|---|---|
| Body font | Söhne |
| Type scale | h1 48px, body 16px |
| Base radius | 0px |
| Primary button | bg #533AFD, text #FFFFFF, radius 4px |
The full decode, with spacing, components and per-section specs: Stripe design system.
Set it up in Codex
- Get a free key. Sign in at mozaika.design/connect. No card. The key is ready immediately.
- Add Mozaika to Codex. Add one table to ~/.codex/config.toml, then start a new Codex session. Pick the Codex tab on /connect: the block there already has your key in it, so copy it as it is.
- Check it connected, then ask. In the Codex TUI, run /mcp. mozaika is listed with its tools. From the shell, codex mcp list shows it too. Then try: "restyle the checkout to Stripe's spec".
Setup checked against Codex's own documentation on 2026-10-04. The config itself is on /connect, printed with your key in it.
Frequently asked questions
Why can the key go straight into config.toml?
Codex supports a map of static headers for a remote MCP server (http_headers), so the block on /connect carries your key directly. There is nothing to export and no environment variable to set.
Can I add it to one project only?
Codex also reads .codex/config.toml inside trusted projects. Keep your key in the home config instead, so it never ends up in a repo.
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.