又一个顶级 Skill 火了，一句话克隆任意网站！

本文来源： 丛林（公众号：丛林）
原文链接： https://mp.weixin.qq.com/s/gU0Ku6h1R3I3-7WJ2HkcAw
发布时间： 2026-07-17 14:15

作者： 丛林　　发布时间： 2026-07-17 14:15

GitHub Trending 上刷到个仓库，28.7k Star，叫 ai-website-cloner-template。描述就一句话：一个命令，AI Agent 自动把任意网站逆向工程成干净的 Next.js 代码。

我 clone 下来跑了一遍，左边是原站，右边是克隆版，我盯着对比图看了半天，愣是没找出几处明显差别。不是粗糙的截图转 HTML，是真真正正拆成了 React 组件、Tailwind 样式、TypeScript 接口。

真牛逼！

简介

ai-website-cloner-template 本质上是一个可复用的模板工程，作者把脚手架全部搭好了，我们不需要从零配环境。核心逻辑是让 AI Agent 自动完成网站的逆向工程：截图分析、提取设计 token、生成组件规格、并行编码、视觉 QA。

复刻一个网站，只需要一条命令：

/clone-website <目标网址>

五阶段流水线

作者把克隆过程拆成了五个阶段，输入输出很清楚，不搞黑箱。

侦察：Agent 先体检目标网站

Agent 打开浏览器，滚动页面，点击按钮，悬停元素，切分辨率看响应式。设计 token、颜色、字体、间距、动效，全部扒下来。

这里用到了 Chrome MCP 集成，Agent 能直接操作浏览器拿到计算后的真实样式，不是靠猜的。

打地基：更新全局配置

字体该换的换，颜色变量该写的写，Tailwind 主题调整，所有图片视频素材下载到 public 目录。

写规格书：每个组件一份文档

Agent 给每个区块写详细规格，放在 docs/research/components/ 下面。getComputedStyle() 值、交互模型、多状态内容、响应式断点、素材路径，全写进去。每个 builder 拿到文档再开工，照着做就行，不用瞎猜。

并行建造：多个 Agent 同时干活

多个 builder 在各自 git worktree 里并行，一个负责 Hero，一个负责 Features，一个负责 Pricing，互不干扰。

作者强调每个队友必须在独立 worktree 分支工作，最后 orchestrator 统一合并，不然多个 Agent 同时改一个文件，分分钟打起来。

组装与视觉QA：拼起来再对比

组件拼回 page.tsx 后，Agent 拿原站和克隆版并排对比。1440px 桌面端和 390px 移动端各测一遍。发现差异就回查规格文档，规格错了重提取，规格对了修组件，全部通过才算完。

实际跑一遍，看看效果

我用的 Codex 桌面版，整个过程非常顺畅，不需要手动 clone 仓库，不需要 npm install，一句话就能让 Codex 把 Skill 装好。

第一步：一句话安装 Skill

打开 Codex，直接丢给它仓库地址：

把这个开源的Skill装好 我要用：JCodesMore/ai-website-cloner-template

Codex 自己处理，1 分 51 秒装完，Skill 装到了 ~/.codex/skills/clone-website，SKILL.md 也验过了，skill 名称是 clone-website，下一轮对话直接发目标 URL 就能用。

第二步：丢个 URL 让它开干

装好之后，我直接发了一个目标网站：

用 clone-website 克隆 im.qq.com/index/#/

Codex 自动开始执行五阶段流水线，终端里能看到进度输出：Reconnaissance、Foundation、Component Specs、Parallel Build、Visual Diff，每一步都标得清清楚楚。

第三步：看侦察阶段干了什么

Codex 自动打开浏览器，开始截图、滚动页面、提取设计 token。我全程没动手，它自己把颜色、字体、间距、动效全扒下来了。这里用到了 Chrome MCP 集成，Agent 能直接操作浏览器拿到计算后的真实样式，不是靠猜的。

第四步：检查生成的组件规格书

克隆完成后，docs/research/components/ 目录下会生成每个区块的规格文档，我打开看了一眼，里面写得特别细，精确的 getComputedStyle() 值、交互模型、多状态内容、响应式断点、素材路径，全都有，每个 builder 拿到这份文档再开工，不需要瞎猜。

第五步：启动本地预览看效果

npm run dev

打开 localhost:3000，把原站和克隆版并排对比，我测了桌面端 1440px 和移动端 390px 两个分辨率，效果确实接近。

这是我复刻的网站

这是目标网站

移动端对比

99%一致，剩下的就是微调了！

第六步：检查生成的代码结构

克隆出来的代码不是一坨垃圾，而是结构清晰的 Next.js 项目。src/components/ 下面按区块拆分，ui/ 里是 shadcn/ui 组件，icons.tsx 是提取的 SVG，public/images/ 和 public/videos/ 是下载的素材，拿到手就能二次开发。

快速开始

环境要求就两条：Node.js 24+，以及一个能用的 AI 编码代理。

步骤也干净：

1. 在 Codex 里一句话安装 Skill：把这个开源的Skill装好我要用：JCodesMore/ai-website-cloner-template
1. 直接发目标 URL：用 clone-website 克隆 https://example.com
1. 等 Codex 跑完五阶段流水线
1. 启动本地预览：npm run dev
1. 按需微调

如果用别的 Agent，打开 AGENTS.md 看对应指令。

常用命令：

npm run dev      # 启动开发服务器
npm run build    # 生产构建
npm run lint     # ESLint 检查
npm run typecheck # TypeScript 检查
npm run check    # 一键跑 lint + typecheck + build

v0.3.0 加了 GitHub Actions 的 CI 质量门禁，每次 push 和 PR 自动跑检查。本地先用 npm run check 自查，避免推到远程才发现问题。