AI Website Cloner Template

项目简介

AI Website Cloner Template 是一个基于 Next.js 的项目，它把网址交给 AI 编码代理，并要求代理将网站重建为干净的应用。项目提供用于克隆网站的 skill、代理说明、按来源组织路由与资产的结构，以及用于映射、观察、构建和检查结果的对比流程。

核心功能

• 通过 AI 编码代理和 clone-website skill，用一条命令克隆网站。
• 四步工作流：将源网址映射到本地路由，观察桌面与移动页面，构建可编辑组件，并对比源页面与本地页面。
• 支持 Claude Code、Codex CLI、OpenCode 和 Cursor，其中推荐使用 Claude Code 与 Opus 5.5 以获得最佳效果。
• 基础技术栈包括 Next.js 16、React 19、TypeScript strict、shadcn/ui、Tailwind CSS v4 和 Lucide React。
• 在项目结构中按来源组织组件、提取的 SVG、图片、字体、视频、研究笔记和对比截图。
• 提供开发、生产构建、lint、类型检查、组合检查以及基于 Docker 的应用或开发运行命令。

适用场景

• 平台迁移：将自己拥有的 WordPress、Webflow 或 Squarespace 网站重建为现代 Next.js 代码库。
• 源码丢失：当仓库已不存在、开发者离开或技术栈陈旧时，以现代格式恢复线上网站。
• 学习：通过真实代码拆解生产网站如何实现特定布局、动画和响应式行为。

快速开始

• 让代理将仓库克隆到新文件夹，移除 origin remote，安装依赖并运行 npm run check，以完成项目设置。
• 或者从模板创建 GitHub 仓库，然后让代理克隆该仓库、安装依赖并运行 npm run check。
• 在启用浏览器访问的代理中打开项目，并使用目标网站网址运行 clone-website 命令。

部署与要求

• Node.js 24 或更高版本。
• AI 编码代理，例如 Claude Code、Codex CLI、OpenCode 或 Cursor。
• 代理需启用浏览器访问以进行克隆。
• Docker Compose 可构建并运行应用，或在 3001 端口以开发模式运行应用。

采用前须知

• 许可证：MIT。在使用、修改或分发项目前，请确认其具体条款。