Foreword¶

When replicating websites, a common reason for failure is relying on AI-inferred code rather than the real source code. The web-clone plugin provides a decision-tree workflow based on real source code, helping developers achieve high-fidelity replicas from static pages to React/Vue/Next sites.

What It Is¶

This is a workflow plugin maintained by Edisonzszs. It covers three branches: static sites, content-oriented frontends, and animation sites, and it enforces verification of executable code in AI analysis.

Core Features¶

1. High-fidelity static and content sites: It can handle static marketing pages, corporate websites, content-oriented React/Vue/Next frontends, and animation sites where source code can be obtained.
2. Visual reproduction with simplification: It can reproduce visual design, but simplifies CMS backends, complex scroll narratives, multi-device breakpoints, WebGL/Canvas effects, and third-party embeds.
3. Explicit boundaries: By default, it does not promise full cloning of login, payment, ordering, search and recommendation, permission systems, server-side business logic, proprietary APIs, or copyright-restricted assets.

Installation and Activation¶

Install it via DeepSeek Harness:

dsh plugin add Edisonzszs/web-clone

After installation, this repository is mounted as a dsh.bundle plugin, and the skill enters the session with the name web-clone. The references/ and scripts/ directories are distributed with the plugin and invoked using the relative paths specified in the skill body.

Typical Usage¶

When the user expresses the intent to replicate a website, follow these steps:

1. Intent recognition: Use it when the user says “clone a website,” “clone website,” “reproduce a site,” “restore the effect of a specific web page,” or “replicate an interaction/WebGL/Canvas/Three.js effect.”
2. Machine validation: Run the machine validation script to check fidelity of fonts, images, and colors.

   node scripts/audit-clone.mjs --recon --strict

3. Full-process reconnaissance: Use the reconnaissance script to collect framework, resource, and DOM information.

   node scripts/recon-site.mjs

4. Asset harvesting: Harvest the actual images, fonts, and media used by the site, including assets protected by hotlink-protection CDNs.

   node scripts/asset-harvest.mjs

Notes¶

1. Real source code first: The top rule is that you must use real source code and never trust AI-inferred code.
2. License compliance: No LICENSE file ≠ free to use. If no license is declared, all rights are reserved by default; use is limited to local learning/replication, the original author must be credited, and public redeployment without permission is not allowed.
3. Asset replacement: Before going live, replace copyright- or trademark-protected assets according to the “Pre-deployment Replacement List” in NOTES.md.
4. Tech stack: The scripts include a built-in zero-dependency control layer based on the Chrome DevTools Protocol, so npm install playwright is not required.

Summary¶

The web-clone plugin solves the problem of inaccurate code inference in replication work by providing a decision-tree workflow based on real source code. It is suitable for projects that require high-fidelity restoration of static pages and content sites, but developers need to pay special attention to licensing and asset replacement.

• Plugin directory
• GitHub repository