AI 网站克隆模板 (AI Website Cloner Template)

这是一个可复用的模板，旨在利用 AI 编码智能体（AI coding agents）将任何网站反向工程并转化为干净、现代的 Next.js 代码库。

推荐配置： 为了获得最佳效果，请使用搭配 Opus 4.7 模型的 Claude Code —— 但该模板也兼容多种其他 AI 编码智能体。

只需指向一个 URL，运行 /clone-website 命令，您的 AI 智能体就会检查该网站，提取设计令牌（design tokens）和资源，编写组件规格说明，并分发并行构建任务来重构每一个部分。

演示

点击上方图片在 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  [ ...]
   

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 严格模式
• shadcn/ui — Radix 原语 + Tailwind CSS v4
• Tailwind CSS v4 — oklch 设计令牌
• Lucide React — 默认图标（在克隆过程中会被提取的 SVG 替换）

工作原理

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

1. 侦察 (Reconnaissance) — 截屏、提取设计令牌、交互扫描（滚动、点击、悬停、响应式测试）。
2. 基础建设 (Foundation) — 更新字体、颜色、全局样式，下载所有资源。
3. 组件规格 (Component Specs) — 编写详细的规格文件 (docs/research/components/)，包含精确的计算 CSS 值、状态、行为和内容。
4. 并行构建 (Parallel Build) — 在 git 工作树中分发构建器智能体，每个部分/组件对应一个。
5. 组装与 QA (Assembly & QA) — 合并工作树，连接页面，并针对原网站运行视觉差异比对。

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

使用场景

• 平台迁移 — 将您拥有的 WordPress/Webflow/Squarespace 网站重构为现代的 Next.js 代码库。
• 源代码丢失 — 您仅拥有一个在线运行的网站。