エージェント向けに構築されたスライドフレームワーク。 デッキを自然言語で説明してください — コーディングエージェントがReactを書きます。OpenSlideはキャンバス、スケーリング、ナビゲーション、ホットリロード、プレゼントモードを管理し、エージェントはコンテンツに集中できます。

すべてのスライドは固定された1920×1080キャンバスにレンダリングされます。ページは任意のReactコンポーネントであり、制約されたDSLではありません。

なぜオープンスライドなのか

スライドは視覚的なコードです。エージェントはコードを書くのが得意です。オープンスライドは「Xについてスライドを作成」を洗練された見栄えの良いデッキに変える欠けているランタイムです — チャットを離れることなく。

ハイライト

🤖 エージェントネイティブオーサリング

クロードコード、コデックス、カーソルなど、あらゆるコーディングエージェントと連携可能です。スキャフォルダーは内蔵スキルを持つ船です:

• /create-slide — デッキを端から端までドラフトします。4つのスコーピング質問(トピックと美学、ページ数、テキスト密度、動きと静止)を出し、IDを選び、構造を計画し、ページを書きます。
• /slide-authoring — 1920 × 1080 キャンバスの技術的な参照、書体スケール、パレット、レイアウトルール。エージェントはこれを読み書き前に読みます。

一行のプロンプトから洗練されたデッキへ、定型文なし。

🎯 ブラウザ内インスペクター

open-slide

The slide framework built for agents. Describe your deck in natural language — your coding agent writes the React. open-slide handles the canvas, scaling, navigation, hot reload, and present mode so the agent can focus on content.

Every slide renders into a fixed 1920 × 1080 canvas. Pages are arbitrary React components, not a constrained DSL.

npx @open-slide/cli init my-slide

Why open-slide

Slides are visual code. Agents are great at writing code. open-slide is the missing runtime that turns “make slides about X” into a polished, presentable deck — without you ever leaving the chat.

Highlights

🤖 Agent-native authoring

Works with any coding agent (Claude Code, Codex, Cursor, …). The scaffolder ships with built-in skills:

• /create-slide — drafts a deck end-to-end. Asks four scoping questions (topic & aesthetic, page count, text density, motion vs. static), picks an id, plans the structure, and writes the pages.
• /slide-authoring — the technical reference for the 1920 × 1080 canvas, type scale, palette, and layout rules. The agent reads this before writing.

From a one-line prompt to a polished deck, no boilerplate.

🎯 In-browser inspector

Switch the dev server toolbar to comment mode, then click any element or drag across a region and leave a note — “make this red”, “change to ‘Open Slide Rocks’”, “shrink the headline”. Each comment floats as a pin beside its target and is persisted as an @slide-comment marker in source. Run /apply-comments and the agent applies every pending edit, then clears the markers.

The loop: present → comment → /apply-comments → repeat.

🧑‍💻 In-app agent panel

Connect your locally installed Claude Code or Codex once and the whole loop moves into the browser: draft a deck, answer the scoping questions as option cards, apply comments with one click, and edit the selected element by describing the change. Without a connected agent the dev server keeps the terminal-driven flow above.

🖼️ Assets manager + svgl logo search