Loading...
modao-capture
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseModao-Capture Skill
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 installSystem Requirements:
- Node.js >= 18.0.0
- Google Chrome (automatically detected at on macOS)
/Applications/Google Chrome.app
使用方式
Usage
bash
node scripts/modao-capture.js --url "墨刀原型稿链接" --output "项目目录"bash
node scripts/modao-capture.js --url "Modao prototype link" --output "project directory"命令参数
Command Parameters
| 参数 | 说明 |
|---|---|
| 墨刀原型稿分享链接（必填） |
| 项目根目录路径（必填） |
| 并发处理数量（默认: 3） |
| 截图缩放因子 1-5（默认: 3） |
| Parameter | Description |
|---|---|
| Modao prototype sharing link (required) |
| Project root directory path (required) |
| Number of concurrent processes (default: 3) |
| Screenshot scaling factor 1-5 (default: 3) |
使用示例
Usage Examples
基本用法
Basic Usage
bash
undefinedbash
undefined抓取原型稿并输出到当前目录
Capture prototype and output to current directory
undefinedundefined自定义并发和缩放
Custom Concurrency and Scaling
bash
undefinedbash
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
--url "https://modao.cc/proto/abc123/sharing"
--output "/path/to/project"
--scale 5
--concurrency 2
undefinednode scripts/modao-capture.js
--url "https://modao.cc/proto/abc123/sharing"
--output "/path/to/project"
--scale 5
--concurrency 2
--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 folder will be created in the specified directory, containing:
modao_<Canvas Name>/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
undefinedmarkdown
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
undefinedmarkdown
undefined首页
Home Page
原型稿
Prototype
批注内容
Comment Content
批注 1
Comment 1
内容：
这是第一个批注的说明
undefinedContent:
This is the description of the first comment
undefinedClaude 使用方式
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