NomaDamas/slides-grab

slides‑grab – AI増強型HTMLスライドエディタ

何ができるか – slides‑grab はNodeベースのCLIおよびブラウザエディタで、大規模言語モデルエージェント（Claude、Codexなど）が、自己完結型のHTML + CSSファイルとしてプレゼンテーションデッキを作成・編集・エクスポートできます。ユーザーはスライドの任意の部分にバウンディングボックスをドラッグし、AIエージェントにテキストの再作成、スタイルの変更、画像の置き換えを依頼できます。変更はHTMLソースに直接反映されます。その後、デッキはPDF、実験的PPTX、またはFigma互換形式にバンドルされます。

なぜ重要か – 多くのAIスライド生成ツールは静的HTMLや画像を出力します。slides‑grabは、視覚的選択インターフェースを提供することで、生成と反復編集のギャップを埋め、デッキを完全に編集可能、検索可能、再エクスポートしやすい状態に保ちます。

---

コア機能（READMEに記載）

• AI駆動のワークフロー – エージェントはアウトラインの計画、各スライドのHTMLでのデザイン、バウンディングボックス選択による編集、エクスポートを実行できます。
• ブラウザベースのビジュアルエディタ – ドラッグによる選択、インラインテキスト編集、エージェントの再作成を呼び出すボタンを備えた純JavaScriptエディタ。
• 豊富なエクスポートオプション
  • slides‑grab pdf – ラスターキャプチャPDF（デフォルト）または検索可能なテキストPDF（--mode print）。
  • slides‑grab convert – 実験的PPTXエクスポート（ラスターエンジンまたはテキストエンジン）。
  • slides‑grab figma – Figmaスライドにインポート可能な形式のPPTX。
  • slides‑grab png – スライドごとのPNG、Instagram風グラフィック用の特別なcard‑news 1:1モード。
• デザインスタイルカタログ – 95種類のバンドルされたスタイル（pptx-design‑stylesから30種、ネイティブ5種、design‑diversityから60種）。ユーザーはスタイルを一覧表示、プレビュー、またはエージェントにスタイルの選択を依頼できます。
• テンプレートおよび画像ネイティブパイプライン – 既存のPPTX/HTMLテンプレートをインポート、または組み込みのcodex‑imagenプロバイダ（OpenAIまたはGeminiにフォールバック）を使って画像からスライドを生成。アセットは<slides‑dir>/assets/にローカルに保存されます。
• CLIユーティリティ – edit、edit-image、validate（Playwrightベース）、tldraw（tldraw図をSVGに変換）、fetch-video（yt‑dlpダウンロード）、共有Vercelエージェントスキルのインストールヘルパーなど。
• 拡張可能 – エディタは単一のJavaScriptファイルで構成されており、プロジェクト全体を再ビルドせずに新しいエージェント、デザイン、コマンドを追加できます。

---

クイックスタート（READMEから）

# クローンして依存関係をインストール
git clone https://github.com/NomaDamas/slides-grab.git && cd slides-grab
npm ci && npx playwright install chromium   # 検証に必要

# またはnpmパッケージを直接インストール
npm install slides-grab
npx playwright install chromium
npx slides-grab install-skills --target all --scope user

CLIはデフォルトでslides/フォルダ内のHTMLスライドを対象に動作します。例のワークフロー：

slides-grab edit               # ビジュアルエディタを開く
slides-grab validate           # PlaywrightでHTMLを検証
slides-grab pdf --output deck.pdf
slides-grab convert --output deck.pptx

---

一般的な利用シーン

• 迅速なAI生成デッキ – ClaudeやCodexにスライドアウトラインとHTMLファイルの生成を依頼し、特定のセクションを視覚的に調整。
• デザインの探求 – 95スタイルのギャラリーを閲覧し、即座にスタイルを選択、またはエージェントにカスタムデザインを提案させる。
• 画像中心のストーリーテリング – slides‑grab imageで全スライドの画像を生成（デフォルトはCodexのプライベート画像バックエンドを使用）し、edit-imageで編集。
• 企業フォーマットへのエクスポート – HTMLデッキをPPTXに変換してPowerPoint用、またはFigma互換PPTXに変換してデザインの引き渡し用。
• ソーシャルメディアカード – card‑newsモードを使って、InstagramやLinkedIn用に即座に使える正方形PNGを生成。

---

インストールノート

• Node ≥ 20が必要。
• validateコマンドにはPlaywrightが必要（npx playwright install chromiumでchromiumバイナリをインストール）。
• 画像生成のデフォルトは組み込みのcodex‑imagenプロバイダで、ローカルのCodex ChatGPTログイン（~/.codex/auth.json）を再利用します。--providerと適切なAPIキー環境変数でopenai、nano‑banana/Geminiなどの代替プロバイダを選択可能。
• npmパッケージにはCLIと共有Vercelエージェントスキルが含まれます。開発やカスタム拡張が必要な場合のみ、リポジトリをクローンする必要があります。

---

ライセンスと謝辞

• MITライセンスで提供。
• ppt_team_agentプロジェクト（Builder Josh）を基盤として構築されています（READMEの謝辞参照）。

---

結論 – slides‑grabは本格的なオープンソースツールで、AIエージェントと編集可能なHTMLスライド形式を組み合わせ、生成 → 視覚的選択 → インプレイスAI再作成 → 多形式エクスポートというループをユーザーに提供します。