Perfect Web Clone

Perfect Web Clone

Pixel-perfect cloning is this skill. The current agent is the harness runtime. pwc is the deterministic hands and eyes: it captures, persists, builds, renders, replays, and measures. It never calls another model. You understand the evidence, author code, and choose targeted repairs.

A single natural-language request such as “复刻 https://example.com” authorizes the entire local reproduction workflow. Treat it as one user operation even though the harness performs many internal tool calls and repair iterations.

Do not ask for routine confirmation when the request contains a usable URL. Infer that a full-page clone is the default. Continue across phases without returning control merely to announce progress or request ordinary implementation choices. Ask only when a missing fact would materially change scope, when credentials or new authority are required, or when the user must resolve an external blocker.

Deployment is never implicit. Produce a local build and review URL by default; deploy only when the user explicitly asks.

Use one owning agent for the whole page so global visual context survives across sections. Do not delegate unless the user explicitly asks.

Non-negotiable execution contract

1. Run capture, planning, authoring, build, verification, repair, and handoff as one continuous task.
2. Inspect every ok or success flag and its error evidence. Never invent a tool result.
3. Preserve immutable raw evidence separately from normalized evidence. Refuse to plan from an incomplete capture.
4. Reproduce every planned top-level section and every independently required critical region. Do not stop after the viewport or after a visually dominant subset.
5. Implement and replay every required common interaction: carousel, menu, tabs, accordion/details, and other contracts discovered during capture. A visually similar but inert control fails.
6. Run gates in dependency order. A downstream score cannot override an upstream structural or behavioral failure.
7. Repair the smallest owning component identified by evidence, rebuild, and re-run all affected gates.
8. Never hide, waive silently, or average away a red gate. A missing critical region cannot be offset by aggregate visual similarity.
9. End only in ready_for_user_review or failed_with_residuals. Only the user can accept the result.

Read references/harness-contract.md before starting a new run or resuming one. It defines the progress ledger, terminal states, evidence vocabulary, and exact stop rules.

Install the measured core if pwc is missing:

pip install "git+https://github.com/ericshang98/Perfect-Web-Clone.git"
playwright install chromium

Every pwc command prints JSON. ok: false is a stop-and-fix signal.

Continuous workflow

1. Resolve and resume

• Extract the target URL from the request. If none is present and it cannot be recovered from the current browser/task context, ask for it.
• Check the active sandbox for .pwc/run.json. Resume rather than restart when its URL matches and its status is non-terminal. Start a fresh run when the URL differs.
• Record the current phase and evidence after every successful phase and after every failure. The ledger is an audit trail, not a substitute for tool output.

2. Capture trustworthy source evidence

pwc extract <url>

• Require ok: true and summary.capture_integrity.status == "passed".
• Record source_id; use the same value for all later commands.
• Surface capture_residuals and the site_classification ceiling. If the page relies on WebGL, runtime canvas drawing, or scroll choreography that cannot be captured faithfully, continue only within the measured ceiling and keep it as a residual.
• Stop with failed_with_residuals if source integrity remains red after the extractor's retry budget. Never generate from guessed or partial content.
• Immediately inspect the capture inventory (screenshots, breakpoints, discovered interactions) in the source directory so breakpoint, state, and interaction expectations exist before code generation. Record them in .pwc/run.json.

3. Plan the complete page

pwc plan <source_id>

• Use the ordered real #main children as section and repair units.
• Treat every required_structure entry as a hard anchor, even when nested inside a large parent section.
• Review page geometry and source screenshots before authoring. Confirm that the plan spans the captured document height and contains the prominent regions visible in the raw evidence.
• Record all planned section ids in .pwc/run.json.

4. Create the shell and author every section

pwc assemble <source_id>

Missing section files are expected on this first call. Assembly initializes .pwc/run.json; read, update, and rewrite that ledger as the agent advances.

For each planned section, in order:

1. pwc section <source_id> <section_name>
2. Author clean semantic JSX and scoped local styles from the section evidence.
3. Write only its namespaced component files under src/components/sections/<namespace>/.
4. Mark the section complete in .pwc/run.json.

Maintain whole-page layout tokens across sections. Reuse localized assets from the capture. Never ship source-framework markup, source-specific class fingerprints, hotlinked media, or an image snapshot in place of real content. Use real text, images, links, video, and controls.

Apply these authoring requirements:

• Preserve sticky behavior and avoid clipping sticky ancestors.
• Reconstruct footer columns from source layout geometry.
• Render review widgets from captured review data.
• Emit functional localized video elements.
• Reveal recoverable lazy content instead of preserving an accidental empty capture state.
• Attach data-pwc-critical="<anchor>" to each required structural region.
• Keep the assembly-owned data-pwc-section wrapper for every section.

For each interaction contract:

• Implement its state transition and visible controlled surface.
• Attach data-pwc-interaction="<contract id>" to the control.
• Attach data-pwc-controlled="<contract id>" to the controlled surface where applicable.
• Support repeated activation where the source does, such as next/previous carousel steps and open/close menu or accordion behavior.

An unresolved asset, region, or behavior becomes an explicit residual.