open-slideでAIエージェントをスライドレイアウトエンジニアに変える方法
LTや社内会議のプレゼンテーションを作成する必要があるたびに、つい先延ばしにしてしまいます。PowerPointやGoogle Slidesでフォントやブロック配置を調整するのは面倒です。MarpやSlidevのようなMarkdownツールはレイアウトを容易にしてくれますが、標準外のアニメーション、インタラクティブなチャート、整理されたコールアウトボックスが欲しい場合、マークアップはすぐに限界を迎えます。
ニューラルネットワークは今やReactコードを完璧に書くようになりました。しかし、Claude CodeやCursorにゼロからプレゼンテーションを作成するよう依頼すると、十几个ものバラバラのコンポーネントを書いてしまい、画面スケーリングを忘れ、ルーティングに混乱して、あなただけがレイアウトのバグに苦しむことになります。
open-slideプロジェクトはこの正確な問題を解決します。AIエージェントと協調して動作するように設計されたプレゼンテーションフレームワークです。
プロジェクト的理念
open-slideの作成者はシンプルに考えました：スライドはビジュアルコードであり、最新のエージェントは文句を言わずに素早くコードを書きます。唯一の問題は実行環境です。
独自の制限されたマークアップ言語（DSL）を発明するのではなく、open-slideはエージェントに標準的なReactを提供し、すべてのルーティン作業を自ら処理します。このフレームワークはキャンバスを1920×1080ピクセルに固定し、任意のモニターに対する適応スケーリングを確保し、画面切り替え、HMR、スピーカーモードを設定します。
エージェントはインフラストラクチャに気を取られることなく、明確なマークアップルールに従ってコンポーネントを生成するだけで済みます。
npx @open-slide/cli init my-slide
cd my-slide
pnpm dev
初期化後、プロジェクトにはClaude Code用の готовые скриптыとシステムプロンプトがすでに含まれており、キャンバス構造、タイポグラフィ、パレットをモデルに説明します。
インスペクタによる組み込みの編集サイクル
通常、AIでビジュアルを制作すると、「3枚目のスライドの灰色のボタンを見出しの稍微左に動かして」などの説明を延々と繰り返すことになります。モデルは間違いを犯し、間違ったファイルを編集し、ダイアログは長引きます。
open-slideにはdevサーバーに組み込みのビジュアルインスペクタがあります：
- ブラウザでスライドを開き、任意の要素をクリックします。
- 表示されるフィールドにコメントを書きます：「背景を暗くする」「見出しのサイズを小さくする」「下部の余白を追加する」など。
- フレームワークはこれらのメモをソースコード内にマーカーとして直接保存します
@slide-comment。 - ターミナルでエージェントと一緒に
/apply-commentsコマンドを実行します。 - エージェントはマーカーを読み取り、JSXを編集し、コメントを削除して、ページをリロードします。
この編集サイクルは神経を大いに消耗しません。あなたはレイアウトに付箋を残すアートディレクターの役割を果たし、ニューラルネットワークがコンポーネントを修正します。
ロゴ検索とアセット管理
ピッチや技術講演を行う場合、テクノロジーのSVGロゴを探すだけで半分以上の時間が費やされます。open-slideには組み込みの svgl カタログがあります。アセットパネルを開き、ライブラリやサービスの名前を入力するだけで、ベクターアイコンをスライドコードに直接挿入できます。
アセットパネルでは、ローカルフォント、画像、ビデオを一元的に取り込めるため、ランダムなプロジェクトフォルダ間で手動で整理する必要がありません。
エクスポートとプレゼンテーション
ライブプレゼンテーション用に、プロジェクトには完全なスピーカーモードが含まれています。別の画面に現在のスライド、次のステップのプレビュー、プレゼンテーションタイマー、スピーカーノートが表示されます。
プレゼンテーションの準備が整ったら、完全に静的なバンドルとしてビルドできます：
- サーバーなしで開けるスタンドアロンのHTMLファイルを生成し、Vercel、Netlify、またはCloudflare Pagesにデプロイできます。
- 印刷用またはカンファレンス主催者に送信するためのPDFとしてエクスポートします。
プレゼンテーションが多数ある場合、組み込みのデッキマネージャーが絵文字付きのフォルダーで整理し、シンプルなドラッグ＆ドロップでソートできます。
リポジトリの構造
内部的には、open-slideはpnpmとTurborepoに基づくモノレポです：
-
@open-slide/coreパッケージには、コアランナー、キャンバススケーリングエンジン、エディットインスペクタ、Viteプラグイン、CLIインターフェースが含まれています。 -
@open-slide/cliパッケージは新しいプロジェクトの初期化を処理し、ビルド設定をコア内に隠して、ワークファイルツリーを乱雑にしません。 - 内部には、新しいリリースをテストするデモ
apps/demoがあります。
スタックは完全にTypeScriptで、高速なBiome用于リンティングとフォーマットで、プロジェクトは寛容なMITライセンスを使用しています。
誰が役立つのか
FigmaやKeynoteでマウスだけでプレゼンテーションを作成することに慣れている場合、テキストプロンプトに切り替えるのは不思議に感じるかもしれません。しかし Regularly発表を行い、日常的にClaude CodeやCursorを使用している開発者にとって、open-slideは従来のスライドツールの堅実な代替手段となる可能性があります。
Reactエコシステムへの完全なアクセスが得られます：インタラクティブなThree.jsシーン、機能的なMonacoコードエディタ、またはRechartsグラフを埋め込みながら、ニューラルネットワークにレイアウトの下準備を任せることができます。
関連プロジェクト