> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpos.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Recipe: clone a site

> The faithful-rebuild flow: capture the reference, extract copy and assets, build from tokens, and converge with measured rounds.

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.

<Note>
  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.
</Note>

<Steps>
  <Step title="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.
  </Step>

  <Step title="Extract the copy verbatim">
    Save the reference page's HTML, then:

    ```bash theme={null}
    eu-studio measure copytext --html reference.html
    ```

    You get a deduped, attributed copy inventory. Reproduce copy verbatim;
    paraphrased copy changes line lengths, which changes wraps, which changes
    every geometry measurement downstream.
  </Step>

  <Step title="Stage real assets and fonts">
    Collect the images and licensed font files into `assets/`, write the
    [media manifest](/ultra/media-and-fonts), and run `exjsx media`. Confirm
    which families actually paint on the reference with
    `eu-studio measure fonts`; sites routinely declare families they never
    render.
  </Step>

  <Step title="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](/ultra/recipe-agent-briefs)
    with an `anchors.json` of section targets.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Gate structurally">
    ```bash theme={null}
    eu-studio check --pages /
    ```

    The [structural matrix](/ultra/verify) must pass at all widths before any
    pixel work; there is no point pixel-matching a page that overflows at 390.
  </Step>

  <Step title="Converge with pixeldiff">
    ```bash theme={null}
    eu-studio pixeldiff --page-url / --reference ref-1512.png \
      --exclude 4210-4460:live-form-replaces-static-screenshot
    ```

    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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## 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.

## Related

<CardGroup cols={2}>
  <Card title="Measure" icon="ruler" href="/ultra/measure">
    All seven measurement modes and the pixeldiff score.
  </Card>

  <Card title="Recipe: agent briefs" icon="file-lines" href="/ultra/recipe-agent-briefs">
    Turning this flow into a one-shot agent brief.
  </Card>
</CardGroup>