JCodesMore/ai-website-cloner-template 来源：https://github.com/JCodesMore/ai-website-cloner-template

AI 网站克隆模板

一个可复用的模板，用于通过 AI 编码代理将任意网站逆向工程为干净、现代的 Next.js 代码库。

推荐：Claude Code（https://docs.anthropic.com/en/docs/claude-code）搭配 Opus 4.7 以获得最佳效果——但也可与多种 AI 编码代理配合使用。将代理指向一个 URL，运行 /clone-website，你的 AI 代理就会检查网站、提取设计令牌和资源、编写组件规范，并调度并行构建器重建每个部分。

演示

观看演示（https://youtu.be/O669pVZ_qr0）

点击上方图片在 YouTube 上观看完整演示。

快速开始

**重要提示：**请先使用 GitHub 的 Use this template 按钮创建你自己的副本。不要直接克隆此模板仓库用于你的网站项目，也不要将生成的网站提交拉取请求到此仓库。

1. 从此模板创建你自己的仓库
   在该项目的 GitHub 页面上，点击 Use this template，然后点击 Create a new repository。为你的新仓库命名，选择公开或私有，然后点击 Create repository。如果 GitHub 显示 Include all branches 选项，可以保持不勾选。这样你就拥有了自己独立的工作项目，网站修改会保留在你的账户中，而不会回到主模板。

2. 在你的电脑上打开新仓库
   GitHub 创建副本后，打开那个新仓库。点击 Code，用你偏好的编码工具打开或克隆你的新仓库。如果使用终端，命令如下：

   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 [<url> ...]
   

6. 自定义（可选）——基础克隆构建完成后，按需修改

使用不同的代理？打开 AGENTS.md 查看项目说明——大多数代理会自动读取它。

支持的平台

前提条件

• Node.js（https://nodejs.org/）24+
• 一个 AI 编码代理（参见支持的平台）

技术栈

• Next.js 16 — App Router、React 19、TypeScript 严格模式
• shadcn/ui — Radix 原语 + Tailwind CSS v4
• Tailwind CSS v4 — oklch 设计令牌
• Lucide React — 默认图标（克隆期间会被提取的 SVG 替换）

工作原理

/clone-website 技能运行一个多阶段流水线：

1. 侦察 —— 截图、设计令牌提取、交互扫描（滚动、点击、悬停、响应式）
2. 基础 —— 更新字体、颜色、全局样式，下载所有资源
3. 组件规范 —— 编写详细的规范文件（docs/research/components/），包含精确的计算 CSS 值、状态、行为和内容
4. 并行构建 —— 在 git 工作树中调度构建代理，每个区域/组件一个
5. 组装与质量检查 —— 合并工作树、组装页面、与原始页面进行视觉差异对比

每个构建代理接收完整的组件规范，包含精确的 getComputedStyle() 值、交互模型、多状态内容、响应式断点和资源路径。无需猜测。

使用场景

• 平台迁移 —— 将你拥有的网站从 WordPress/Webflow/Squarespace 重构为现代 Next.js 代码库
• 丢失源码 —— 你的网站仍在运行，但仓库丢失、开发者离职或技术栈过时。以现代格式找回代码
• 学习 —— 通过处理真实代码，解构生产网站如何实现特定布局、动画和响应式行为

不适用于

• 钓鱼或冒充 —— 本项目不得用于欺骗、冒充或任何违法活动。
• 将他人的设计据为己有 —— 标志、品牌资源和原创内容归其所有者所有。
• 违反服务条款 —— 部分网站明确禁止抓取或复制。请先检查。

项目结构

src/
  app/           # Next.js 路由
  components/    # React 组件
    ui/          # shadcn/ui 原语
    icons.tsx    # 提取的 SVG 图标
  lib/
    utils.ts     # cn() 工具函数
  types/         # TypeScript 接口
  hooks/         # 自定义 React 钩子
public/
  images/        # 从目标网站下载的图片
  videos/        # 从目标网站下载的视频
  seo/           # 网站图标、OG 图片
docs/
  research/      # 提取输出与组件规范
    design-references/  # 截图
scripts/
  sync-agent-rules.sh   # 重新生成代理指令文件
  sync-skills.mjs       # 为所有平台重新生成 /clone-website
AGENTS.md        # 代理指令（单一事实来源）
CLAUDE.md        # Claude Code 配置（引入 AGENTS.md）
GEMINI.md        # Gemini CLI 配置（引入 AGENTS.md）

命令

npm run dev         # 启动开发服务器
npm run build       # 生产构建
npm run lint        # ESLint 检查
npm run typecheck   # TypeScript 检查
npm run check       # 运行 lint + typecheck + build

如果使用 Docker

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

更新其他平台

两个单一事实来源文件驱动所有平台支持。编辑源文件，然后运行同步脚本：

每个脚本会自动重新生成平台特定的副本。原生读取源文件的代理无需重新生成。

Star 历史

Star 历史图表（https://star-history.com/#JCodesMore/ai-website-cloner-template&Date）

许可证

MIT