How Mateo reads a website

When you hand Mateo a URL, what actually happens? A tour of the pipeline - partly because it's interesting, mostly because knowing how the evidence is gathered tells you how far to trust each number in the output.

A real browser, not a scraper

Mateo loads the page in a full headless browser and lets it settle. This matters: modern sites compute their final styling in JavaScript, so fetching HTML would miss most of the design. We read getComputedStyle - the values the browser actually painted - which is why a hex in the report is the hex on screen, not a guess from a stylesheet that later got overridden.

What gets measured

Across the settled page, the extractor collects:

• Colors with usage counts - frequency is how you tell a token from a stray value
• Typography - families, and every size/weight/line-height/tracking combination in use, so the hierarchy can be reconstructed as a table
• Design tokens - CSS custom properties, where the site defines them, with the team's own names
• Components - buttons, inputs, cards, nav: paddings, radii, borders, shadows, exact dimensions
• The above-the-fold composition - the layout stack, gradients, and decorative layers that give a page its signature moment

Motion: caught in the act

Static analysis can't see behavior, so the pipeline interacts. It hovers interactive elements and diffs the computed styles before and after - that's how a report can state "buttons lift 2px with a shadow gain over 200ms ease-out" as fact. It also scrolls, sampling for entrance animations and scroll-triggered changes. Transition durations and easing curves come from the CSS declarations themselves.

Then the writing

The evidence - thousands of measurements - goes to Claude with a strict brief: report extracted values exactly, mark anything inferred as (estimated), and never fill a gap with something plausible. The specification is generated in parallel sections and assembled into one document, with the Design Overview written as a genuine critique rather than a compliment.

The honesty flags

The part we care about most. Every run carries a data-quality flag: full when the extraction was rich; partial when a site exposed little CSS (the affected values are marked); screenshot-only when there was no URL at all and every value is a visual estimate. A specification you can't calibrate your trust in is worse than none - your AI tool will happily build on a fabricated number.

That's also the honest pitch for combining URL + screenshot on paid plans: the URL contributes facts, the screenshot contributes intent, and the model cross-references instead of guessing either.