modao-capture

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Modao-Capture Skill

本 skill 提供墨刀原型稿抓取的 Node.js 脚本工具，使用 Puppeteer 进行浏览器自动化。

This skill provides a Node.js script tool for Modao prototype capture, using Puppeteer for browser automation.

环境配置

Environment Configuration

使用前需要安装依赖：

bash

npm install

系统要求：

Node.js >= 18.0.0
Google Chrome（macOS 自动检测
```
/Applications/Google Chrome.app
```
）

Install dependencies before use:

bash

npm install

System Requirements:

Node.js >= 18.0.0
Google Chrome (automatically detected at
```
/Applications/Google Chrome.app
```
on macOS)

使用方式

Usage

bash

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

bash

node scripts/modao-capture.js --url "Modao prototype link" --output "project directory"

命令参数

Command Parameters

参数	说明
`-u, --url <url>`	墨刀原型稿分享链接（必填）
`-o, --output <dir>`	项目根目录路径（必填）
`-c, --concurrency <number>`	并发处理数量（默认: 3）
`-s, --scale <number>`	截图缩放因子 1-5（默认: 3）

Parameter	Description
`-u, --url <url>`	Modao prototype sharing link (required)
`-o, --output <dir>`	Project root directory path (required)
`-c, --concurrency <number>`	Number of concurrent processes (default: 3)
`-s, --scale <number>`	Screenshot scaling factor 1-5 (default: 3)

使用示例

Usage Examples

基本用法

Basic Usage

bash

undefined

bash

undefined

抓取原型稿并输出到当前目录

Capture prototype and output to current directory

node scripts/modao-capture.js
--url "https://modao.cc/proto/abc123/sharing"
--output "$(pwd)"

undefined

node scripts/modao-capture.js
--url "https://modao.cc/proto/abc123/sharing"
--output "$(pwd)"

undefined

自定义并发和缩放

Custom Concurrency and Scaling

bash

undefined

bash

undefined

高质量截图（缩放因子 5），并发数 2

High-quality screenshot (scaling factor 5), concurrency 2

node scripts/modao-capture.js
--url "https://modao.cc/proto/abc123/sharing"
--output "/path/to/project"
--scale 5
--concurrency 2

undefined

node scripts/modao-capture.js
--url "https://modao.cc/proto/abc123/sharing"
--output "/path/to/project"
--scale 5
--concurrency 2

undefined

输出结果

Output Results

执行后会在指定目录下创建

modao_画布名称/

文件夹，包含：

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

After execution, a

modao_<Canvas Name>/

folder will be created in the specified directory, containing:

modao_<Canvas Name>/
├── README.md                    # Index file
├── 01_HomePage1.png            # Page screenshot
├── 01_HomePage.md              # Page document
├── 02_DetailPage1.png
├── 02_DetailPage.md
└── ...

README.md 索引内容

README.md Index Content

markdown

undefined

markdown

undefined

墨刀原型稿索引

Modao Prototype Index

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

Project ID: abc123 Link: https://modao.cc/proto/abc123/sharing

页面列表

Page List

序号	页面	批注数
1	首页	3
2	详情页	0

undefined

Serial Number	Page	Number of Comments
1	Home Page	3
2	Detail Page	0

undefined

页面文档内容

Page Document Content

markdown

undefined

markdown

undefined

首页

Home Page

原型稿

Prototype

批注内容

Comment Content

批注 1

Comment 1

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

undefined

Content: This is the description of the first comment

undefined

Claude 使用方式

Usage with Claude

当用户需要抓取墨刀原型稿时：

检查依赖：确认已安装 node_modules
构建命令：根据需求构建参数
执行脚本：使用 Bash 工具运行
处理结果：解析输出，分析数据

示例工作流：

用户: "抓取这个原型稿 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. 读取生成的页面文档

When users need to capture Modao prototypes:

Check Dependencies: Confirm node_modules are installed
Build Command: Construct parameters according to requirements
Execute Script: Run using Bash tool
Process Results: Parse output and analyze data

Example Workflow:

User: "Capture this prototype https://modao.cc/proto/xxx/sharing"

Claude:
1. node scripts/modao-capture.js --url "https://modao.cc/proto/xxx/sharing" --output "$(pwd)"
2. Check the README.md index in the output directory
3. Read the generated page documents

文件结构

File Structure

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

modao-capture/
├── .gitignore
├── SKILL.md
├── package.json
└── scripts/
    └── modao-capture.js    # Main script