JCodesMore/ai-website-cloner-template · 上手攻略

仓库：JCodesMore/ai-website-cloner-template
链接：https://github.com/JCodesMore/ai-website-cloner-template
分类：AI · 开发工具（AI Coding Agent 模板）
作者：Jay
更新：2026-07-05

这是什么

ai-website-cloner-template 是一个可复用的 AI 网站克隆模板项目，用 AI Coding Agent（推荐 Claude Code）将任意公开网站逆向重建为一个干净的 Next.js 现代代码库。

核心思路：给 AI Agent 一个 URL，Agent 自动完成截图、设计 token 提取、组件规格撰写、并行构建、最终组装——你只需要点一下 "Use this template" 然后跑 /clone-website，一个网站就变成了一套可维护的 Next.js + shadcn/ui + Tailwind CSS v4 代码。

技术栈 - 框架：Next.js 16（App Router）、React 19 - 语言：TypeScript（strict mode） - UI 组件：shadcn/ui（Radix Primitives） - 样式：Tailwind CSS v4（oklch 设计令牌） - 图标：Lucide React（克隆后被目标站 SVG 替换） - Node.js：24+ - License：MIT

数据来源 README：GitHub 页面，YouTube Demo

解决什么问题

快速建站：有参考网站但不想从零设计？克隆它，然后用 AI 改造成你需要的内容。
平台迁移：把 WordPress / Webflow / Squarespace 网站迁移到现代 Next.js 代码，保留视觉设计。
丢失源码恢复：网站在线但代码库丢失、开发者失联、原技术栈过时，可以把现有网站"逆向"还原成可维护代码。
学习研究：想研究某个网站的动画、响应式布局、交互逻辑？克隆后直接读源码，比 F12 调试更清晰。

快速安装

第一步：创建自己的副本（不能用 git clone）

⚠️ 不要直接 clone 这个模板仓库，否则你的克隆产物会污染上游 PR。必须用 GitHub 的 "Use this template" 功能创建独立仓库。

打开 https://github.com/JCodesMore/ai-website-cloner-template
点击 "Use this template" → "Create a new repository"
填写仓库名，选择 public/private，点击 Create repository
克隆你的新仓库：

git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
cd YOUR-NEW-REPOSITORY

第二步：安装依赖

npm install

第三步：启动 AI Agent（推荐 Claude Code）

# 推荐用 Chrome 模式启动，获得更好的屏幕截图能力
claude --chrome

注意：需要 Claude Code 已安装且有有效的 Anthropic API Key。

第四步：运行克隆 skill

/clone-website https://example.com

AI Agent 会自动完成所有步骤，不需要人工干预。克隆完成后：

npm run dev   # 开发模式
npm run build # 生产构建

核心用法

`/clone-website` 多阶段管道

Agent 执行的完整流程：

┌─────────────────┐
│  Reconnaissance │  截图、提取设计 token、交互扫描（滚动/点击/悬停/响应式）
└────────┬────────┘
         ▼
┌─────────────────┐
│    Foundation   │  更新字体、颜色、全局样式，下载所有资源文件
└────────┬────────┘
         ▼
┌─────────────────┐
│ Component Specs │  写入详细规格文档（docs/research/components/）
│                 │  含精确 getComputedStyle() 值、状态、行为、响应式断点
└────────┬────────┘
         ▼
┌─────────────────┐
│  Parallel Build │  git worktree 并行构建，每节/组件一个独立 Agent
└────────┬────────┘
         ▼
┌─────────────────┐
│ Assembly & QA   │  合并 worktree、接入页面、视觉 diff 对比原站
└─────────────────┘

本地开发命令

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

# 开发模式（热重载，端口 3001）
docker compose up dev --build

支持的 AI Coding Agent 平台

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

不同 Agent 通过 AGENTS.md（单一真相来源）+ scripts/sync-agent-rules.sh 自动同步各平台的指令文件。

项目结构

src/
  app/              # Next.js App Router 路由
  components/       # React 组件
  ui/               # shadcn/ui 原子组件
  icons.tsx         # 提取的 SVG 图标
  lib/utils.ts      # cn() 工具函数
  types/            # TypeScript 接口
  hooks/            # 自定义 React hooks
public/
  images/           # 从目标网站下载的图片
  videos/           # 下载的视频
  seo/              # Favicon、OG 图片
docs/
  research/         # 克隆输出 & 组件规格文档
  design-references/# 截图参考
scripts/
  sync-agent-rules.sh   # 同步 AGENTS.md 到各平台
  sync-skills.mjs       # 同步 /clone-website skill 到所有平台
AGENTS.md          # Agent 指令（单一真相来源）
CLAUDE.md          # Claude Code 配置（imports AGENTS.md）
GEMINI.md          # Gemini CLI 配置（imports AGENTS.md）

修改 agent 指令

编辑 AGENTS.md 后，同步到所有平台：

bash scripts/sync-agent-rules.sh

典型适用场景

快速 MVP 建站：参考竞品网站设计，快速搭建自己的 Web 产品原型。
WordPress/Webflow 迁移：把旧平台网站迁移到现代 Next.js 技术栈，保留原视觉，减少重新设计的工作量。
源码恢复：原开发者失联/公司倒闭，只有线上网站，通过克隆还原可维护代码库。
学习先进实现：克隆一个设计精美的网站，阅读源码学习其动画、组件架构、响应式策略。
批量改版：一个设计系统应用到多个页面，先克隆再替换内容，避免每个页面单独设计。

坑与注意

问题	说明
必须用 "Use this template"	直接 clone 会把克隆产物带进上游 PR。创建自己的副本是强制要求，不是可选建议。
Node.js 24+	项目要求 Node.js 24 及以上版本。老版本可能遇到兼容性问题，建议用 fnm / nvm 管理 Node 版本。
仅生成单页应用	`/clone-website` 默认克隆单个页面，不会爬取整个网站的所有路由。如需完整网站，需要多次运行或额外开发。
不要用于欺诈目的	项目明确禁止：钓鱼/冒充、未经授权克隆受版权保护的品牌设计、违反网站服务条款的抓取。使用前确认目标站点的 ToS 允许此类行为。
克隆 ≠ 原创	克隆出来的 logo、品牌资产、原创文案仍属于原版权方，不可直接用于商业产品。需要替换为自有品牌内容。
法律风险	网站布局/设计可能受版权保护，部分jurisdictions禁止未经授权逆向工程。教程/学习目的风险较低，商业使用务必咨询法律意见。
Claude Code 建议用 Opus 4.8	README 明确推荐 Opus 4.8，其他模型克隆质量可能明显下降。
屏幕截图依赖	克隆质量高度依赖 Agent 获取目标网站截图的能力，`--chrome` 模式（Claude Code）提供更好的浏览器自动化能力。

与同类对比

维度	ai-website-cloner-template	Locator.js	Figma → Code	GPT-4o Vision + v0
输入	URL	截图 + 设计文件	Figma 文件	截图
输出	完整 Next.js 项目	HTML/CSS	代码片段	单页代码
并行构建	✅（git worktree）	❌	❌	❌
多 Agent 协作	✅	❌	❌	❌
视觉 Diff	✅	❌	❌	❌
Tailwind v4	✅	❌	⚠️	⚠️
License	MIT	未知	工具 License	API 使用

这个模板的核心差异化：AI Agent 驱动的端到端网站克隆管道，不是简单的截图转代码，而是包含了设计 token 提取、组件规格文档、并行构建、视觉 diff 的完整工程流程。如果你只需要一个页面截图转代码，v0 / Cursor 更快；如果要得到一整套可维护的 Next.js 项目，这是目前最自动化的开源方案。

一句话推荐结论

如果你想用 AI 把任意网站变成一套干净的 Next.js 现代代码，ai-website-cloner-template 是目前最工程化的开源方案——并行 Agent 构建、组件规格文档、视觉 diff，全自动完成，值得在需要快速建站或迁移时一试（注意法律边界）。