#833 by GitHub stars

Jane-xiaoer/claude-skill-web-clone

网站复刻 / 克隆方法论。USE WHEN 用户说复刻网站、克隆网站、clone website、抄个站、仿站、照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。

Engineering

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`SKILL.md`

Week of Oct 26, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

0269e0e08a37 → 0269e0e08a37

Compare on GitHub

View on GitHub Add to my skills

Verified commit 0269e0e08a3783184ec641d341e7d57065d4a5f8

1.1kGitHub stars

10stars in 7 days

1skill in this repository

0commits in 30 days

Heat

5.2

Star growth, last 7 daysAhead of 83% of tracked repositories
Star growth, last 24 hoursAhead of 86% of tracked repositories
Rank movement, last 7 daysAhead of 25% of tracked repositories
Commits, last 30 daysAhead of 0% of tracked repositories
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Individual skills in this repository

web-clone /

How it works

web-clone

When your agent uses it

网站复刻 / 克隆方法论。USE WHEN 用户说复刻网站、克隆网站、clone website、抄个站、仿站、照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。

What it loads into context

Frontmatter

215 tokens

Always available to the agent

SKILL.md

5,032 tokens

When the skill is activated

Reference documents

15,277 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

头号铁律：真源码至上，绝不信 AI 推测的代码
决策树（按顺序走，不许跳）
逆向拆解 WebGL/Canvas 重前端（核心手艺）
许可与署名（clone 前必查）
产物规范
内置脚本
能力边界（默认口径）
旗舰案例

Scripts executed separately

scripts/asset-harvest.mjs
scripts/audit-clone.mjs
scripts/compare-recon.mjs
scripts/dna-scaffold.mjs
scripts/init-clone.mjs
scripts/interaction-probe.mjs
scripts/lib/playwright-loader.mjs
scripts/mirror-site.mjs
scripts/network-capture.mjs
scripts/recon-site.mjs
scripts/route-crawl.mjs
scripts/sourcemap-hunt.mjs
scripts/visual-diff.mjs

Files

.gitignoreasset35 bytes
LICENSEasset1,084 bytes
README.mddoc11,046 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
SKILL.mdcore16,755 bytes
follow-wechat-qrcode.jpgasset27,294 bytes
references/assessment.mddoc3,607 bytes
references/complex-playbooks.mddoc2,378 bytes
references/deliverables.mddoc5,125 bytes
references/design-dna.mddoc11,748 bytes
references/effect-extraction.mddoc5,344 bytes
references/marbles-case.mddoc3,384 bytes
references/reverse-engineering.mddoc3,628 bytes
references/static-mirror.mddoc5,001 bytes
scripts/asset-harvest.mjsruns3,844 bytes
scripts/audit-clone.mjsruns5,517 bytes
scripts/compare-recon.mjsruns11,109 bytes
scripts/dna-scaffold.mjsruns11,869 bytes
scripts/init-clone.mjsruns3,327 bytes
scripts/interaction-probe.mjsruns12,502 bytes
scripts/lib/playwright-loader.mjsruns948 bytes
scripts/mirror-site.mjsruns6,345 bytes
scripts/network-capture.mjsruns4,272 bytes
scripts/recon-site.mjsruns8,945 bytes
scripts/route-crawl.mjsruns7,942 bytes
scripts/sourcemap-hunt.mjsruns3,710 bytes
scripts/visual-diff.mjsruns5,935 bytes

Read SKILL.md


# Web Clone · 网站复刻方法论

把"复刻一个网站"做成可重复的流程。配套工程区：`~/projects/website-clones/`（每个复刻是一个子目录）。

## 头号铁律：真源码至上，绝不信 AI 推测的代码

> 任何 AI 生成的"复刻分析/施工图"，**正文的概念骨架可以参考，但里面的可执行代码块默认全是臆造的**，必须逐行用真源码核对，否则照抄必崩。

**实证（marbles 案例）**：一份 AI 分析文档把原站"解析法求光线-球体交点 + 把光学结果编码成位移图、交给 SVG `feDisplacementMap` 去扭曲真实 DOM"的真架构，臆造成了"ray-marching + SDF + 把 DOM 当纹理采样"——两套完全不同的实现，照抄做不出原效果且慢 N 倍。详见 `references/marbles-case.md`。

所以第一动作永远是：**拿到真源码**。

## 决策树（按顺序走，不许跳）

View the complete source on GitHub

Skills included

web-clone

Repository facts

License: MIT
Created: May 28, 2026
Last pushed: Jun 30, 2026
Forks: 134
Open issues: 0
Project activity: Slowing

Rank over the last 12 weeks

Now #833 · best #588 · down 149 in 30 days

#809 on Oct 29
#816 on Oct 30
#819 from Oct 31 to Nov 1
#824 on Nov 2
#829 from Nov 3 to Nov 6
#833 since Nov 7

68 earlier periods

#571 on Aug 2
#559 on Aug 8
#569 on Aug 9
#596 on Aug 10
#599 on Aug 11
#595 on Aug 12
#605 on Aug 13
#601 on Aug 14
#583 on Aug 15
#598 on Aug 16
#600 on Aug 17
#616 on Aug 18
#606 on Aug 19
#605 on Aug 20
#588 on Aug 22
#616 on Aug 23
#631 on Aug 25
#615 on Aug 26
#624 on Aug 27
#643 on Aug 28
#603 on Aug 29
#599 on Aug 30
#622 on Aug 31
#639 on Sep 1
#627 on Sep 2
#628 on Sep 3
#611 on Sep 4
#616 on Sep 6
#646 on Sep 8
#636 on Sep 9
#640 on Sep 10
#627 on Sep 11
#631 on Sep 13
#658 on Sep 14
#649 on Sep 15
#654 on Sep 16
#649 on Sep 17
#651 on Sep 18
#629 on Sep 19
#642 on Sep 20
#655 on Sep 21
#670 on Sep 22
#668 on Sep 23
#640 on Sep 24
#655 on Sep 27
#660 on Sep 28
#701 on Sep 29
#683 on Sep 30
#657 on Oct 2
#639 on Oct 3
#663 on Oct 4
#669 on Oct 5
#679 on Oct 6
#684 on Oct 7
#698 on Oct 9
#684 on Oct 10
#678 on Oct 11
#697 on Oct 12
#698 on Oct 13
#711 on Oct 14
#702 on Oct 15
#690 on Oct 17
#683 on Oct 18
#734 on Oct 21
#712 on Oct 22
#717 on Oct 23
#801 on Oct 25
#807 on Oct 28

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 3, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 19 notes

SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
No dangerous shell commands
43 network referencesin 9 files: README.md:16 SKILL.md:46 references/static-mirror.md:13 and 6 more
No hidden or obfuscated text
No instruction overrides
13 executable scriptsin 13 files: scripts/asset-harvest.mjs:1 scripts/audit-clone.mjs:1 scripts/compare-recon.mjs:1 and 10 more
No access to secrets
No requests to vote in Hot

Show all 56 signals by file

`README.md`

Network accessline 16

- Static HTML/CSS sites → `wget --mirror`

Network accessline 61

This is a [Claude Code skill](https://docs.claude.com/en/docs/agents-and-tools/skills). Drop it into your skills directory:

Network accessline 64

git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~/.claude/skills/web-clone

Network accessline 67

Then use it by saying things like: - "复刻这个网站: https://..."

Network accessline 68
```
- "复刻这个网站: https://..."
```

Network accessline 100

`marbles-case.md` documents the full reverse-engineering of [chiuhans111/marbles](https://github.com/chiuhans111/marbles) — a 1067-line single-file WebGL + SVG-filter glass marbles interactive demo — and contrasts the real architecture with

Network accessline 110

这个 skill 把"真源码至上"做成可重复的流程,**6 步决策树**覆盖三大分支: - 静态 HTML/CSS 站 → `wget --mirror`

Network accessline 111

- 静态 HTML/CSS 站 → `wget --mirror`

Network accessline 126

这是一个 [Claude Code skill](https://docs.claude.com/en/docs/agents-and-tools/skills)。clone 到你的 skills 目录:

Network accessline 129

git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~/.claude/skills/web-clone

Network accessline 132

然后跟 Claude / Codex / Cursor 说: - 「复刻这个网站: https://...」

Network accessline 133
```
- 「复刻这个网站: https://...」
```

Network accessline 141

`references/marbles-case.md` 拆解了 [chiuhans111/marbles](https://github.com/chiuhans111/marbles) —— 1067 行单文件 WebGL + SVG filter 玻璃弹珠站,真架构对比 AI 分析文档的错误,是"为什么必须真源码核对"的标准教材。

Network accessline 147

- **方法论沉淀来源 / Origin**:Jane 的克隆中枢 `~/projects/website-clones/` 工作流(2026-05-27 marbles 案例跑通后抽出 skill) - **旗舰范例原作 / Flagship case author**:[chiuhans111/marbles](https://github.com/chiuhans111/marbles) by Hans Chiu — 没有这份单文件 1067 行的玻璃弹珠源码就没有这个

Network accessline 148

- **旗舰范例原作 / Flagship case author**:[chiuhans111/marbles](https://github.com/chiuhans111/marbles) by Hans Chiu — 没有这份单文件 1067 行的玻璃弹珠源码就没有这个 skill 的"真源码至上"铁律

Network accessline 149

- **设计身份层 schema / Design-DNA schema**:`references/design-dna.md` 的三维 DNA JSON 改编自 [zanwei/design-dna](https://github.com/zanwei/design-dna)（MIT），用于"视觉复刻 / 内容爆改"模式

Network accessline 150

- **特效提取纪律 / Effect-extraction discipline**:`references/effect-extraction.md` 的证据分级 + baseline-first 闸门受 [lixiaolin94/skills · web-shader-extractor](https://github.com/lixiaolin94/skills) 启发（该仓库无 LICENSE，本 skill 只借方法概念、用自己的话重写，未复制其代码或原文）

Network accessline 170

- X (Twitter): [@xiaoerzhan](https://x.com/xiaoerzhan)

`SKILL.md`

Network accessline 46

- 单文件站（github.io / 纯 HTML）→ 直接抓 raw：`curl -sL https://raw.githubusercontent.com/<user>/<repo>/main/index.html`

Network accessline 108

| 侦察结果 | 走哪条路 | |---|---| | 静态 HTML/CSS，无框架 | `wget --mirror` 抓镜像 → 删追踪脚本 → 改文案 |

Network accessline 109

|---|---| | 静态 HTML/CSS，无框架 | `wget --mirror` 抓镜像 → 删追踪脚本 → 改文案 | | React / Vue / Next（内容为主） | 重建模板（如 `ai-website-cloner-template`，Node 24+），灌内容 |

Network accessline 110

| 静态 HTML/CSS，无框架 | `wget --mirror` 抓镜像 → 删追踪脚本 → 改文案 |

Network accessline 140

node /Users/jane/.shared-skills/web-clone/scripts/recon-site.mjs \   --url http://127.0.0.1:<端口>/ \

Network accessline 141
```
--url http://127.0.0.1:<端口>/ \
```

Network accessline 145

node /Users/jane/.shared-skills/web-clone/scripts/route-crawl.mjs \   --url http://127.0.0.1:<端口>/ \

Network accessline 146
```
--url http://127.0.0.1:<端口>/ \
```

Network accessline 152

node /Users/jane/.shared-skills/web-clone/scripts/interaction-probe.mjs \   --url http://127.0.0.1:<端口>/ \

Network accessline 153
```
--url http://127.0.0.1:<端口>/ \
```

`references/design-dna.md`

Network accessline 7

> 方法与 schema 改编自 [zanwei/design-dna](https://github.com/zanwei/design-dna)（MIT），按 web-clone 的口径裁剪。

`references/effect-extraction.md`

Network accessline 6

> 纪律范式受 [lixiaolin94/skills · web-shader-extractor](https://github.com/lixiaolin94/skills) 启发（该仓库无 LICENSE，

`references/marbles-case.md`

Network accessline 3

源站 https://chiuhans111.github.io/marbles/ ·作者 Hans Chiu ·单文件 1067 行 ·许可证 **NONE**。

`references/static-mirror.md`

Network accessline 13

## 为什么必须"真浏览器全程滚动捕获"，不能只 grep / wget - `.buf`/`.sog`/`.riv` 等二进制是 **JS 运行时按滚动进度 fetch** 的，URL 常是代码里**动态拼接**的 → grep bundle 抓不全，`wget --mirror` 也发现不了（它只跟 HTML 静态链接）。

Network accessline 14

- `.buf`/`.sog`/`.riv` 等二进制是 **JS 运行时按滚动进度 fetch** 的，URL 常是代码里**动态拼接**的 → grep bundle 抓不全，`wget --mirror` 也发现不了（它只跟 HTML 静态链接）。

Network accessline 37

# ① 下 kit CSS（直连，typekit 常被代理挡 → 不要走 proxy）    curl -sL -A "Mozilla/5.0 …Chrome…" -e "https://<站>/" "https://use.typekit.net/<kit>.css" -o site/typekit/kit.css

Network accessline 38

curl -sL -A "Mozilla/5.0 …Chrome…" -e "https://<站>/" "https://use.typekit.net/<kit>.css" -o site/typekit/kit.css

Network accessline 49

然后把引用处改成本地——**注意 Typekit 常是主 CSS 第一行 `@import"https://use.typekit.net/<kit>.css"`，不是 HTML `<link>`**：

Network accessline 51

perl -0pi -e 's{\@import"https://use\.typekit\.net/<kit>\.css"}{\@import"/typekit/kit-local.css"}g' site/_astro/<主>.css

`scripts/asset-harvest.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

Network accessline 49

async function download(asset, outDir) {   const response = await fetch(asset.url, {

Network accessline 50

const response = await fetch(asset.url, {

`scripts/audit-clone.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`scripts/compare-recon.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`scripts/dna-scaffold.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`scripts/init-clone.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`scripts/interaction-probe.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`scripts/lib/playwright-loader.mjs`

Executable scriptline 1
```
Executable file
```

`scripts/mirror-site.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`scripts/network-capture.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

Network accessline 61

page.on("request", (request) => {     requests.push({

Network accessline 62
```
requests.push({
```

`scripts/recon-site.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`scripts/route-crawl.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`scripts/sourcemap-hunt.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

Network accessline 50

async function fetchText(url) {   const response = await fetch(url, {

Network accessline 51
```
const response = await fetch(url, {
```

`scripts/visual-diff.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 8 facts

Network access in code of documentationREADME.md:64Low confidence
Network access in code of documentationREADME.md:129Low confidence
Network access in code of the SKILL.mdSKILL.md:140High confidence
Network access in code of the SKILL.mdSKILL.md:141High confidence
Network access in code of the SKILL.mdSKILL.md:145High confidence
Network access in code of the SKILL.mdSKILL.md:146High confidence
Network access in code of the SKILL.mdSKILL.md:152High confidence
Network access in code of the SKILL.mdSKILL.md:153High confidence

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Compatible	Standard SKILL.md SKILL.md	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

Explore alternatives and comparisons

Add this badge to your README

It updates every night and links to this page.

[![Jane-xiaoer/claude-skill-web-clone on hotskills](https://hotskills.dev/badge/jane-xiaoer-claude-skill-web-clone.svg)](https://hotskills.dev/skill/jane-xiaoer-claude-skill-web-clone/)

Jane-xiaoer/claude-skill-web-clone

History

SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

web-clone

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Rank over the last 12 weeks

Before you install

README.md

SKILL.md

references/design-dna.md

references/effect-extraction.md

references/marbles-case.md

references/static-mirror.md

scripts/asset-harvest.mjs

scripts/audit-clone.mjs

scripts/compare-recon.mjs

scripts/dna-scaffold.mjs

scripts/init-clone.mjs

scripts/interaction-probe.mjs

scripts/lib/playwright-loader.mjs

scripts/mirror-site.mjs

scripts/network-capture.mjs

scripts/recon-site.mjs

scripts/route-crawl.mjs

scripts/sourcemap-hunt.mjs

scripts/visual-diff.mjs

How the signals fit together

Works with

You might also use

blacktop/ipsw-skill

AI272/speaker

Win-Hao/code-video

JuliusBrussee/caveman

img2threejs/img2threejs

AgriciDaniel/claude-obsidian

Explore alternatives and comparisons

Add this badge to your README

`SKILL.md`

`README.md`

`SKILL.md`

`references/design-dna.md`

`references/effect-extraction.md`

`references/marbles-case.md`

`references/static-mirror.md`

`scripts/asset-harvest.mjs`

`scripts/audit-clone.mjs`

`scripts/compare-recon.mjs`

`scripts/dna-scaffold.mjs`

`scripts/init-clone.mjs`

`scripts/interaction-probe.mjs`

`scripts/lib/playwright-loader.mjs`

`scripts/mirror-site.mjs`

`scripts/network-capture.mjs`

`scripts/recon-site.mjs`

`scripts/route-crawl.mjs`

`scripts/sourcemap-hunt.mjs`

`scripts/visual-diff.mjs`