[Github发现] AI Website Cloner Template – 用AI coding agent一键克隆任意网站为现代Next.js代码

今天介绍一个相当硬核的开源项目——它能让 AI coding agent 凭一个 URL 就能把任意网站「克隆」成干净的现代 Next.js 代码库。

它叫 AI Website Cloner Template，来自独立开发者 JCodesMore。11.4k Stars、1.6k Forks，MIT 协议开源。这个方向比较垂直，但在 AI 前端开发圈子里已经积累了不错的口碑。

相关链接

• GitHub 地址：https://github.com/JCodesMore/ai-website-cloner-template
• Discord 社区：https://dsc.gg/jcodesmore

AI Website Cloner 是什么

这是一个可复用的模板项目，用于将任意网站逆向工程为一个干净的现代 Next.js 代码库。整个过程由 AI coding agent 驱动，你只需要给出一个 URL，AI 会自动完成从页面分析到代码生成的全部工作。

官方推荐使用 Claude Code（尤其是 Opus 4.6），但项目也支持市面上主流的 AI coding agent。

核心功能

1. 一键克隆整个网站

运行一行命令即可启动克隆流程：

claude --chrome
/clone-website 

AI 会自动分析目标站点的结构、样式、交互，然后生成对应的 Next.js 组件。

2. 支持多平台 AI Agent

3. 多阶段流水线

/clone-website 技能执行一个多阶段 pipeline：

• Reconnaissance：截图、提取设计 token、交互扫描（滚动、点击、悬停、响应式）
• Foundation：更新字体、颜色、全局样式，下载所有资源
• Component Specs：编写详细规范文件，记录精确的 CSS 值、状态、行为和内容
• Parallel Build：通过 git worktree 并行调度 builder agent，每个 section/component 独立构建
• Assembly & QA：合并 worktree、对接页面、与原站进行视觉 diff

4. 精确的组件规范

每个 builder agent 都会收到完整的组件规范——包括精确的 getComputedStyle() 值、交互模型、多状态内容、响应式断点和资源路径。不会凭猜测干活。

快速部署

git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
npm install
claude --chrome
/clone-website  [target-url2 ...]

技术栈

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

适用场景

• 平台迁移：把 WordPress/Webflow/Squarespace 上的站重建为现代 Next.js 代码库
• 找回丢失的源码：站点在线但 repo 没了、开发者跑了、或者技术栈过时了
• 学习研究：通过真实代码拆解生产级站点的布局、动画和响应式实现

注意事项

• 禁止用于钓鱼或冒充——不能用于欺骗性目的
• Logo、品牌资产和原创文案属于各自所有者，不能擅自冒充
• 部分站点明确禁止抓取或复制，克隆前请先确认对方的服务条款

Docker 部署

docker compose up app --build
docker compose up dev --build

测试体验

warpnav 小编测试了这个模板项目，整体印象是上手比我想象中容易。克隆了一个简单页面跑了一遍，生成代码的结构确实比较干净。

不过实际体验下来，对复杂页面的克隆效果还有提升空间，某些样式细节会出现偏差，需要人工微调。官方推荐的 Claude Code + Opus 4.6 效果会更好，免费的模型在复杂场景下有点吃力。

适合的场景：简单页面快速迁移、源码丢失的紧急恢复、做前端开发时的参考原型。不适合对还原度要求很高的正式项目。