AI 网站克隆模板 - 一键复刻任何网站

解决什么

当你需要将现有网站从 WordPress/Webflow 等平台迁移到现代技术栈,或者源代码丢失但网站仍在线时,传统做法是手动重写每个组件。这个模板通过 AI 编码代理自动化整个流程:输入目标 URL,AI 自动截图、提取设计 token(颜色/字体/间距)、分析交互行为(悬停/点击/响应式),生成详细的组件规格文档,然后并行构建所有组件,最终输出完整的 Next.js 项目。整个过程从数天缩短到几小时。

为何火

3 万+ stars 的核心原因是抓住了"AI 编码代理"这个新范式的实用场景。不同于简单的网页截图转代码工具,它提供了完整的工程化流程:多阶段管道(侦察→基础→规格→并行构建→组装)、Git worktree 隔离构建、精确的 getComputedStyle() 值传递给 AI、自动下载资源并更新路径。项目支持 15+ 主流 AI 编码工具(Claude Code/Cursor/Windsurf 等),开发者可以用熟悉的工具链完成复杂任务,而不是学习新的专用工具。

核心功能

• 一键克隆命令:在 AI 代理中运行 /clone-website <URL> 即可启动全流程
• 多状态捕获:自动模拟滚动、点击、悬停,捕获所有交互状态和响应式断点
• 精确规格生成:提取真实 CSS 计算值(非估算),包含多状态内容、动画参数、资源路径
• 并行构建系统:每个组件在独立 Git worktree 中由专门的 builder agent 构建,互不干扰
• 资源自动化:下载所有图片/视频/SVG 到 public/,替换 Lucide 图标为提取的 SVG
• 现代技术栈:Next.js 16 App Router、React 19、Tailwind CSS v4(oklch 色彩空间)、shadcn/ui

安装

# 1. 在 GitHub 点击 "Use this template" 创建自己的仓库(不要直接 clone)
# 2. Clone 你的新仓库
git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git
cd YOUR-REPO

# 3. 安装依赖
npm install

# 4. 启动 AI 代理(以 Claude Code 为例)
claude --chrome

# 5. 在代理中执行
/clone-website https://example.com

# 开发模式
npm run dev  # 或用 Docker: docker compose up dev

适合谁

• 平台迁移需求者:需要将自有网站从 Webflow/Squarespace 迁移到 Next.js 的开发者
• 源码恢复场景:网站在线但代码库丢失、开发者离职、或技术栈过时的团队
• 前端学习者:想通过拆解真实生产网站学习布局、动画、响应式设计的实现方式
• AI 工具爱好者:已订阅 Claude Code/Cursor 等 AI 编码工具,想探索实际工程应用

不适合:钓鱼网站制作、品牌冒充、违反目标网站 ToS 的爬取行为(README 明确禁止)。

社区评价

暂无足量社区公开讨论,以下为基于项目本身的中立评估:

从 GitHub 数据看,该项目在 4 个月内获得 3 万 stars 和 4000+ forks,增长速度极快,说明击中了"AI 辅助开发"的热点需求。34 个 open issues 中多数是功能请求(如支持更多 AI 工具、Vue/Svelte 版本),而非严重 bug,表明核心流程相对稳定。Discord 社区活跃,但需注意项目明确要求用户用 "Use this template" 而非 fork,避免 PR 污染主仓库,这种设计体现了作者对模板定位的清晰认知。

潜在争议点:依赖 AI 代理的黑盒能力,输出质量受模型版本影响(README 推荐 Opus 4.8);法律灰色地带(虽然声明禁止侵权,但技术上可克隆任何公开网站)。

选型对比

vs 商业工具(Webflow/Framer 导出):

• 商业工具通常只能导出自家平台的项目,且代码质量参差不齐(冗余 class、内联样式)
• 本项目可处理任意网站,输出干净的 React 组件和 Tailwind 类名,但需要 AI 代理订阅成本

vs 传统爬虫(Puppeteer + 手动重写):

• 传统方案需手动分析 DOM、提取样式、重构组件,耗时数天
• 本项目自动化整个流程,但依赖 AI 理解能力,复杂交互(如 WebGL/Canvas)可能失败

vs 截图转代码工具(Screenshot to Code):

• 截图工具基于视觉推断,精度有限且不保留语义结构
• 本项目直接读取 DOM 和计算样式,保留真实 CSS 值和 HTML 结构,但不适合纯视觉稿

已知坑

1. AI 代理依赖:必须配合 Claude Code/Cursor 等工具使用,不是独立 CLI。中国大陆用户访问部分 AI 服务需要网络代理
2. 复杂交互局限:README 未明确说明对 WebGL、Canvas、复杂 JavaScript 动画的支持程度,可能需要手动调整
3. 法律风险:虽然技术上可行,但克隆他人网站前需确认版权和 ToS,商业使用需额外注意品牌资产归属
4. 模型版本敏感:推荐 Opus 4.8,使用其他模型(如 GPT-4)可能效果不佳,且 AI 能力随版本迭代波动
5. 资源完整性:动态加载的资源(懒加载图片、CDN 字体)可能遗漏,需检查 public/ 目录完整性
6. 模板仓库管理:必须用 "Use this template" 创建新仓库,直接 clone 会导致后续更新冲突