一条命令克隆任意网站？这个开源项目2个月涨了近2万Star！

yfj-unicorn

14人浏览 · 2026-06-26 18:34:02

yfj-unicorn · 2026-06-26 18:34:02 发布

有个朋友跟我说过一件事：他维护一个跑了5年的 Webflow 老站，公司要迁到 Next.js。Webflow 导出的代码是一团乱麻，完全没法复用。

请外包，对方报价8万，说要"重做"——也就是对着你的网站重新画一遍。

后来他找到了这个工具，两小时生成了基础版本，人工对着校正了一天，完成了。

这个工具叫 ai-website-cloner-template，作者 JCodesMore，3月13日发布。发布3天破6000 Star，6周破13000 Star，截至2026年6月已接近 2万 Star、2900 Fork。

核心就一句话：给它一个网址，它调用 AI coding agent，自动把目标网站还原成一套干净的 Next.js 16 代码库。

等等，先别急着说"这不就是爬虫"。它和普通爬虫差远了，听我说原理。

它到底怎么工作的

整条流水线从一条命令开始：

/clone-website https://example.com

背后是五个阶段。

🔍 第一阶段：侦察

AI agent 打开目标网站，像真实用户一样操作：全页截图（多个分辨率）、滚动、点击、悬停，同时提取设计 Token——颜色、字体、间距、圆角、阴影。

关键点：它拿的不是 HTML 源码，而是浏览器真实渲染后的视觉结果。这个区别很重要，你懂的，源码里的样式和页面实际显示之间往往差着十层继承关系。

🏗 第二阶段：打地基

设计信息到手后，先建基础设施：全局 CSS 变量（字体、颜色、间距）写入 Tailwind v4 的 oklch 色彩 Token，图片、视频、字体等所有资源全部下载到本地。

📝 第三阶段：写组件规范

这步是整个工具最不寻常的地方。

它不直接开始写代码——而是先给每个区块（Header、Hero、Feature 区、Footer 等）生成一份组件规范文件，存在 docs/research/components/ 里。

规范里有精确的 getComputedStyle() 数值，不是"差不多8px圆角"，是浏览器实际算出来的值：

button.primary:
  background: oklch(0.55 0.22 255)
  border-radius: 8px
  padding: 12px 24px
  font-size: 14px / font-weight: 600
  hover: background oklch(0.48 0.22 255)

每个状态、每个交互、每个断点，全都记录在案。下一步的 builder agent 直接照这份规范写，不靠猜。

⚡ 第四阶段：并行构建

这才是真正的工程亮点。

它不按顺序一个一个写组件，而是同时派出多个 builder agent，每个 agent 在独立的 git worktree 里负责一个区块。Header 一个、Hero 一个、Footer 一个……像施工工地的并行施工，多条线同时开工，最后汇总。

速度比串行快不少，质量也稳——每个 agent 只专注一个区块，上下文干净。

✅ 第五阶段：组装与质检

所有 worktree 合并回来，系统做一次视觉 diff：对比克隆结果和原站截图，找出偏差，自动修正。

五步上手（前提是装了 Claude Code）

第一步：去 GitHub 项目页点 "Use this template"，创建你自己的仓库副本。别直接 clone 原仓库——你的代码不应该推回模板去。

第二步：clone 到本地

git clone https://github.com/你的用户名/你的仓库名.git
cd 你的仓库名

第三步：安装依赖

npm install

第四步：启动 Claude Code，必须带 --chrome 参数

claude --chrome

--chrome 是关键——它让 Claude Code 获得操控浏览器的能力（Chrome MCP）。没有这个，第一阶段的侦察跑不起来。

第五步：开始克隆

/clone-website https://目标网站.com

整个过程根据网站复杂程度，大约10到30分钟。你可以去泡杯咖啡。

三个真实能用的场景

场景一：平台迁移

WordPress、Webflow、Squarespace 老站迁到 Next.js 现代架构。工具跑完之后，你拿到的是一套可以继续开发的代码基础，而不是一堆截图。比从零重建快多了。

场景二：源码找回

这个场景比你想象的常见。网站还在跑，但仓库没了——前任开发者离职带走了、服务器跑路了、备份早就失效了，技术栈又老到没人接手。

以前这种情况基本只能花钱重做。现在至少有个 AI 生成的视觉起点，省掉大量重复劳动。

场景三：学习逆向

看到某个网站的动画、布局或响应式处理得很好，想搞清楚它怎么实现的。工具跑完之后，生成的组件规范和代码就是一份可读的"拆解报告"，比对着 DevTools 手动扒准多了。

支持哪些 AI 编程工具

首推 Claude Code（Opus 4.7），但不是唯一选项。项目目前支持 13款主流 AI 编程工具：

工具	状态
Claude Code	推荐（Opus 4.7）
GitHub Copilot	支持
Cursor	支持
Windsurf	支持
Gemini CLI	支持
Codex CLI	支持
Cline / Roo Code / Continue / Aider...	均支持