# Web Clone

网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce...

- Repository: https://github.com/Jane-xiaoer/claude-skill-web-clone (1089 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-06-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Jane-xiaoer/claude-skill-web-clone --skill web-clone -g -a claude-code -y`
Codex: `npx skills add Jane-xiaoer/claude-skill-web-clone --skill web-clone -g -a codex -y`
Cursor: `npx skills add Jane-xiaoer/claude-skill-web-clone --skill web-clone -g -a cursor -y`
Gemini CLI: `npx skills add Jane-xiaoer/claude-skill-web-clone --skill web-clone -g -a gemini-cli -y`

## Description

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Web Clone · 网站复刻方法论

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

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

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

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

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

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

### Step 0 · 先建标准工程骨架

```bash
node /Users/jane/.shared-skills/web-clone/scripts/init-clone.mjs <站名> --url <原站URL>
```

该脚本会创建 `~/projects/website-clones/<站名>-clone/`、`NOTES.md`、`RECON/screenshots/`，避免每次手工漏掉产物。

### Step 1 · 先去 GitHub 搜源码，别急着抓站

```bash
unset SSL_CERT_FILE   # macOS 怪癖，bash 前先解
# 按站名/产品名搜
SSL_CERT_FILE=/etc/ssl/cert.pem gh api "search/repositories?q=<关键词>" \
  | jq -r '.items[] | "\(.full_name) ⭐\(.stargazers_count) \(.description)"' | head -10
# vercel.app/netlify.app/github.io 的 URL slug 常常就是 仓库名 / 部署者用户名
```
- 单文件站（github.io / 纯 HTML）→ 直接抓 raw：`curl -sL https://raw.githubusercontent.com/<user>/<repo>/main/index.html`
- **找到源码且许可允许 → 跳 Step 4 直接 clone。** 教训：先搜 GitHub 能省 30 分钟弯路。

### Step 2 · 没找到源码 → 浏览器侦察（探针）

加载 `Browser` skill 或 playwright MCP，跑探针抽信号（框架 / `window.THREE` / canvas 数 / 平滑滚动库 / 字体 / scrollHeight）。截图 1440/768/390 三档 + 侦察 JSON 存 `<站>/RECON/`。

优先用内置脚本跑标准侦察：

```bash
node /Users/jane/.shared-skills/web-clone/scripts/recon-site.mjs \
  --url <原站URL> \
  --out ~/projects/website-clones/<站名>-clone/RECON \
  --label original

node /Users/jane/.shared-skills/web-clone/scripts/asset-harvest.mjs \
  --recon ~/projects/website-clones/<站名>-clone/RECON/original-recon.json \
  --out ~/projects/website-clones/<站名>-clone/assets/original \
  --manifest ~/projects/website-clones/<站名>-clone/RECON/asset-manifest.json

node /Users/jane/.shared-skills/web-clone/scripts/network-capture.mjs \
  --url <原站URL> \
  --out ~/projects/website-clones/<站名>-clone/RECON/network \
  --label original

The rest: https://github.com/Jane-xiaoer/claude-skill-web-clone/blob/HEAD//SKILL.md