别再手搓页面了：一句话，克隆一个站点！

AI Agent 将网页逆向为组件代码的黑色技术插画

最近 GitHub 上有个项目很火：JCodesMore/ai-website-cloner-template。截至 2026 年 7 月 31 日，我从 GitHub API 查询到它已有约 3.06 万 Star、4,395 个 Fork。

它最容易传播的一句话是：给一个 URL，运行 /clone-website，AI Agent 就能把网站复刻成一个干净的 Next.js 项目。

但这句话也最容易让人误会。你以为它只是“截图转代码”，实际看完仓库的 AGENTS.md、Skill 和目录结构，会发现它解决的是另一个更工程化的问题：怎样让 Agent 不靠猜，完成一次可回查、可并行、可验收的前端逆向工程。

AI Website Cloner 的五阶段工作流

先给结论：如果你手上有自己的网站要从 WordPress、Webflow、Squarespace 迁到 Next.js，或者线上页面还在、源代码却丢了，这个模板值得试。它会显著缩短“先搭出一版可编辑底子”的时间。

但如果你期待它把任意网站的业务系统、后台数据、登录状态和产品决策一并复制回来，那一定会失望。它能重建的是可见的前端表面与交互骨架，不是一个网站背后的全部系统。

本文讨论的是经授权的迁移、恢复和学习。不要拿它冒充他人、做钓鱼页面，或把别人的品牌、文案和素材当成自己的资产；项目 README 也明确给出了这条边界。

真正难的不是写 JSX，而是把“看见”变成“证据”

“照着这个页面做一版”，是前端最熟悉也最磨人的需求之一。

难点通常不在 React 语法。难在你得一点点确认字号、层级、间距、圆角、阴影、图片裁切、hover、展开状态，以及 1440px 和 390px 下到底怎样折行。只靠一张截图，信息永远不够；只靠肉眼，细节又永远有偏差。

AI Website Cloner Template 的可取之处，是没有让 Agent 直接从“写代码”开始，而是把过程拆成五个阶段：

阶段	Agent 在做什么	留下什么可复用资产
`Reconnaissance`	截图、滚动、点击、hover，并检查响应式	设计证据、素材与页面观察
`Foundation`	调整字体、色彩 token、全局样式，下载素材	可复用的前端地基
`Component Specs`	为每个区块写计算样式、状态、断点和素材路径	`docs/research/components/` 中的施工图
`Parallel Build`	按区块分配 builder，在独立 worktree 中实现	隔离的组件改动
`Assembly & QA`	组装页面，并与原站在多种视口下做视觉对比	可验收、可继续迭代的项目

这个顺序看似朴素，实际上避开了 AI 做前端最常见的坑：模型会很快生成一个“差不多”的页面，但很难在没有依据的情况下稳定修到“真的接近”。

有了规格文档，后面的 Agent 不必再反复猜“这里大概是 24px 吧”。它拿到的是 getComputedStyle() 采集的值、交互状态和素材路径。从“模型觉得像”变成“实现是否符合已提取的证据”。 这才是它比普通截图生成器更有价值的地方。

五阶段里，最值得学的是哪三步？

1. 侦察：不要只截首屏

对 AI 来说，“打开网页”不等于“理解网页”。真正的侦察至少应该覆盖：

首屏与页面底部；
hover、菜单、弹窗、轮播与折叠内容；
图标、图片、视频和字体等资产；
桌面端与移动端的布局变化；
关键元素的计算后样式，而不只是页面源码里的 CSS。

这也解释了为什么项目推荐把浏览器能力接给 Agent。最终呈现的字号和间距，可能来自组件库、媒体查询、运行时 class 或第三方样式；看 DOM 源码不一定能得到结果。Agent 必须在真实浏览器里观察页面，才能拿到最终样式。

不过这里也有边界：公开网页能看见的，只是前端输出。没有权限时，不应尝试绕过登录、风控或付费墙；涉及用户数据的后台页，更不该交给无边界的抓取流程。

2. 组件规格：这是多 Agent 协作的“接口”

很多人把多 Agent 理解成“多开几个窗口，分头写”。真正难的是：大家依据什么写，以及最后怎么拼。

这个模板要求在 docs/research/components/ 下，为每个区块生成规格。一个有用的规格不该只写“这里是 Hero”，而应该包含：

目标：首屏品牌说明与主行动按钮
布局：桌面双栏；移动端改为单列
视觉：字体、颜色、间距、圆角、阴影、背景处理
内容：标题层级、按钮文案、图片/视频路径
行为：hover、点击后的状态和动画
断点：在哪个宽度发生布局或排版变化
验证：与原站对比时必须一致的关键点

它的意义不是多写一份文档，而是把“侦察 Agent 看到了什么”传递给“编码 Agent”。这份文档就是协作接口。

没有它，多个 builder 常见的结果是：每个人都做出一个局部好看的组件，字体、间距、响应式策略却各自一套。到最后组装时，你会得到一个“拼起来不对劲”的页面。规格先行，能把这种返工前置。

3. Worktree 并行：隔离比催 Agent 更重要

仓库把不同 builder 放到独立的 Git worktree 中。这个设计非常对。

多人或多 Agent 同时改 page.tsx、全局 CSS 和组件目录时，真正的风险不是谁写得慢，而是互相覆盖、冲突难解、测试环境互相污染。让每个 Agent 在各自工作目录和分支里实现一个明确区块，最后由 orchestrator 合并，协作才有边界。

你可以把它理解成施工现场：并行并不是让所有人围着同一面墙砌砖，而是先划好工区、接口和验收条件。

当然，Foundation 和全局 token 最好由一个统一角色维护。否则每个组件都“顺手”改一次全局颜色或字体，worktree 再干净，合并也会痛苦。

现在怎么用：先用模板建一个你自己的项目

仓库本身是一个可复用的 Next.js 模板，不是把某个网页贴进去就自动产物的在线 SaaS。官方当前的快速开始方式是：

git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
npm install

# 以 README 推荐的 Agent 为例；其他 Agent 看 AGENTS.md
claude --chrome

/clone-website https://example.com

它要求 Node.js 24+，技术栈是 Next.js 16、React 19、TypeScript、shadcn/ui 和 Tailwind CSS v4。仓库也列出了 Codex CLI、OpenCode、Cursor、GitHub Copilot、Gemini CLI、Cline 等多种 Agent 的适配入口；如果你不用 Claude Code，先打开项目根目录的 AGENTS.md，再按对应平台的说明启动。

完成后，别急着看“有没有页面”。先跑项目自己的质量门：

npm run dev        # 本地预览
npm run lint       # 静态检查
npm run typecheck  # 类型检查
npm run check      # lint + typecheck + build

从 v0.3.0 起，项目还加入了多 URL 克隆和 CI 质量门；截至写作时最新发布版本为 v0.3.1，主要修复了 Windows 上 Agent 规则同步的 CRLF 问题。换句话说，这不是一个只为演示而写的 prompt，作者正在把它维护成支持多种 Agent 的工程模板。

别被“像素级”带偏：你真正要验收四件事

视觉相似度很重要，但它不是唯一标准。把项目跑起来以后，我建议按下面四层验收。

验收层	该检查什么	常见误区
视觉	主要视口下的布局、字体、间距、素材裁切	只对比一张桌面截图
行为	菜单、hover、轮播、弹窗、表单状态	看起来像，实际点不动
工程	组件边界、类型、构建、静态检查	得到一大坨可运行但不可维护的代码
业务与合规	文案、素材、品牌、第三方服务、数据处理	把可见页面误认为整个产品

视觉 QA 也不能只在 1440px 做一次。至少同时比对一个桌面宽度和一个移动宽度；如果页面以表格、导航或复杂内容卡片为主，再补一个中间宽度。发现问题时，按这个顺序回查最省时间：

先看规格是否提取错了或漏了状态；
规格正确，再修具体组件；
组件正确但拼起来错，再检查全局 token、容器和断点；
每次修复后，回到同一个视口重新对比。

这是一条闭环，而不是“生成一次，祈祷它像”。

它能救什么，不能救什么？

这类工具最实在的三个使用场景，其实都和“重新获得可控代码”有关：

平台迁移：你拥有的站点原来建在 Webflow、WordPress 或 Squarespace，现在要迁到自己的 Next.js 工程；
源码恢复：网站还在线，但旧仓库、原外包团队或原技术栈已经不可用；
设计学习：在授权范围内研究某个页面是怎样处理信息层级、动效和响应式的。

它不擅长、也不应承诺的部分同样清楚：

看得见 UI，不等于拿得到服务端逻辑、数据库、权限模型或支付流程；
复刻了旧页面，不等于继承了好的信息架构和可访问性；
下载得到的图片或 SVG，不等于获得了商用授权；
视觉接近，不等于性能、SEO、埋点、表单校验和风控已经正确。

社区讨论里也有一个很有价值的提醒：复刻视觉表面，不等于复制一家公司的业务能力。页面只是产品最后露出来的一层；领域知识、运营流程、服务稳定性和用户信任，并不会随着截图和 CSS 一起被还原。

所以更成熟的用法不是“克隆后直接上线”，而是把生成物当成一个经过加速的起点：保留你有权使用的结构，替换品牌与内容，重写业务逻辑，然后按自己的质量和合规标准验收。

最后：它火的不是“AI 会抄页面”，而是流程终于被写出来了

前端实现里有很多重复、琐碎、却很依赖细节的劳动。以前它们只能靠经验丰富的人慢慢拆；现在，浏览器观察、设计 token 提取、组件规格、worktree 并行和视觉对比，已经可以被整理成 Agent 能执行的流程。

AI Website Cloner Template 最值得借鉴的，不是一条 /clone-website 命令，而是这条原则：让 Agent 先收集证据、留下规格、在隔离中实现、再通过对比验证。

如果你的任务是迁移自有站点或恢复有授权的老项目，不妨挑一个单页先跑完闭环。别先问它能不能“99% 一致”，先问四个更重要的问题：资产来源清楚吗？组件能维护吗？移动端经得起对比吗？业务和版权边界处理了吗？

这四个问题答得上来，AI 才是真的替你省掉了前端脏活，而不是提前埋下另一轮返工。

参考资料与延伸阅读

官方仓库：JCodesMore/ai-website-cloner-template —— README、技术栈、支持平台、五阶段工作流与使用边界。
GitHub Releases —— v0.3.0 的多 URL 与 CI 更新，以及 v0.3.1 的 Windows 修复。
Reddit：This Claude Code skill can clone any website —— 社区对并行 Agent 工作方式的讨论。
Reddit：I made this Claude Code skill to clone any website —— 关于“视觉复刻不等于复制业务”的讨论。