Agent skill · software engineering · nexu-io
web-clone
网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。
Why this skill is useful
Adds multiple executable scripts for website cloning and reverse engineering that provide capabilities not commonly found in public documentation.
What it needs
Requires playwright installed locally. About 5k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Web Clone · 网站复刻方法论 把"复刻一个网站"做成可重复的流程。在 OpenDesign 中，默认在当前项目目录工作：NOTES.md、RECON/、CLONEREPORT.md、CLONEAUDIT.md 和最终可预览的 index.html 都应写在当前项目内，除非用户明确指定外部工作目录。 OpenDesign 环境准备（跑任何 scripts/ 前先看）： 本 skill 的脚本会被 stage 到项目内 .od-skills/<插件目录>/scripts/（skill 前言里有确切路径）。文中命令写的 node scripts/xxx.mjs 按该路径解析，例如 node .od-skills/<插件目录>/scripts/recon-site.mjs ...；RECON/、assets/ 等产物仍写到项目根。 脚本内置基于 Chrome DevTools Protocol 的零依赖控制层，直接复用系统已有的 Chrome、Edge 或 Chromium；无需启动 Electron 客户端，也支持纯 od CLI。Agent 沙箱内会通过本地 daemon 创建临时 CDP 会话，避免沙箱阻止 Chrome 子进程。禁止在用户项目里执行 npm install playwright 或下载 Chromium。 若预检报告没有兼容浏览器，直接说明缺少系统浏览器或通过 ODBROWSEREXECUTABLEPATH 指定路径，不要改为目测，也不要反复安装依赖。源码开发环境若已经提供 ODPLAYWRIGHTPACKAGE，脚本仍兼容该运行时，但它不是产品链路的前置条件。 头号铁律：真源码至上，绝不信 AI 推测的代码 任何 AI 生成的"复刻分析/施工图"，正文的概念骨架可以参考，但里面的可执行代码块默认全是臆造的，必须逐行用真源码核对，否则照抄必崩。 实证（marbles 案例）：一份 AI 分析文档把原站"解析法求光线-球体交点 + 把光学结果编码成位移图、交给 SVG feDisplacementMap 去扭曲真实 DOM"的真架构，臆造成了"ray-marching + SDF + 把 DOM 当纹理采样"——两套完全不同的实现，照抄做不出原效果且慢 N 倍。详见 references/marbles-case.md。 所以第一动作永远是：拿到真源码。 决策树（按顺序走，不许跳） Step 0 · 先建标准工程骨架 该脚本会在当前项目内创建 NOTES.md、RECON/screenshots/，避免每次手工漏掉产物。 Step 1 · 先去 GitHub 搜源码，别急着抓站 单文件站（github.io / 纯 HTML）→ 直接抓 raw：curl -sL https://raw.githubusercontent.com/<user>/<repo>/main/index.html 找到源码且许可允许 → 跳 Step 4 直接 clone。 教训：先搜 GitHub 能省 30 分钟弯路。 Step 2 · 没找到源码 → 浏览器侦察（探针） 使用内置的零依赖 CDP 浏览器控制层跑探针抽信号（框架 / window.THREE / canvas 数 / 平滑滚动库 / 字体 / scrollHeight）。截图 1440/768/390 三档 + 侦察 JSON 存 RECON/。 优先用内置脚本跑标准侦察： --wait 仅表示页面导航完成后的额外稳定等待，不是导航超时。导航超时只可用 --navigation-timeout <毫秒> 调整；同一错误不要通过增大 --wait 盲目重试。 登录态私域站需要使用当前环境里已登录的浏览器上下文；localhost / 无登录公开站直接用内置 CDP 探针。 Step 2.5 · 先给复杂度定级，别盲目承诺 根据侦察结果先写一版"复刻前预判"：复杂度 L1-L6、推荐模式（忠实复刻 / 视觉复刻 / 内容爆改）、预计可还原范围、明确不克隆的部分。分级和评分规则见 references/assessment.md。 模式选择纪律（用户没回答确认项时的默认）：用户说的是"复刻/克隆这个网站"，默认就是忠实复刻——还原度是这个场景的第一目标。不许因为"原站是商业站/有版权内容"就自作主张降级成视觉复刻、换占位品牌、用排版块替代摄影图：那会被用户直接感知为"图片没抓下来、字体不对、颜色不还原"。正确姿势是先忠实复刻到位（真图真字体真色值全部落地），把版权/商标风险写进 NOTES.md 的"部署前须替换清单"，替换动作留给 Step 6 由用户决定。只有用户明确要"做我自己的站/换成我的品牌"时才走视觉复刻/内容爆改。同理，不许因为"目标站是风控敏感的 …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/web-clone