Claude Skill
Jane-xiaoer/claude-skill-web-clone
一种 Claude Code 技能,通过真实源码和逆向工程忠实克隆任意网站(静态、React、WebGL),避免 AI 幻觉。
概览
仓库信息
安装这个 Skill
git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~/.claude/skills/web-cloneRegistry 信息
项目简介
一种忠实克隆任意网站(静态、React 或 WebGL)的方法论——不复制 AI 幻觉代码,坚持真实源码优先。
Methodology for faithfully cloning any website (static / React / WebGL) — without copying AI-hallucinated code. Real source first.
要点
- 真实源码优先,避免 AI 幻觉
- 支持静态、React 和 WebGL 网站
- 逆向工程方法论,实现忠实克隆
- 作为 Claude Code 技能设计,支持自动化
- 注重准确性和可复现性
使用场景
- 克隆静态网站用于离线或存档
- 复制基于 React 的 Web 应用以学习
- 高保真复现 WebGL 体验
- 从现有网站搭建开发环境
- 教授网站克隆与逆向工程技术
README 摘要
# 🪞 Web Clone · 网站复刻方法论 > Reproduce any website — from a single-file static page to a WebGL-heavy interactive demo — without faking it from AI hallucinations. > 把任何一个网站(从单文件静态页到 WebGL 重前端 demo)忠实复刻出来 —— 不靠 AI 臆测代码硬抄。 **English** · [中文](#中文) --- ## What this skill does You see a website you love. You want to clone it — to learn how it works, to remix it into your own thing, or to run it offline. AI tools love to produce *plausible-looking* "clone analysis" documents full of code blocks that are entirely fabricated and break the moment you run them. This skill is a **methodology plus executable probes that put real source first**, with a 6-step decision tree covering: - Static HTML/CSS sites → `wget --mirror` - React / Vue / Next content sites → rebuild on a template - Multi-page sites → crawl internal routes before designing templates - Interactive sites → record hover / click / scroll / canvas-drag states before cloning - **WebGL / Canvas / Three.js heavy frontends** → reverse-engineer real source, line by line; when there's no findable source, runtime frame-capture + a **baseline-first replay gate** with `SOURCE / PARTIAL / GUESS` evidence grading - **Static-built sites (Astro / Vite SSG / Hugo), even WebGL-heavy** → `mirror-site.mjs` full-scroll-captures and mirrors every deployed asset (incl. runtime-fetched `.sog/.buf/.wasm`) for a true 1:1 clone — for a static site, "get the real source" = "mirror the whole deployed bundle" - Verify in a real browser, document the truth, replace content with yours - **Visual / rebrand modes** → distill a versionable `design-dna.json` (design tokens + style + effects), then "keep the DNA, swap the content" ## Iron rule: real source first, never copy AI-guessed code > Any AI-written "clone analysis" — treat the conceptual sk