open-slide

open-slide：Claude Code / Codex にスライドを React で書かせるフレームワークを試してみた はじめに スライド作りを AI に任せようとすると、「それっぽい文章は出るけれど、見た目は結局自分で整える」ということになりがちです。 open-slide はこの問題を「スライドもコードとして書かせる」という方向で解決するフレームワークです。コーディングエージェント（Claude Code、Codex など）が各ページを React で書き、画面サイズの固定、拡大縮小、ホットリロード、発表モード、書き出しといった周りの部分はフレームワークが受け持ちます。 実際に使ってみたところ、エージェントに書かせるだけでなくブラウザ上で直接編集したり、コメントを付けてエージェントに直させたりできるのが特に便利でした。日本語の紹介記事が少なかったので、仕組みと機能をまとめてみます。 最初にopen-slideで作成したスライドを置いておきます <script defer class="speakerdeck-embed" data-id="adddd058062b4607bd527d8123380e95" data-ratio="1.7777777777777777" src="//speakerdeck.com/assets/embed.js"></script> :::note info この記事の内容は 2026年10月29日 時点の公式ドキュメントと @open-slide/cli 2.0.0 をもとにしています。動きの速いプロジェクトなので、最新情報は公式ドキュメントを確認してください。 ::: open-slide とは Yiwei さんが作成したオープンソースの「エージェントのために作られたスライドフレームワーク」です。 - 各ページは 1920×1080 固定のキャンバスに描画され、ランタイムが表示領域に合わせて全体を均等に拡大縮小します。そのため、ピクセル座標で書いたページが、プレビュー・発表・書き出しのどこでも同じ見た目になります - ページは独自 DSL ではなくふつうの React コンポーネントです - エージェントは特定のものに縛られません。ドキュメントでは Claude Code、Codex、Cursor、Gemini CLI などが挙げられていて、「ワークスペースの React ファイルを編集できるツールなら使える」という立場です - ライセンスは MIT です - GitHub のスター数は 9.5K です（2026年10月30日時点） !Githubスター数.png 導入 :::note info Node.js 20.19 以上（または 22.12 以上）が必要です（@open-slide/cli 2.0.0 の engines と、v2 移行ガイドの記載より）。 ::: npx @open-slide/cli init my-slide cd my-slide npm run dev - パッケージマネージャーは init を起動したもの（npm / pnpm / yarn / bun）を自動で判定し、判定できなければ npm を使います。--use-pnpm などで明示もできます - init は依存のインストールと git init（初回コミット付き）まで行います。不要なら --no-install / --no-git を付けます - npm run dev で Vite ベースの開発サーバーが http://localhost:5173（埋まっていれば次の空きポート）で起動します 私は Windows 11、Node.js v24.22.1、npm の環境で試しました。 生成されるファイルと仕組み init で生成されるワークスペースは次のような構成です（主なものだけ）。 my-slide/ ├── slides/ │ └── getting-started/ # サンプルのスライド ├── themes/ # テーマ（共有のデザインルール） ├── assets/ # 全スライド共通のアセット（@assets/* で参照） ├── .agents/skills/ # 付属のエージェント用スキル ├── .claude/skills/ # .agents/skills/ へのシンボリックリンク ├── open-slide.config.ts # 設定ファイル ├── AGENTS.md # エージェント向けのルール ├── CLAUDE.md # AGENTS.md へのシンボリックリンク └── package.json Vite や React の設定は @open-slide/core の中に隠れていて、ワークスペースにはほとんど出てきません。ユーザー（とエージェント）が触るのは主に slides/ 以下です。 1ページ = React コンポーネント スライド1本（デッキ）は slides/<kebab-case-id>/index.tsx に書きます。ルールは2つだけです。 - default export はページのコンポーネントの配列（並び順がそのままページ順） - 各コンポーネントは親いっぱいに広がる（width: '100%' / height: '100%'） 公式ドキュメントの最小例を少し簡略化すると、次のようになります。 import type { Page, SlideMeta } from '@open-slide/core'; const Cover: Page = () => ( <div style={{ width: '100%', height: '100%', background: '#08090a', color: '#f7f8f8' }}> <h1 style={{ fontSize: 188 }}>Hello, open-slide.</h1> </div> ); export const meta: SlideMeta = { title: 'Hello' }; export default [Cover] satisfies Page[]; キャンバスの大きさが変わらないので、レスポンシブなWebページではなく「固定サイズの画面」として、position: absolute や flex / grid で自由にレイアウトできます。 ページ番号は useSlidePageNumber() などのフックで取得します。 発表者用のメモも同じファイルに書けます。ページ配列と同じ順番の文字列配列を notes として export します。 export const notes = [ '最初のページで話すこと', undefined, // このページはメモなし '質問を受け付ける', ]; AGENTS.md の「決まり」 生成される AGENTS.md は短く、「必ず守るルール」とスキルの使い分けだけが書かれています。主なルールは次のとおりです。 - スライドは slides/<kebab-case-id>/ に置き、入口は index.tsx - そのスライドだけで使う画像などは slides/<id>/assets/、共通のものは assets/ に置いて @assets/... で読み込む - package.json、open-slide.config.ts、ほかのスライドには触らない - 依存パッケージを追加しない（使うのは React と標準の Web API だけ） 公式ドキュメントではこれらの制約の目的を「エージェントがうっかり UI ライブラリを入れたり、全体設定を書き換えたり、別のデッキを壊したりしないため」と説明しています。エージェントに自由に書かせつつ、被害範囲を slides/<id>/ に閉じ込める設計になっています。 AGENTS.md は複数のツールが読む共通の規約に沿ったファイルで、CLAUDE.md はそのシンボリックリンク（Windows ではコピー）です。これで Claude Code も同じルールを読みます。 付属の5つのスキル .agents/skills/ には次の5つのスキルが入っています（Claude Code 向けに .claude/skills/ からリンク）。 | スキル | 役割（要約） | | --- | --- | | /create-slide | 新しいデッキを最初から作る。質問で方向性を決め、構成を計画してページを書く | | /slide-authoring | 1920×1080 のキャンバス、文字サイズ、配色、レイアウトなどの技術リファレンス。書く前に読む | | /apply-comments | ブラウザで付けたコメントをコードの修正に反映する | | /create-theme | テーマを作る、または既存のデッキからテーマを抜き出す | | /current-slide | 「このページ」「この要素」が何を指すかを、開発サーバーが書き出す情報から特定する | スキルはエージェントのグローバル設定ではなくワークスペースの中にあるので、プロジェクトと一緒にバージョン管理されます。@open-slide/core を更新したときは npm run sync:skills で最新版に揃えられます。 エージェントでスライドを作る流れ（/create-slide） ワークスペースをエージェントで開き、たとえば次のように頼みます。 /create-slide for "Q2 launch — 3 chapters, mixed text density, subtle motion, dark aesthetic" /create-slide はいきなり書き始めずに次の順で進めます。 1. テーマの選択：themes/ にテーマがあれば、どれを使うか（または使わないか）を聞きます 2. 4つの質問：書く前に次の4点を決めます（すでに分かっているものは飛ばします） - 見た目の方向性（テーマを選んだ場合は省略）。お題に合わせて3案を出してくれます - ページ数（3〜5 / 6〜10 / 11〜20 など） - 1ページあたりの文字量（最小限〜多め） - 動き（静的 / 控えめ / リッチ） 3. ID と構成：kebab-case の ID を決め、ページの役割（表紙、目次、本文、比較、まとめなど）を計画します 4. 執筆：/slide-authoring を参照しながら slides/<id>/index.tsx を書きます 最初に方向性を固めてから書くので、「思っていた雰囲気と違う」による手戻りが減る作りです。 実際に、この記事自体を原稿にしてスライドを作ってみました。記事を1ページ1話題に並べ直した構成案（Markdown）を用意し、Claude Code（Opus 5.5）で次のように頼みました。 /create-slide @article-drafts/20261029_open-slides/slide-outline.md をスライドにしてください 構成案にページ数（20ページ）と1ページあたりの文字量を書いておき、themes/ にもテーマがなかったので、聞かれたのは「見た目」と「動き」の2つだけでした。どちらも推奨の「ダークな開発者向け」と「控えめ」を選びました。 !create-slide直後聞かれた内容.png 作業全体の時間は約11分で、20ページのデッキができました。 !スライド編集画面.png UI での編集・コメントと /apply-comments 開発サーバーで開いたスライドは、そのままビジュアルエディター（インスペクター） として使えます。 - 要素をクリックして選択、ドラッグで移動、ハンドルでサイズ変更や回転ができます。スマートガイド、整列・等間隔配置、重なり順の変更もあります - テキストはダブルクリックでその場で編集でき、Format パネルで文字サイズ・太さ・色・行間などを変えられます。画像の差し替えやトリミングもできます - 編集はいったんメモリ上に溜まり、Save（Cmd / Ctrl + S）でソースコードに書き戻されます !インスペクターで要素選択.png 「自分で動かすより言葉で頼んだほうが早い」変更には、コメントモードを使います。 1. ツールバーで Comment を選ぶ（または c キー） 2. 要素をクリック（または範囲をドラッグ）して、「このタイトルをアクセントカラーに」のようにメモを書く 3. Cmd / Ctrl + Enter で投稿すると、ソースに @slide-comment マーカーとして書き込まれる 4. エージェントで /apply-comments を実行すると、マーカーごとに周りのコードを読んで修正し、マーカーを消す マーカーはふつうの JSX コメントなので、表示には影響しません。曖昧なコメントは最小限の解釈で適用して前提をまとめに書き、解釈できないものは残して「スキップ」と報告する、という仕様です。 また、クリックした要素の情報は開発サーバーがファイルに書き出していて、エージェントは /current-slide でそれを読みます。そのため「これを大きくして」と頼んでも、どの要素のことかを聞き返されずに済みます。 実際に、作ったデッキの18ページにある「一言でいうと「神」」の「神」に、「大げさすぎるのでもっと控えめな表現にして」とコメントを付けました。 !コメント機能.png これをエージェントパネルから反映させると「便利」に変わり、4文字が枠に収まるよう文字サイズも 180 から 136 に下がりました。 !コメント対応後.png アセットのアップロード 開発サーバーには Assets パネルがあり、画像・動画・フォントをドラッグ＆ドロップでアップロードできます。保存先は2種類です。 - Slide：そのデッキ専用。slides/<id>/assets/ に保存され、./assets/... で読み込みます - Global：全デッキ共通（会社ロゴなど）。ルートの assets/ に保存され、@assets/... で読み込みます import cover from './assets/cover.png'; // このデッキ専用 import logo from '@assets/acme.svg'; // 共通 インスペクターの画像差し替えからも同じ画面でファイルを選べ、import 文も自動で書き換わります。 さらに、svgl と連携したロゴ検索があり、ブランドロゴを検索してそのままアセットに追加できます。 !svgl.png Web UI のチャットから Claude Code / Codex を使う（エージェントパネル） 個人的に一番驚いたのがこの機能です。開発サーバーの画面にエージェントパネルがあり、ローカルにインストール済みの Claude Code や Codex とブラウザ上でチャットできます。 - A キーかツールバーの Agent で開きます。初回は PATH 上にある claude / codex CLI を見つけて、対応する公式 SDK（@anthropic-ai/claude-agent-sdk / @openai/codex-sdk）をワークスペースの devDependencies に追加します - ログインは CLI のもの（claude や codex login）をそのまま使います - パネルからできることは主に次の3つです - 新しいデッキの作成：/create-slide の質問が選択肢のカードとして表示され、その場で答えられます。書かれたページは順にキャンバスに表示されます - コメントの反映：コメントのバーにある「Apply with Claude Code」（または Codex）ボタンで、/apply-comments 相当の処理が走ります - 選択中の要素の編集：開いているスライド・ページ・選択中の要素が文脈として渡るので、「この見出しを大きく」で通じます - エージェントの操作（ファイルの読み書き、シェルコマンド）はトランスクリプトとして流れます。slides/ と assets/ 内の編集はそのまま適用され、それ以外（設定ファイルの編集や状態を変えるコマンドなど）はパネルで承認を求められます（Auto-approve で省略も可能） ターミナルを開かずに「作る → 見る → 直す」がブラウザだけで完結するのが大きな利点です。 私はパネルから Claude Code（Opus 5.5）を使いました。次の画面は先ほど「神」に付けたコメントをパネルで反映させたときのものです。 !Agent.png 発表と書き出し 発表モード Present（または f キー）で全画面表示になり、矢印キーやスペースでページを送れます。p キーで発表者ビューを別ウィンドウで開くと、現在のページ、次のページのプレビュー、発表者メモ（notes）、経過時間のタイマーが表示されます。 画面の構成は PowerPoint の発表者ビューとかなり似ています。 !発表者ビュー.png 書き出し スライド画面のツールバーにある Export メニューから、開いているデッキを書き出せます。現行バージョンのメニューには次の4つがあります。 - HTML：静的な HTML。アセットがある場合は zip（HTML とアセットのフォルダ） - PDF：1ページ = 1920×1080 の横向きページ。Safari では使えません - PPTX：README ではブラウザ内で各ページを、編集できるテキストボックス・図形・画像に変換すると説明されています - 画像 PPTX：各ページを画像として PowerPoint に貼り付けたもの また、npm run build で全デッキを dist/ に静的サイトとして出力でき、Vercel、Cloudflare Pages、Netlify などにそのまま置けます。公開用には open-slide.config.ts の build 設定で、スライド一覧やツールバー、書き出しメニューを非表示にできます。 使ってみた感想 - 出てくるスライドの中身が良いです。特にデザインは1回で出てくるものとしては十分すぎる出来でした - エージェントに頼むほどでもない微調整（位置、文字サイズ、色）を UI から直接その場で直せて、しかもソースに書き戻されるので、コードと見た目がずれません - アセットをアップロードして使えます。私は実際の操作画面のスクリーンショットなどを使いました - Web UI のチャットから手元の Claude Code / Codex を使えて、ターミナルとブラウザを行き来せずに済むのが快適でした - LT等の簡単な発表をするのであれば、ほぼ変更しなくても使えると思いました 逆に、気になった点もありました。 - PPTX で書き出すと、アニメーション（動き）が消えます - テーマは作れますが、Web UI 上で削除する方法は見つけられませんでした 注意点 - Node.js 20.19+（または 22.12+）が必要です。v2 で Vite 8 になり、Node 18 では起動しません - PPTX 書き出しの再現度は自分で確認してください。README は「編集できる PowerPoint」と説明していますが、公式ドキュメントの Export ページには「ネイティブの編集可能な PPTX はまだ」と書かれた箇所が残っており、記載が揃っていません（現行のソースには「PPTX」と「画像 PPTX」の両方があります）。PowerPoint で手直しする予定なら、一度書き出して確認するのが安全です - PDF 書き出しは Safari 非対応です。Chromium 系ブラウザを使いましょう - エージェントパネルは信頼できるプロジェクトでだけ開くよう公式に注意書きがあります。Claude Code はプロジェクトの .claude/settings.json（フックや権限ルール）を、CLI の信頼確認なしで読み込みます。また、エージェントパネルは初回にワークスペースへ SDK を追加します - 開発サーバーを外部に公開しないでください。エージェント機能は開発サーバーと同じマシンからのリクエストにしか応答しませんが、トンネルやリバースプロキシ経由だとリモートからのアクセスもローカル扱いになる、と公式に注意があります - スライドは slides/ の直下に置く必要があり、入れ子のフォルダは認識されません。整理はアプリ内のフォルダ機能で行います まとめ - open-slide はエージェントに React でスライドを書かせ、キャンバス・表示・発表・書き出しをフレームワークが受け持つ仕組みです - AGENTS.md のルールと5つのスキルで、エージェントの作業範囲と手順がきちんと決められています - ブラウザ上の直接編集、コメント → /apply-comments、エージェントパネルの組み合わせで、「作る → 見る → 直す」のループがかなり速く回ります スライド作りに時間を取られている人は、一度試してみる価値があると思います。 参考リンク - GitHub：open-slide/open-slide - 公式ドキュメント：open-slide.dev - Getting started：open-slide.dev - open-slide init：open-slide.dev - Skills：open-slide.dev - /create-slide：open-slide.dev - /apply-comments：open-slide.dev - Inspector：open-slide.dev - Agent panel：open-slide.dev - Assets manager：open-slide.dev - Present mode：open-slide.dev - Export：open-slide.dev - Migrate to v2：open-slide.dev - npm：npmjs.com - svgl：svgl.app

open-slide is an agent-native slide framework that works with any AI agent. Use whichever agent or tool you prefer. Your slides are always yours, with no platform lock-in. open-slide/open-slide