Agent skill · Frontend

web-clone

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

nexu95,528★ · +2,037/wk · 5 repos on radarProfile →
claude-codecodexcursorships scriptsApache-2.0
Install
npx skills add nexu-io/open-design --skill web-clone --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 24
SKILL.md size: 12 KB
Bundled scripts: yes
Version: 1.6.0
Declared author: jane (xiaoer)
Path: skills/web-clone/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 83,577 · +1,339 this week
Language: TypeScript
Read our review of the source →

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# Web Clone · 网站复刻方法论 把"复刻一个网站"做成可重复的流程。在 Open Design 中，默认在当前项目目录工作：`NOTES.md`、`RECON/`、`CLONE_REPORT.md`、`CLONE_AUDIT.md` 和最终可预览的 `index.html` 都应写在当前项目内，除非用户明确指定外部工作目录。 **Open Design 环境准备（跑任何 `scripts/` 前先看）**： - 本 skill 的脚本会被 stage 到项目内 `.od-skills/<插件目录>/scripts/`（skill 前言里有确切路径）。文中命令写的 `node scripts/xxx.mjs` 按该路径解析，例如 `node .od-skills/<插件目录>/scripts/recon-site.mjs ...`；`RECON/`、`assets/` 等产物仍写到项目根。 - 脚本依赖 Playwright。首次在项目里跑之前执行一次 `npm install -D playwright`（在项目根）；本机装有 Chrome 时脚本会自动走 `channel:"chrome"`，无需再下浏览器，否则补一句 `npx playwright install chromium`。**不许因为"环境没配好"就跳过脚本改为目测**——装依赖只要一分钟。 ## 头号铁律：真源码至上，绝不信 AI 推测的代码 > 任何 AI 生成的"复刻分析/施工图"，**正文的概念骨架可以参考，但里面的可执行代码块默认全是臆造的**，必须逐行用真源码核对，否则照抄必崩。 **实证（marbles 案例）**：一份 AI 分析文档把原站"解析法求光线-球体交点 + 把光学结果编码成位移图、交给 SVG `feDisplacementMap` 去扭曲真实 DOM"的真架构，臆造成了"ray-marching + SDF + 把 DOM 当纹理采样"——两套完全不同的实现，照抄做不出原效果且慢 N 倍。详见 `references/marbles-case.md`。 所以第一动作永远是：**拿到真源码**。 ## 决策树（按顺序走，不许跳） ### Step 0 · 先建标准工程骨架 ```bash node scripts/init-clone.mjs <站名> --url <原站URL> --in-place ``` 该脚本会在当前项目内创建 `NOTES.md`、`RECON/screenshots/`，避免每次手工漏掉产物。 ### Step 1 · 先去 GitHub 搜源码，别急着抓站 ```bash unset SSL_CERT_FILE # macOS 怪癖，bash 前先解 # 按站名/产品名搜 SSL_CERT_FILE=/etc/ssl/ce

What's inside
Steps it walks through
  1. 头号铁律：真源码至上，绝不信 AI 推测的代码
  2. 决策树（按顺序走，不许跳）
  3. Step 0 · 先建标准工程骨架
  4. Step 1 · 先去 GitHub 搜源码，别急着抓站
  5. Step 2 · 没找到源码 → 浏览器侦察（探针）
  6. Step 2.5 · 先给复杂度定级，别盲目承诺
  7. Step 3 · 按侦察结果选路径
  8. Step 4 · 在当前项目里搭工程
  9. Step 5 · 删追踪 + 写元信息 + 验证
  10. 资产与颜色保真（硬性门槛，违反=复刻失败）
  11. Step 6 · 替换成 用户自己的内容
  12. 逆向拆解 WebGL/Canvas 重前端（核心手艺）
  13. 许可与署名（clone 前必查）
  14. 产物规范
Ships with 23 files
  • LICENSE
  • references/assessment.md
  • references/complex-playbooks.md
  • references/deliverables.md
  • references/design-dna.md
  • references/effect-extraction.md
  • references/marbles-case.md
  • references/reverse-engineering.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/od-preview-rewrite.mjs
  • scripts/recon-site.mjs
  • scripts/route-crawl.mjs
  • scripts/sourcemap-hunt.mjs
  • scripts/visual-diff.mjs
Commands it runs
node scripts/init-clone.mjs <站名> --url <原站URL> --in-place
unset SSL_CERT_FILE   # macOS 怪癖，bash 前先解
vercel.app/netlify.app/github.io 的 URL slug 常常就是 仓库名 / 部署者用户名
node scripts/recon-site.mjs \
node scripts/asset-harvest.mjs \
node scripts/network-capture.mjs \
node scripts/route-crawl.mjs \
node scripts/interaction-probe.mjs \
node scripts/sourcemap-hunt.mjs \
node scripts/dna-scaffold.mjs \
More from open-design
All skills →
html-ppt-zhangzara-editorial-tri-toneA type-and-color system for a culture magazine relaunch — the grid, the tri-tone palette, and the…Content & Marketinghtml-ppt-zhangzara-peoples-platformA public-transit funding proposal for a city council — ridership need, the plan, the risk controls…Code Review & Qualityod-contributeOne-click contribution flow for Open Design (nexu-io/open-design) — even for non-coders. Pick one…Content & Marketinghtml-ppt-zhangzara-creative-modeA brand visual-identity system reveal for an outdoor label — logo, color, type, and the rules that…Content & Marketinghtml-ppt-zhangzara-neo-grid-boldA designer's portfolio narrative for a senior interview — three case studies, the craft, and the…Code Review & Qualityhtml-ppt-zhangzara-pin-and-paperA field-biology capstone on urban pollinator decline — the survey design, the data, the…Data & Analytics
About this skill
What does the web-clone skill do?

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

How do I install it?

Run `npx skills add nexu-io/open-design --skill web-clone --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going
All skills →
The full catalog, by category and by tool.
Open Source Radar →
The repositories these skills come from, watched daily.
The people behind them →
Makers and builders across the ecosystem.