Clone Page

克隆网页

使用 Playwright 渐进式采集页面数据，然后分阶段还原 HTML/CSS。

前置条件： Node.js >= 18（Playwright + Chromium 首次运行自动安装）

采集脚本

从技能目录下的 scripts/ 运行：

node scripts/clone.mjs <url> <command> [options]

两种还原模式

🚀 快速还原（推荐先用这个）

适合快速出原型，token 消耗少，几分钟完成。

采集：

node scripts/clone.mjs <url> quick -o ./clone-data --scroll

数据源优先级：

1. ⭐⭐⭐⭐⭐ screenshot.png — 视觉真相，以它为准
2. ⭐⭐⭐⭐ theme.json — 颜色、字体、间距等设计令牌
3. ⭐⭐⭐ skeleton.json — DOM 骨架（了解层级和语义标签）

还原步骤：

1. 看 screenshot.png，理解页面整体布局
2. 读 theme.json，提取关键设计令牌（主色、字体、间距、圆角、阴影）
3. 粗读 skeleton.json --depth=2，了解大的 section 划分
4. 按 header → main → footer 的顺序，参照截图逐 section 写 HTML/CSS
5. 使用 theme.json 中的值作为 CSS 变量

# 渐进式读取数据
node scripts/query.mjs ./clone-data summary
node scripts/query.mjs ./clone-data skeleton --depth=2

🎨 高精度还原

适合生产环境，还原到像素级别。在快速还原的基础上追加采集。

采集：

# 先执行 quick（如果还没有）
node scripts/clone.mjs <url> quick -o ./clone-data --scroll

# 然后逐 section 深入采集样式
node scripts/clone.mjs <url> styles -o ./clone-data --selector "header"
node scripts/clone.mjs <url> styles -o ./clone-data --selector "main > section:nth-child(1)"
node scripts/clone.mjs <url> styles -o ./clone-data --selector "main > section:nth-child(2)"
node scripts/clone.mjs <url> styles -o ./clone-data --selector "footer"

# 需要时：交互态
node scripts/clone.mjs <url> interact -o ./clone-data --hover "nav a:first-child"

# 需要时：响应式截图
node scripts/clone.mjs <url> responsive -o ./clone-data

# 最后：下载资源
node scripts/clone.mjs <url> assets -o ./clone-data

数据源优先级：

1. ⭐⭐⭐⭐⭐ screenshot.png — 还是以截图为准
2. ⭐⭐⭐⭐⭐ sections/*/nodes.json — 精确的 DOM 结构 + selector
3. ⭐⭐⭐⭐⭐ sections/*/styles.json — 完整的 computedStyle
4. ⭐⭐⭐⭐ theme.json — 设计令牌
5. ⭐⭐⭐ sections/*/screenshot.png — 单 section 截图对比

还原步骤：

1. 同快速还原 Step 1-3
2. 查看已采集的 section 列表：

   node scripts/query.mjs ./clone-data sections
   

3. 逐 section 还原：

   # 查看 section 的完整数据（DOM + 样式）
   node scripts/query.mjs ./clone-data section header
   

   • 按 nodes.json 中的 children 严格构建层级
   • 按 styles.json 中的 styleId 应用精确样式
   • 对比 screenshot.png 微调
4. 如果 section 样式不够精确，可以进一步缩小 selector 范围重新采集
5. 如果需要 hover/focus 态，使用 interact 命令采集
6. 使用 assets/ 目录中的图片和字体

采集命令速查

查询命令速查

node scripts/query.mjs <dir> summary                  # 概览
node scripts/query.mjs <dir> skeleton --depth=2        # 骨架（前 2 层）
node scripts/query.mjs <dir> subtree n2 --depth=3      # 某节点子树
node scripts/query.mjs <dir> node n15                  # 单节点（含已采集样式）
node scripts/query.mjs <dir> sections                  # 已采集的 section 列表
node scripts/query.mjs <dir> section header            # 某 section 的完整数据
node scripts/query.mjs <dir> find --tag=button         # 按标签查找
node scripts/query.mjs <dir> find --text="登录"        # 按文本查找
node scripts/query.mjs <dir> find --interactive        # 交互元素
node scripts/query.mjs <dir> file theme.json           # 读取任意文件

产出目录结构

clone-data/
├── meta.json              # 元信息（url, title, phases, sections）
├── screenshot.png         # 全页截图
├── theme.json             # 设计令牌
├── skeleton.json          # DOM 骨架树（含 selector）
│
├── sections/              # 按 section 的样式（逐步追加）
│   ├── header/
│   │   ├── nodes.json     # DOM + selector + bbox + styleId
│   │   ├── styles.json    # computedStyle 去重池
│   │   └── screenshot.png
│   └── main-section-nth-child-1/
│       └── ...
│
├── interactions/           # 交互态数据
│   ├── hover-nav-a.png
│   └── hover-nav-a-styles.json
│
├── responsive/             # 多视口截图
│   ├── desktop.png
│   ├── tablet.png
│   └── mobile.png
│
└── assets/                 # 下载的资源
    ├── images/
    ├── fonts/
    ├── svgs/
    └── manifest.json

需要登录的页面

# 方法 1: 连接已登录的 Chrome（推荐）
# 先启动 Chrome:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
# 在 Chrome 中登录后运行:
node scripts/clone.mjs https://internal.site.com quick --connect-cdp http://localhost:9222

# 方法 2: 显示浏览器窗口手动登录
node scripts/clone.mjs https://internal.site.com quick --no-headless

提示

• 截图是最终真相 — 如果数据与截图冲突，以截图为准
• 渐进式采集 — 不需要一次 full，先 quick 看效果，再按需 styles
• selector 是桥梁 — skeleton.json 中每个节点都有 CSS selector，用于后续精确定位
• 每个 Phase 独立 — 数据增量追加，不会覆盖已有内容
• 先粗后细 — 快速还原出大框架 → 对比截图 → 精细调整