Screenshot Kit

📸 screenshot-kit

AI でマニュアル画像を量産するための Claude Code スキル。 HTML/CSS で描いた図解と、ブラウザ画面のスクショを自動生成できます。

特徴

• 🎨 HTML → PNG：パステルカラー + 絵文字で読みやすい図解を大量生成
• 🌐 URL → PNG：複数のWebページを一括スクショ（Cookie バナー自動閉じ対応）
• 📐 適切なサイズ：標準 1280×800 @1x（拡大しすぎない）
• 🔧 CLI ベース：任意のプロジェクトから呼び出し可能
• 🎯 Claude Code スキル：自然言語で発動できる

インストール

グローバル（全プロジェクト共通）

cd ~/.claude/skills/
git clone https://github.com/dejiinaworks-png/screenshot-kit.git
bash screenshot-kit/scripts/install-playwright.sh

プロジェクトローカル

cd your-project/.claude/skills/
git clone https://github.com/dejiinaworks-png/screenshot-kit.git

使い方

パターン1：ブラウザ画面を一括撮影

`capture-jobs.json` を作成：

[
  {
    "url": "https://claude.ai/",
    "out": "01/homepage.png",
    "waitFor": "networkidle",
    "delay": 2000,
    "desc": "Claude.ai トップ"
  },
  {
    "url": "https://cursor.com/",
    "out": "02/cursor-top.png",
    "waitFor": "domcontentloaded",
    "delay": 3000,
    "desc": "Cursor トップ"
  }
]

実行：

node ~/.claude/skills/screenshot-kit/scripts/browser-capture.mjs \
  --config ./capture-jobs.json \
  --out-dir ./public/images

パターン2：HTML 図解を PNG 化

`templates/` に HTML を配置：

templates/
├── 3-tier-relation.html
├── step-flow.html
└── pyramid.html

実行：

node ~/.claude/skills/screenshot-kit/scripts/diagram-generate.mjs \
  --templates-dir ./templates \
  --out-dir ./public/images/diagrams

オプション

引数	デフォルト	説明
--viewport-width	1280	画面の幅 (px)
--viewport-height	800 (browser) / 900 (diagram)	画面の高さ
--scale	1	Retina用に2にすると2倍解像度
--config	./capture-jobs.json	ジョブ定義 JSON
--templates-dir	./templates	HTML 入力フォルダ
--out-dir	./output	PNG 出力フォルダ

デザインガイドライン

読みやすい図解を作るコツ：

1. パステル背景 + 濃い色文字 で柔らかさと可読性
2. 絵文字を活用 🔍 🧠 ✍️ → 直感的に伝わる
3. グラデーション linear-gradient(135deg, #eff6ff, #dbeafe) で立体感
4. 角丸 12px で統一
5. font-family に `"Noto Sans JP