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

这是一个可重用的模板，旨在利用 AI 编码代理（AI coding agents）对任何网站进行逆向工程，并将其重构为像素级完美的克隆版本。强烈推荐：Claude Code (配合 Opus 4.6 模型以获得最佳效果) — 不过它也支持各种其他的 AI 编码代理。

只需指定一个 URL，运行 /clone-website 命令，你的 AI 代理就会自动检查该站点、提取设计令牌（design tokens）和资源、编写组件规范，并调度并行构建器来重构每一个部分。

演示

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

快速开始

1. 克隆此仓库

   git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
   cd my-clone
   

2. 安装依赖

   npm install
   

3. 启动你的 AI 代理 — 推荐使用 Claude Code：

   claude --chrome
   

4. 运行技能命令:

   /clone-website 
   

5. 自定义 (可选) — 在基础克隆完成后，根据需要进行修改。

使用其他代理？请查阅 AGENTS.md 获取项目说明 — 大多数代理会自动识别此文件。

支持的平台

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

前置条件

• Node.js 20+
• 一个 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. 侦察 (Reconnaissance) — 截图、提取设计令牌、交互扫描（滚动、点击、悬停、响应式测试）。
2. 基础构建 (Foundation) — 更新字体、颜色、全局样式，下载所有资源。
3. 组件规范 (Component Specs) — 编写详细的规范文件 (docs/research/components/)，包含精确的计算 CSS 值、状态、行为和内容。
4. 并行构建 (Parallel Build) — 在 git 工作树中调度构建器代理，每个部分/组件一个。
5. 组装与 QA (Assembly & QA) — 合并工作树、连接页面、与原始页面进行视觉差异比对。

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

项目结构

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  # 重新生成代理指令文件
  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 检查

更新其他平台支持

两个“事实来源”文件支持着所有平台。编辑源码后，运行同步脚本即可：

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

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

默认设置

/clone-website 默认会克隆该 URL 对应的页面，实现像素级完美还原，无需额外配置。该技能会自动处理作用域、还原度及资源提取。