### [ai-website-cloner-template：AI 一键克隆任意网站，26K+ Stars 让网站逆向工程变得全自动](https://www.willai.cc/article/3397)

**Published:** 2026-07-06T23:57:20

**Author:** hiyoho

**Excerpt:** ai-website-cloner-template：用 AI 编程助手一键克隆任意网站 📌 项目简介 ai-website-cloner-template 是一个可复用的开源模板，让你用一条命令、借助任意 AI 编程助手，将任何网站逆向工

ai-website-cloner-template：用 AI 编程助手一键克隆任意网站

## 📌 项目简介

**ai-website-cloner-template** 是一个可复用的开源模板，让你用一条命令、借助任意 AI 编程助手，将任何网站逆向工程为干净、现代的 Next.js 代码库——相当于给 AI 下了个「克隆这个网站」的指令，它就能把设计令牌、组件结构、交互逻辑全部还原出来。

**⭐ GitHub Stars：**26,229+  
**🏷️ 开源许可：**MIT（免费商用）  
**💻 主要语言：**TypeScript（Next.js 16 + React 19）  
**🤖 支持 AI 助手：**13 款（Claude Code / Codex / Cursor / Windsurf 等）

## ⚙️ 安装要求和过程

### 环境要求

-   **Node.js 24+**（必需，项目使用 Next.js 16 App Router）
-   **一个 AI 编程助手**（推荐 Claude Code，也支持 Codex CLI / Cursor / Windsurf 等 13 款）
-   **Git**（用于多 worktree 并行开发）

### 快速安装步骤

1.  **从模板创建自己的仓库**  
    在 GitHub 页面点击 `Use this template` → `Create a new repository`
2.  **克隆到本地**
    
    ```
    git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
    cd YOUR-NEW-REPOSITORY
    ```
    
3.  **安装依赖**
    
    ```
    npm install
    ```
    
4.  **启动 AI 助手（推荐 Claude Code）**
    
    ```
    claude --chrome
    ```
    
5.  **开始克隆网站！**
    
    ```
    /clone-website https://example.com
    ```
    

**Docker 方式（可选）：**

```
docker compose up app --build   # 构建并运行应用
docker compose up dev --build    # 开发模式，端口 3001
```

## 🌟 核心功能

### ① 13 款 AI 编程助手全覆盖

无论你用的是哪款 AI 编程工具，都能直接上手。支持 **Claude Code、Codex CLI、OpenCode、GitHub Copilot、Cursor、Windsurf、Gemini CLI、Cline、Roo Code、Continue、Amazon Q、Augment Code、Aider** 共 13 款，真正做到了「一次配置，到处运行」。

### ② 五阶段智能流水线

克隆过程被精心设计为五个阶段，模拟专业前端工程师的工作流：

-   **侦察阶段**：自动截图、提取设计令牌（颜色/字体/间距）、扫描交互行为（滚动/点击/悬停/响应式）
-   **基础构建**：更新字体、颜色、全局样式，下载所有静态资源
-   **组件规格**：为每个组件编写详细规格文件（含精确 CSS 计算值、状态、行为、内容）
-   **并行构建**：在独立 git worktree 中分派多个构建代理，每个代理负责一个 section/component，极大加速生成
-   **组装与 QA**：合并 worktree，连接页面，与原始网站进行视觉差异对比

### ③ 多 URL 并行处理

传入多个 URL，系统自动并行处理，每个站点输出隔离，互不干扰。非常适合克隆拥有多个子页面的完整网站。

```
/clone-website https://example.com https://example.com/about https://example.com/pricing
```

### ④ 单一真相来源架构

采用 `AGENTS.md` 和 `.claude/skills/clone-website/SKILL.md` 作为源文件，通过同步脚本自动生成各平台（Claude Code / Cursor / Windsurf 等）的配置文件，避免多平台维护的噩梦。

```
bash scripts/sync-agent-rules.sh   # 重新生成代理指令文件
node scripts/sync-skills.mjs       # 重新生成所有平台的 /clone-website 技能
```

### ⑤ 生产级技术栈

生成的代码库本身就是高质量成品：

-   **Next.js 16**（App Router）+ **React 19** + **TypeScript strict**
-   **shadcn/ui**（Radix primitives）+ **Tailwind CSS v4**
-   **Lucide React** 图标（克隆时自动替换为提取的 SVG）
-   内置 `npm run check`（lint + typecheck + build）完整质量检查链

## 🚀 典型使用场景

### 场景一：平台迁移

你的网站跑在 WordPress / Webflow / Squarespace 上，想迁移到现代化的 Next.js 技术栈，但舍不得原有的设计和交互细节。**ai-website-cloner-template** 可以完整克隆原站的外观和交互，生成一个干净的 Next.js 项目，你可以在此基础上继续开发，告别笨重的旧平台。

### 场景二：丢失源码的网站恢复

网站还在运行，但代码库早已丢失（或者前开发者跑路了）。只要网站还能访问，就能用它逆向生成完整的 Next.js 源码。虽然不能保证 100% 还原（特别是复杂的后端交互），但前端部分可以还原到惊人的精度。

### 场景三：学习生产级前端实现

看到一个网站的布局、动画或响应式实现特别惊艳，想研究它是怎么做的？与其对着 DevTools 一行行扒代码，不如直接让 AI 克隆一份，然后在生成的代码库里慢慢研究。相当于有了一个「可运行的解构说明书」。

## 💡 推荐理由

作为前端开发者，我曾经多次遇到「这个网站的某个交互效果真好，我想知道它是怎么实现的」的情况。传统做法是在浏览器 DevTools 里对着压缩过的 CSS 和 JS 猜谜，效率低得令人发指。

**ai-website-cloner-template 最让我惊艳的地方**在于它把「克隆网站」这个复杂任务分解成了 AI 助手真正擅长的子任务：侦察、提取设计令牌、编写组件规格、并行构建。整个流程设计得非常专业，不是简单的「让 AI 写代码」，而是模拟了一个资深前端工程师的工作流程。

特别值得一提的是 **并行构建** 阶段——它利用 git worktree 让多个 AI 代理同时工作，每个代理负责不同的组件，最后再合并。这个设计既聪明又实用，大大缩短了等待时间。

当然，这个项目也有局限性：它主要处理前端部分，动态后端逻辑无法完整还原；对于高度依赖状态的复杂 SPA，还原精度会有所下降。但作为**「前端快速原型 + 设计逆向学习」**工具，它已经远超我的预期。

如果你正在考虑从旧平台迁移、需要快速做网站原型、或者单纯想学习优秀网站的前端实现，这个项目绝对值得一试。

**⚠️ 使用提醒：**请遵守法律法规和网站服务条款。不要将克隆的网站用于钓鱼、冒充或侵犯他人知识产权。项目作者也明确列出了不允许的用途。

## 📥 下载地址

-   🌐 **在线体验**：[https://ai-website-cloner-template.vercel.app/](https://ai-website-cloner-template.vercel.app/)
-   🐙 **GitHub 仓库**：[https://github.com/JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)（26,229+ ⭐）
-   📖 **使用文档**：仓库 README 包含完整的使用说明和技巧
-   💬 **社区支持**：GitHub Issues / Discussions

* * *

本文由 AI 自动生成 · 数据来源 GitHub Trending · 如有错误或遗漏欢迎指正

**Tags:** AI, AI Agent, ai-website-cloner, AI开源项目, AI编程, Claude Code, LLM, MIT许可, Next.js, TypeScript

**Categories:** 开源项目

---