{"_id":"@aicdragon/site-cloner","name":"@aicdragon/site-cloner","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aicdragon/site-cloner","version":"1.0.0","description":"AI-powered website design cloning toolkit — combines Firecrawl, Playwright, and SingleFile to extract design tokens and generate high-fidelity replicas","type":"commonjs","main":"dist/clone-site.js","bin":{"site-cloner":"bin/cli.js"},"scripts":{"build":"webpack --mode production","dev":"webpack --mode development","start":"node dist/clone-site.js","prepublishOnly":"npm run build"},"keywords":["website","design","clone","replica","firecrawl","playwright","singlefile","web-scraping","design-tokens","css-extraction","screenshot","ai-agent","cli"],"author":{"name":"CDragon"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/CDragon123-code/site-cloner.git"},"bugs":{"url":"https://github.com/CDragon123-code/site-cloner/issues"},"homepage":"https://github.com/CDragon123-code/site-cloner#readme","engines":{"node":">=18"},"dependencies":{"playwright":"^1.57.0"},"devDependencies":{"webpack":"^5.97.0","webpack-cli":"^5.1.0"},"_id":"@aicdragon/site-cloner@1.0.0","gitHead":"feb235949f354fe0a352cd9df8bc760801379c75","_nodeVersion":"22.17.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-MTJKB9rxDsR0gLW5uQ+Na5y7KM5bUoJlNzODNnNvx4P8m0bXCVkf8CWzJuDCOpKTkXaaGGeyJHGn6AsZTfCikA==","shasum":"b1d77fc2e0925bb89d0d55bd8c8640cc37756dc7","tarball":"https://registry.npmjs.org/@aicdragon/site-cloner/-/site-cloner-1.0.0.tgz","fileCount":9,"unpackedSize":234438,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGW7Q1bnh7MuDx5m04siST46HakFv+QHx3ClFZzcdhdJAiA+9BIautFWyq/LQuJJ5dJcxsnPkdaFxGz5a+PP81Bmmg=="}]},"_npmUser":{"name":"aicdragon","email":"2941278361@qq.com"},"directories":{},"maintainers":[{"name":"aicdragon","email":"2941278361@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/site-cloner_1.0.0_1783309488502_0.15970684509742017"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-06T03:44:48.319Z","1.0.0":"2026-07-06T03:44:48.648Z","modified":"2026-07-06T03:44:48.822Z"},"maintainers":[{"name":"aicdragon","email":"2941278361@qq.com"}],"description":"AI-powered website design cloning toolkit — combines Firecrawl, Playwright, and SingleFile to extract design tokens and generate high-fidelity replicas","homepage":"https://github.com/CDragon123-code/site-cloner#readme","keywords":["website","design","clone","replica","firecrawl","playwright","singlefile","web-scraping","design-tokens","css-extraction","screenshot","ai-agent","cli"],"repository":{"type":"git","url":"git+https://github.com/CDragon123-code/site-cloner.git"},"author":{"name":"CDragon"},"bugs":{"url":"https://github.com/CDragon123-code/site-cloner/issues"},"license":"MIT","readme":"# Site Cloner — AI-Powered Website Design Cloning Toolkit\n\n<p align=\"center\">\n  <img src=\"https://img.shields.io/badge/status-active-success\" alt=\"Status\">\n  <img src=\"https://img.shields.io/badge/license-MIT-blue\" alt=\"License\">\n  <img src=\"https://img.shields.io/badge/node-%3E%3D18-brightgreen\" alt=\"Node\">\n  <img src=\"https://img.shields.io/badge/npm-v1.0.0-red\" alt=\"npm\">\n  <img src=\"https://img.shields.io/badge/platform-Win%20%7C%20Mac%20%7C%20Linux-lightgrey\" alt=\"Platform\">\n</p>\n\n<div align=\"center\" class=\"lang-tabs\">\n  <a href=\"#en-content\"><b>English</b></a>\n  &nbsp;&middot;&nbsp;\n  <a href=\"#cn-content\"><b>中文</b></a>\n</div>\n\n---\n\n<a name=\"en-content\"></a>\n### Install\n\n```bash\n# From npm (recommended)\nnpm install -g site-cloner\n\n# Or from source\ngit clone https://github.com/CDragon123-code/site-cloner.git\ncd site-cloner && npm install && npm run build\n```\n\n**Prerequisites:** `firecrawl-cli` and `single-file-cli` must also be installed, plus a Playwright Chromium browser:\n\n```bash\nnpm install -g firecrawl-cli single-file-cli\nnpx playwright install chromium\n```\n\n### Quick Start\n\n```bash\n# Clone a website\nsite-cloner https://dribbble.com\n\n# Or specify output directory\nsite-cloner https://dribbble.com --output ./my-clone\n\n# Check results\n# -> output/dribbble-com/screenshot.png     Full-page screenshot\n# -> output/dribbble-com/design-tokens.json  Design parameters\n# -> output/dribbble-com/design-report.md    Analysis report\n```\n\n### What is Site Cloner?\n\nSite Cloner is a **fully automated website design reverse-engineering toolkit** that combines three free, open-source tools into a single data pipeline. Given any URL, it extracts the complete visual design system — colors, typography, spacing, CSS variables, layout rules — and generates a pixel-perfect screenshot, structured design tokens, and a full offline archive.\n\nNo API keys required. No paid services. Everything runs locally.\n\n**One command:**\n```bash\nnode scripts/clone-site.js https://dribbble.com\n```\n\n### The Three Tools\n\n| Tool | Role | Output |\n|------|------|--------|\n| **Firecrawl** | HTML structure scraping | DOM skeleton + Markdown content |\n| **Playwright** | Browser automation | Full-page screenshot + Computed Styles + CSS variables |\n| **SingleFile** | Complete page archiving | Single HTML file with all resources inlined |\n\nAll three are **free, API-key-free, and run locally**.\n\n### What It Extracts\n\n- Real design tokens — colors, fonts, spacing, border-radius, shadows\n- 2x full-page screenshots at 1440px viewport\n- Post-JS-render HTML structure (waits for SPA rendering)\n- Complete offline archive — all CSS, images, fonts inlined\n- Auto-generated design system analysis report\n- Font stack discovery — identifies all fonts including web fonts\n\n### Quick Start\n\n```bash\n# 1. Install dependencies (one time)\nnpm install -g firecrawl-cli playwright single-file-cli\nnpx playwright install chromium\n\n# 2. Clone a website\nnode scripts/clone-site.js https://dribbble.com\n\n# 3. Check the output\n# -> output/dribbble-com/screenshot.png     Full-page screenshot\n# -> output/dribbble-com/design-tokens.json  Design parameters\n# -> output/dribbble-com/design-report.md    Analysis report\n```\n\n### Output Files\n\n```\noutput/<domain>/\n├── screenshot.png          Full-page screenshot (pixel-level reference)\n├── design-tokens.json      Complete design tokens (colors/fonts/spacing/CSS vars)\n├── design-report.md        Human-readable design system analysis\n├── firecrawl-raw.html      JS-rendered HTML structure\n├── structure.md            Page content as Markdown\n├── styles-computed.css     All CSS merged (internal + external + inline)\n├── original.html           Complete offline archive (all resources inlined)\n└── replica.html            Replica framework (ready for AI-assisted completion)\n```\n\n### design-tokens.json Example\n\n```json\n{\n  \"bodyFont\": \"\\\"Mona Sans\\\", \\\"Helvetica Neue\\\", sans-serif\",\n  \"bodyFontSize\": \"16px\",\n  \"bodyLineHeight\": \"28px\",\n  \"bodyColor\": \"rgb(13, 12, 34)\",\n  \"bodyBackground\": \"rgb(255, 255, 255)\",\n  \"topColors\": [\n    { \"color\": \"rgb(6, 3, 24)\", \"count\": 143 },\n    { \"color\": \"rgb(234, 76, 137)\", \"count\": 16 }\n  ],\n  \"cssVariables\": {\n    \"--sl-color-primary-500\": \"rgb(234 76 137)\"\n  },\n  \"fonts\": [\"\\\"Mona Sans\\\"\", \"Arial\"],\n  \"navStyles\": {\n    \"height\": \"92px\",\n    \"backgroundColor\": \"rgba(0, 0, 0, 0)\"\n  },\n  \"maxWidths\": [\"1650px\", \"1200px\", \"618px\"]\n}\n```\n\n### Why Better Than Firecrawl Alone\n\n| Data Dimension | Firecrawl Alone | + Playwright + SingleFile |\n|---------------|:---:|:---:|\n| HTML structure | Yes | Yes |\n| **CSS styles content** | No (only &lt;link&gt; tags) | Yes (computed + CSS vars + inline) |\n| **Pixel-perfect screenshot** | No | Yes (1440px 2x full-page) |\n| **True color values** | No (guessing from class names) | Yes (getComputedStyle) |\n| **Font info** | No | Yes (complete font stack) |\n| **Post-JS DOM** | Incomplete | Yes (networkidle + wait) |\n| **Design Token JSON** | No | Yes (machine-consumable) |\n| **Offline archive** | No | Yes (SingleFile all assets) |\n\n### Dribbble Replication Results\n\n| Parameter | Guessed (v1) | Playwright Extracted (v2) |\n|-----------|-------------|--------------------------|\n| Brand color | `#EA4C89` | `rgb(234, 76, 137)` |\n| Font | system-ui | **Mona Sans** |\n| Text color | `#1a1a1a` | `rgb(13, 12, 34)` |\n| Nav height | 64px | **92px** |\n| Nav style | sticky + blur | **relative + transparent** |\n| Button style | pink filled | **white pill (100vmax radius)** |\n| Max widths | 1440px | **1650/1200/618px** |\n| Overall fidelity | ~60% | **80%+** |\n\n![Dribbble Replica](examples/dribbble-replica-screenshot.png)\n*Replica result: Site Cloner output based on extracted design tokens*\n\n### Use as AI Agent Skill\n\nDrop `SKILL.md` into your agent's skills directory (works with OpenClaw, Claude Code, Codex, Gemini CLI):\n\n```bash\ncp SKILL.md ~/.openclaw/workspace/skills/site-cloner/\n```\n\nThe agent can then invoke `clone-site.js` autonomously when asked to analyze or replicate a website.\n\n### AI-Assisted Workflow\n\n```\nUser: \"Clone the design of https://stripe.com\"\n  |\n  Agent runs: node scripts/clone-site.js https://stripe.com\n  |\n  Agent reads: design-tokens.json + screenshot.png + firecrawl-raw.html\n  |\n  Agent generates: replica.html with exact colors, fonts, and layout\n  |\n  User opens: replica.html in browser -> 80%+ fidelity\n```\n\n### Requirements\n\n- Node.js >= 18\n- firecrawl-cli (keyless mode: 1,000 free pages/month)\n- playwright + chromium\n- single-file-cli\n\n### Project Structure\n\n```\nsite-cloner/\n├── src/clone-site.js        Core orchestration script\n├── bin/cli.js               CLI entry point\n├── webpack.config.js        Webpack bundler config\n├── package.json             npm package config\n├── dist/                    Built output (gitignored)\n├── examples/                Sample outputs\n├── SKILL.md                 AI Agent skill definition\n└── README.md\n```\n\n**Build:** `npm run build` bundles `src/` -> `dist/` with webpack in production mode. Native modules (playwright, child_process, fs) are externalized via `webpack.config.js`.\n\n### License\n\nMIT (c) 2026\n\n[English](#en-content) | [中文](#cn-content)\n\n---\n\n<a name=\"cn-content\"></a>\n\n### 安装\n\n```bash\n# npm 安装（推荐）\nnpm install -g site-cloner\n\n# 或从源码安装\ngit clone https://github.com/CDragon123-code/site-cloner.git\ncd site-cloner && npm install && npm run build\n```\n\n**前置依赖：** 需要额外安装 `firecrawl-cli`、`single-file-cli` 和 Playwright Chromium 浏览器：\n\n```bash\nnpm install -g firecrawl-cli single-file-cli\nnpx playwright install chromium\n```\n\n### 快速开始\n\n```bash\n# 克隆网站\nsite-cloner https://dribbble.com\n\n# 指定输出目录\nsite-cloner https://dribbble.com --output ./my-clone\n\n# 查看结果\n# -> output/dribbble-com/screenshot.png     全页截图\n# -> output/dribbble-com/design-tokens.json  设计参数\n# -> output/dribbble-com/design-report.md    分析报告\n```\n\n### Site Cloner 是什么？\n\nSite Cloner 是一个**全自动网站设计逆向工程工具**，将三个免费开源工具组合成一条数据管道。输入任意网站 URL，自动提取完整的视觉设计系统——颜色、字体、间距、CSS 变量、布局规则——并生成像素级截图、结构化设计 Token 和完整离线存档。\n\n无需 API Key，无需付费服务，全部本地运行。\n\n**一条命令：**\n```bash\nnode scripts/clone-site.js https://dribbble.com\n```\n\n### 三件套分工\n\n| 工具 | 角色 | 输出 |\n|------|------|------|\n| **Firecrawl** | HTML 结构抓取 | DOM 骨架 + Markdown 内容 |\n| **Playwright** | 浏览器自动化 | 全页截图 + Computed Styles + CSS 变量 |\n| **SingleFile** | 完整页面存档 | 所有资源内联的单 HTML 文件 |\n\n三个工具全部**免费、无需 API Key、本地运行**。\n\n### 提取能力\n\n- 真实设计 Token — 颜色、字体、间距、圆角、阴影\n- 2x 高清全页截图，1440px 视口\n- JS 渲染后的完整 HTML 结构（等待 SPA 渲染完成）\n- 完整离线存档 — 所有 CSS、图片、字体内联\n- 自动生成设计系统分析报告\n- 字体栈发现 — 识别所有字体包括 web font\n\n### 快速开始\n\n```bash\n# 1. 一次性安装依赖\nnpm install -g firecrawl-cli playwright single-file-cli\nnpx playwright install chromium\n\n# 2. 克隆目标网站\nnode scripts/clone-site.js https://dribbble.com\n\n# 3. 查看输出\n# -> output/dribbble-com/screenshot.png     全页截图\n# -> output/dribbble-com/design-tokens.json  设计参数\n# -> output/dribbble-com/design-report.md    分析报告\n```\n\n### 输出文件说明\n\n```\noutput/<域名>/\n├── screenshot.png          全页截图（像素级参照）\n├── design-tokens.json      完整设计 Token（颜色/字体/间距/CSS 变量）\n├── design-report.md        人类可读的设计系统分析报告\n├── firecrawl-raw.html      JS 渲染后的 HTML 结构\n├── structure.md            页面内容 Markdown 版\n├── styles-computed.css     所有 CSS 合并（内/外部样式 + 内联样式）\n├── original.html           完整离线存档（图片/CSS/JS 全部内联）\n└── replica.html            复刻框架（AI 辅助完善）\n```\n\n### 为什么优于单独使用 Firecrawl\n\n| 数据维度 | 单用 Firecrawl | + Playwright + SingleFile |\n|---------|:---:|:---:|\n| HTML 结构 | 是 | 是 |\n| **CSS 样式内容** | 否（只有 link 标签） | 是（computed + CSS 变量 + 内联） |\n| **像素级截图** | 否 | 是（1440px 2x 全页） |\n| **真实颜色值** | 否（从 class 名推断） | 是（getComputedStyle） |\n| **字体信息** | 否 | 是（完整字体栈） |\n| **JS 渲染后 DOM** | 不完整 | 是（networkidle + 等待） |\n| **设计 Token JSON** | 否 | 是（机器可直接消费） |\n| **离线完整存档** | 否 | 是（SingleFile 全资源） |\n\n### Dribbble 复刻效果对比\n\n| 参数 | 猜测版 (V1) | Playwright 实测版 (V2) |\n|------|-----------|---------------------|\n| 品牌色 | `#EA4C89` | `rgb(234, 76, 137)` |\n| 字体 | system-ui | **Mona Sans** |\n| 文字色 | `#1a1a1a` | `rgb(13, 12, 34)` |\n| 导航高度 | 64px | **92px** |\n| 导航样式 | sticky + blur | **relative + transparent** |\n| 按钮样式 | 粉色填充 | **白色药丸 (100vmax)** |\n| 最大宽度 | 1440px | **1650/1200/618px** |\n| 整体复刻度 | ~60% | **80%+** |\n\n![Dribbble 复刻效果](examples/dribbble-replica-screenshot.png)\n*Site Cloner 基于提取的设计 Token 生成的复刻页面*\n\n### 作为 AI Agent Skill 使用\n\n将 `SKILL.md` 放入 AI Agent 的 skills 目录（支持 OpenClaw、Claude Code、Codex、Gemini CLI）：\n\n```bash\ncp SKILL.md ~/.openclaw/workspace/skills/site-cloner/\n```\n\nAgent 即可在用户要求分析或复刻网站时自动调用 `clone-site.js`。\n\n### AI 辅助工作流\n\n```\n用户：\"克隆 https://stripe.com 的设计\"\n  |\n  Agent 执行：node scripts/clone-site.js https://stripe.com\n  |\n  Agent 读取：design-tokens.json + screenshot.png + firecrawl-raw.html\n  |\n  Agent 生成：replica.html（精确颜色、字体、布局）\n  |\n  用户打开：replica.html -> 80%+ 还原度\n```\n\n### 环境要求\n\n- Node.js >= 18\n- firecrawl-cli（keyless 模式：每月免费 1,000 页）\n- playwright + chromium\n- single-file-cli\n\n### 许可证\n\nMIT (c) 2026\n\n[English](#en-content) | [中文](#cn-content)\n","readmeFilename":"README.md","_rev":"1-75611f1777e3f24e1c14f7083c7e2396"}