AI Website Cloner：一行命令用 AI 克隆任意网站为 Next.js 项目

ai-website-cloner-template 是一个开源的 AI 驱动网站克隆模板，由 JCodesMore 开发维护。给定一个 URL，AI agent 会自动截取页面、提取设计 token、生成组件规格文件，然后用 git worktrees 并行构建出完整的 Next.js 代码。项目在 GitHub 上已获得 16.5k stars，采用 MIT 协议。

核心特性

• 一行命令克隆网站：/clone-website <url> 启动完整的多阶段克隆流程
• 15+ AI Agent 支持：Claude Code（推荐）、Codex CLI、Cursor、Windsurf、Gemini CLI、Cline、GitHub Copilot 等
• 多阶段 Pipeline：侦察 → 基础设施 → 组件规格 → 并行构建 → 组装质检
• Git Worktrees 并行构建：每个区块由独立的 builder agent 在 worktree 中同时开发，互不干扰
• 精确的 CSS 还原：通过 getComputedStyle() 提取精确的计算样式值，不是猜的

技术栈

• Next.js 16 — App Router、React 19、TypeScript strict
• shadcn/ui — Radix 原语 + Tailwind CSS v4
• Tailwind CSS v4 — oklch 设计 token
• Lucide React — 默认图标（克隆时替换为提取的 SVG）

工作原理

/clone-website 技能执行多阶段 pipeline：

侦察（Reconnaissance）：截取页面截图、提取设计 token、交互扫描（滚动、点击、悬停、响应式）。

基础设施（Foundation）：更新字体、颜色、全局样式，下载所有资源。

组件规格（Component Specs）：写入详细的规格文件，包含精确的计算 CSS 值、状态、行为和内容。

并行构建（Parallel Build）：在 git worktrees 中分发 builder agent，每个区块/组件一个。每个 builder 收到完整的组件规格——精确的样式值、交互模型、多状态内容、响应式断点和资源路径。

组装与质检（Assembly & QA）：合并 worktrees，组装页面，与原站进行视觉 diff。

快速开始

不直接 clone 模板仓库，而是用 GitHub 的 "Use this template" 创建自己的副本：

# 在 GitHub 上点击 Use this template → Create a new repository

# 克隆你的新仓库
git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git
cd YOUR-REPO

# 安装依赖
npm install

# 启动 Claude Code（推荐）
claude --chrome

# 运行克隆命令
/clone-website https://target-website.com

支持同时克隆多个 URL：/clone-website <url1> <url2> ...

支持的 AI Agent

使用场景

• 平台迁移：从 WordPress/Webflow/Squarespace 重建到现代 Next.js
• 源码丢失：网站在线但代码没了，用 AI 逆向还原
• 学习研究：拆解生产站点如何实现特定布局、动画和响应式行为

项目结构

src/
  app/              # Next.js 路由
  components/       # React 组件
    ui/             # shadcn/ui 原语
    icons.tsx       # 提取的 SVG 图标
  lib/utils.ts      # cn() 工具函数
  types/            # TypeScript 接口
  hooks/            # 自定义 React Hooks
public/
  images/           # 下载的目标站图片
  videos/           # 下载的视频
docs/
  research/         # 提取输出和组件规格
  design-references/ # 截图
scripts/
  sync-agent-rules.sh  # 重新生成 agent 指令文件
  sync-skills.mjs      # 重新生成所有平台的 /clone-website

AGENTS.md 是所有 agent 的单一事实来源，其他平台的配置文件（CLAUDE.md、GEMINI.md 等）都从它同步生成。

项目链接

• GitHub 仓库：JCodesMore/ai-website-cloner-template
• Discord：dsc.gg/jcodesmore