网站克隆

让 AI 编程智能体一条命令克隆任意网站，重建为 Next.js 代码

类型技能 30,831 星标更新 2026-07-30 许可 MIT 原仓库主页

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

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

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

演示

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

快速开始

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

从该模板创建你自己的仓库

在该项目的 GitHub 页面上，点击 Use this template，然后点击 Create a new repository。

为新仓库命名，选择公开或私有，然后点击 Create repository。如果 GitHub 显示 Include all branches 选项，可以保持关闭。

这为你提供了一个独立的项目工作空间，这样你的网站改动只会保留在你自己的账户中，而不会回到主模板。
在本地打开你的新仓库

GitHub 创建副本后，打开该新仓库。点击 Code，使用你偏好的编码工具打开或克隆新仓库。

如果使用终端，命令类似如下：
```
git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
cd YOUR-NEW-REPOSITORY
```
安装依赖
```
npm install
```
启动你的 AI 代理 — 推荐使用 Claude Code：
```
claude --chrome
```

运行技能：

/clone-website <target-url1> [<target-url2> ...]

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

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

支持的平台

Agent	状态
Claude Code	推荐 — Opus 4.8
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 严格模式
shadcn/ui — Radix 基础组件 + Tailwind CSS v4
Tailwind CSS v4 — oklch 设计令牌
Lucide React — 默认图标（克隆过程中会被提取的 SVG 替换）

工作原理

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

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

每个构建代理都会收到完整的组件规格说明（内联）——精确的 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 Hook
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

为其他平台更新

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

内容	真实来源	同步命令
项目说明	`AGENTS.md`	`bash scripts/sync-agent-rules.sh`
`/clone-website skill`	`.claude/skills/clone-website/SKILL.md`	`node scripts/sync-skills.mjs`

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

Star History

License

MIT

在 GitHub 查看完整项目