Skip to main content
This is the flow used to rebuild a production marketing site into a fully editable Elementor V4 project, faithful to the pixel where it matters and deliberate where it deviates. It works because every step replaces judgment calls with measurements.
Rights first: only clone sites you own or have license to reproduce, and only fetch assets you are entitled to. The tooling fetches what you point it at, verbatim.
1

Capture reference renders

Take scroll-settled screenshots of the reference site at your target widths. If the reference is reachable, eu-studio measure shots --page <url> --widths 1512,390 does it (scroll-settled, animations finished); otherwise capture manually at exact widths. These PNGs are the contract for the whole run: every later measurement compares against them.
2

Extract the copy verbatim

Save the reference page’s HTML, then:
You get a deduped, attributed copy inventory. Reproduce copy verbatim; paraphrased copy changes line lengths, which changes wraps, which changes every geometry measurement downstream.
3

Stage real assets and fonts

Collect the images and licensed font files into assets/, write the media manifest, and run exjsx media. Confirm which families actually paint on the reference with eu-studio measure fonts; sites routinely declare families they never render.
4

Write the brief: tokens, type system, sections

Before any page code, pin down theme.mjs (colors, fonts), the type scale, and a section-by-section outline with the reference’s y-coordinates (from measure sections against the reference, or read off the captures). If an agent does the build, this becomes its build brief with an anchors.json of section targets.
5

Build and deploy

The normal loop: fs-project, tw-first styling, lint, build, deploy --fast. Write the whole page before the first deploy; per-section deploys waste rounds.
6

Gate structurally

The structural matrix must pass at all widths before any pixel work; there is no point pixel-matching a page that overflows at 390.
7

Converge with pixeldiff

Read the score against the bands (3 or less near-identical, 3 to 8 faithful, 8 to 20 visible, over 20 structural), fix the worst band first, and re-run. Mask mandated deviations with --exclude y0-y1:why; a deviation you chose (a real form where the reference shows a modal, a skipped marquee) otherwise poisons the mean and makes the target unreachable. Patch paddings and margins numerically from the deltas (eu-studio verify --anchors gives per-anchor numbers); do not eyeball.
8

Stop at the budget

Fix rounds are budgeted, typically two or three. After the budget, report residual deviations with their scores instead of chasing them. A faithful build with a named 5px residue ships; an unbounded convergence loop does not.

​
Why this order

Copy before layout, because copy determines wraps. Assets and fonts before styling, because a fallback font invalidates every measurement. Structure before pixels, because overflow fixes change geometry wholesale. Masks before score-chasing, because an unmasked mandated deviation makes the score mathematically unreachable. Each rule in this recipe was paid for by a run that did it in the other order.

Measure

All seven measurement modes and the pixeldiff score.

Recipe: agent briefs

Turning this flow into a one-shot agent brief.