Design Extraction API
Design Tokens API
GET /v1/extract10 credits/callTurn any website into design tokens
The design tokens API: colors, type scale, spacing, shadows and radii from any live URL, as JSON, CSS variables or a paste-ready Tailwind config.
JSON · CSS · Tailwind
three output formats
W3C-ready
DTCG-style token shape
~1s
typical response time
One call
The API is the demo
One authenticated GET against any live URL. Typed JSON back.
Terminal
GET /v1/extract$
⠿ fetching stripe.com…
{
"colors":[+5],
"fontFamilies": ["Sohne", "Sohne Mono"],
"fontSizes": ["13px", "15px", "21px", "56px"],
"spacing": ["4px", "8px", "16px", "24px", "32px", "48px"],
"radii": ["4px", "8px", "16px", "24px"]
}
200 OK · 1.0s · 10 credits
Colors
Primary
#635bffAccent
#00d4ffBackground
#ffffffText
#0a2540Typography
AaSohne
AaSohne Mono
Spacing & radii
4px8px16px24px32px48px·4px8px16px24pxReal 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
“Extract stripe.com’s design tokens and restyle this page to match them.”
Any other MCP client? Full guide
Use cases
What you can build
Programmatic theming
Generate an app theme from a reference URL for AI website builders.
Design-system audits
Diff a production site against your design system to catch drift.
Ground truth for agents
Feed Cursor or Claude Code the real tokens so generated UI actually matches.
FAQ
Before you integrate
What formats can I get?
JSON (default), CSS custom properties (&format=css), a Tailwind theme block (&format=tailwind), or a W3C Design Tokens file (&format=dtcg) for Style Dictionary and Figma variables pipelines.
How is this different from a scraper?
Scrapers return HTML or markdown. This returns typed, structured design tokens with usage counts - ready to use, not parse.
What does it cost?
Design-token extraction is 10 credits per call. Cached and failed calls are free, and every key includes 300 free credits a month - no card.
More about the Design Tokens API
Turn any URL into a full design-token system
The MiroMiro Design Tokens API extracts a website’s complete design system - colors, typography scale, spacing steps, shadows, and border radii - and returns them as typed, structured tokens with real usage counts. Ask for plain JSON, ready-to-import CSS custom properties, or a paste-ready Tailwind config, all from one GET request against any live URL.
Ground-truth tokens for AI coding agents
When Cursor, Claude Code, or v0 generate UI from a reference site, they guess at the values. Feed them the real tokens instead and the generated interface actually matches. The same endpoint powers design-system audits - diff a production site against your token set to catch drift - and programmatic theming for AI website builders.
Structured tokens, not raw HTML
A scraper hands you markup to parse. This hands you the design system already resolved: named values, counts, and format conversions done for you. That’s the difference between “extract design tokens from a website” and “scrape a page and hope.”
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.