Perfect Web Clone

Pixel-perfect clones of any webpage. This repo is the measured core. The product is the skill: an agent harness that turns one clone into a full-page, scored replica.

English | 中文

A screenshot is not a clone. The skill drives the agent through capture → section plan → clean React → build → measured repair, and it will not stop after the first viewport or call a similar-looking inert widget “done.”

Say this to your coding agent:

clone https://example.com

The skill is the product

skill/SKILL.md is the harness. Same file is published as perfect-web-clone-skill.

One request authorizes the whole run
Hands and eyes are deterministic (pwc) — they never call a model
The agent authors code and repairs the worst measured section
Done means ready_for_user_review or failed_with_residuals, with evidence
Pixel-perfect is a gate table, not a prompt

Install

Python 3.10+ and Node 20+.

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

Load perfect-web-clone-skill into Claude Code, Codex, or any coding agent that can run pwc.

How a clone run works

Capture the live URL (integrity-checked, assets localized)
Plan the real page sections
Author clean React for every section
Assemble and build
Score fingerprints, weight, and visual match
Repair the worst section, rebuild, re-measure
Hand you a local preview: ready_for_user_review or failed_with_residuals

If the page is WebGL, runtime canvas, or scroll-choreographed, that ceiling is reported up front. Content still clones; the runtime-drawn look may not.

CLI

pwc extract https://example.com
pwc plan 

pwc assemble 

pwc build
pwc fingerprints dist/
pwc weight dist/
pwc score --ref reference.png --cand clone.png

Every command prints JSON. ok is the only pass/fail that matters.

Layout

core/          capture, section plan, gates
pwc/           CLI
skill/         the playbook
plugin/        optional coding-agent plugin
templates/     Vite + React + Tailwind shell

License

MIT

perfect-web-clone

설치

문서