切り抜きと編集 — slides-grabがAIでプレゼンテーションレイアウトを簡素化する方法
プレゼンテーションの作成は、大半のエンジニアにとって伝統的な頭痛の種です。ピッチ、Meetupでの発表、四半期レポートなどを素早くまとめる必要があるとき、選択肢は2つだけです。1つはPowerPointやFigmaなどの重量級エディタと格闘すること。もう1つはLLMにスライド付きのHTMLコードを生成させることです。
2番目の道は魅力的に見えますが、日常的なタスクではすぐに壁にぶつかります。見出しのフォントを変更したり、画像 を数ピクセル左にずらしたりする必要がある場合，要么手动搜索正确的标签，要么编写另一个冗长的提示。作为回应，神经网络经常重写整个幻灯片并破坏相邻块的布局。
slides-grabプロジェクトは、別のソリューションを提供します。ブラウザ内のビジュアルエディタ、レイアウトバリデーター、AIエージェント接続用のラッパーを組み合わせたローカルツールです。
プロジェクトの概要
slides-grabの作者たちは、言語モデルは純粋なHTMLとCSSのレイアウトに優れているというシンプルな事実から出発しました。主な問題はコード生成ではなく、文脈の伝達はです。モデルに、スライド上のどの要素が気に入らないかをどのように伝えますか？
このツールはエリア選択でこの問題を解決します。ローカルエディタを起動し、ブラウザでスライドを直接確認し、マウスで必要なブロックを選択すると、エディタはClaude CodeやOpenAI CodexなどのAIエージェント向けに正確な文脈を形成します。「このブロックを暗くしてパディングを追加して」と書くと、エージェントは対応するHTMLスニペットのみを変更します。
誤字やテキストサイズなどの小さな編集は、ブラウザで直接手動で行うことができます。IDEでタグを移動する必要はありません。
スライド操作的仕組み
すべてのスライドは、slide-01.html、slide-02.htmlなどの отдельныхファイルとして作業ディレクトリに保存されます。メディアファイルは近くのassets/フォルダに置かれています。ベンダー形式やクローズドなクラウドサービスに縛られることはありません。明日ツールの開発が中止になっても、通常のWebコードが手元に残ります。
プロジェクトを使った主なワークフローは以下のとおりです：
- 構造とスタイルの生成。エージェントがプレゼンテーションプランを作成し готовыхテーマのいずれかを適用します。ツールには95のデザインシステムのカタログが含まれています。ローカルギャラリー vieweを通じて適切なものを選択できます
slides-grab preview-styles。 - ビジュアル編集。を通じてインターフェースを開き
slides-grab edit、手動で誤字を修正するか、エージェントに選択した特定のフラグメントを変更させます。 - 品質チェック。コマンド
slides-grab validateはバックグラウンドでPlaywright経由でChromiumを起動します。リンティングでは、壊れた画像パス、外部リンク、エラーがあるCSSプロパティをチェックします。 - エクスポート。結果はPDF、画像、またはPowerPointプレゼンテーションにコンパイルできます。
ローカルリソースとメディア処理
通常、プレゼンテーションの作成は、適切なイラストや図を探すときにボトルネックにぶつかりがちです。slides-grabでは、これらのシナリオはコンソールから直接処理できます。
画像生成では、デフォルトでモジュールを使用します codex-imagen。Codex CLIからのローカル認証を活用するため、別のOpenAI APIキーを指定する必要すらありません。ターミナルでコマンドを実行するだけです：
生成されたファイルは直接フォルダに保存され assets/、コンソールはHTMLに挿入しやすい相対パスを返します。サードパーティプロバイダーが必要な場合は、標準のOpenAI APIやGoogle Geminiに切り替えることができます。
動画や図の状況も同様です：
- コマンド
slides-grab fetch-videoはYouTubeから動画を取得しyt-dlpてローカルに保存します。 - コマンド
slides-grab tldrawは図をフォーマットからクリーンなSVG画像に変換し.tldr、スライドサイズに合わせます。
内部構造とエクスポートのニュアンス
このツールはJavaScriptで書かれており、Node.jsバージョン20以上で動作します。サーバー側はエディタ用のローカルサーバーを起動し、Playwright経由でブラウザと通信します。
他の人のプレゼンテーションのインポートは興味深い方法で実装されています。 готовуюorporate PPTXファイルやブランドガイドラインをお持ちの場合、コマンド slides-grab import-templateはそれを色、フォント、グリッドに分解し、JSON設定を 形成します。その後、AIエージェントはこのデータを新しいスライドの参照として使用します。
エクスポートに関しては、メインで信頼できるオプションはPDFまたはPNGです。コマンド slides-grab pdfはデフォルトでフレームを高解像度4Kでラスタライズし、ピクセル単位で元のレイアウトを保持します。検索可能なテキストPDFにはフラグがあります --mode print。
ただし、PPTXとFigmaへのエクスポートには注意する必要があります。ドキュメントでは、開発者はPowerPoint変換を実験的機能として正直にマークしています。テキストエンジンを選択すると (--engine text)、ツールはDOMツリーをネイティブPowerPoint要素に変換しようとします が、複雑なCSSグリッドではレイアウトが崩れる可能性があります。
試す方法
インストールは、npmでパッケージをインストールし、Playwright用のChromiumブラウザを追加するだけです：
コマンド install-skillsは、ローカルのClaude CodeまたはCodexエージェントにユーティリティのスキルを登録します。独自のスライドデッキを開発するために、リポジトリをクローンする必要はありません。
誰が便利に使えるか
slides-grabは、グラフィックエディタでブロックを整列するのに何時間も費やしている開発者、創設者、テクニカルリードに最適です。
ツールの主な利点は、LLMでの作業時の自律性と正確な文脈です。プレゼンテーション全体をGitで読み取り可能なHTMLとして保持し、サードパーティのSaaSプラットフォームに依存せず、音声やマウスで簡単に編集できます。
欠点は、PPTXエクスポートが不完全なことと、ビルトイン画像生成が非公開のCodexエンドポイントに依存していることであり、これは時間とともに変化する可能性があります。それでも、整ったスライドを組み立ててPDFにエクスポートする場合、このプロジェクトは極めて実用的なソリューションのように見えます。
関連プロジェクト