Design Extraction API
Code API
GET /v1/code25 credits/callRebuild any section as clean code
The design to code API for live websites: point it at a page, get back a component you can paste - Tailwind, React, Vue or HTML, with the exact tokens it uses.
4
output frameworks
Real cascade
specificity + media + var()
Auto-detect
finds the hero for you
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>
)
}Agent-ready
Your agent can call this
“Rebuild the hero section of stripe.com as a React component in my project.”
Any other MCP client? Full guide
Use 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. Pass &framework=tailwind|html|jsx|vue. 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?
No. It reads the static HTML and CSS a page serves, which covers the vast majority of marketing and landing pages. A fully client-rendered app (where the HTML ships empty and React builds the DOM at runtime) will return little - the response tells you honestly rather than inventing code.
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.
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.