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.
- Real hex codes, fonts and spacing in the agent’s context
- Whole sections as working components
- Called by Cursor, Claude Code or ChatGPT through MCP
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.
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.
4 steps, start to finish
- 1
Agent hits the reference URL
Your agent calls extract_tokens with the URL it was told to match.
/v1/extract10 credits - 2
Real values land in context
Colors, fonts, spacing, gradients and motion come back as typed JSON - no parsing, no guessing.
- 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
Need the whole section?
extract_code returns the section as a working component in your framework.
/v1/code25 credits
# 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.Why it works this way
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.
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 300 credits a month with no card, which is enough to wire it up and see whether it changes your output.
Try it in a minute
300 free credits, no credit card. Point it at a URL and see what comes back.
Get a free API key