官方仓库：https://github.com/JCodesMore/ai-website-cloner-template

这是一个专为 AI 编程 Agent 设计的网站克隆模板。你只需给 AI 一个目标网站 URL，它就能按照预设工作流，把网站逆向工程成干净、现代化的 Next.js 应用。

核心口号：“Clone any website with one command using AI coding agents”

推荐使用 Claude Code + Opus 效果最佳，同时也支持 Cursor、Codex、Gemini、Windsurf、Cline、Roo Code 等主流 AI 编程工具。

核心特点

  • 一键克隆：给 AI 一个 URL，自动完成侦察 → 基础搭建 → 组件规格 → 并行构建 → 组装与 QA
  • 干净代码输出：生成标准 Next.js 16 + React 19 + TypeScript 项目
  • 现代技术栈：
    • Next.js 16（App Router）
    • shadcn/ui + Tailwind CSS v4
    • Lucide React 图标（克隆过程中会被真实 SVG 替换）
  • 多平台支持：适配 10+ 主流 AI Agent（Claude Code、Cursor、Codex、Gemini、Windsurf、Cline 等）
  • 多页面支持：可同时克隆多个 URL，且后续克隆不会覆盖已有页面
  • Docker 支持：提供开发和生产环境的 Docker 配置
  • 真实内容优先：尽量使用原站真实文本和资源，而不是占位符

快速开始

  1. 使用模板创建自己的仓库（重要！）

    • 在 GitHub 页面点击 Use this template → Create a new repository
    • 不要直接 clone 原仓库来做项目

  2. 克隆你自己的新仓库：

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

  3. 安装依赖：

    1
    npm install

  4. 启动 AI Agent（推荐 Claude Code）：

    1
    claude --chrome

  5. 对 AI 说：

    1
    Clone https://example.com using the clone-website workflow

    或直接使用技能命令 /clone-website <url>

工作流程（5 个阶段）

  1. Reconnaissance（侦察）— 分析目标网站结构、样式、资源
  2. Foundation（基础）— 搭建项目基础
  3. Component Specs（组件规格）— 定义组件细节
  4. Parallel Build（并行构建）— 同时构建多个组件
  5. Assembly and QA（组装与质量检查）— 最终整合与优化

支持的 AI 平台

平台 状态
Claude Code 强烈推荐
Codex CLI 支持
Cursor 支持
Windsurf 支持
Gemini CLI 支持
Cline / Roo Code 支持
GitHub Copilot 支持
OpenCode 支持
Continue 支持
Amazon Q 支持
其他 持续扩展中

技术栈

  • 框架：Next.js 16（App Router）+ React 19 + TypeScript
  • UI：shadcn/ui + Tailwind CSS v4（oklch 设计令牌）
  • 图标：Lucide React（克隆时会被真实 SVG 替换）
  • 部署：适合 Vercel 等平台

总结：这是一个非常实用的 AI 驱动网站逆向工程模板。它把“用 AI 克隆网站”这件事变成了标准化、可重复的工作流，生成的代码质量较高，适合快速原型、学习、或作为二次开发的起点。