claude-skill-web-clone
一套忠实复刻任何网站的方法论与工具集，杜绝AI幻觉代码。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：claude-skill-web-clone。 它的用途是：一套忠实复刻任何网站的方法论与工具集，杜绝AI幻觉代码。 完整的 Skill 内容见：https://321skill.com/skills/claude-skill-web-clone/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我想学习并复刻这个使用Three.js的交互式数据可视化网站，请使用Web Clone方法论指导我。’ 它会引导你首先使用`recon-site.mjs`进行侦察，获取框架和资源信号，然后根据网站类型（如判断为WebGL-heavy）进入逆向工程流程，使用`interaction-probe.mjs`记录关键交互，并强调逐行比对真实源码与AI猜测代码的区别。
介绍
当你看到一个惊艳的网站，想学习、复刻或离线运行时，AI工具常常生成看似合理但实际无法运行的“幻觉代码”。这个Skill提供了一套严谨的六步决策树方法论和配套的可执行脚本，确保你获取并基于真实的源代码进行复刻。
它覆盖从静态HTML到复杂WebGL应用的全场景：静态站点使用wget --mirror；React/Vue等内容站点通过模板重建；多页站点先爬取路由；交互式站点记录用户操作状态；对于WebGL/Canvas等重前端应用，则强调逐行逆向工程真实源码，并引入SOURCE / PARTIAL / GUESS证据分级和基线优先重放门控机制。
这套方法非常适合前端开发、全栈开发以及任何需要深度理解或复用他人网站技术实现的学习者和开发者。它尤其适合在需要精确还原视觉效果、交互逻辑或复杂前端技术栈时使用。
使用建议：始终遵循“真实源码优先”的铁律，将AI的分析仅视为概念骨架的提示。对于静态生成的站点（如Astro、Vite SSG），使用配套的mirror-site.mjs脚本可以完整捕获所有部署资源，实现真正的1:1克隆。
核心特点
核心区别在于其“真实源码优先”的铁律和配套的取证式逆向工程工具链（如证据分级、基线优先重放门控），专门针对AI在复刻复杂WebGL/Canvas应用时产生的“幻觉代码”问题，确保克隆结果与原始网站功能与性能一致。
注意事项
不适合用于直接复制受版权保护或明确禁止抓取的网站内容，且对于高度依赖服务器端逻辑或实时数据的动态网站，克隆可能不完整。
常见问题
这个Skill能克隆需要登录的网站吗？
主要针对公开可访问的资源。需要登录的网站涉及身份验证和私有数据，通常无法直接完整克隆。
和直接用浏览器的‘另存为’有什么区别？
该方法论更系统，包含交互状态记录、源码逆向、设计DNA提取等深度步骤，并能处理单页应用(SPA)和WebGL等复杂场景，而‘另存为’通常只能保存基础HTML和资源。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/claude-skill-web-clone/raw/index.md 读取 claude-skill-web-clone 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/claude-skill-web-clone/raw/index.md（查看排版版本）