MiroMiroMiroMiroAPI
Key
Use case

Your agent is guessing. Give it the real thing.

Hand a coding agent a screenshot and it will invent the spacing, approximate the colors, and produce UI that "looks nothing like" the reference. Hand it resolved tokens and real component code and it stops guessing.

Get a free API key Try it live
This is for you if

You are building with Cursor, Claude Code, or your own agent, and the UI it writes never quite matches the design you pointed it at.

Why AI-generated UI looks almost right and never is

An LLM given a screenshot is doing visual estimation. It sees a heading and guesses 48px when it was 56px. It sees a blue and picks #3b82f6 when the brand color was #635bff. It has no way to know the page ran on a 4px spacing grid. Each error is small; together they produce the uncanny near-miss everyone recognizes - the layout that is clearly *trying* to be the reference and clearly is not it.

The fix is not a better prompt

Teams burn a lot of hours trying to prompt their way out of this - "match the spacing exactly", "use the precise brand colors". It does not work, because the information was never in the input. You cannot prompt a model into knowing a hex code it was never shown. The fix is to put the real values in the context.

What ground truth actually looks like

One call to /v1/extract returns the resolved design tokens for a URL - colors, font families and weights, the spacing scale, gradients, easings. One call to /v1/code returns a named section as a self-contained Tailwind, React or Vue component. Both come from resolving the real CSS cascade, so they are what the browser renders, not what a model estimated. Via MCP, the agent calls these itself, mid-task.

How it works

  1. 1

    Agent hits the reference URL

    /v1/extract10 credits

    Your agent calls extract_tokens with the URL it was told to match.

  2. 2

    Real values land in context

    Colors, fonts, spacing, gradients and motion come back as typed JSON - no parsing, no guessing.

  3. 3

    Agent writes matching UI

    It now has the hex codes and the spacing scale. The code it writes matches because it is not estimating.

  4. 4

    Need the whole section?

    /v1/code25 credits

    extract_code returns the section as a working component in your framework.

bash
# In Cursor or Claude Code, with the MiroMiro MCP server connected:

"Match the hero on stripe.com - pull the real tokens first."

# The agent calls extract_tokens({ url: "stripe.com" }) itself and gets:
#   colors:       ["#0a2540", "#635bff", "#ffffff"]
#   fontFamilies: ["Sohne", "system-ui"]
#   spacing:      ["4px", "8px", "16px", "24px", "48px"]
#
# Now it writes UI with the actual values instead of inventing them.

What you get: The agent stops hallucinating design. What it writes matches the reference because it was given the reference, not a picture of it.

Common questions

Why not just paste a screenshot into the agent?

Because a screenshot contains pixels, not values. The model has to estimate every number back out of the image - and it estimates badly. It cannot recover a hex code, a font weight, or a spacing scale from a JPEG with any reliability. Design extraction gives it the actual computed values.

Does this work with Cursor and Claude Code?

Yes. MiroMiro exposes an MCP server, so both call the extraction tools natively. You say "match stripe.com's brand" and the agent fetches the real palette itself, mid-task, without you copying anything.

What does it cost per agent run?

A token extraction is 10 credits; a section compiled to component code is 25. The free tier is 100 credits a month with no card, which is enough to wire it up and see whether it changes your output.

Use caseRebuild a section of a site you like, in your own stackUse caseGenerate a themed workspace from a customer's own websiteEndpointDesign Tokens APIEndpointDesign to Code API

Try it in a minute

100 free credits, no credit card. Point it at a URL and see what comes back.

Get a free API key