Preface¶
When prototyping for front-end development, migrating landing pages, or analyzing competitor interfaces, the common approach is often to compare screenshots side-by-side or to have an agent “draw one based on this.” However, screenshots don’t replicate functionality: the first screen may look similar, but the carousel might be unclickable, and the bottom half might be unfinished—yet the agent may have already declared the task complete. DeepSeek Harness (dsh) makes tools, skills, and sessions pluggable and extensible. The community directory SkillHub Plugin Repository categorizes and hosts a large number of DSH plugins. It’s important to note: this site is an independent community directory for Chinese users and has no official affiliation with DeepSeek / High-Flyer; it is not an official app store.
Under the “Online Tools” category in the directory, ericshang98/perfect-web-clone (GitHub repository name Perfect-Web-Clone) takes a different approach: paste a URL, and it runs a complete pipeline of scraping → section segmentation → generating clean React → building → scoring → targeted fixing, ultimately delivering a locally previewable Vite + React project with evidence. At the time of writing, the GitHub repo shows 257 stars and 23 forks; the directory page categorizes it under “Online Tools,” with an MIT license.
This article is compiled after cross-referencing the SkillHub directory detail page, the official install-plan API, the GitHub README, and the repository’s plugin/index.js.
What Is This¶
perfect-web-clone is maintained by GitHub user ericshang98. In short, it aims to: turn any webpage into a pixel-perfect, measurable replica, outputting a Vite + React project. The repository’s description emphasizes that this repo contains the measurement core (core/, pwc/), while the real “product” is the agent harness defined in skill/SKILL.md—a single command clone <url> authorizes the entire local replication pipeline.
Its distinction from “taking a screenshot and letting the model guess” lies in the fact that the pwc CLI handles deterministic scraping, building, fingerprint scanning, and visual scoring, never invoking a model. The agent reads evidence, writes React components, and fixes the worst-performing sections based on measurement results. The completion standard is not subjective “looks similar enough,” but rather gate conditions: ready_for_user_review (ready for user review) or failed_with_residuals (failed with residual issues), accompanied by evidence paths.
As a DSH plugin, it also registers tools like pwc_extract, pwc_plan, pwc_assemble, pwc_build at runtime and injects the perfect-web-clone skill into the session, allowing agents in dsh web to directly drive the entire pipeline.
Core Features¶
Full-Page Scraping and Resource Localization¶
pwc extract <url> scrapes live pages: DOM, computed styles, fonts, images, videos, etc., are saved as immutable source evidence. Resources are localized, eliminating hotlinks to the original site. Scraping includes integrity checks; capture_integrity.status must be passed to proceed with planning. If incomplete, it stops and prohibits guessing to fill content.
If the page relies on WebGL, runtime canvas, or complex scroll orchestration, a ceiling will be reported upfront: the content can still be replicated, but the runtime-rendered appearance may not be fully reproducible.
Planning by Actual Sections and React Rewriting¶
pwc plan <source_id> segments sections based on the page’s actual #main child nodes. Each section becomes a unit for subsequent writing and fixing. pwc assemble initializes a Vite + React + Tailwind shell project. The agent writes clean, semantic JSX and local styles for each section, placing them in src/components/sections/ rather than copying framework classes from the source site or pasting a full-page screenshot.
Requirements include: sticky layouts not being clipped, footers reconstructed geometrically, lazy-loaded content restored as much as possible, video controls playable, and interactive controls being clickable (carousels, menus, or tabs that look right but are unclickable are considered failures).
Gate Scoring and Targeted Fixing¶
After building, the gates are run sequentially:
pwc fingerprints <dist/>: Scans for residual source framework artifacts like Shopify classes or original CSS fingerprints.pwc weight <dist/>: Measures HTML/CSS/JS size budgets after gzip (default ~120KB, configurable).pwc score --ref <reference_image> --cand <replica_image>: Visual matching using SSIM, etc., which can be scored per section boundary.
When a section fails to meet the standard, the worst-performing one according to measurements is fixed, rebuilt, and the affected gates are re-run. Each breakpoint × state has a maximum of about five fix attempts. Aggregate scores are not accepted to mask structural or interactive failures.
Tool Mapping in the DSH Plugin¶
plugin/index.js wraps the above CLI into DSH tools (all return JSON, with ok as the sole success flag):
| Tool | Purpose |
|---|---|
pwc_extract |
Scrapes a URL and returns a source_id |
pwc_plan |
Performs section planning on a source_id |
pwc_assemble |
Generates a Vite + React shell project |
pwc_build |
Runs npm run build in a sandbox |
pwc_fingerprints |
Scans dist/ for framework fingerprints |
pwc_weight |
Measures gzip size of dist/ |
pwc_score |
Compares reference and replica images for visual scores |
It also registers the perfect-web-clone skill, with trigger words including clone, copy, reproduce, and their Chinese equivalents.
Installation and Enabling¶
Requires Python 3.10+ and Node 20+. The plugin tools depend on a locally executable pwc command, so the Python package and Playwright Chromium must be installed first:
pip install "git+https://github.com/ericshang98/Perfect-Web-Clone.git"
playwright install chromium
Install the plugin in DeepSeek Harness. The official command from the SkillHub directory’s install-plan API is as follows (with a fixed commit for reproducibility):
dsh plugin --profile web add github:ericshang98/perfect-web-clone#c846c37937a70497d37d082c26c85aa1289a9fa5
The installation plan also requires: verifying the repository owner, the exact commit, and the dsh.bundle.patch in package.json; reviewing lifecycle scripts like prepare / postinstall; and starting or restarting after installation:
dsh --profile web
Ensure the plugin line is mounted and there are no startup errors. To track the latest main, you can omit the #commit suffix, but reproducibility will decrease.
Beyond the DSH plugin, the same playbook can also be installed into coding agents like Claude Code or Codex that can execute pwc. The repository README points to the independently published perfect-web-clone-skill. Both paths share the same SKILL.md logic and can be chosen based on the environment or used together.
Typical Usage¶
One Command to the Agent¶
In a session with the skill or plugin loaded, simply use natural language:
clone https://example.com
Or in Chinese:
复刻 https://example.com
A single command authorizes the entire pipeline. By default, it produces a local build and preview URL, without automatic deployment unless explicitly requested.
Manual Step-by-Step CLI¶
Suitable for debugging or when you prefer to use “hands and eyes” and write code yourself:
pwc extract https://example.com
pwc plan <source_id>
pwc assemble <source_id>
# After writing components for each section:
pwc assemble <source_id>
pwc build
pwc fingerprints dist/
pwc weight dist/
pwc score --ref reference.png --cand clone.png
Each command prints JSON; if ok: false or success: false, stop and read the error evidence before fixing.
Driving via Tools in DSH Web¶
After installing the plugin and restarting dsh --profile web, the agent can call tools like pwc_extract, using the model to read the returned JSON and decide the next step. Deterministic steps do not consume tokens for “guessing layouts,” and fixes are focused on the worst-performing sections.
Use Cases and Considerations¶
Suitable for:
- When you need a Vite + React source code that can be further developed, not just a static image.
- Migrating or prototyping landing pages, marketing sites, documentation sites, and other DOM + CSS-heavy pages.
- When you want replication results with fingerprints, size metrics, and visual section scores for validation and iteration.
- When already using
dsh weband wanting the agent to initiate full-page replication with one command in a conversation.
Less Suitable or Requiring Lowered Expectations:
- Sites heavily dependent on WebGL / runtime canvas / complex scroll orchestration (the ceiling will be reported upfront).
- When “approximately similar” is sufficient, and interactivity and full-page completeness are not needed (this plugin’s gates are strict, leading to higher costs).
- Environments where Playwright, Node 20, or Python 3.10+ cannot be installed.
Security and Permissions:
The DSH plugin runs with the current dsh process permissions, which can read/write the workspace, execute npm run build, and access URLs you provide via Playwright. Before installation, read the repository source code and MIT license to confirm compliance with scraping target sites. Do not blindly clone untrusted URLs. The directory’s install-plan explicitly states: do not use --force with dsh plugin add, and do not run pnpm install/add directly in the profile to bypass the plugin mechanism.
Ecosystem Note:
DeepSeek Harness’s official philosophy is “everything is a plugin.” perfect-web-clone is a community-contributed online tool extension. SkillHub marks it as installability: verified, but it remains third-party maintained with no official affiliation to DeepSeek. Stars, commits, and gate thresholds are as per the directory page and GitHub at the time of installation.
Conclusion¶
If you’re tired of “screenshot-style replication” and agents prematurely declaring completion, perfect-web-clone consolidates webpage cloning into a measurable pipeline: the deterministic pwc handles scraping and scoring, while the agent writes code and fixes the worst-performing sections. The deliverable is a buildable Vite + React project with clear terminal states.
- Directory Page: SkillHub — ericshang98/Perfect-Web-Clone
- GitHub: ericshang98/Perfect-Web-Clone
- Standalone Skill Package: ericshang98/perfect-web-clone-skill
Install the plugin, install pwc, and tell the agent clone <url>, and you can obtain scored, evidence-backed replication results locally, then decide whether to accept them.