AI Website Cloner Template：22 k 星，用 AI Agent 克隆任何网站

一句话结论：这是一个 Next.js 模板，配合 Claude Code 等 AI Agent，一条命令就能把任何网站逆向工程成现代代码。

项目信息

解决什么问题

从 WordPress/Webflow/Squarespace 迁移到 Next.js？原代码丢了只有线上网站还在？想拆解学习一个网站是怎么做的？

这个模板让 AI Agent 自动完成整个流程：截图→提取设计参数→下载资源→生成组件规格→并行构建→组装→QA 对比。

工作流程

• 侦察：截图、提取设计令牌、交互扫描（滚动/点击/响应式）
• 基础：更新字体、颜色、全局样式、下载所有资源
• 组件规格：生成详细 spec 文件（精确 CSS 值、状态、行为）
• 并行构建：在 git worktree 中分派构建 Agent
• 组装 & QA：合并、连线、与原站视觉对比

快速开始

# 1. GitHub 用此模板创建新仓库
# 2. 克隆到本地
git clone YOUR-NEW-REPO && cd YOUR-NEW-REPO
npm install
# 3. 启动 Claude Code（推荐 Opus 4.8）
claude --chrome
# 4. 运行技能
/clone-website <target-url>

支持的 Agent：Claude Code、Codex CLI、Cursor、Windsurf、Gemini CLI、Cline 等 13+ 平台。

合法使用注意

• ✅ 迁移你自己的网站
• ✅ 学习研究
• ✅ 找回丢失的代码
• ❌ 钓鱼/冒充
• ❌ 盗用他人设计
• ❌ 违反目标网站 ToS

FAQ

能克隆任何网站吗？ 静态为主的网站效果最好。复杂 SPA 可能需要额外手动调整。

需要写代码吗？ 不需要——Agent 自动完成全过程。你只需要提供目标 URL。

和普通网页抓取有什么不同？ 不是抓取 HTML，而是逆向工程成可维护的现代 React 组件代码。

参考来源

• GitHub

优化提示：克隆网站后如需修改依赖或自定义功能，Context 7 可以让 Claude Code 准确使用最新的 Next.js 和 Tailwind API。