网站克隆

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

推荐：使用 Claude Code 搭配 Opus 4.8 以获得最佳效果 —— 但也可与多种 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. 运行技能（skill）：

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

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

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

支持平台

代理	状态
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 技能运行一个多阶段流水线：

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    # Start dev server
npm run build  # Production build
npm run lint   # ESLint check
npm run typecheck # TypeScript check
npm run check  # Run lint + typecheck + build

如果使用 Docker

docker compose up app --build # build and run the app
docker compose up dev --build # run the app in dev mode on port 3001

更新到其他平台

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

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

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

Star History

许可证

MIT