Site Cloner：一条命令克隆任意网站的设计，三种免费工具的组合拳的skill

AICDragon

280人浏览 · 2026-07-06 12:43:17

AICDragon · 2026-07-06 12:43:17 发布

如果你需要复刻一个网站的设计——提取它的颜色、字体、布局规则、CSS 变量，然后生成一个高度还原的 HTML 版本——传统的做法是什么？

打开浏览器 DevTools，一个一个元素查 Computed Styles，手动抄色值，猜字体，量间距，截图做参考……然后手写 HTML 和 CSS。一个网站下来，半天起步是常态。

有没有一条命令解决这件事的方法？有。

Site Cloner：三个免费工具串成的设计逆向管道

Site Cloner 是一个开源工具，它的核心逻辑很简单：把 Firecrawl、Playwright 和 SingleFile 三个免费工具串成一条自动化管道，输入一个 URL，输出完整的设计系统数据。

node scripts/clone-site.js https://dribbble.com

一条命令跑完之后，你会在 output/dribbble-com/ 目录下看到这些文件：

screenshot.png：1440px 视口的 2x 高清全页截图，像素级视觉参考
design-tokens.json：从浏览器 computed styles 提取的完整设计参数——颜色、字体、字号、行高、间距、CSS 变量、导航样式、按钮样式
design-report.md：人类可读的设计系统分析报告
firecrawl-raw.html：JS 渲染后的完整 HTML 结构
styles-computed.css：所有内部和外部样式表合并后的完整 CSS
original.html：SingleFile 生成的离线存档，所有图片、CSS、字体内联在一个文件里

三个工具各司其职：

工具	角色	输出
Firecrawl	HTML 结构抓取	DOM 骨架 + Markdown 内容
Playwright	浏览器自动化	全页截图 + Computed Styles + CSS 变量
SingleFile	完整页面存档	所有资源内联的单 HTML 文件

三个工具全部免费、无需 API Key、本地运行。Firecrawl 走 keyless 模式，每月免费 1,000 页；Playwright 用本地 Chromium 浏览器；SingleFile 是纯本地 CLI。

Dribbble 实测：从「猜」到「测」

为了验证这套工具的效果，我们用它跑了 Dribbble 官网。以下展示的是复刻的效果图：
在这里插入图片描述

第一轮，只用 Firecrawl 抓 HTML 结构，从 class 名推断设计参数，手工写了一版复刻。结果有些参数偏差很大——导航毛玻璃是猜的，按钮样式是猜的，font-family 也是猜的。

第二轮，加入 Playwright 的 computed styles 提取能力，结果变化很大：

参数	猜测版	Playwright 实测版
品牌色	`#EA4C89`	`rgb(234, 76, 137)`
字体	system-ui	Mona Sans（GitHub 定制字体）
主文字色	`#1a1a1a`	`rgb(13, 12, 34)` 深蓝黑
导航高度	64px	92px
导航样式	sticky + backdrop-blur	relative + transparent
按钮样式	粉色填充	白色药丸，border-radius: 10,000,000px
最大宽度	1440px	1650px / 1200px / 618px
整体还原度	约 60%	80%+

最典型的偏差是导航。从 class 名推断，以为它是 sticky + 毛玻璃模糊。但 Playwright 的 getComputedStyle 实际返回的是 position: relative，背景完全透明，高度 92px 而非 64px。

按钮也类似。Dribbble 的 CTA 按钮不是粉色填充，而是白色背景 + 深色文字的全圆角药丸形状（borderRadius: "1e+07px"——这是 CSS 中把 border-radius 设为极大值来确保完全圆角的常见做法）。

Playwright 还提取了完整的 CSS 变量体系，包括 Shoelace 组件库的 primary 色阶：

{
  "--sl-color-primary-50": "rgb(254 248 250)",
  "--sl-color-primary-500": "rgb(234 76 137)",
  "--sl-color-primary-950": "rgb(69 22 40)"
}

这些数据，只看 HTML class 名是永远拿不到的。必须有浏览器渲染引擎实际计算才能得到真实值。

为什么单独用 Firecrawl 不够

Firecrawl 是一个非常高效的工具——它能把任意网页转成干净的 Markdown 和 HTML。但它的设计目标是「给 LLM 提供可读的网页内容」，不是「做设计逆向工程」。

以下对比表说明了差距：

数据维度	单用 Firecrawl	+ Playwright + SingleFile
HTML 结构	是	是
CSS 样式内容	否（只有 link 标签）	是（computed + CSS 变量 + 内联）
像素级截图	否	是（1440px 2x 全页）
真实颜色值	否（从 class 名推断）	是（getComputedStyle）
字体信息	否	是（完整字体栈）
JS 渲染后 DOM	不完整	是（networkidle + 3s 等待）
设计 Token JSON	否	是（机器可直接消费）
离线完整存档	否	是（SingleFile 全资源）

组合后的效果是质变：从「猜设计」变成「测设计」。

作为 AI Agent Skill 使用

Site Cloner 不仅是一个独立命令行工具，它也可以作为 AI Agent 的 Skill 运行。
在这里插入图片描述

将 SKILL.md 放入 Agent 的 skills 目录后（支持 OpenClaw、Claude Code、Codex、Gemini CLI），AI Agent 就能自动完成整个流程：

用户："克隆 https://stripe.com 的设计"
  |
  Agent 执行：node scripts/clone-site.js https://stripe.com
  |
  Agent 读取：design-tokens.json + screenshot.png + firecrawl-raw.html
  |
  Agent 生成：replica.html（精确颜色、字体、布局）
  |
  用户打开：replica.html -> 80%+ 还原度

这个工作流的关键在于：Agent 不仅有 HTML 结构，还有精确的样式数值和像素级截图作为视觉参考。三个维度的信息同时可用，AI 生成复刻代码的准确度会大幅提升。

输出数据的结构

design-tokens.json 的设计思路是「机器可直接消费」——结构化为标准的 JSON，适合 AI Agent 或自动化脚本读取：

{
  "bodyFont": "\"Mona Sans\", \"Helvetica Neue\", sans-serif",
  "bodyFontSize": "16px",
  "bodyLineHeight": "28px",
  "bodyColor": "rgb(13, 12, 34)",
  "bodyBackground": "rgb(255, 255, 255)",
  "topColors": [
    { "color": "rgb(234, 76, 137)", "count": 16 }
  ],
  "navStyles": { "height": "92px", "position": "relative" },
  "btnStyles": { "borderRadius": "1e+07px", "backgroundColor": "rgb(255, 255, 255)" },
  "maxWidths": ["1650px", "1200px", "618px"]
}

Top 15 颜色按使用频率排序，可以直接建立色板。导航和按钮的完整 computed style 可以直出为 CSS。最大宽度列表直接对应响应式断点。

安装和开始

# 一次性安装依赖
npm install -g firecrawl-cli playwright single-file-cli
npx playwright install chromium

# 克隆项目
git clone https://github.com/CDragon123-code/site-cloner.git
cd site-cloner

# 跑一个网站
node scripts/clone-site.js https://dribbble.com

Node.js >= 18，Windows / Mac / Linux 全平台支持。