AI Website Cloner Template：用 AI Agent 把网页逆向成 Next.js 项目
摘要
AI Website Cloner Template 是一套面向 AI 编程 Agent 的网站逆向与重建模板，可从目标 URL 提取设计、交互和资源，再生成可维护的 Next.js 项目，并支持 Claude Code、Codex、Cursor、Gemini CLI 等多种工具。
本文目录
AI Website Cloner Template是 JCodesMore开源的一套网站逆向与重建模板。它不是简单抓取 HTML的“网页复制器”，而是把目标网站交给 AI编程 Agent，先分析页面结构、设计变量、交互状态和资源，再生成一个可继续维护的 Next.js项目。对需要迁移旧站、恢复遗失源码，或者研究成熟网站前端实现的人来说，这种“先研究、再重建”的工作流比一次性生成页面更有实际价值。
项目目前已经获得超过3万 GitHub Star，并采用 MIT License。官方推荐 Claude Code搭配 Opus 5，但同时兼容 Codex CLI、OpenCode、GitHub Copilot、Kiro、Cursor、Windsurf、Gemini CLI、Cline、Roo Code、Continue、Amazon Q和 Augment Code等多种 Agent环境。
它解决的不是“截图转代码”这么简单
这套模板的核心入口是 `/clone-website`。用户给出一个或多个目标 URL后，Agent会按固定流程推进，而不是直接让模型凭视觉印象写页面。项目把整个过程拆成侦察、基础环境、组件规格、并行构建、装配与质量检查五个阶段。
第一阶段会收集截图、设计 token，并检查滚动、点击、悬停和响应式状态；随后整理字体、颜色、全局样式并下载页面资源。接着，它会为组件生成详细规格，记录计算后的 CSS值、交互状态、响应式断点和资源路径。真正开始编码时，不同区块可以交给多个 builder agent在 git worktree中并行实现，最后再合并页面，并通过视觉差异检查与原站做对比。
这种设计的关键点在于，它尽量把“猜”变成“有规格可查”。每个构建 Agent拿到的不只是自然语言描述，还包括具体的样式值、交互模型和资源路径，因此更适合复杂页面、多状态组件和需要持续调整的项目。
默认技术栈面向现代 Next.js项目
模板当前使用 Next.js 16、React 19和严格模式 TypeScript，UI层结合 shadcn/ui、Tailwind CSS v4与 Lucide React。项目要求 Node.js 24或更高版本，也提供 Docker相关配置。
生成后的目录并不是一个不可维护的静态快照。页面路由放在 `src/app`，组件集中在 `src/components`，图片、视频和 SEO资源落在 `public`，而分析过程产生的截图、组件规格和研究资料会保存在 `docs/research` 与 `docs/design-references`。这意味着重建完成后，开发者仍然可以按正常 Next.js项目的方式继续修改和扩展。
使用方式
项目作者明确建议先通过 GitHub的 “Use this template” 创建自己的仓库，而不是直接在模板仓库上开发。这样生成的网站代码和后续修改都会留在自己的项目里。
创建仓库并拉取到本地后，安装依赖：
npm install如果使用 Claude Code，可以启动带浏览器能力的 Agent：
claude --chrome随后执行克隆工作流：
/clone-website <target-url1> [<target-url2> ...]部分 Agent客户端不直接暴露 Slash Command，也可以用自然语言要求它按照 `clone-website` 工作流重建指定网址。项目把 Agent共用说明集中在 `AGENTS.md`，并通过脚本同步到不同平台对应的规则和 Skill文件里。
多 Agent支持是这个模板的另一层价值
很多 AI编程项目会把能力绑死在单一客户端上，而这个仓库已经为十多种 Agent工具准备了对应目录或配置。对团队来说，这减少了因为成员使用 Claude Code、Codex、Cursor或 Gemini CLI不同而重复维护提示词和工作流的问题。
项目把 Agent指令和 `/clone-website` Skill都设置了“单一事实来源”。当维护者修改核心规则后，可以运行同步脚本生成各平台需要的副本：
bash scripts/sync-agent-rules.sh
node scripts/sync-skills.mjs这种结构也让它更像一个可持续维护的 AI前端工程模板，而不只是一次性的 Prompt仓库。
适合哪些场景
官方列出的典型用途包括旧站迁移、源码丢失后的重建，以及前端学习。例如，一个仍在线运行的 WordPress、Webflow或 Squarespace网站，可以被重新整理成现代 Next.js工程；如果原项目仓库遗失，但线上页面还在，也可以先提取设计和交互信息，再重建出可维护代码。
它同样适合研究真实产品页面的实现。相比只看 DevTools，Agent可以把布局、响应式规则、动画状态、组件边界和资源路径整理成文档，再根据这些资料生成代码，学习过程会更系统。
使用前要注意版权和合规边界
“克隆网站”天然涉及品牌、版权和服务条款问题。项目 README也明确提醒，不应将它用于钓鱼、冒充、违法用途，也不应把他人的设计、Logo、品牌素材和原创文案当成自己的成果。有些网站还会明确禁止抓取或复制，使用前需要检查目标网站的条款和授权范围。
因此，这个项目更适合重建自己拥有或获得许可的网站、做技术迁移与学习研究，而不是批量复制第三方商业站点。把它理解成一套“AI Agent驱动的网站逆向工程模板”，会比单纯把它当作网页复制工具更准确。