ericshang98/Perfect-Web-Clone
Pixel-perfect clones of any webpage. Paste a URL, get a measured Vite + React replica.
项目介绍Project Overview
Perfect Web Clone 是 DSH 自动化插件,用一条 clone <url> 指令驱动智能体完成捕获、区域规划、生成 React、构建、评分与修复,产出可本地预览的全页克隆。适用于需要像素级复刻静态网页的场景,例如界面还原、视觉回归或竞品研究。注意:WebGL、运行时 Canvas、滚动动画页面运行时会预先声明上限,运行时绘制效果可能无法完美还原。核心命令 pwc 确定性强,不调用模型。许可证 MIT。
Perfect Web Clone is a DSH automation plugin that turns a single clone <url> command into a full-page replica. The agent drives capture, section planning, clean React authoring, build, scoring, and measured repair, ending at ready_for_user_review or failed_with_residuals. Use it when you need a pixel-accurate static web reproduction, interface restoration, visual regression, or competitive layout study. Caveat: WebGL, runtime canvas, and scroll-choreographed pages report their ceiling up front; runtime-drawn visuals may not match. Deterministic pwc commands never call a model. MIT licensed.
安装Install
dsh plugin --profile web add github:ericshang98/Perfect-Web-Clone
把 ericshang98/Perfect-Web-Clone 加入你的 DSH 配置(web profile)即可启用。
READMEREADME
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 <url> 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_revieworfailed_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_revieworfailed_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 <source_id>
pwc assemble <source_id>
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
ruvnet/ruflo
amruthpillai/reactive-resume
volcengine/OpenViking
Molunerfinn/PicGo
titanwings/colleague-skill
nocobase/nocobase
Tencent/WeKnora