克隆一个网站，Claude要20美元，DeepSeek只花了5毛

JCodesMore 的 ai-website-cloner-template 今年 3 月发布，26K stars。

它的核心卖点：一条 /clone-website 指令，AI agent 打开你的目标网站、截图、提取 CSS、写规格、并行构建每个 section，最后输出一套完整的 Next.js 16 源码。

但有一个问题——它推荐 Claude Code + Opus 4.8。按官方实测数据，克隆一个中等规模网站（10-15 个 section），token 消耗 80-200 万，一次克隆 $20-30。

我用 DeepSeek V4 试了一下，同样的网站，不到 $0.50。差了 40 倍。

● ● ●

不看截图，看 DOM

原版 pipeline 依赖 Chrome MCP 截图 + Claude 的视觉能力来分析页面布局。这是成本的大头——视觉模型的 token 单价远高于纯文本。

我换了一个思路：不用截图做提取，直接用 getComputedStyle() 拿 CSS 数值。

Hermes Agent 的 browser_console 工具可以在页面里注入 JavaScript。我写了一段脚本，遍历目标网站的 DOM 树，对每个元素跑 getComputedStyle()，输出结构化 JSON：

{
  "hero": {
    "tag": "H1",
    "fontSize": "96px",
    "fontWeight": "400",
    "lineHeight": "96px",
    "letterSpacing": "-0.96px",
    "color": "rgb(240, 240, 240)"
  }
}

这一步零 token 消耗——浏览器本地执行 JS，不需要任何模型参与。

拿到这些数值后，喂给 DeepSeek V4 生成 React 组件。DeepSeek 只处理文本，不碰图像。成本降下来了，精度反而更高——getComputedStyle() 给的是浏览器实际渲染值，比截图里"看起来像 16px"精确得多。

截图只在最后一步用——做视觉 QA 对比。

● ● ●

实战：克隆 Resend.com

选了一个目标：Resend.com——商业 SaaS 邮件 API 的官网，暗色主题，设计精致，15 个 section。

步骤：

1. 侦查（1 分钟）

Hermes 打开 Resend.com，browser_console 注入 JS：

• 提取全局设计 Token：背景 #000000、前景 #f0f0f0、强调色 #ffff92
• 识别字体：标题用 "domaine"，正文用 "Inter"，字号从 96px（H1）到 13px（footer）
• 页面拓扑：识别 15 个 section（Hero、TrustBar、Integrate、DevExperience...）
• 每 section 的精确 CSS：padding、gap、max-width、颜色、响应式断点

全程不依赖截图。getComputedStyle() 给的是浏览器真值。

2. 打基础（30 秒）

把提取的 Token 写入 globals.css 和 layout.tsx。暗色主题、CSS 变量、字体配置。

3. 并行构建（3 分钟）

把 15 个 section 拆成 3 批，用 delegate_task 并行派发 builder agent。每个 builder 收到完整的组件规格（内联，不读文件），在独立上下文里生成一个 React 组件。

3 个 builder 同时跑，3 分钟后 15 个组件全部就位。

4. 组装 + QA（1 分钟）

page.tsx 导入所有组件，npm run build。零 TypeScript 错误，静态页面生成成功。

打开 localhost:3000——暗色背景、96px 大字、SDK 代码块、邮件事件日志、React Email 编辑器、客户评价卡片...跟原站的结构完全匹配。

● ● ●

省在哪？

流水线对比

关键是第一步：用 DOM 提取代替截图分析。

截图分析是 AI 网站克隆里最贵的一步——视觉模型要"看懂"图片里的布局、颜色、间距，然后转成代码。每一步都消耗大量视觉 token。

而 getComputedStyle() 直接返回 paddingTop: 160px、gap: 48px、color: rgb(240, 240, 240)——不用"看懂"，直接"读"。

● ● ●

这事的意义不在于技术多深，而是因为它把一件事做对了：把 agent 的能力封装成一个 Skill 文件，放在 GitHub 模板仓库里，让 agent 自己读、自己执行。

我做的事就是把这份 Skill 从"给 Claude Code 用"改写成了"给 Hermes 用"，顺便换了个思路——不看截图看 DOM。

结果证明：对 90% 的静态网站，纯 DOM 提取完全可以替代视觉模型。 不需要 Mac 上的本地 VLM（我准备了一个 Qwen3-VL-8B 做 fallback），一次都没用到。

克隆一份代码在 GitHub：alitrack/ai-website-cloner-template，Hermes 版的 Skill 在 .hermes/skills/clone-website/SKILL.md。

如果你用的是 DeepSeek V4 + Hermes，克隆一个网站的成本大概跟买一个包子差不多。

参考

• 原项目: github.com/JCodesMore/ai-website-cloner-template
• Hermes 移植版: github.com/alitrack/ai-website-cloner-template
• 竞品: github.com/ericshang98/Perfect-Web-Clone（232 stars，DOM 结构化提取路线）