How a capture works

What Mateo records from a live page, and what it can't see.

Every capture starts from a URL, on every plan. Mateo loads the live page in a real browser and records how it is built and how it behaves.

The stages

The progress view shows each stage as it runs:

  1. Opening the site
  2. Capturing screenshots
  3. Measuring the design
  4. Observing motion & interactions
  5. Assembling the evidence

Keep the tab open until the capture finishes.

What Mateo captures

  • Screenshots. Desktop at five scroll depths, plus mobile.
  • Layout. Where every section sits on the page, measured.
  • Typography. Families, weights, sizes, line heights and letter spacing.
  • Color and effects. Colors, gradients and effects as the page renders them.
  • Spacing, radii and shadows. The values the page actually uses.
  • CSS custom properties. The site's own design tokens, where it defines them.
  • Assets. The site's real downloadable files: images, logos, icons and inline SVGs. Anything Mateo can't download is listed by URL.
  • Motion. Animation frames and scroll effects.
  • Interactions. Hover and focus states that Mateo triggered on the page.
  • Responsive behavior. Desktop (1440 wide) and mobile.

Because the values come from the rendered page, they are measured, not guessed. A color is the color the site uses. A spacing value is the spacing the page renders.

What happens next

The capture is saved to Captures. Mateo then prepares the Rebuild Package automatically. When it's ready, export it from the Export menu.

Each capture also reports its coverage and known gaps, so you know how much evidence it holds before you build.

What it can't see

  • Pages behind logins or paywalls
  • Sites that block automated browsers (these may fail or produce Low coverage)
  • States that only appear after long interaction flows

Tips

  • Capture the page that best represents the site, usually the homepage or a core product page.
  • Private and internal addresses are rejected before any work starts.