AI Website Cloner 开源反向工程工具，24k Stars，一句话命令克隆任意网站为 Next.js + Tailwind CSS + shadcn/ui 代码库。支持 Claude Code 等 AI 编码工具，Chrome DevTools MCP 提取精确 CSS 值。

🎤 引言

「能不能把这个网站克隆一下，我要用它的 UI 风格做一个类似的项目？」

这种需求以前是设计师和前端工程师的噩梦——要么手动一点点抄，要么用爬虫抓 HTML 但拿到的代码一团糟，根本没法维护。2026 年，JCodesMore/ai-website-cloner-template 把这件事变得像点一下按钮一样简单。它不是传统爬虫，而是一个用 AI 编码智能体反向工程任意网站的开源模板——给它一个 URL，AI 会自动提取设计系统、CSS 值、组件结构，然后用平行构建器重建每一个版块，最终输出干净的 Next.js 代码。

这个项目在 GitHub 已经拿下 24.4k Stars，3,365 Forks，是今年最火的前端 AI 工具之一。

⭐ 核心功能

🧠 它不是爬虫，是「AI 设计还原」

传统爬虫的痛点在于：JavaScript 渲染后的 DOM 一团混乱，CSS 样式层层叠叠根本理不清，拿到的代码无法维护。AI Website Cloner 的思路完全不同——它用 Chrome DevTools MCP 让 AI agent 真正「打开浏览器」看到渲染后的页面，然后通过 getComputedStyle() 提取精确的最终 CSS 值，而不是那些被覆盖、废弃的中间态样式。

整个过程是这样的：

  1. Agent 访问 URL：通过 Chrome DevTools MCP 拿到渲染后的完整 DOM + computed styles
  2. 提取设计系统：颜色、字体、间距、圆角、阴影、动画曲线，全部量化提取
  3. 编写组件规格文档：每个版块的 HTML 结构、精确 CSS、响应式断点、交互状态
  4. 并行构建器重建：多个 AI builder agent 同时开工，各自负责一个 section

输出结果不是一团乱麻，而是一个结构清晰、样式精确、可维护的 Next.js 代码库。

⚙️ 技术栈（Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui）

{
  "next": "16.2.1",
  "react": "19.2.4",
  "@tailwindcss/postcss": "^4",
  "shadcn": "^4.1.0",
  "@base-ui/react": "^1.3.0",
  "lucide-react": "^1.6.0"
}

Node >= 24 是硬性要求，建议用 nvm 切换。输出代码完全兼容 shadcn/ui 组件规范，拿到代码后可以直接用 npx shadcn@latest add <component> 继续扩展。

🐙 多平台支持（12 种 AI 编码工具）

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

两个 source-of-truth 文件驱动所有平台支持：AGENTS.md + .claude/skills/clone-website/SKILL.md，运行 bash scripts/sync-agent-rules.sh 或 node scripts/sync-skills.mjs 自动同步到各平台格式。

⚠️ 安全扫描警告（需注意）

SkillsLLM 的自动安全扫描对 ai-website-cloner-template 返回了警告（无 critical 漏洞，但建议使用前查阅 Security Report）。这不是严重问题，但用它克隆涉及登录、支付等敏感页面时需要自行评估风险。

📥 安装与使用

第一步：创建自己的仓库（重要！）

不要直接 clone 这个模板仓库！ 正确做法是 GitHub 页面点 「Use this template」→「Create a new repository」，给你的项目起个名字，选择 public 或 private，再 Create。这样你的网站代码会留在你自己的仓库里，不会往上游污染。

第二步：安装依赖

git clone https://github.com/YOUR_USERNAME/your-new-repo.git
cd your-new-repo
nvm use       # 自动切换到 .nvmrc 指定的 Node 版本
npm install

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

claude-code

第四步：运行克隆 skill

/clone-website https://target-site.com

如果要多页面一起克隆：

/clone-website https://site-a.com https://site-b.com

AI agent 会自动完成上面说的 4 阶段 pipeline，你可以在终端看到每个 section 的重建进度。

Docker 模式（无需 Node 环境）

docker compose up
# 启动后访问 http://localhost:3000

自定义（克隆完成后）

克隆出来的基础代码只是第一步。拿到基础版之后，你可以：

  • 替换 Logo / 色系，快速变成自己的品牌
  • 添加 shadcn/ui 组件，继续扩展功能
  • 对接自己的后端 API
  • 用 Git worktree 开分支，实验不同风格

🎯 适用场景

AI Website Cloner 适合以下这些真实场景：

  • 🔄 网站迁移：老旧网站想迁移到现代框架（Next.js），不用从零重写，直接克隆后逐步替换内容
  • 🏢 企业前端现代化：很多企业遗留系统 UI 漂亮但代码老旧，克隆出来再用 React 重构，省去「逆向理解 CSS」的时间
  • 📚 学习现代 UI 模式：看到某个网站某个版块设计很喜欢，克隆出来研究它的 CSS 和结构是怎么写的
  • ⚡ 快速原型：甲方给了一个参考网站，要求「照着这个风格做一个」，直接克隆再改比从零开始快 10 倍
  • 🤖 AI 编程演示：演示 AI 编程能力时，克隆网站是最有冲击力的 demo 之一（看，AI 把整个网站「抄」了一遍）

🔍 对比 / 替代方案

工具原理优点缺点
AI Website Cloner（本次）AI agent + Chrome DevTools MCP + getComputedStyle精确 CSS、并行构建、多平台支持需要 Node 24+、AI token
传统爬虫（如 Puppeteer）JS 执行 + HTML 抓取不需要 AI、可离线运行CSS 不精确、代码无法维护
Figma → 代码（Anima/Magnolia）设计稿直接导出设计稿直接转代码需要设计稿、无法克隆线上网站
HTML逆向工具（WebScraper等）浏览器插件抓取零配置输出不可维护、无法处理 JS 渲染

AI Website Cloner 最大的差异点是精确性——传统爬虫拿的是「开发时写的 CSS」，AI agent 通过 getComputedStyle() 拿的是「浏览器实际渲染的最终 CSS」，中间那些被覆盖的样式、动态计算的属性全部被忽略了。

⚠️ 注意事项

  1. 必须创建自己的仓库：直接 clone 或往上游提 PR 会被标记为垃圾内容，GitHub 对这类行为有反滥用机制
  2. Node >= 24 是硬性要求：项目使用了 import assertions、URL.canParse() 等较新的 JS 特性，低版本 Node 会直接报错
  3. SkillsLLM 安全警告：自动扫描返回了警告，使用前建议先看 Security Report，尤其是要克隆涉及用户数据的页面时
  4. 不要克隆涉及版权的内容：克隆他人网站 UI 用于商业用途可能存在法律风险，建议仅用于学习、迁移和原型开发
  5. 克隆效果依赖原网站复杂度：简单静态站克隆效果最好，动画复杂、依赖大量第三方脚本的站克隆后需要更多手动调整
  6. 需要 AI agent token：Claude Code / Cursor 等工具需要各自的 API key，没有免费额度的话成本不低

✅ 总结

AI Website Cloner 是那种让人「用了就回不去」的工具。它本质上解决的是前端开发中最耗时的「设计还原」问题——用 AI agent 自动完成 CSS 提取和组件重建，而不是让工程师一点点对着一堆混乱的 HTML 猜。

推荐指数：⭐⭐⭐⭐ (4/5)

适合：前端开发者、想快速建站的人、需要迁移老旧网站的技术团队
不适合：完全不想折腾 AI token 的人、版权敏感场景

24.4k Stars 的背后是 JCodesMore 对 AI 编程工作流的深刻理解，MIT 协议免费商用。项目地址：JCodesMore/ai-website-cloner-template。