Design Extraction API
Website to Code API
GET /v1/extract10 credits/callFrom live website to code-ready tokens
The website to code API: point it at any live URL and get code-ready design tokens back, as JSON, CSS variables or a paste-ready Tailwind config.
URL → code
one GET request
Tailwind + CSS
paste-ready output
DTCG
standard token shape
One call
The API is the demo
One authenticated GET against any live URL. Typed JSON back.
Terminal
GET /v1/extract$
⠿ fetching linear.app…
{
"colors":[+5],
"fontFamilies": ["Inter", "Berkeley Mono"],
"fontSizes": ["13px", "15px", "21px", "56px"],
"spacing": ["4px", "8px", "12px", "16px", "24px", "32px"],
"radii": ["6px", "8px", "12px", "16px"]
}
200 OK · 1.0s · 10 credits
Colors
Primary
#5e6ad2Accent
#7170ffBackground
#08090aText
#f7f8f8Typography
AaInter
AaBerkeley Mono
Spacing & radii
4px8px12px16px24px32px·6px8px12px16pxReal output
What it actually returns
A real response for stripe.com, captured from the live API - not a mock.
Colors (355 unique)
Every color on the page - width = how often it's used.
Type scale (53 sizes)
62pxDesign without guessing×1
24pxDesign without guessing×3
18pxDesign without guessing×6
14pxDesign without guessing×20
12pxDesign without guessing×45
10pxDesign without guessing×54
Border radius (37 values)
3px
4px
5px
16px
30px
50%
Shadows (37 unique)
Gradients (59 unique)
conic
linear
radial
355 colors53 font sizes37 radii37 shadows59 gradients17 easingsas JSON, :root CSS or tailwind.config
Agent-ready
Your agent can call this
“Turn linear.app’s design into code and rebuild this screen in that style.”
Any other MCP client? Full guide
Use cases
What you can build
Reference-to-build
Give an AI builder the real design of a reference site so the code it writes actually matches.
Kickstart a theme
Generate a Tailwind or CSS-variable theme from any URL instead of eyedropping by hand.
Design-to-code pipelines
Wire the endpoint into a build step that turns a design source into typed tokens automatically.
FAQ
Before you integrate
Is this Figma-to-code?
It’s website-to-code: it reads a live, rendered URL, not a Figma file. If your design is published to the web (a prototype, a deployed build, or a Community file), point the API at that URL and get code-ready tokens back.
What code formats do I get?
JSON (default), CSS custom properties (&format=css), a Tailwind config block (&format=tailwind), or a spec-compliant W3C Design Tokens file (&format=dtcg) that drops straight into Style Dictionary, Terrazzo, or a Figma variables importer.
How is this different from a scraper or Firecrawl?
A scraper returns HTML or markdown you still have to parse into a design system. This returns the design system already resolved - named values, usage counts, and format conversions done for you.
What does it cost?
Design-to-code extraction is 10 credits per call. Cached and failed calls are free, and every developer gets 300 free credits a month - no card required.
More about the Website to Code API
A website-to-code API for real websites
The MiroMiro Website to Code API turns any live URL into code-ready design tokens. It reads the rendered page - the actual colors, type scale, spacing steps, and radii a site ships - and returns them as JSON, CSS custom properties, or a paste-ready Tailwind config. One GET request converts “this website’s design” into something your codebase can use directly.
The missing piece for AI code generation
When Cursor, Claude Code, v0, or Lovable generate UI from a reference site, they guess the values from a screenshot. Hand them the resolved tokens instead and the generated code matches the source instead of drifting. That’s the whole point of a design-to-code step: real ground truth, not a visual approximation.
Website-to-code, not Figma-to-code
Figma-to-code tools need a Figma file and often an Enterprise plan. This works from any public URL - a deployed product, a landing page, a published prototype - so you can turn a live reference into code without access to the original design file.
Get your free API key
300 free credits every month, no credit card. One key unlocks every endpoint - brand, tokens, images, SVGs, fonts, and Lottie. Upgrade only when you outgrow the free tier.