How Mateo reads a website

← All postsMateo Team · July 17, 2026 · 2 min read

Update, October 2026: Mateo now captures a full Rebuild Package for your coding agent. Some details below describe an earlier version. See Getting started.

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 and nav, with 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.