Website Pickpocket

SKILL.md

---
name: website-pickpocket
description: 网站扒手 - 完美复刻任意网站的工具。支持静态/动态页面抓取、资源下载、多框架输出（原生HTML/React/Vue/Angular）。触发场景：(1) 抓取网站生成静态副本 (2) 将网站转换为React/Vue项目 (3) 离线浏览网站 (4) 网站备份迁移
---

# 网站扒手 (Website Pickpocket)

一键复刻任意网站，生成可离线运行的静态版本或多框架项目。

## 快速开始

### 基础用法

```bash
# 原生HTML输出（默认）
pickpocket https://example.com

# 指定输出目录
pickpocket https://example.com -o my-project

# React项目输出
pickpocket https://example.com --framework react

# Vue项目输出
pickpocket https://example.com --framework vue
```

### 交互式引导

```bash
pickpocket
? 请输入要抓取的网站URL: https://example.com
? 选择输出框架: [原生HTML/React/Vue/Angular/Svelte]
? 爬取深度: [0=仅首页/1=首页+链接/2=递归2层/...]
```

## 核心功能

### 1. 智能爬取

- **静态页面**: 使用Cheerio快速解析
- **动态页面(SPA)**: Playwright等待DOM稳定后抓取
- **深度控制**: 0-5层递归爬取
- **去重机制**: URL规范化 + 已访问记录

### 2. 资源处理

| 资源类型 | 处理方式 |
|---------|---------|
| HTML | 解析DOM、提取结构 |
| CSS | 下载、提取内联样式 |
| JS | 下载、提取内联脚本 |
| 图片 | 下载、压缩(可选) |
| 字体 | 下载、Webfont处理 |
| 媒体 | 音视频资源下载 |

### 3. 框架输出

```
原生HTML          → 直接保存，资源本地化
React (Vite)      → .jsx组件 + react-router
Vue 3 (Vite)     → .vue单文件组件 + vue-router
Angular           → 模块化结构
Svelte            → .svelte组件
Tailwind CSS      → 原生HTML + Tailwind CSS (默认)
```

## 配置详解

### 命令行参数

```bash
pickpocket <url> [options]

# 必选参数
<url>                  # 要抓取的网站URL

# 输出选项
-o, --output <dir>    # 输出目录 (默认: ./output/[域名])
--framework <type>    # 输出框架: html|react|vue|vue3|angular|svelte|tailwind (默认: tailwind)
--name <name>        # 项目名称 (默认: 从域名提取)

# 爬取选项
-d, --depth <n>      # 爬取深度 0-5 (默认: 1)
-l, --limit <n>      # 最大页面数 (默认: 50)
--concurrency <n>    # 并发数 1-20 (默认: 5)

# 资源选项
--no-images          # 不下载图片
--no-css             # 不下载CSS
--no-js              # 不下载JavaScript
--optimize           # 压缩图片
--quality <n>        # 图片质量 1-100 (默认: 80)

# 其他
-c, --config <file>  # 配置文件路径
--verbose            # 详细输出
-h, --help           # 显示帮助
```

### 配置文件

创建 `pickpocket.yaml`:

```yaml
startUrl: https://example.com
framework: react

crawl:
  depth: 2
  maxPages: 100
  concurrency: 10
  waitStrategy: domstable

resources:
  download: true
  maxFileSize: 10485760  # 10MB
  imageQuality: 80
  optimizeImages: true

output:
  name: my-project
  directory: ./output
  overwrite: false
```

## 工作流程

```
1. 验证URL → 检查格式和网络连通性
2. 加载配置 → 合并CLI参数和配置文件
3. 爬取页面 → 按深度递归抓取
4. 下载资源 → 并发下载，本地化存储
5. 路径重写 → 修正HTML中的资源引用
6. 框架转换 → 转换为目标框架结构
7. 输出完成 → 生成可运行的项目
```

## 输出结构

### React项目

```
output/
├── src/
│   ├── components/
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   │   └── ...
│   ├── pages/
│   │   ├── Home.jsx
│   │   └── ...
│   ├── styles/
│   ├── App.jsx
│   └── main.jsx
├── public/
│   ├── images/
│   ├── fonts/
│   └── ...
├── package.json
└── vite.config.js
```

### Vue项目

```
output/
├── src/
│   ├── components/
│   ├── views/
│   ├── assets/
│   ├── App.vue
│   └── main.js
├── public/
├── package.json
└── vite.config.js
```

### Tailwind CSS项目

```
output/
├── src/
│   └── css/
│       └── main.css
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
└── postcss.config.js
```

## 高级用法

### 登录态保持

```yaml
session:
  cookies:
    - name: session_id
      value: "xxx"
  localStorage:
    - key: user
      value: '{"id": 1}'
```

### 自定义等待条件

```yaml
crawl:
  waitStrategy: custom
  waitForSelector: "#app.loaded"
  waitTimeout: 30000
```

### URL过滤规则

```yaml
filter:
  allowedDomains:
    - example.com
    - api.example.com
  blockedDomains:
    - admin.example.com
  allowedPaths:
    - /blog/*
    - /docs/*
  blockedPaths:
    - /admin/*
    - /api/*
```

## 故障排查

### 问题: 页面内容为空

- 原因: SPA等待时间不足
- 解决: 增加 `waitTimeout` 或使用 `domstable` 策略

### 问题: 资源404错误

- 原因: 相对路径转换失败
- 解决: 检查 `baseUrl` 配置是否正确

### 问题: 反爬虫拦截

- 原因: 网站有防护机制
- 解决: 使用 `--user-agent` 伪装或配置代理

### 问题: 内存溢出

- 原因: 爬取页面过多
- 解决: 减少 `depth` 和 `maxPages` 参数

## 技术栈

- **Playwright** - 浏览器自动化
- **Cheerio** - HTML解析
- **Axios** - HTTP请求
- **Sharp** - 图片处理
- **PostCSS** - CSS转换
- **Zod** - 配置验证
- **Clack** - 交互式CLI