Give Windsurf a real design system
Windsurf 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.
Windsurf became Devin Desktop in June 2026. This is the setup for the current app.
Mozaika is a remote MCP server. Connected to Devin 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. Devin Desktop then builds to that spec instead of its trained default.
What Devin Desktop gets back
Ask Devin Desktop to build something like Figma and it can call get_design_system("figma"). This is the start of what comes back, read from the live library when this page was served:
| Role | Value |
|---|---|
| background | #FFFFFF |
| text | #000000 |
| button_bg | #000000 |
| button_text | #FFFFFF |
| Token | Value |
|---|---|
| Body font | figmaSans |
| Type scale | h1 64px, body 20px |
| Base radius | 0px |
| Primary button | bg #000000, text #FFFFFF, radius 8px |
The full decode, with spacing, components and per-section specs: Figma design system.
Set it up in Devin Desktop
- Get a free key. Sign in at mozaika.design/connect. No card. The key is ready immediately.
- Add Mozaika to Devin Desktop. Add one block to ~/.config/devin/mcp_config.json (on Windows, %APPDATA%\devin\mcp_config.json). That file applies to every project. Pick the Devin Desktop tab on /connect: the block there already has your key in it, so copy it as it is.
- Check it connected, then ask. From the shell, devin mcp list shows mozaika. In the app, a new agent tab lists it among the MCP servers it loaded. Then try: "give the landing page Figma's buttons and type".
Setup checked against Devin Desktop's own documentation on 2026-10-04. The config itself is on /connect, printed with your key in it.
Frequently asked questions
My old Windsurf config used serverUrl. Does it still work?
Use url. Devin Desktop's default agent, Devin Local, requires url for a remote server, and the older Cascade agent accepts it too. The block on /connect uses url.
Can I keep the key out of my repo?
Yes. Put the block in the user file above, or in .devin/mcp_config.local.json inside a project. Devin keeps that local file out of git.
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.