AI Website Cloner

一句话克隆任意网站——给 Agent 一个 URL，它复刻成干净的 Next.js 应用

更新于 2026-08-10

一句话定位

给 AI 编码助手一个 URL，还你一个干净的 Next.js 网站

GitHub Template 仓库：克隆任何网站为现代 Next.js 代码库。核心是 /clone-website skill——五阶段流水线把目标站点的截图、设计 token、交互行为、精确 CSS 计算值全部提取成 spec 文件，再由并行 builder agents 在 git worktrees 里逐段复刻，最后视觉 diff 对拍验收。Claude Code + Opus 5 效果最佳，兼容 13 个 Agent 平台。

核心数据

技术栈：Next.js 16 (App Router) + React 19 + TypeScript strict + shadcn/ui + Tailwind CSS v4 (oklch) + Lucide（克隆时替换为提取的 SVG）。Trendshift 徽章在列。

三个核心场景

反面清单（README 明示禁止）：钓鱼/冒充、把他人设计当自己的、违反站点 ToS 的抓取复刻——先查 ToS 再动手。

五阶段克隆流水线

• 侦察：截图、设计 token 提取、交互扫描（滚动/点击/悬停/响应式）
• 基础：更新字体、配色、全局样式，下载全部静态资源
• 组件规格：把精确 getComputedStyle() 值、状态、行为、多态内容写进 spec 文件（docs/research/components/）——不靠猜
• 并行构建：在 git worktrees 里按区块/组件分派 builder agents，每段独立工作
• 组装与 QA：合并 worktree、接线页面、与原站跑视觉 diff 对拍

三分钟起步

# 1. 用 GitHub 的 Use this template 按钮建自己的仓库（别直接克隆模板本身）
# 2. 本地打开
git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
cd YOUR-NEW-REPOSITORY
npm install

# 3. 启动 AI Agent（Claude Code 推荐）
claude --chrome

# 4. 运行 skill
/clone-website https://example.com

支持多 URL：/clone-website <url1> [<url2> ...]。大多数客户端直接暴露命令；自然语言激活的客户端可说 "Clone <target-url> using the clone-website workflow"。

双源文件驱动多平台

13 个 Agent 平台的支持不是 13 份手写配置，而是两个单一事实源 + 两个同步脚本自动生成全部平台副本。

平台支持：Claude Code（推荐/Opus 5）、Codex CLI、OpenCode、GitHub Copilot、Kiro、Cursor、Windsurf、Gemini CLI、Cline、Roo Code、Continue、Amazon Q、Augment Code。生成的平台配置分布在 .kiro/ .cline/ .roo/ 等目录。

目录速览

src/
  app/              # Next.js 路由
  components/       # React 组件（ui/ = shadcn 原语, icons.tsx = 提取的 SVG）
  lib/utils.ts      # cn() 工具
  types/ hooks/     # TypeScript 接口 & 自定义 hooks
public/
  images/ videos/   # 从目标站下载的资源
  seo/              # favicon / OG 图
docs/
  research/         # 提取输出 + 组件规格（getComputedStyle 精确值）
  design-references/# 截图
scripts/
  sync-agent-rules.sh  # 重新生成各平台指令文件
  sync-skills.mjs       # 重新生成各平台 /clone-website
AGENTS.md           # 项目指令（唯一事实源）

谁适合用

需要警惕

• ToS 与版权：部分站点明令禁止抓取/复刻，logo 与品牌资产归属原作者——先查许可，只复刻你拥有或有权的站点
• 误用风险：钓鱼/冒充/非法用途在 README 明示禁止，但这依赖使用者的自律
• 质量依赖模型：Claude Code + Opus 5 效果最佳；弱模型复刻复杂交互/动画可能偏差大
• 只还原视觉不还原逻辑：克隆的是前端表现层，后端、鉴权、动态业务逻辑不在此列
• 模板生态早期：skill 的稳定性与维护节奏需观察，升级 Next.js 大版本需跟进

未来空间

「spec 先行 + worktree 并行 + 视觉 diff 验收」是 Agent 代码生成工程化的高水准模板，模式可泛化到任意「复刻/迁移」任务。若沉淀出站点资产抽取的通用协议，可成为建站迁移与站点逆向的标准流程。