用 AI 一键克隆任何网站:这个 2.5 万 Star 的模板到底怎么用

看到一个漂亮的网站，想参考它的设计，但源码不公开、技术栈不明，只能手动截图对比？

自己的老项目还在用 WordPress/Webflow，想迁移到现代框架，但重写成本太高？

有个工具能解决这个问题：用 AI coding agent 直接把任何网站"克隆"成干净的 Next.js 代码。像素级还原——包括样式、动画、响应式布局，甚至交互行为。

项目卡片

• 项目：AI Website Cloner Template^[1]
• 状态：v0.3.1 / 25.2k Star / 2026 年 3 月创建，持续活跃
• 一句话判断：用 AI agent 逆向工程任何网站到 Next.js 的标准化模板，推荐配合 Claude Code 使用

传统方式"复刻"一个网站，你需要：

1. 手动截图、量尺寸、取色值
2. 逐个组件手写 HTML/CSS
3. 不断对比原站调整细节
4. 处理响应式、动画、交互状态

整个过程耗时且容易遗漏。这个模板的做法完全不同：它把"逆向工程"标准化成一套 AI 可执行的流水线。

你给它一个 URL，它会：

• 自动截图、提取设计 Token（颜色、字体、间距）
• 生成组件规范文件（精确到 getComputedStyle() 的值）
• 派遣多个 builder agent 并行构建各组件
• 最后组装、合并、做视觉 QA

整个过程是自动化的、可审计的、可并行的。

我第一次用这个工具时，先试了一个简单的着陆页。结果出乎意料地好——连 hover 状态的过渡动画都还原了。下面是具体步骤：

第 1 步：用模板创建你的仓库

去 GitHub 页面点 Use this template，创建你自己的仓库。不要直接 clone 模板仓库——模板是上游，你的项目是独立的。

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

第 2 步：安装依赖

npm install

要求 Node.js 24+。技术栈是 Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui。

第 3 步：启动 AI agent

推荐使用 Claude Code：

claude --chrome

--chrome 参数是关键——它让 Claude 能通过浏览器 MCP 工具实际访问目标网站。

第 4 步：运行克隆命令

/clone-website https://example.com

支持同时传入多个 URL，并行处理。

第 5 步：等待并检查结果

Claude 会自动执行多阶段流水线。完成后你得到的是一个可以直接 npm run dev 运行的 Next.js 项目。

这个模板的核心是一套 5 阶段流水线。我一开始以为就是简单的截图+模仿，但深入了解后发现它的设计比我想象的要精细得多：

阶段 1：侦察 — Claude 用浏览器工具访问目标网站，截取全页截图、提取设计 Token（字体、颜色、间距）、下载所有资源、执行交互扫描（滚动、点击、悬停）。关键是完整性——漏掉一个 hover 状态或响应式断点，后面就要返工。

阶段 2：基础构建 — 把提取到的设计 Token 写入项目：更新 globals.css、配置字体、创建 TypeScript 类型定义、提取 SVG 图标为 React 组件。

阶段 3：组件规范与派遣 — 最核心的循环。对页面每个区块：用 getComputedStyle() 提取精确 CSS 值 → 生成规范文件 → 派遣独立的 builder agent 在 worktree 中构建。关键原则：小任务，完美结果。

阶段 4：页面组装 — 所有组件构建完成后，在 page.tsx 中组装，实现页面级布局和交互。

阶段 5：视觉 QA — 原站 vs 克隆的并排截图对比，测试所有交互，验证响应式表现。

模板支持多种 AI agent：Claude Code（推荐）、Codex CLI、OpenCode、GitHub Copilot、Cursor、Windsurf、Gemini CLI、Cline 等。

README 明确推荐 Claude Code + Opus 4.7。我试过用 Cursor 跑同样的任务，结果在处理复杂的滚动交互时丢了不少细节。如果你追求像素级还原，还是用 Claude Code 靠谱。

用了几次之后，我踩过一些坑，分享出来：

浏览器 MCP 是必须的 — 这个工具必须配合浏览器 MCP 工具使用。Claude Code 的 --chrome 参数就是为了解决这个问题。

复杂网站需要拆分处理 — 如果目标网站有多个页面、复杂的交互状态，一次克隆可能不够。建议先克隆单个页面，检查结果后再决定是否需要更多页面。

不是所有网站都能完美克隆 — 高度依赖后端逻辑的动态内容、使用 Canvas/WebGL 的特殊渲染、复杂的认证逻辑、反爬虫机制，这些都可能导致结果不理想。

克隆 ≠ 可以直接商用 — 模板明确声明：不能用于钓鱼、冒充、或违反目标网站 ToS 的行为。克隆结果应该用于学习优秀的设计实现、迁移你自己拥有的网站。

Node.js 版本要求高 — 需要 Node.js 24+。我第一次用的时候就是因为 Node 版本不够，折腾了半天。

这个工具最适合三类人：

前端开发者：想学习优秀网站的实现细节，但不想手动扒代码。

产品经理/设计师：想快速验证某个设计在代码层面是否可行。

网站迁移者：想把老网站迁移到现代技术栈。我有个朋友就是用这个工具把一个 2018 年的 WordPress 站迁移到了 Next.js，省了至少两周的重写时间。

模板预置的技术栈：Next.js 16（App Router）、React 19、TypeScript（strict 模式）、Tailwind CSS v4（oklch 色彩空间）、shadcn/ui（Radix 原语）。

代码风格要求：PascalCase 组件、camelCase 工具函数、Tailwind 工具类、2 空格缩进、移动端优先。

项目结构：src/ 放路由和组件，public/ 放下载的图片和资源，docs/ 放提取的输出和组件规范。

这个模板的价值不在于它能"自动克隆网站"——这个说法容易让人以为是某种黑魔法。它的真正价值在于：

1. 标准化了逆向工程的流程：从截图到组件规范到并行构建，每一步都有明确的输入输出
2. 让 AI agent 做它最擅长的事：精确的 CSS 提取、规范文件生成、并行构建
3. 结果是可审计的：每个组件都有规范文件，出问题可以追溯到是提取错误还是构建错误

如果你有需要参考或迁移的网站，这个工具值得一试。但记住：它是工具，不是魔法。好的结果需要你理解它的工作方式，并在必要时介入调整。

我用这个工具克隆过几个网站，效果最好的是那些静态内容多、交互简单的着陆页。复杂的单页应用（SPA）效果一般，特别是那些有很多动态状态的组件。建议先从简单的页面开始试，熟悉了工作流之后再挑战复杂场景。

相关链接：

• GitHub 仓库^[2]
• YouTube 演示^[3]
• Discord 社区^[4]

这里会继续拆真实可用的开发者工具：少讲概念，多看入口、成本和坑点。你只需要判断一件事——它值不值得放进自己的工作流。

引用链接