ericshang98/Perfect-Web-Clone

插件Plugin ⭐ 254 MIT automation

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_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

  1. Capture the live URL (integrity-checked, assets localized)
  2. Plan the real page sections
  3. Author clean React for every section
  4. Assemble and build
  5. Score fingerprints, weight, and visual match
  6. Repair the worst section, rebuild, re-measure
  7. 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 <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

上一个 Prev oh-dsh 下一个 Next pilot-harness