网站克隆

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

推荐：Claude Code + Opus 4.7 可获得最佳效果——但也可与多种 AI 编码代理配合使用。

指向一个 URL，运行 /clone-website，你的 AI 代理将检查网站，提取设计令牌和资源，编写组件规范，并分派并行构建器来重建每个部分。

演示

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

快速开始

重要提示： 首先使用 GitHub 的 Use this template 按钮创建你自己的副本。不要直接克隆此模板仓库用于你的网站项目，也不要在此处提交包含你生成的网站的 Pull Request。

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 <target-url1> [<target-url2> ...]

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

在使用其他代理？打开 AGENTS.md 获取项目说明——大多数代理会自动识别。

支持的平台

代理	状态
Claude Code	推荐——Opus 4.7
Codex CLI	支持
OpenCode	支持
GitHub Copilot	支持
Cursor	支持
Windsurf	支持
Gemini CLI	支持
Cline	支持
Roo Code	支持
Continue	支持
Amazon Q	支持
Augment Code	支持
Aider	支持

前提条件

• Node.js 24+
• 一个 AI 编码代理（请参见支持的平台）

技术栈

• Next.js 16 — App Router、React 19、TypeScript strict
• shadcn/ui — Radix primitives + Tailwind CSS v4
• Tailwind CSS v4 — oklch 设计令牌
• Lucide React — 默认图标（克隆过程中会被提取的 SVG 替代）

工作原理

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

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

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

使用场景

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

不适用于

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

项目结构

src/
  app/              # Next.js 路由
  components/       # React 组件
    ui/             # shadcn/ui primitives
    icons.tsx       # 提取的 SVG 图标
  lib/utils.ts      # cn() 工具函数
  types/            # TypeScript 接口
  hooks/            # 自定义 React Hooks
public/
  images/           # 从目标下载的图片
  videos/           # 从目标下载的视频
  seo/              # Favicons、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）

为其他平台更新

两个权威来源文件为所有平台提供支持。编辑源文件，然后运行同步脚本：

内容	权威来源	同步命令
项目说明	AGENTS.md	bash scripts/sync-agent-rules.sh
/clone-website 技能	.claude/skills/clone-website/SKILL.md	node scripts/sync-skills.mjs

每个脚本自动重新生成特定于平台的副本。本地读取源文件的 Agents 无需重新生成。

Star History

许可证