Stop screenshotting your competitors. Read them.

Their pricing page converts. You want to know why. A screenshot tells you what it looks like; the extracted design tells you how it is actually built.

Get a free API key Try it live

This is for you if

You are doing competitive research, a redesign, or a positioning exercise, and "here is a screenshot" is not enough to act on.

Screenshots are where teardowns go to die

The usual competitive teardown is a Figma board of screenshots with arrows on them. It is fine for a conversation and useless for building. Nobody can tell from a screenshot what the type scale was, whether the spacing was consistent, or how the section was structured - so the insight never survives contact with implementation.

The interesting details are all computed

What actually makes a page work is in the values: the restraint of a three-color palette, a type scale that only uses four sizes, a spacing system with no exceptions in it. None of that is visible in an image, and all of it is legible the moment you have the real tokens. You can see the discipline - or the lack of it.

Extract the system, not the picture

Call /v1/extract on their page and get the whole design system: every color they actually render, the fonts and weights, the spacing scale, the gradients, the motion. Call /v1/code and get their hero or pricing table as a working component you can study, restyle, or throw away. The teardown becomes evidence instead of vibes.

How it works

1
Extract their system
/v1/extract10 credits
Colors, type, spacing, gradients, motion - everything the page renders.
2
Look at the discipline
How many colors? How many type sizes? Is the spacing scale consistent? This is where the insight is.
3
Pull the section that works
/v1/code25 credits
Their converting hero or pricing table, as a real component.
4
Restyle to your brand
You started from the real structure. Now make it yours - not a copy of theirs.

javascript

const them = await fetch(
  `https://miromiro.app/api/v1/extract?url=${COMPETITOR}&access_key=${KEY}`
).then(r => r.json())

console.log('colors:',  them.colors.length)      // 3  → disciplined
console.log('fonts:',   them.fontFamilies)       // ["Inter"] → one typeface
console.log('spacing:', them.spacing)            // 4/8/16/24/48 → clean scale

// The insight is not "it looks nice". It is "they use three colors and
// one typeface, and that is why it looks nice."

What you get: A teardown made of real values instead of screenshots - the kind you can actually act on.

Common questions

Is it okay to do this?

You are reading publicly-served CSS - the same thing devtools shows any visitor, which is how competitive research has always worked. Studying how a page is built is normal practice. Copying a competitor's brand wholesale is not, and no API changes that. Use judgment.

What is the most useful thing to look at?

Restraint, usually. Count the colors and the type sizes. Pages that convert well are almost always built from a small, consistent system - and that is invisible in a screenshot but obvious in a token list.

Can I compare several competitors at once?

Yes - it is one call per URL at 10 credits each, so a five-competitor sweep is 50 credits. The free tier is 100 credits a month, which covers it.

Use caseRebuild a section of a site you like, in your own stack Use caseCatch a production site drifting from its design system EndpointDesign Tokens API EndpointDesign to Code API

Try it in a minute

100 free credits, no credit card. Point it at a URL and see what comes back.

Get a free API key