📦 その他コミュニティ

modao-capture

墨刀（MockingBot）のプロトタイプ稿URLから、ページ全体やスクリーンショット、注釈などを自動で抽出し、Markdown形式のドキュメントとして出力することで、効率的な情報共有や議事録作成を支援するSkill。

📜 元の英語説明(参考)

墨刀原型稿抓取工具。自动从墨刀原型稿链接抓取所有页面、截图和批注，生成 Markdown 文档。使用场景包括：(1) 抓取原型稿页面 (2) 生成页面截图 (3) 提取批注内容 (4) 导出 Markdown 文档

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o modao-capture.zip https://jpskill.com/download/8797.zip && unzip -o modao-capture.zip && rm modao-capture.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/8797.zip -OutFile "$d\modao-capture.zip"; Expand-Archive "$d\modao-capture.zip" -DestinationPath $d -Force; ri "$d\modao-capture.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して modao-capture.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → modao-capture フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Modao-Capture Skill

本 skill は、墨刀（Modao）のプロトタイプ稿を抓取（スクレイピング）するための Node.js スクリプトツールを提供します。Puppeteer を使用してブラウザの自動化を行います。

環境設定

使用前に依存関係をインストールする必要があります。

npm install

システム要件：

Node.js >= 18.0.0
Google Chrome（macOS では /Applications/Google Chrome.app を自動検出）

使用方法

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

コマンドパラメータ

パラメータ	説明
`-u, --url <url>`	墨刀プロトタイプ稿の共有リンク（必須）
`-o, --output <dir>`	プロジェクトのルートディレクトリパス（必須）
`-c, --concurrency <number>`	並行処理数（デフォルト: 3）
`-s, --scale <number>`	スクリーンショットの拡大縮小率 1-5（デフォルト: 3）

使用例

基本的な使い方

# プロトタイプ稿を抓取し、現在のディレクトリに出力
node scripts/modao-capture.js \
    --url "https://modao.cc/proto/abc123/sharing" \
    --output "$(pwd)"

並行処理と拡大縮小のカスタマイズ

# 高品質スクリーンショット（拡大縮小率 5）、並行数 2
node scripts/modao-capture.js \
    --url "https://modao.cc/proto/abc123/sharing" \
    --output "/path/to/project" \
    --scale 5 \
    --concurrency 2

出力結果

実行後、指定されたディレクトリに modao_画布名称/ フォルダが作成されます。内容は以下の通りです。

modao_画布名称/
├── README.md                    # 索引ファイル
├── 01_首页图1.png              # ページスクリーンショット
├── 01_首页.md                  # ページドキュメント
├── 02_详情页图1.png
├── 02_详情页.md
└── ...

README.md 索引の内容

# 墨刀プロトタイプ稿索引

**プロジェクトID**: abc123
**リンク**: https://modao.cc/proto/abc123/sharing

---

## ページリスト

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

ページドキュメントの内容

# 首页

## プロトタイプ稿
![首页](./01_首页图1.png)

## 批注内容

### 批注 1

**内容**：
これは最初の批注の説明です

---

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. 生成されたページドキュメントを読み込みます

ファイル構造

modao-capture/
├── .gitignore
├── SKILL.md
├── package.json
└── scripts/
    └── modao-capture.js    # メインスクリプト

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Modao-Capture Skill

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

环境配置

使用前需要安装依赖：

npm install

系统要求：

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

使用方式

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

命令参数

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

使用示例

基本用法

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

自定义并发和缩放

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

输出结果

执行后会在指定目录下创建 modao_画布名称/ 文件夹，包含：

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

README.md 索引内容

# 墨刀原型稿索引

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

---

## 页面列表

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

页面文档内容

# 首页

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

## 批注内容

### 批注 1

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

---

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. 读取生成的页面文档

文件结构

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