Web Clone
Use this skill to clone, study, or remix a website without inventing fake source
code. The operating rule is simple: real source or real runtime evidence first.
Treat AI-generated clone plans as hypotheses until they are checked against
source, deployed assets, browser captures, screenshots, and working local code.
Start Here
- Create a clone workspace:
node "$SKILL_DIR/scripts/init-clone.mjs" <slug> --url <url> [--root <dir>]
If SKILL_DIR is not already known, resolve it as the directory containing
this SKILL.md or the downloaded supporting files for this skill.
The default clone root is $WEB_CLONE_ROOT, falling back to
~/projects/website-clones.
- Search for the real source before scraping:
gh api "search/repositories?q=<site-or-product-keyword>" \
| jq -r '.items[] | "\(.full_name) ⭐\(.stargazers_count) \(.description)"' \
| head -10
- If source is not found, run browser probes:
node "$SKILL_DIR/scripts/recon-site.mjs" --url <url> --out <clone>/RECON --label original
node "$SKILL_DIR/scripts/route-crawl.mjs" --url <url> --out <clone>/RECON/routes --label original
node "$SKILL_DIR/scripts/interaction-probe.mjs" --url <url> --out <clone>/RECON/interactions --label original
node "$SKILL_DIR/scripts/network-capture.mjs" --url <url> --out <clone>/RECON/network --label original
node "$SKILL_DIR/scripts/sourcemap-hunt.mjs" --recon <clone>/RECON/original-recon.json --out <clone>/RECON/sourcemaps
- Pick the cloning path from the evidence.
- Build the clone, remove tracking, write notes, and verify in a real browser.
- Replace content, media, and brand tokens only after the clone boundary is
clear.
Decision Tree
| Evidence |
Path |
| Static HTML/CSS, few scripts |
Mirror/download, remove tracking, replace content. |
| React/Vue/Next content site |
Rebuild the templates and use local JSON fixtures for content/API. |
| SPA or SaaS/data-driven page |
Capture XHR/fetch responses first; mock private writes, auth, payment, and permissions. |
| Multi-page marketing/CMS site |
Crawl routes, identify repeated templates, implement representative page types. |
| Complex animation site |
Capture scroll/hover/click states; preserve rhythm and visual language, document approximations. |
| WebGL/Canvas/Three.js heavy site |
Find source/source maps first; otherwise capture runtime evidence and build a baseline replay before refactoring. |
| Static-built Astro/Vite SSG/Hugo site |
Use mirror-site.mjs to capture deployed assets, including runtime-fetched binary assets. |
| Visual clone or content remix |
Produce design-dna.json from recon, then keep the visual grammar while changing the content. |
Evidence Discipline
- Mark technical claims as
SOURCE, PARTIAL, or GUESS.
SOURCE means direct evidence from source, source maps, network bodies,
runtime dumps, frame captures, or verified screenshots.PARTIAL means a useful clue that still needs confirmation.GUESS means visual fitting, naming inference, default assumptions, or
hand-tuned values.- Do not compensate for unknown rendering, timing, color, or state bugs by
adjusting unrelated parameters until it looks close. Record the gap.
- For WebGL/Canvas effects, create a minimal raw replay first. Only refactor
after the baseline visually matches the original.
Required Deliverables
NOTES.md: source, license, mode, complexity, run command, replacement map,
validation evidence, and unresolved gaps.TEARDOWN.md: required for complex interactive/WebGL clones; every important
technical claim should include evidence level and source/file reference.RECON/: screenshots, route maps, network captures, interaction states,
source-map results, visual diffs, and optional design-dna.json.CLONE_REPORT.md: original vs clone comparison when reporting quality.CLONE_AUDIT.md: tracking scripts, original-brand residue, external links,
placeholders, and license/deploy risks.
Templates and scoring rules live in:
references/assessment.mdreferences/deliverables.mdreferences/reverse-engineering.mdreferences/effect-extraction.mdreferences/static-mirror.mdreferences/design-dna.mdreferences/complex-playbooks.md
Script Runtime
The scripts are plain Node .mjs files. Browser scripts require Playwright.
Install it in the clone project when needed:
npm install -D playwright
Run scripts via the skill directory:
SKILL_DIR=/path/to/web-clone
node "$SKILL_DIR/scripts/recon-site.mjs" --url https://example.com --out ./RECON --label original
If Playwright is installed somewhere else, set:
PLAYWRIGHT_MODULE_PATH=/absolute/path/to/node_modules/playwright
Boundaries
- High-confidence: static pages, marketing sites, content frontends, and sites
with accessible source or complete deployed assets.
- Partial or approximate: complex scroll narratives, custom WebGL effects
without source, third-party embeds, CMS-backed content, and private APIs.
- Out of scope by default: real auth, payments, orders, recommendations,
proprietary backends, private data, and copyrighted assets for public reuse.
- Public deployment requires license and asset checks. Public source on GitHub
is not the same as a permissive license.
Attribution
This skill is adapted from
Jane-xiaoer/claude-skill-web-clone under the MIT license. Keep
LICENSE and NOTICE.md with redistributed copies.
1---2name: web-clone3description: Website cloning and web-effect reconstruction workflow. Use when the user says clone this website, reproduce this site, rebuild this page, reverse-engineer a WebGL/Canvas/Three.js effect, copy a website for local learning, visual clone, content remix, 复刻网站, 克隆网站, 抄个站, 仿站, 照着这个站做一个, or 把这个站搬下来改成我的.4---56# Web Clone78Use this skill to clone, study, or remix a website without inventing fake source9code. The operating rule is simple: real source or real runtime evidence first.10Treat AI-generated clone plans as hypotheses until they are checked against11source, deployed assets, browser captures, screenshots, and working local code.1213## Start Here14151. Create a clone workspace:16 ```bash17 node "$SKILL_DIR/scripts/init-clone.mjs" <slug> --url <url> [--root <dir>]18 ```19 If `SKILL_DIR` is not already known, resolve it as the directory containing20 this `SKILL.md` or the downloaded supporting files for this skill.21 The default clone root is `$WEB_CLONE_ROOT`, falling back to22 `~/projects/website-clones`.232. Search for the real source before scraping:24 ```bash25 gh api "search/repositories?q=<site-or-product-keyword>" \26 | jq -r '.items[] | "\(.full_name) ⭐\(.stargazers_count) \(.description)"' \27 | head -1028 ```293. If source is not found, run browser probes:30 ```bash31 node "$SKILL_DIR/scripts/recon-site.mjs" --url <url> --out <clone>/RECON --label original32 node "$SKILL_DIR/scripts/route-crawl.mjs" --url <url> --out <clone>/RECON/routes --label original33 node "$SKILL_DIR/scripts/interaction-probe.mjs" --url <url> --out <clone>/RECON/interactions --label original34 node "$SKILL_DIR/scripts/network-capture.mjs" --url <url> --out <clone>/RECON/network --label original35 node "$SKILL_DIR/scripts/sourcemap-hunt.mjs" --recon <clone>/RECON/original-recon.json --out <clone>/RECON/sourcemaps36 ```374. Pick the cloning path from the evidence.385. Build the clone, remove tracking, write notes, and verify in a real browser.396. Replace content, media, and brand tokens only after the clone boundary is40 clear.4142## Decision Tree4344| Evidence | Path |45| --- | --- |46| Static HTML/CSS, few scripts | Mirror/download, remove tracking, replace content. |47| React/Vue/Next content site | Rebuild the templates and use local JSON fixtures for content/API. |48| SPA or SaaS/data-driven page | Capture XHR/fetch responses first; mock private writes, auth, payment, and permissions. |49| Multi-page marketing/CMS site | Crawl routes, identify repeated templates, implement representative page types. |50| Complex animation site | Capture scroll/hover/click states; preserve rhythm and visual language, document approximations. |51| WebGL/Canvas/Three.js heavy site | Find source/source maps first; otherwise capture runtime evidence and build a baseline replay before refactoring. |52| Static-built Astro/Vite SSG/Hugo site | Use `mirror-site.mjs` to capture deployed assets, including runtime-fetched binary assets. |53| Visual clone or content remix | Produce `design-dna.json` from recon, then keep the visual grammar while changing the content. |5455## Evidence Discipline5657- Mark technical claims as `SOURCE`, `PARTIAL`, or `GUESS`.58- `SOURCE` means direct evidence from source, source maps, network bodies,59 runtime dumps, frame captures, or verified screenshots.60- `PARTIAL` means a useful clue that still needs confirmation.61- `GUESS` means visual fitting, naming inference, default assumptions, or62 hand-tuned values.63- Do not compensate for unknown rendering, timing, color, or state bugs by64 adjusting unrelated parameters until it looks close. Record the gap.65- For WebGL/Canvas effects, create a minimal raw replay first. Only refactor66 after the baseline visually matches the original.6768## Required Deliverables6970- `NOTES.md`: source, license, mode, complexity, run command, replacement map,71 validation evidence, and unresolved gaps.72- `TEARDOWN.md`: required for complex interactive/WebGL clones; every important73 technical claim should include evidence level and source/file reference.74- `RECON/`: screenshots, route maps, network captures, interaction states,75 source-map results, visual diffs, and optional `design-dna.json`.76- `CLONE_REPORT.md`: original vs clone comparison when reporting quality.77- `CLONE_AUDIT.md`: tracking scripts, original-brand residue, external links,78 placeholders, and license/deploy risks.7980Templates and scoring rules live in:81- `references/assessment.md`82- `references/deliverables.md`83- `references/reverse-engineering.md`84- `references/effect-extraction.md`85- `references/static-mirror.md`86- `references/design-dna.md`87- `references/complex-playbooks.md`8889## Script Runtime9091The scripts are plain Node `.mjs` files. Browser scripts require Playwright.92Install it in the clone project when needed:9394```bash95npm install -D playwright96```9798Run scripts via the skill directory:99100```bash101SKILL_DIR=/path/to/web-clone102node "$SKILL_DIR/scripts/recon-site.mjs" --url https://example.com --out ./RECON --label original103```104105If Playwright is installed somewhere else, set:106107```bash108PLAYWRIGHT_MODULE_PATH=/absolute/path/to/node_modules/playwright109```110111## Boundaries112113- High-confidence: static pages, marketing sites, content frontends, and sites114 with accessible source or complete deployed assets.115- Partial or approximate: complex scroll narratives, custom WebGL effects116 without source, third-party embeds, CMS-backed content, and private APIs.117- Out of scope by default: real auth, payments, orders, recommendations,118 proprietary backends, private data, and copyrighted assets for public reuse.119- Public deployment requires license and asset checks. Public source on GitHub120 is not the same as a permissive license.121122## Attribution123124This skill is adapted from125`Jane-xiaoer/claude-skill-web-clone` under the MIT license. Keep126`LICENSE` and `NOTICE.md` with redistributed copies.
MaybeMonad