ai-website-cloner-template

利用 AI 编码代理（如 Claude Code）一键将任意网站逆向工程为干净、现代的 Next.js 代码库的模板。支持多阶段流水线：侦察、提取设计令牌与资产、生成组件规格、并行构建并 QA。亮点是兼容多种主流 AI 代理（Claude Code、Codex、Cursor 等），自动计算精确的 CSS 值和交互状态，省去手动反编译的繁琐。注意：不得用于钓鱼、冒充或违反目标网站服务条款。

README

AI Website Cloner Template（AI 网站克隆模板）

一个可复用的模板，用于将任何网站逆向工程为干净现代的 Next.js 代码库，借助 AI 编程 agent（智能代理）完成。

推荐：Claude Code 搭配 Opus 4.7 以获得最佳效果 —— 但也能与多种 AI 编程 agent 配合使用。

将模板指向一个 URL，运行 /clone-website，你的 AI agent 将检查网站、提取设计令牌（design tokens）和资源、编写组件规格说明，并分派并行构建器重建每个部分。

Demo（演示）

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

Quick Start（快速开始）

重要提示： 请先通过 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 agent —— 推荐 Claude Code：
```
claude --chrome
```

运行技能：

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

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

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

Supported Platforms（支持的平台）

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

Prerequisites（前置条件）

Node.js 24+
一个 AI 编程 agent（参见支持的平台）

Tech Stack（技术栈）

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

How It Works（工作原理）

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

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

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

Use Cases（使用场景）

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

Not Intended For（不适用于）

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

Project Structure（项目结构）

src/
  app/              # Next.js 路由
  components/       # React 组件
    ui/             # shadcn/ui 原语
    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  # 重新生成 agent 指令文件
  sync-skills.mjs      # 为所有平台重新生成 /clone-website 技能
AGENTS.md           # Agent 指令（单一事实来源）
CLAUDE.md           # Claude Code 配置（导入 AGENTS.md）
GEMINI.md           # Gemini CLI 配置（导入 AGENTS.md）

Commands（命令）

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

Updating for Other Platforms（为其他平台更新）

以下两个单一事实来源文件支撑所有平台支持。编辑源文件后运行同步脚本：

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

每个脚本会自动重新生成平台专用副本。原生读取源文件的 agent 无需重新生成。

Star History（星标历史）

License（许可证）

MIT

开源项目JCodesMore2026-06-22原文

打开互动版

ai-website-cloner-template

README