1
Send one URL
One GET request with the page’s address and, if you want, the section by name. No browser to run, no scraper to write.
Design Extraction API
Code API
GET /v1/code25 credits/callRebuild any section as clean code
The design to code API for live websites: send a URL, get back a component you can paste - Tailwind, React, Vue or HTML, with the exact tokens it uses.
- 300 free credits a month
- Failed and repeat calls are free
- Works from ChatGPT, Claude and Cursor
6
output formats
Real cascade
specificity + media + var()
Auto-detect
finds the hero for you
How it works
From a URL to code you can paste
2
MiroMiro reads the live page
It loads every stylesheet and works out which rule wins for each element, the way a browser does.
3
Get it back, ready to use
Typed JSON, for 25 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/code$
⠿ fetching stripe.com…
{
"selector": "section.hero",
"framework": "jsx",
"code": "export function Hero() {…}",
"tokens": {
"colors":"font":"Sohne"
} }
200 OK · 2.1s · 25 credits
Tokens it uses
#0a2540#635bffAaSohneHero.jsxframework=jsx
export function Hero() {
return (
<section className="relative w-full bg-white">
<h1 className="text-[#0a2540] text-5xl font-semibold">
Financial infrastructure
</h1>
<button className="bg-[#635bff] text-white rounded-full px-5 py-2.5">
Start now
</button>
</section>
)
}Coverage
What it captures
Found on the page
- Tailwind classes
- React (JSX)
- Vue SFC
- HTML + CSS
- section tokens
- hover states
- responsive variants
Formats you can ask for
- framework=tailwind
- framework=html
- framework=jsx
- framework=vue
- framework=elementor
- framework=shopify
Why this one
Figma’s MCP can only read a Figma file, and scrapers return markup tied to a stylesheet you don’t have. This is the only API that reads a live URL and returns code that stands on its own.
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).
framework
tailwind (default) · html · jsx · vue · elementor · shopify
The code you get back. tailwind returns markup with utility classes; html returns markup plus a companion stylesheet; jsx returns a React component; vue returns a single-file component.
section
hero · header · footer · pricing · features · testimonials · faq · cta
A part of the page by name, for callers that cannot see its markup (AI agents, mostly).
selector
any CSS selector
The section to extract, e.g. selector=%23hero or selector=.pricing-card - best taken from a previous response's sections list.
name
a component name
Component name for the jsx target - the identifier in "export default function ...".
theme
light (default) · dark
Which colour scheme to extract.
fields
field names
Comma-separated list of fields to return (e.g. fields=code,tokens).
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
“Rebuild the hero section of stripe.com as a React component in my project.”
Step-by-step setup for your agent
ChatGPT
Claude
Claude Code
Codex
Cursor
Grok Bot
OpenAI dots
MuseUse cases
What you can build
Rebuild a section, fast
Port a hero, pricing table, or feature grid you like into your own stack without opening devtools.
Ground truth for AI agents
Give Cursor or Claude Code the real component instead of a screenshot to guess at - no hallucinated spacing or colors.
Competitive teardowns
Pull a competitor’s pricing section as Tailwind, then restyle it to your brand in minutes.
FAQ
Before you integrate
How is this different from a scraper?
A scraper hands you the page’s raw HTML, still wired to a stylesheet you don’t have - the class names are meaningless outside the original site. This API resolves the page’s real CSS cascade (every stylesheet, specificity, media queries and var() references), then rewrites the section as a self-contained component with real Tailwind utilities. It is code you can paste, not markup you have to reverse-engineer.
Which frameworks can it output?
Tailwind (default), plain HTML + a companion CSS file, React (JSX), and Vue, plus an importable Elementor template and a Shopify theme section. Pass &framework=tailwind|html|jsx|vue|elementor|shopify. For JSX and Vue you can also pass &name= to set the component name.
What if I don’t know the selector?
Omit it. The API scores the page’s sections and auto-detects the hero - the one with a headline, real copy, and a call to action - then tells you which selector it used, so you can reuse or adjust it.
Does it run JavaScript?
By default it reads the static HTML and CSS a page serves, which covers most marketing and landing pages. For a client-rendered app, where the HTML ships empty and the DOM is built at runtime, add render=true: the page loads in a real browser with its scripts run first (+5 credits). When a static result looks thin, the response carries a hint saying so.
Is it a pixel-perfect clone?
Deliberately not. It returns a clean, section-level component - the structure, the real classes, and the tokens - as a starting point you own and can restyle. Full-page pixel cloning produces code nobody can maintain; this produces code you would have written.
What does it cost?
A code extraction is 25 credits - the most expensive call we make, because it resolves the page’s entire cascade before generating the component. Failed and blocked requests are never billed, a repeat call within 24 hours is served from cache for free, and every key includes 300 free credits a month - no card.
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_code 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 Design to Code API
Turn a live website section into real code
The MiroMiro Design to Code API takes a URL and a CSS selector and returns a clean, self-contained component. It fetches the page, resolves every stylesheet it loads, and runs a real CSS cascade - matching each rule against each element, ordering by specificity and media query, and resolving var() references - so the code it emits reflects what the section actually looks like, not what its class names hint at. Omit the selector and it finds the page’s hero for you.
The lane between Figma and a scraper
Figma’s design-to-code tools can only read a Figma file. Web scrapers return HTML soup that is useless without the original stylesheet. Neither can answer “this section exists on a live site - give me its code.” That is the gap this API fills, and it is why it is built for AI coding agents: point Cursor, Claude Code, or Windsurf at a URL through the MCP server, and they build from ground truth instead of guessing at colors, spacing, and structure.
Section-scoped on purpose
This returns a component, not a page clone. That is a deliberate constraint: pixel-perfect full-site conversion reliably produces code nobody can maintain, while a clean, section-level scaffold - the structure, the real utilities, and the tokens it uses - is what developers and agents actually ask for. You get a starting point you own, in your stack, that you can restyle immediately.
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.