clone-page

Files (13)

• SKILL.md
• clone.mjs · scripts/
• extract-assets.js · scripts/inject/
• extract-section-styles.js · scripts/inject/
• extract-skeleton.js · scripts/inject/
• assets.mjs · scripts/lib/
• browser.mjs · scripts/lib/
• init.mjs · scripts/lib/
• interact.mjs · scripts/lib/
• responsive.mjs · scripts/lib/
• section-styles.mjs · scripts/lib/
• skeleton.mjs · scripts/lib/
• query.mjs · scripts/

SKILL.md (first lines)

# 克隆网页

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

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

## 采集脚本

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

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

## 两种还原模式

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

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

**采集：**
```bash
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 变量

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

---

### 🎨 高精度还原

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

**采集：**
```bash
# 先执行 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 列表：
   ```bash
   node scripts/query.mjs ./clone-data sections
   ```
3. 逐 section 还原：
   ```bash
   # 查看 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/` 目录中的图片和字体

---

## 采集命令速查

| 命令 | 用途 | 产出 |
|------|------|------|
| `quick` | 快速模式 = init + skeleton | screenshot + meta + theme + skeleton |
| `full` | 全量模式 = init + skeleton + responsive + assets | 上述 + 响应式截图 + 资源 |
| `init` | 截图 + 元信息 + 设计令牌 | screenshot.png, meta.json, theme.json |
| `skeleton` | DOM 骨架（不含样式） | skeleton.json |
| `styles --selector "X"` | 指定区域的完整样式 | sections/X/nodes.json + styles.json + screenshot.png |
| `interact` | 交互态截图 | interactions/*.png + *-styles.json |
| `responsive` | 多 viewport 截图 | responsive/*.png |
| `assets` | 下载图片/字体/SVG | assets/ |

## 查询命令速查

```bash
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                  # 单节点（含已采集样式）

From fern-ok/prototype-demo, Apache-2.0.

More from fern-ok/prototype-demo