Give OpenCode a real design system
OpenCode 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 OpenCode, 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. OpenCode then builds to that spec instead of its trained default.
What OpenCode gets back
Ask OpenCode to build something like Ramp and it can call get_design_system("ramp"). This is the start of what comes back, read from the live library when this page was served:
| Role | Value |
|---|---|
| background | #FFFFFF |
| text | #0C0A08 |
| button_bg | #E4F222 |
| button_text | #0C0A08 |
| Token | Value |
|---|---|
| Body font | Lausanne |
| Type scale | h1 64px, body 14px |
| Base radius | 4px |
| Primary button | bg #E4F222, text #0C0A08, radius 6px |
The full decode, with spacing, components and per-section specs: Ramp design system.
Set it up in OpenCode
- Get a free key. Sign in at mozaika.design/connect. No card. The key is ready immediately.
- Add Mozaika to OpenCode. Add one block to opencode.json in your project, or to ~/.config/opencode/opencode.json for every project. Pick the OpenCode tab on /connect: the block there already has your key in it, so copy it as it is.
- Check it connected, then ask. Run opencode mcp list. mozaika is listed. In OpenCode 2 the /mcps command shows the same. Then try: "make the expenses table look like Ramp".
Setup checked against OpenCode's own documentation on 2026-10-04. The config itself is on /connect, printed with your key in it.
Frequently asked questions
Why does OpenCode need its own config block?
OpenCode reads servers from a key named mcp, and a remote server needs type: remote. A block shaped like Cursor's parses fine and then sends nothing we can read, so every call is refused. The OpenCode tab on /connect has the right shape.
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.