AI网站克隆器

AI Website Cloner Template

一句话介绍： 一条命令克隆任何网站——给 AI 编程 Agent 一个 URL，它会把目标网站重建成一个干净的 Next.js 应用。

📖 介绍

AI Website Cloner Template 是一个 GitHub 模板项目，由 JCodesMore 创建。它的核心能力是：输入一个网站 URL，AI Agent 自动截图、提取设计 token、分析交互行为，然后并行构建出完整的 Next.js 项目。

支持 Claude Code（推荐 Opus 5）、Codex、Cursor、Gemini CLI、Windsurf 等 12+ 个 AI 编程平台。GitHub 星标 33.9k，Fork 5k，MIT 开源协议。

✨ 亮点

1. 一条命令克隆：/clone-website <url> 即可启动完整克隆流程
2. 多阶段流水线：侦察 → 基础搭建 → 组件规格 → 并行构建 → 组装 QA
3. 精确还原：使用 getComputedStyle() 提取真实 CSS 值，不是猜测
4. 并行构建：每个组件/区块在独立 git worktree 中并行构建，效率高
5. 多平台支持：12+ 个 AI 编程平台，一套技能文件自动同步
6. 视觉对比：构建完成后自动与原站进行视觉 diff 检查
7. 模板机制：GitHub Template 仓库，一键 fork 到自己账号

🎯 核心功能

🌍 应用场景

• 平台迁移：把 WordPress/Webflow/Squarespace 网站迁移到 Next.js
• 源码丢失：网站在线但代码没了，用这个把代码"逆向"回来
• 学习研究：拆解生产级网站的布局、动画、响应式实现方式
• 快速原型：基于现有网站快速搭建自己的版本

👥 实用人群

• 前端开发者：需要迁移或重构现有网站
• 独立开发者：快速搭建网站原型
• AI 编程用户：使用 Claude Code、Cursor 等 Agent 的开发者
• 学习者：想研究生产级网站的实现方式

🔧 使用方法

第一步：Fork 模板
在 GitHub 点击 "Use this template" 创建自己的仓库。

第二步：克隆到本地

git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
cd YOUR-NEW-REPOSITORY
npm install

第三步：启动 AI Agent

claude --chrome

第四步：运行克隆

/clone-website https://target-website.com

📝 总结评价

这是一个非常聪明的项目。它把"网站克隆"这件事变成了一个标准化的多阶段流水线，从侦察到构建到 QA 都有明确的流程。并行构建和视觉 diff 是亮点，确保了还原质量。对于需要迁移网站或学习生产级代码的人来说，这是个很好的工具。但要注意版权问题，只克隆你有权使用的网站。

GitHub： https://github.com/JCodesMore/ai-website-cloner-template