1
Send one URL
One GET request with the page’s address. No browser to run, no scraper to write.
Design Extraction API
Website to Code API
GET /v1/extract10 credits/callFrom live website to code-ready tokens
The website to code API: send any website URL and get code-ready design tokens back, as JSON, CSS variables or a paste-ready Tailwind config.
- 300 free credits a month
- Failed and repeat calls are free
- Works from ChatGPT, Claude and Cursor
URL → code
one GET request
Tailwind + CSS
paste-ready output
DTCG
standard token shape
How it works
From a URL to data you can use
2
MiroMiro reads the live page
It reads the page’s HTML and CSS as a visitor’s browser would, and collects what the page really uses.
3
Get it back, ready to use
Typed JSON, for 10 credits. A repeat call within 24 hours is free.
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
Coverage
What it captures
Found on the page
- color tokens
- type scale
- spacing
- radii
- Tailwind config
- CSS variables
Formats you can ask for
- json
- css
- tailwind
Why this one
Firecrawl and scrapers hand you HTML to parse into a design system - this hands you the code-ready tokens directly.
Compare alternativesParameters
What you can pass
Only url is required. Everything else narrows or reshapes the result.
urlrequired
any public URL
The page to extract from. With or without protocol (https:// is assumed).
format
json (default) · css · tailwind · dtcg
Output shape. css returns CSS custom properties (Content-Type: text/css); tailwind returns a theme config block (text/plain); dtcg returns a standalone W3C Design Tokens file (application/json) that drops straight into Style Dictionary, Terrazzo, or a Figma variables importer.
fields
field names
Comma-separated list of token groups to return, JSON only (e.g. fields=colors,spacing).
render
true · false (default)
Load the page in a real browser and run its JavaScript before extracting.
fresh
true · false (default)
Skip the 24-hour cache and re-extract from the live page.
screenshot
true · full · false (default)
Requires render=true. The same real browser that renders the page also captures a screenshot - true for the 1440x900 viewport, full for the entire page height.
Every parameter, the response fields and the error codes are in the reference.
Agent-ready
Your agent can call this
“Turn linear.app’s design into code and rebuild this screen in that style.”
Step-by-step setup for your agent
ChatGPT
Claude
Claude Code
Codex
Cursor
Grok Bot
OpenAI dots
MuseUse 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.
Does it work on sites built with JavaScript?
Yes. The page’s HTML and CSS are read first, which is enough for most sites. When a page only builds itself with JavaScript, or refuses a plain request, it is re-read in a real browser automatically at no extra cost. Add render=true to force the browser, for example for images that load on scroll: that costs 5 extra credits, on every plan including the free key.
Can it read pages behind a login?
No. It reads public pages the way a visitor without an account would see them. Pages that need a sign-in, and addresses on your own machine such as localhost, are out of reach.
Can my AI agent call it without code?
Yes. The same call is the extract_design_tokens tool on the MiroMiro MCP server. Connect ChatGPT, Claude, Cursor, Codex or another agent once, with a sign-in and no API key, and ask in plain language.
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.