modao-capture

Modao-Capture Skill

This skill provides a Node.js script tool for scraping MockingBot prototypes, using Puppeteer for browser automation.

Environment Setup

Dependencies need to be installed before use:

npm install

System Requirements：

Node.js >= 18.0.0
Google Chrome (macOS auto-detected /Applications/Google Chrome.app）

Usage

node scripts/modao-capture.js --url "墨刀原型稿链接" --output "项目目录"

Command Parameters

Parameter	Description
`-u, --url <url>`	MockingBot prototype share link (required)
`-o, --output <dir>`	Project root directory path (required)
`-c, --concurrency <number>`	Concurrency count (default: 3)
`-s, --scale <number>`	Screenshot scale factor 1-5 (default: 3)

Usage Examples

Basic Usage

# 抓取原型稿并输出到当前目录
node scripts/modao-capture.js \
    --url "https://modao.cc/proto/abc123/sharing" \
    --output "$(pwd)"

Custom Concurrency and Scaling

# 高质量截图（缩放因子 5），并发数 2
node scripts/modao-capture.js \
    --url "https://modao.cc/proto/abc123/sharing" \
    --output "/path/to/project" \
    --scale 5 \
    --concurrency 2

Output Results

After execution, the following will be created in the specified directory: modao_画布名称/ folder, containing:

modao_画布名称/
├── README.md                    # 索引文件
├── 01_首页图1.png              # 页面截图
├── 01_首页.md                  # 页面文档
├── 02_详情页图1.png
├── 02_详情页.md
└── ...

README.md index content

# 墨刀原型稿索引

**项目ID**: abc123
**链接**: https://modao.cc/proto/abc123/sharing

---

## 页面列表

| 序号 | 页面 | 批注数 |
|------|------|--------|
| 1 | [首页](./01_首页.md) | 3 |
| 2 | [详情页](./02_详情页.md) | 0 |

Page document content

# 首页

## 原型稿
![首页](./01_首页图1.png)

## 批注内容

### 批注 1

**内容**：
这是第一个批注的说明

---

How Claude Uses It

When the user needs to scrape a MockingBot prototype:

Check dependencies: confirm node_modules is installed
Build command: build parameters according to requirements
Execute script: run using the Bash tool
Process results: parse output, analyze data

Example workflow:

用户: "抓取这个原型稿 https://modao.cc/proto/xxx/sharing"

Claude:
1. node scripts/modao-capture.js --url "https://modao.cc/proto/xxx/sharing" --output "$(pwd)"
2. 检查输出目录中的 README.md 索引
3. 读取生成的页面文档

File Structure

modao-capture/
├── .gitignore
├── SKILL.md
├── package.json
└── scripts/
    └── modao-capture.js    # 主脚本