如何用 Claude Code 克隆网站（2026）：真实流水线，以及它会在哪里失效
一篇来自实战的指南，讲清用 Claude Code 克隆网站的五阶段 agentic 流水线——如何在浏览器里测量真实页面、再逐段重建成可编辑的 React 和 Tailwind 源码，它需要的环境，无人值守时会崩的站点类型，以及什么时候该改用托管方案。
用 Claude Code 克隆网站，不是截图工具，也不是「另存为网页」。它是一条 agentic 流水线：你把 Claude Code 指向一个 live URL，它在浏览器里测量真实页面——计算后的 CSS、每个断点、每份素材——然后逐段把它 重建成可编辑的 React 和 Tailwind 源码。
方法是「测量」，不是「猜」。就是这一个差别，决定了产出是你能编辑、能替换品牌的代码，而不是别人页面的 一张扁平拷贝。下面把流水线怎么跑讲清楚、它需要什么环境，以及大多数指南都跳过的那一段——无人值守时它 会在哪里失效。
这也正是我们在 Clonesite 生产里跑的同一条「先测量、再重建」流水线，所以这篇是跑出来的，不是想出来的。
一个 agentic 循环：测量真实页面，逐段重建，再与原页做 diff。
TL;DR
| 问题 | 答案 |
|---|---|
| 它是什么？ | 把 Claude Code（一个 agentic 编码工具）指向一个 live URL；它测量页面并重建成可编辑的 React + Tailwind 源码。 |
| 需要什么？ | 带浏览器访问（Chrome 或 Playwright MCP）的 Claude Code、一个够强的模型、Node，以及一段克隆 prompt 或 skill。 |
| 一条命令？ | 装了克隆 skill 后，大致一条命令（/clone-website <url>）；没有的话，就用一段引导式的多步 prompt。 |
| 拿到什么？ | 真实的组件、间距、token 和断点——可编辑的源码，不是截图。 |
| 在哪会崩？ | 重动效/动画、WebGL、商业字体，以及懒加载 / CDN 素材。 |
| 能跳过配置吗？ | Clonesite 用托管方式跑同一条流水线——粘贴一个 URL，拿到免费预览，$2 起步，可退款。 |
「用 Claude Code 克隆」到底是什么意思
一个 URL 给 agent 的信息，远比一张截图多。当 Claude Code 在真实浏览器里打开页面，它不是读源样式表然后
靠猜——它读的是渲染后的值：用 getComputedStyle() 拿间距和字号、每个断点上的真实响应行为、真实字体，
以及页面加载的每一张图片、视频和图标。
这份测量出来的画面，就是重建的输入。它不是用一个巨大的「把这段 HTML 重写一遍」的 prompt，而是把页面 变成一组规格、再照着规格构建。产出是一个你拥有的起点——你能重排的布局、能编辑的组件、能替换的 token ——而不是一份你还得从压缩后代码里反推出来的拷贝。
流水线：五个阶段
每一次靠谱的 agentic 克隆，都是同一个形状。上面的图把它从头到尾画了出来；这里说清每个阶段在做什么。
- 侦察（Recon）。 在 Chrome 打开 live URL。对每个断点截全页图。滚动、hover、点击，读取计算后的 CSS——包括继承值、specificity 覆盖、浏览器默认值——而不只是源样式表。
- 打底（Foundation）。 安装真实字体。把颜色和字号体系建成设计 token。在写任何一行布局之前，先把每张 图片、视频、favicon 和 OG 素材下载到有条理的目录里。
- 组件规格（Component specs）。 为每一段写一份规格文件：精确的间距、字号阶梯、hover 与 focus 状态、 滚动行为、响应规则。下游没有任何东西靠猜。
- 并行构建（Parallel build）。 每段扇出一个 builder agent，各自照着完整规格、在独立的 git worktree 里 工作。多段同时构建，合并时互不踩踏。
- 组装与验收（Assembly & QA）。 把各 worktree 合并成一个页面，再与原始截图做视觉 diff，不符就返修， 直到克隆匹配为止。验收是一个循环，不是一个勾选框。
它之所以胜过一个单独的 prompt，理由很朴素但很关键：测量，而不是猜。 agent 写下的每一个值，都能追溯到 它在真实页面上观察到的东西。
自己动手搭这条流水线
要在自己机器上跑这条流水线，你需要四样东西：
- 带浏览器访问的 Claude Code——要么是 Chrome 集成，要么是 Playwright MCP，好让 agent 真的能打开并检查 页面。
- 一个够强的模型——Opus 4.8。 克隆是长链条，多步骤的活；模型要在几十段和大量工具调用之间把同一份规格稳住。Opus 4.8 是我们的默认。我们也试过更重的「专家」推理模型——包括 Codex 5.5——在这个任务上它们并不更合适：克隆循环奖励的是持续，多步的工具使用，而不是每一步的深度推理，所以专家模型会把预算花在错的地方，并在长跑里丢掉线索。
- Node 和一个可写入的项目。
- 一段克隆 prompt 或 skill。 社区的 Claude Code skill 会把这五个阶段打包成一条
/clone-website <url>命令；没有的话，你就用一段结构化 prompt 来驱动各个阶段。开源的 ai-website-cloner-template 就是一个很好的例子——它正是把这五个阶段接到/clone-website上，并推荐用 Claude Code 配 Opus 4.8。
之后就是：带浏览器访问启动 agent、把它指向 URL，让它跑完侦察 → 打底 → 规格 → 构建 → 验收。然后你来 复核——因为克隆是草稿，不是部署。
这个模板替你定了一件事：产出框架。它把每一次克隆都硬绑成一个完整的 Next.js App Router 应用。如果你就是要一份 Next.js 代码，这没问题；但对一个你只想托管上线的营销页来说，这是过重的脚手架——而且从第一个 commit 起就把结果锁死在了一个框架上。
它会在哪里失效（大多数指南跳过的部分）
无人值守的一次运行，并不能干净地克隆每一个站点。从大规模跑这条流水线的经验看，下面是真实的失效模式 ——每一个都是你在上线前必须复核的理由：
- 重动效、重动画的站点。 滚动触发的 reveal、GSAP 时间线、WebGL 场景，经常渲染成空白或半成品，因为 agent 抓的是一帧静态画面，而那个东西只在运动中存在。简单的营销页，比动画优先的体验要可靠得多。
- 商业字体。 侦察阶段看得到真实字体，但你未必有授权把它打包上线。上生产前换成合法替代——布局 token 留着，字体文件不能留。
- 懒加载与 CDN 素材。 藏在懒加载后面、或从 CDN 提供的图片，是最常见的克隆后 bug：在你的构建里 404 的路径。跑一遍页面、看一眼控制台，再决定信不信它。
- 纯 JavaScript 页面。 一个没有服务端渲染 HTML 的页面，给浏览器 agent 能测量的东西更少，克隆质量也 随之下降。
- 登录墙后的页面。 任何在登录之后的内容都需要手动配置 session；agent 打不开的，就克隆不了。
- 大站的 token 成本。 跨很多段的并行 builder，意味着很多 agent 回合。单个落地页很便宜；一个大型多段 站点是一次实打实的运行。
这些都不会让克隆变得没用。它们只是让克隆变成一个带人工复核步骤的工作流——而视觉 diff 验收阶段，正是为 此而设的。
用 Claude Code 克隆网站合法吗
当你把结果当作脚手架、而不是成品页时，克隆是合法的。布局模式在全网都很常见，本身不受保护。而品牌资产 ——logo、产品名、原创文案、照片、商标短语——是受保护的。
无论用什么工具，实际的规则都一样：留下你需要的结构，替换掉属于别人的身份、主张、媒体和证明，只有当页面 清清楚楚属于你时才发布。哪些能安全复用、哪些必须替换，我们在克隆网站是否合法的指南里讲清楚了。
自己动手 vs 托管克隆
自己跑 Claude Code 和用托管克隆，是同一条流水线，只是把难的那部分交给了不同的人。
| 自己跑 Claude Code | 托管克隆（Clonesite） | |
|---|---|---|
| 配置 | 装工具、接好浏览器访问、装 skill | 无——粘贴一个 URL |
| 谁做验收 | 你复核规格、修 404 素材、换字体 | 替你跑视觉 diff，你复核预览 |
| 重动效站点 | 你来 debug 空白的段落 | 服务端处理，配预览可核对 |
| 成本模型 | 你自己的 agent 订阅 + 每次运行的 token 花费 | 预览免费；启动克隆 $2，失败可退款；下载源码扣 credits |
| 产出 | 可编辑的 React + Tailwind——热门模板会硬绑成一个完整的 Next.js 应用 | 一个可移植的 Vite SPA（React + Tailwind），可适配 TanStack Start 或你自己的框架 |
| 适合 | 完全掌控、自定义技术栈、一次性实验 | 跳过配置、脆弱站点、克隆不止一个页面 |
无论走哪条路，你拿到的都是真实、可编辑的 React 和 Tailwind——不是截图。区别在外面那层壳：要么是模板替你选好的框架，要么是一个可移植的 Vite 应用（可适配 TanStack Start），你能把它部署到 Cloudflare、Vercel、Netlify 或你自己的技术栈。
什么时候用哪个
当你想完全掌控技术栈、只是把一个页面当实验来克隆、且愿意自己承担配置和复核这一遍时，自己跑 Claude Code。
当你不想搭这套工具链、目标站点重动效或重素材、或你要克隆不止一个页面并想在花钱前先看免费预览时，用托管 克隆。如果你想从代码里驱动同一条流水线，Clone API 用同一份 credits 余额，通过 REST 或 MCP 把它跑起来。
无论哪条路，纪律都和任何一次克隆一样：留下布局，替换品牌，只有当页面属于你时才发布。一旦你把克隆变成 自己的品牌，结果就是一个你拥有的页面。
在 Clonesite 粘贴一个 URL，就能用托管方式跑这条同样的流水线——先免费预览，等页面属于你了再拿源码。 当前的 credits 套餐见定价页。
相关阅读
URL 克隆 vs 截图转代码：输出到底差在哪URL 克隆读取一个 live 页面的真实结构——DOM、CSS、字体、链接和响应式断点——把它重建成可编辑代码。截图转代码只看到像素，只能推断布局，丢掉字体、链接和响应式。差别直接体现在输出有多好用。
用 API 克隆网站 —— 为 Agent 而生面向开发者的 Clonesite Clone API 指南，可走 REST 或托管 MCP。创建 API Key 或使用 OAuth agent login；只有需要 callback 时才添加 webhook 签名 secret。之后让 Agent preflight、创建 clone request、轮询状态，并下载可编辑的 React 和 Tailwind 源码。
5 个设计动作：把克隆来的页面变成你的品牌五个具体的设计决策——克制的强调色、衬线嗓音、留白、真实证据、设计 tokens——把克隆来的页面变成品牌，而且不像抄的。