slides-grab

slides-grab — HTML/CSSでスライドデッキをポイントして編集

slides-grab（NomaDamas、MIT）は、オープンソースのClaude Design代替ツールです。コーディングエージェントでプレゼンテーションデッキを生成するためのハーネス、ビジュアルエディター、リンターを備えています。各スライドは、AI エージェントが最も得意とする言語であるプレーンなHTML & CSSで記述された、自己完結型のslide-XX.htmlファイルです。そのため、デッキは見栄えがよく、エージェントで簡単に編集でき、PDF（および実験的／不安定なPPTXやFigma）にエクスポートできます。特徴的な機能は、ブラウザーエディターで任意の領域をドラッグして囲み、その領域だけを書き直すようエージェントに依頼できることです。小さな調整（テキスト、サイズ、太字）は、「2024年頃のように」手作業でも引き続き行えます。このスキルは、ルーティングを優先するラッパーです。インストール方法、デッキのワークスペース、デザインスタイル、適切なアセット／エクスポートの流れを選択します。

このスキルを使う場合

• ユーザーが、トピックやソースファイルからスライドデッキを生成し、最初からプロンプトをやり直すのではなく、見た目を確認しながら反復して編集したい場合
• ユーザーが、レンダリングされたスライドの領域を指定して、その領域だけをエージェントに編集させたい場合（バウンディングボックス選択＋エージェントによる書き換え）。これは、slides-grab editを使うslides-grabの中心的なワークフローです。
• ユーザーが、手作業で調整できる（テキスト、サイズ、太字）、エージェントが35種類の組み込みデザインスタイルのいずれかでスタイルを変更できるHTML/CSSのデッキを求めている場合
• ユーザーがデッキをエクスポートしたい場合。slides-grab pdf（キャプチャ、または検索可能な--mode print）、slides-grab png（スライドごと、Instagram向けの1:1のカードニュースを含む）、または実験的／不安定なconvert（PPTX）／figma（Figmaにインポート可能なPPTX）
• ユーザーがInstagram風のカードニュース（720pt × 720ptの正方形）を作成しており、PNGを優先した出力を求めている場合
• ユーザーが、サポート対象の方法でデッキのアセットを作成する必要がある場合。slides-grab image（god-tibo-imagen／codex／nano-banana）で画像を生成する、fetch-video（yt-dlp）でウェブ動画を取得する、または.tldr図をslides-grab tldrawでスライドサイズのSVGに変換する方法があります。
• ユーザーがエクスポート前にデッキを検証し（slides-grab validate、Playwright）、ローカルアセットの欠落や推奨されないパス形式を検出したい場合

このスキルを使わない場合

• ユーザーがスライド内に編集可能なベクター図（アーキテクチャ図、ERD、UML、シーケンス図、フローチャート）を求めている場合 → drawioまたはmermaidで作成し、エクスポートした画像を埋め込みます。
• ユーザーがslides-grabのHTMLパイプラインを採用せずに、パケット優先のデッキ計画、ナラティブ構成、または最終段階の引き渡し判断（HTMLでのレビュー、PPTX、PDF、Google／Figma Slides）を求めている場合 → presentation-builder
• ユーザーがAI生成画像だけを求めている場合（デッキは不要） → god-tibo-imagen
• ユーザーが幅広いローカルのデザイン成果物生成（ウェブ／モバイル／デスクトップのプロトタイプ、メディア、72種類のデザインシステム）を求めている場合 → open-design
• デッキにピクセル単位で正確なPowerPointまたはネイティブFigmaが必要な場合。slides-grabのconvert／figmaの経路は明示的に実験的／不安定で、手動インポート用にベストエフォートの.pptxを出力し、後処理が必要です。PPTX／Figmaで完全に同等の結果を保証しないでください。

前提条件

要件	備考
Node.js >= 20	CLIの必須要件です
Playwright経由のChromium	npx playwright install chromium — レンダリング、検証、エクスポートのパイプライン
コーディングエージェント	Claude CodeまたはCodexには公式のインストールガイドがあります。バウンディングボックスによる「この領域を編集」ワークフローでは、選択範囲をエージェントに渡します。
yt-dlp（任意）	slides-grab fetch-videoでのみ使用します
Codex／ChatGPTのログイン（任意）	デフォルトのslides-grab imageプロバイダー（god-tibo-imagen）は~/.codex/auth.jsonを再利用します。別のプロバイダーにはOPENAI_API_KEYまたはGOOGLE_API_KEYが必要です。

手順

ステップ 1 — slides-grab をインストールする

パス	使用する場面	コマンド
npm パッケージ（推奨）	通常の使用 — CLI と共有スキル	npm install slides-grab → npx playwright install chromium → npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy
エージェントのインストールガイド	エージェントに最初から最後まで設定させる	Claude Code：docs/installation/claude.md を読む。Codex：docs/installation/codex.md を読み、すべての手順に従う
クローン	slides-grab 自体を開発／コントリビュートする	git clone … && cd slides-grab && npm ci && npx playwright install chromium

このスキルには、npm の手順（インストール + Playwright Chromium + npx skills add）を実行する scripts/install.sh が含まれています。 SLIDES_GRAB_NO_SKILLS=1 を指定すると、エージェントスキルの登録手順をスキップできます。

ステップ 2 — スライドデッキのワークスペースを選ぶ

ワークフローコマンドには --slides-dir <path> を指定します（デフォルト：slides）。 複数のデッキを作成する場合は、それぞれを decks/<name>/ の下に置き、 すべての段階で --slides-dir decks/<name> を指定してください。 新規インストール直後は、デッキがなくても検出コマンド（--help、 list-templates、list-styles、preview-styles）を使用できます。 edit、build-viewer、validate、convert、pdf には、 slide-*.html を含む既存のワークスペースが必要です。

ステップ 3 — 計画 → デザイン

1. 計画 — トピック／ファイルをもとに、構成されたアウトラインをエージェントに作成してもらいます。
2. デザイン — エージェントが各スライドを自己完結型の slide-XX.html として生成します。slides-grab list-styles でスタイルを確認します（同梱スタイルは 35 種： corazzon/pptx-design-styles から 30 種 + オリジナル 5 種）。または、ビジュアルギャラリーの slides-grab preview-styles を使い、 使用するスタイルをエージェントに伝えるだけです（カスタムスタイルを依頼することもできます。設定ファイルは不要です）。

ステップ 4 — 見た目を確認しながら編集する（slides-grab の使いどころ）

bash slides-grab edit --slides-dir decks/my-deck

純粋な JavaScript で作られたブラウザーエディターが起動します。任意の領域を bbox でドラッグして選択し、 その領域だけを書き換えるようエージェントに依頼できます。簡単なテキスト／サイズ／太字の編集は手作業で行います。 正方形の 1:1 デッキには、ここで（および以降のすべての段階で）--mode card-news を使用してください。 エディターファイルはプレーンな JS なので、新しいエージェントやデザインを簡単に追加できます。

ステップ 5 — サポートされている方法でアセットを追加する

ローカルの画像／動画は <slides-dir>/assets/ に保存し、./assets/<file> として参照してください。 保存済みのスライドでは、リモートの http(s):// 画像 URL と絶対ファイルシステムパスは使用できません。 data: URL は使用できます。

必要なもの	コマンド
画像を生成する	slides-grab image --slides-dir decks/my-deck --prompt "…"（デフォルトの god-tibo-imagen は ~/.codex/auth.json を再利用します。--provider codex には OPENAI_API_KEY が必要です。--provider nano-banana には GOOGLE_API_KEY が必要です）
Web 動画を取得する	slides-grab fetch-video --url <youtube-url> --slides-dir decks/my-deck --output-name hero-video（yt-dlp が必要です）
図 → SVG	slides-grab tldraw --input …/system.tldr --output …/assets/system.svg --width 640 --height 320

god-tibo-imagen は、予告なく動作しなくなる可能性がある、サポート対象外の非公開 Codex バックエンドを呼び出します。 また、画像生成が利用可能なアカウントが必要です。失敗すると、slides-grab は認証情報のあるプロバイダーにフォールバックし、 それもない場合は Web 検索とローカルへの assets/ 内ダウンロードにフォールバックします。

ステップ 6 — 検証 → エクスポート

不足しているアセットや誤ったパスを見つけるため、必ず最初に検証してください。

bash slides-grab validate --slides-dir decks/my-deck

出力	コマンド
PDF（キャプチャ、デフォルト） — ラスタライズ済みで、忠実度が最も高い	slides-grab pdf --slides-dir decks/my-deck --output decks/my-deck.pdf
PDF（印刷） — 検索・選択可能なテキスト	slides-grab pdf --slides-dir decks/my-deck --mode print --output …-searchable.pdf
スライドごとの PNG（デフォルトは 2160p）	slides-grab png --slides-dir decks/my-deck --output-dir …/out-png
カードニュース用 PNG（Instagram 1:1）	slides-grab png --slides-dir decks/my-cards --slide-mode card-news --resolution 2160p
PPTX（実験的／不安定）	slides-grab convert --slides-dir decks/my-deck --output decks/my-deck.pptx
Figma にインポート可能な PPTX（実験的／不安定）	slides-grab figma --slides-dir decks/my-deck --output …-figma.pptx
単一ファイルのビューアー	slides-grab build-viewer

pdf と convert のデフォルトは 2160p / 4k です。--resolution 720p|1080p|1440p|2160p|4k で上書きできます。<video> スライドでは、PDF エクスポートで安定した静止画を使うため、poster="./assets/<file>" を設定してください。

ステップ 7 — jeo-skills と併用するプラグイン形式のインストール

このスキルフォルダーは標準の jeo-skills フローでプラグインとしてインストールできるため、ラッパー、リファレンス、インストーラーが、サポート対象のどのランタイムでも利用できるようディスクに配置されます。

bash

プロジェクトへのインストール（.agents/skills/slides-grab/ に書き込みます）

npx skills add https://github.com/akillness/jeo-skills --skill slides-grab

検出されたすべてのエージェントにグローバルインストール

npx skills add -g https://github.com/akillness/jeo-skills --skill slides-grab

特定のエージェントを対象にする

npx skills add -g https://github.com/akillness/jeo-skills --skill slides-grab -a claude-code -a codex -y

出力形式

ユーザーから slides-grab の使い方を尋ねられた場合は、簡潔な概要を返してください。

markdown

slides-grab のルーティング概要

範囲

• インストール先：npm-package | agent-guide | clone | already-installed
• スライドデッキ：slides/ | decks/ | card-news | undecided
• 段階：plan | design | edit | assets | validate | export

次に推奨する操作

• npm-install | slides-grab edit | list-styles | slides-grab image | validate | pdf | png-card-news | convert

理由

• ユーザーの依頼内容に基づく項目を 2～3 点

別のツールへの振り分け

• drawio / mermaid — スライドに埋め込む編集可能なベクター図
• presentation-builder — 依頼内容を起点にした計画と、エクスポート先への引き継ぎ
• god-tibo-imagen — 単体の AI 画像生成
• open-design — 幅広いローカルのデザイン成果物の生成

ベストプラクティス

1. エクスポート前に必ず検証する — slides-grab validate（Playwright）は、PDF／PNG／PPTX の作成前に、ローカルアセットの不足や推奨されないパス形式を検出します。
2. アセットはローカルに置く — <slides-dir>/assets/ の下に保存し、./assets/<file> を参照してください。保存済みのスライドでは、リモート画像 URL と絶対パスは拒否されます。ウェブ動画は、まず fetch-video でダウンロードしてください。
3. すべての段階で --slides-dir を統一する — 各段階に同じスライドデッキのパスを渡してください。カードニュースでは、すべての手順で --mode card-news（エディター／検証）と --slide-mode card-news（pdf/png）を指定してください。
4. PPTX／Figma は最善努力の範囲として扱う — convert と figma は実験的／不安定です。レイアウトのずれや手作業での調整が必要になることを想定してください。忠実度を優先する場合は PDF（キャプチャ）を、カードニュースには PNG をおすすめします。
5. bbox を使った編集ループを優先する — スライド全体を再生成するのではなく、領域をドラッグして、その部分だけを書き直すようエージェントに依頼してください。テキストだけの簡単な修正は手動で行ってください。
6. 画像バックエンドの注意点に留意する — god-tibo-imagen は、画像生成の権限があるアカウントが必要な、サポート対象外の非公開 Codex バックエンドです。代替手段として OPENAI_API_KEY または GOOGLE_API_KEY を用意するか、ウェブ検索とダウンロードに切り替えてください。

References

• Upstream repo: https://github.com/NomaDamas/slides-grab
• Live showcase gallery: https://nomadamas.github.io/slides-grab/
• Install guides: docs/installation/claude.md, docs/installation/codex.md
• Feature + command reference: references/features.md
• Installer script: scripts/install.sh
• Adjacent skills: ../drawio/SKILL.md, ../presentation-builder/SKILL.md, ../god-tibo-imagen/SKILL.md, ../open-design/SKILL.md
• License: MIT