【AI建站神器】一键克隆任意网站为现代Next.js代码，程序员必备

网站源码丢失了？想把WordPress网站迁移到现代技术栈？想学习某个网站的实现细节但苦于没有源码？

现在，一行命令就能把任意网站”克隆”成一个干净的、现代的Next.js代码库。

AI Website Cloner Template是一个开源模板项目，让AI编程工具可以自动分析任意网站并重建为Next.js代码。

一、项目介绍

AI Website Cloner Template由开发者JCodesMore创建，是一个可复用的模板项目，用于将任意网站逆向工程为干净的现代Next.js代码库。GitHub已获得11000+星，支持12种AI编程工具。

它的工作方式很简单：告诉AI要克隆哪个URL，运行/clone-website命令，AI就会自动完成所有工作——检查网站、提取设计规范、下载资源、编写组件规格、并行构建，最后组装成一个完整的Next.js项目。

二、支持平台

推荐使用Claude Code（建议 Opus 4.6），同时也支持：
Codex CLI、OpenCode、GitHub Copilot、Cursor、Windsurf、 Gemini CLI、Cline、Roo Code、Continue、Amazon Q、Augment Code、Aider

基本上主流AI编程工具都可以使用。

三、技术栈

Next.js 16（App Router, React 19, TypeScript strict）
shadcn/ui（Radix primitives + Tailwind CSS v4）
Tailwind CSS v4（oklch设计令牌）
Lucide React（默认图标，克隆时会被提取的SVG替换）

四、工作流程

第一步：Reconnaissance（侦察）
AI截取网站截图、提取设计令牌（颜色、字体、间距等）、进行交互探测（滚动、点击、悬停、响应式）。

第二步：Foundation（基础搭建）
更新字体、颜色、全局样式，下载所有网站资源。

第三步：Component Specs（组件规格）
AI编写详细的组件规格文件，包含精确的getComputedStyle()值、交互模型、多状态内容、响应式断点和资源路径。

第四步：Parallel Build（并行构建）
在Git worktree中启动多个builder代理，每个负责一个区域/组件的构建。

第五步：Assembly & QA（组装与质量检查）
合并worktree，对接页面，拿原始网站做视觉对比检查。

五、安装步骤

1. 克隆仓库
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone

2. 安装依赖
npm install

3. 启动AI编程工具
推荐Claude Code：
claude --chrome

4. 运行克隆命令
/clone-website <目标URL1> [<目标URL2> ...]

5. 按需定制
基础克隆完成后，可以自由修改。

前提条件：Node.js 24+

六、适用场景

平台迁移：把WordPress/Webflow/Squarespace网站迁移到现代Next.js技术栈
源码恢复：网站在线但源码丢失、开发者离职、或者技术栈过于老旧，直接拿到现代格式的源码
学习研究：深入了解某个生产网站的布局实现、动画效果、响应式处理方式

七、注意事项

这个工具仅供学习和合法迁移使用：
禁止用于钓鱼或冒充
禁止将他人的设计据为己有
禁止侵犯某些网站明确禁止的使用条款

八、开源协议

使用MIT协议开源。

项目地址：https://github.com/JCodesMore/ai-website-cloner-template

如果你需要快速获取某个网站的现代实现代码，或者经常需要做网站迁移工作，这个工具会大大提升效率。