claude-skill-web-clone Skill：把「复刻幻觉」一网打尽的真源码至上工作流

这是一个专门治 AI「复刻幻觉」的网站克隆方法论 Skill —— 把「先找真源码，再写代码」做成可执行的 6 步决策树，覆盖静态站、React/Vue/Next、WebGL/Three.js 重前端三大分支。它火的原因只有一个：所有用过 Claude Code / Codex 抄站的人都被 AI 臆造的代码坑过，而这个 Skill 直接给出了一套「SOURCE/PARTIAL/GUESS 证据分级 + baseline-first 复现闸门」的反幻觉工作流。

功能与原则

核心能力是真源码至上的网站忠实复刻：先用浏览器嗅探 + GitHub 源码搜索定位真实实现，再决定走哪条分支——静态站 wget 镜像、React/Vue 模板重建、WebGL/Canvas/Three.js 重前端逆向真源码逐行核对、静态构建站（Astro/Vite SSG/Hugo）通过 mirror-site.mjs 镜像所有运行时 fetch 的 .sog/.buf/.wasm 资产做 1:1 克隆。设计原则是「real source first, never copy AI-guessed code」——把任何 AI 生成的「克隆分析文档」当作概念提示，但默认里面的可执行代码块全是臆造的，必须用真源码核对。配套输出包括 NOTES.md / TEARDOWN.md / design-dna.json（可版本化的设计身份层，支持「保留 DNA 替换内容」的视觉复刻模式）。

认可度

GitHub star 数 952，截至 2026-08-18；forks 118。仓库创建于 2026-05-28，最近一次 push 在 2026-06-30，但 issue 与 topic 索引持续更新至今天（2026-08-18）。已在 GitHub claude-code-skill 主题页收录。配套 references/marbles-case.md 是社区里少见的「AI 复刻幻觉」标准教学案例——它把一份 AI 把「解析法光线-球体交点 + SVG feDisplacementMap 折射 DOM」的真实架构，臆造成「ray-marching + SDF + DOM 当纹理采样」的错误分析逐字拆穿，成为 Claude Code 社区引用频率最高的「反幻觉」教学素材。

链接

GitHub：https://github.com/Jane-xiaoer/claude-skill-web-clone

原作者

GitHub 用户名 Jane-xiaoer（中文名「小耳」），2024 年 7 月入驻 GitHub，公开仓库 41 个、followers 134。她的 GitHub 主页显示她是一个重度 Codex/Claude Code Skill 作者，热门作品包括 xiaoer-videolab（587 星，一键抓当前页视频到本地）、paper-collage-ad-codex（389 星，剪纸拼贴广告生产 Skill）、claude-skill-video-transcribe（217 星，视频转文字工具）。所有 Skill 都是「自己用过、跑通了、再抽出来的方法论沉淀」风格，与「文档型 Skill」形成鲜明对比。

介绍

claude-skill-web-clone 解决的是 Claude Code / Codex 用户最常踩的一个坑：用 AI 抄一个炫酷网站，结果 AI 给了你一份「看起来很像」的复刻分析文档，里面的代码块全是 AI 凭空捏造的，跑起来要么报错要么效果完全不对。这个 Skill 把这个流程做成了可重复的 6 步决策树：第一步永远先用 gh api search/repositories 在 GitHub 上找真源码；如果没找到，再用浏览器嗅探（recon-site.mjs）、路由爬取（route-crawl.mjs）、交互探测（interaction-probe.mjs）、网络抓包（network-capture.mjs）、资源收割（asset-harvest.mjs）五件套取证。

取证完成后，根据站点类型走三条分支：静态 HTML/CSS 站直接 wget --mirror；React/Vue/Next 内容站重建模板灌内容；WebGL / Canvas / Three.js 重前端则逆向真源码逐行核对，找不到源码就用运行时帧捕获 + baseline-first 复现闸门（必须先复现原始效果再改）+ SOURCE/PARTIAL/GUESS 证据分级。静态构建站（Astro/Vite SSG/Hugo）哪怕重 WebGL，也用 mirror-site.mjs 全程滚动捕获并镜像每个部署资产（含 .sog/.buf/.wasm）做真 1:1 克隆。最后在真浏览器里像素比对（visual-diff.mjs）验证。

整个 Skill 的核心是一个「design-dna.json」设计身份层，把「这个站的气质」蒸馏成可版本化的设计 token + 风格 + 特效，让你可以「保留 DNA 替换内容」做爆改。

特点

• 真源码至上铁律：任何 AI 写的「复刻分析」一律视为臆造，必须用真源码逐行核对
• 6 步决策树 + 三大分支：静态站 / React 模板站 / WebGL 重前端，每种走法不同
• 8 个可执行探针脚本：recon-site / mirror-site / route-crawl / interaction-probe / network-capture / asset-harvest / dna-scaffold / visual-diff，覆盖取证全流程
• 证据分级 + baseline-first 闸门：每个 WebGL 特效必须先复现原效果（baseline）才能改造，避免「改完之后效果全变」
• 设计身份层 design-dna.json：把站点风格蒸馏成可版本化的 DNA，支持「视觉复刻」和「内容爆改」两种模式

使用方法

安装：

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

触发方式（直接对 Claude Code / Codex / Cursor 说）：

• 「复刻这个网站: https://…」
• 「Clone this site for me」
• 「Reverse-engineer this WebGL demo」
• 「把这个站抄下来改成我的」

最小示例（复刻一个 WebGL demo）：

1. Step 1：gh api search/repositories?q=<demo-name> 找真源码
2. Step 2：如果没找到，跑 node scripts/recon-site.mjs https://target.site 嗅探
3. Step 3：跑 node scripts/mirror-site.mjs https://target.site 全量滚动捕获
4. Step 4：建 ~/projects/website-clones/<name>-clone/，把 index-original.html 设只读
5. Step 5：去 tracking、跑 node scripts/visual-diff.mjs 像素比对验证
6. Step 6：替换文本 / 媒体 / 品牌色，保留 DNA

使用场景与人群

适合：前端工程师做网站迁移 / 离线备份；产品经理想「抄」竞品交互做原型；设计师想拆解高难度 WebGL 站点的特效实现；独立开发者想跑通某个 demo 然后魔改成自己的项目。目标用户是有「想把一个网站真正吃透并改造」诉求的硬核用户，而不是只想看 AI 输出代码的人。

输入与输出案例

案例 1：复刻一个 React 内容站

• 输入：https://some-blog.example.com（一个 Next.js 写的技术博客）
• 输出：
• ~/projects/website-clones/some-blog-clone/（完整目录）
• NOTES.md（站点结构、设计 token、字体、配色记录）
• TEARDOWN.md（组件拆解、依赖清单）
• 一个可运行的本地 Next.js 项目，文章内容已替换成你的
• visual-diff.html（原站 vs 复刻的像素差异报告）

案例 2：逆向一个 WebGL 玻璃弹珠 demo

• 输入：复刻 chiuhans111/marbles 的玻璃弹珠交互
• 输出：
• recon/（DOM / 框架 / 资源嗅探结果）
• mirror/（完整部署资产，含 .wasm / .sog / .buf）
• RECON/marbles-effect.md（每一种玻璃折射特效的证据等级：SOURCE / PARTIAL / GUESS）
• design-dna.json（玻璃质感 + 光线追踪算法 + SVG 滤镜链的三维 DNA）
• 一个可运行的本地版本，弹珠可换成你想要的任何图片（保持玻璃质感）

GitHub: https://github.com/Jane-xiaoer/claude-skill-web-clone