Measure

Clone runs and design reviews live on measurements: screenshots, section rhythm, element geometry, text ink, font paint, reference diffs, copy extraction. eu-studio measure covers all of it; never hand-write Playwright or PIL scripts for these.

The seven modes

usage: eu-studio measure <mode> : clone-run measurement toolkit (never hand-write playwright/PIL for these)
  shots    --page </> --widths 1512,390 [--out <dir>] [--full] [--crop x,y,w,h]  scroll-settled screenshots (fullPage default; --crop = doc-space region)
  sections --page </> [--width 1512]                                            section rhythm scan: {sel, top, height} sorted by top
  geom     --page </> --selector '<css>' [--width 1512] [--all]                  rect + display/position/font for first (--all: ≤40) match(es)
  ink      --page </> --selector '<css>' [--width 1512]                          text ink extents vs element box (nowrap escapes, tracking drift)
  fonts    --page </> [--width 1512]                                             which families ACTUALLY painted (width-vs-fallback probe)
  compare  --ours <png|/page|url> --ref <png> [--out <dir>] [--bands 900]        side-by-side band sheets + per-band mean |Δ| table
  copytext --html <file> [--min-len 3]                                           deduped, attributed copy inventory from saved HTML

What each answers:

Mode	The question it answers
`shots`	What does the page actually look like at these widths? (Scroll-settled, animation-finished captures)
`sections`	What is the page’s vertical rhythm? Where does each section start and how tall is it?
`geom`	Where exactly is this element, and with what display, position, and font?
`ink`	Does the rendered text ink escape its element box? (Nowrap escapes, tracking drift)
`fonts`	Which font families actually painted, versus silently falling back? (Width-vs-fallback probe)
`compare`	Side by side, band by band, how far is our render from the reference?
`copytext`	What copy does the reference page contain, deduped and attributed, ready to reproduce verbatim?

Real sections output against a production build:

eu-studio measure sections --page /

✓ 10 sections under div.elementor-element (page 8131px)
{"url":"http://127.0.0.1:8927/","width":1512,"root":"div.elementor-element","pageHeight":8131,
 "sections":[{"sel":"section.elementor-element","top":0,"height":900},
             {"sel":"section.elementor-element","top":900,"height":880},
             {"sel":"section.elementor-element","top":1780,"height":638}, ...]}

Review shots at wide widths, not just 1200: measure shots --page / --widths 1920,390. Wide screens expose nav and section alignment bugs that 1200 hides, and real users browse at 1512 to 2560.

pixeldiff: the photometric fidelity score

Anchors measure geometry; pixeldiff measures appearance: gradients, art, type ink.

usage: eu-studio pixeldiff --page-url </ or url> --reference <design.png> [--keep-shots <dir>] [--exclude y0-y1:why[,y0-y1:why...]]

Method: the page is captured as viewport slices at the reference’s width (full-page captures of tall pages deterministically drop bottom-of-page image paint, so it never diffs against one), scroll-settled and animation-finished, then each slice is compared against the corresponding crop of the reference. Comparison runs through python3 with PIL and numpy. The score is per-slice mean absolute luminance delta (0 to 255) plus the worst 50px-band mean, aggregated page-wide. Empirical interpretation bands:

Score	Reading
3 or less	Near-identical
3 to 8	Faithful; the residue is font rendering and anti-aliasing noise
8 to 20	Visible deviations
over 20	Structurally different

Exclusion masks

--exclude y0-y1:why drops reference-coordinate row bands from the mean and the worst-band scan, reporting them separately, so the score reflects what the build was actually asked to match. The why label is mandatory context for whoever reads the score. This exists because of a real incident: an agent spent eight minutes chasing a score of 8 that was mathematically unreachable; the worst band (61.6) was a deviation the brief itself mandated, and the gate had no way to know. Mask the mandated deviations, then chase the score.

bench: scoring whole scenario runs

For repeatable evaluation of agent builds, eu-studio bench scores a scenario directory (reference render, anchors with presence floors and paint bands, a brief template) by running geometric verify plus photometric pixeldiff, and appends one record per run to runs.jsonl. bench compare tabulates runs. See eu-studio bench for the scenario layout.

Recipe: clone a site

The measurement modes assembled into the faithful-rebuild flow.

Verify

The structural and interaction gates.

Get started

Examples

Author

Ship

Environment

Recipes

Reference

The seven modes

pixeldiff: the photometric fidelity score

Exclusion masks

bench: scoring whole scenario runs

Next

Recipe: clone a site

Verify

​The seven modes

​pixeldiff: the photometric fidelity score

​Exclusion masks

​bench: scoring whole scenario runs

​Next

Recipe: clone a site

Verify

The seven modes

pixeldiff: the photometric fidelity score

Exclusion masks

bench: scoring whole scenario runs

Next