1
Send one URL
One GET request with the page’s address. No browser to run, no scraper to write.
Design Extraction API
Design Tokens API
GET /v1/extract10 credits/callTurn any website into design tokens
The design tokens API: extract the colors, type scale, spacing, shadows and radii from any website, 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
JSON · CSS · Tailwind
three output formats
W3C-ready
DTCG-style token shape
~1s
typical response time
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 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
Coverage
What it captures
Found on the page
- color palette
- type scale
- spacing
- shadows
- radii
- usage counts
Formats you can ask for
- json
- css
- tailwind
Why this one
Firecrawl and scrapers return HTML or markdown to parse - this returns resolved, typed tokens in JSON, CSS, or Tailwind.
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
“Extract stripe.com’s design tokens and restyle this page to match them.”
Step-by-step setup for your agent
ChatGPT
Claude
Claude Code
Codex
Cursor
Grok Bot
OpenAI dots
MuseUse 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.
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 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.