Perfect Web Clone skill
A skill and the pwc CLI: one clone command with a URL makes the agent rebuild a page as a Vite and React project and measure it
- 280 ★ on the repository
- Last commit
- MIT
Broad access
Why this level
- Can recreate someone else's page in full: text, images and design are protected by copyright, and a copy of a phishing page can harm third parties
- Launches Chromium, contacts arbitrary sites and downloads their assets to disk
- The agent runs the build and a local preview, that is, it executes Node project code
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/perfect-web-cloneDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewBroad accessThe tool can change data, run commands or handle secrets.
- Can recreate someone else's page in full: text, images and design are protected by copyright, and a copy of a phishing page can harm third parties
- Launches Chromium, contacts arbitrary sites and downloads their assets to disk
- The agent runs the build and a local preview, that is, it executes Node project code
This is third-party code. Review the repository files before installing.
What it does
Perfect Web Clone walks the agent through a full page-copying cycle: a snapshot of the live URL with localized assets, a plan of the real sections, clean React for every section, a build, match scoring and repair of the worst section. The request is a single sentence like `clone https://example.com` and that is enough for the whole run. Work is split between the agent and the `pwc` command. The agent understands the material and writes code. `pwc` performs deterministic steps and never calls a model: `pwc extract` captures the page, `pwc plan` builds the plan, `pwc assemble` assembles the project, `pwc build` builds the site, `pwc fingerprints` and `pwc weight` check fingerprints and weight, `pwc score` compares a reference and a candidate screenshot. Every command prints JSON and only the `ok` field matters. A run ends with the status `ready_for_user_review` or `failed_with_residuals`, with evidence. A look-alike result does not count as done here: the skill does not stop after the first viewport and does not count a similar but inert widget. If the page is built on WebGL, runtime canvas or scroll choreography, the skill says up front that the look may not repeat, while the content is still cloned. The project template uses Vite, React and Tailwind.
Who it is for. Frontend developers and designers who need an exact starting point from an existing page: their own old site, a layout to reproduce in code or a page to study.
Good fit when
- An old site without sources has to move to Vite and React while keeping its look
- You need a starting point from a landing page you have the right to recreate and keep editing in code
- A screenshot is not enough and you want clean component code with localized assets
- You want the match measured through weight, fingerprints and a visual score instead of by eye
- You want to take a page apart section by section and see how it is built
Not a fit when
- You want to copy someone else's commercial site or brand without permission: that infringes copyright and trademarks
- The page relies on WebGL, runtime canvas or scroll choreography: the clone reproduces the content but not the look
- You need a site with server logic, forms and accounts: it clones a page, not a backend
- You have no Python 3.10, Node 20 and Chromium for Playwright
Example request
clone https://example.com and after the build show which section matched worst and what you fixed in itLimitations
- Python 3.10 or newer, Node 20 or newer and Chromium for Playwright (`playwright install chromium`) are required.
- Pages with WebGL, runtime canvas or scroll animation are reproduced without that look, and the skill says so up front.
- A run can end as `failed_with_residuals`: reports of remaining mismatches stay, and you finish them by hand.
- Copied text, images and styles belong to the owner of the source page, and you have to check on your own whether you may reuse them in another project.
How to disable. Remove the skill from the agent's skills directory and the plugin if you connected it. Uninstall the package with `pip uninstall` and the package name from pyproject, and delete the created projects and the folder with localized assets as ordinary folders.
FAQ
How do I install Perfect Web Clone?
Run `pip install "git+https://github.com/ericshang98/Perfect-Web-Clone.git"` and `playwright install chromium`, then load the skill from the perfect-web-clone-skill repository into Claude Code, Codex or another agent that can run `pwc`.
What do I tell the agent to start cloning?
One sentence with a URL, for example `clone https://example.com`. A single request covers the whole run: capture, plan, code, build and repairs.
How is this different from saving a page as HTML?
The output is a clean Vite, React and Tailwind project with per-section components and localized assets. The result is also measured through fingerprints, weight and visual match.
What does failed_with_residuals mean?
The run reached the end but measured mismatches stayed above the threshold. The status comes with evidence so you can see which sections need manual work.
Can I clone any site?
Technically yes, but text, images and design are protected by their owners' rights. Recreate your own pages or ones you have permission for.
Discussion
No questions or reviews yet.
Related
SkillsA skill methodology for reproducing websites, from a static page to heavy WebGL, built on real source code rather than agent-hallucinated code
The clone-website skill rebuilds a site from a URL as a clean Next.js app: screenshots, style extraction, parallel section builds and a visual diff
A skill that dissects and ports WebGL, WebGPU and Canvas effects from a page into a standalone local JS project
A skill for building premium scroll-driven websites on a real design standard: typography, rhythm, depth, motion and in-browser verification
A skill that designs UI and landing page mockups and rebuilds screenshots as HTML, a React project or a WeChat mini program
The /taste skill turns a URL into design tokens and trade-off principles, with ready rules for Cursor and Claude Code
README in short
The README declares the skill the main product and the repository the measured core. It then covers installation, the seven steps of a run, the list of `pwc` commands, the repository layout and the MIT license. It states separately that sites with WebGL, canvas and scroll animation have an accuracy ceiling.
README badge
Original SKILL.md
--- name: perfect-web-clone description: >- Reproduce a live website from its URL as a clean, deployable Vite + React project by running the complete agent-driven Perfect Web Clone harness: capture source evidence, plan the full page, author every section, implement common interactions, build, compare, repair, and hand the measured result to the user for review. Use whenever the user asks an agent to clone, copy, reproduce, replicate, rebuild, or 复刻 a website or web page, including a minimal request containing only an action and URL. The user gives one natural language instruction; the current agent runs the internal multi-step loop through the deterministic pwc hands and eyes. --- # 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