Open Design で動画や記事からスライドデッキを作る（無料クレジットで）
Open Design をプレゼン生成ツールとして使う——YouTube の字幕やあらゆる記事を、洗練されたアニメーション付きスライドデッキに変え、コーディングエージェントの無料枠で無料で動かす。さらにインストール、Codex の無料接続、デザインシステム、スケッチツール、Claude Design ZIP のインポートも解説。Eli Rigobeli の詳細なウォークスルーに基づく。
Open Design は Web ページ専用ではありません——強力なプレゼン生成ツールでもあります。本ガイドはそこに焦点を当てます。YouTube の字幕やあらゆる記事を、洗練されたアニメーション付きスライドデッキに変え、コーディングエージェントの無料枠で無料に動かします。さらに無料の Codex セットアップ、デザインシステム、スケッチツール、Claude Design ZIP のインポートも扱います。Eli Rigobeli が彼の動画で示した詳細なウォークスルーに沿い、英語で書き直して現行リリースに合わせて更新しています。上の動画を見るか、テキスト版を読み進めてください。
スライドデッキモード：デッキのカテゴリを選び、サンプルを fork して出発点にする。
Open Design とは？
Open Design はオープンソースでローカルファーストのデザインプラットフォームです——自分のマシンで動かす Claude Design の代替で、特定のプロバイダーとトークン上限に縛られる代わりに、好きな任意のエージェントやモデル（Codex、Claude Code、Gemini、OpenCode、または自分の API key）を駆動できます。充実したデザインシステムのライブラリ（それぞれが DESIGN.md）とデザインスキルを備え、ページにとどまらずスライドデッキ、画像、動画にも対応します。
ステップ 1 — インストールして無料モデルを接続する
open-design.ai/download からインストーラーをダウンロードする（macOS / Windows）か、ソースから実行します：
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web表示されるローカル URL を開きます（ポートは動的です——ハードコードしないこと）。無料のセットアップとして、Eli は無料の ChatGPT アカウントでサインインした Codex を接続し（毎週クレジットが付与される）、セッション全体が一切かかりません。設定では接続テスト、メディアプロバイダー（画像/動画/音声）の追加、言語の切り替え、デスクトップペットの導入もできます。
ステップ 2 — 既存コンテンツからスライドデッキを生成する
これが目玉のワークフローです。デッキをゼロから書く必要はありません——すでに持っているコンテンツを Open Design に与えましょう：
- スライドデッキを選び、名前を付け、デザインシステムを選びます（2 つを混ぜることも可能、例えばブランドの見た目＋コードの見た目）。
- 元コンテンツを用意します——Eli は YouTube 動画の字幕をコピーします（どんな記事でも可）——そして LLM にそれをデッキのブリーフに変えてもらいます（「この字幕から 5 枚のプレゼンの prompt を生成して：……」）。
- それを Open Design に貼り付けて送信します。短いディスカバリー（対象読者、ビジュアルのトーン——例えば「雑誌的なエディトリアル」、アニメーションの度合い）とビジュアルの方向性を一巡してから、ビルドします。
結果は本当に洗練されたデッキです——Eli のものは滑らかなスライド遷移アニメーションを備え、5 枚を通して一貫したエディトリアルな見た目で、フルスクリーンで見せられます。トーク、記事、動画を共有可能なスライドに変える最速の方法です。
プレビューでレンダリングされた実際の生成プロトタイプ——Open Design はデッキだけでなく、完全なインタラクティブページも作ります。
ステップ 3 — さらなる入力：スケッチ、参照、Claude Design ZIP
Open Design はテキストの prompt 以外にも、いくつかの出発点を受け付けます：
- スケッチツール——ざっくりとしたレイアウト（「ここにバナー、その下にカード」）を描き、注釈を付け、スケッチから組み立てさせます。
- 参照ファイル——画像、スクリーンショット、フォルダーをコンテキストとしてドラッグし、prompt の中で直接
@で言及します（スキルも同様）。 - Claude Design ZIP のインポート——すでに Claude Design にデザインシステムがありますか？それを ZIP として書き出し、インポートすれば、Open Design は既存のトークンとブランドに従った新しい成果物を作ります。
HyperFrames ギャラリー：fork してリミックスできる、コード駆動のモーションと動画作品。
ステップ 4 — 編集し、コストを見張り、出荷する
編集/インスペクトで要素をビジュアルに調整し（インスペクトが求めたらエージェントに data-oid タグを追加させる）、コメントで編集して箇所をマークします。Eli は無料の Codex 残高に目を配ります——ランディングページで毎週の無料クレジットの約 21%、デッキはもう少し——お金を払わずに本物の仕事ができることを示しています。完了したら、共有から PDF/PowerPoint/ZIP/HTML にエクスポート、または Vercel にデプロイできます。
彼のコストのコツ：API key を使いたいなら、安いモデル（GLM、Kimi、DeepSeek）を選びましょう——価格はごくわずかで、デザインのイテレーションには十分です。
ヒント
- ゼロから書かず、コンテンツを与える——字幕や記事 → 完成したデッキ。
- 無料の ChatGPT アカウントで Codex を接続（毎週クレジット）して無料で動かす。
- 2 つのデザインシステムを混ぜてカスタムな見た目に；レイアウトのイメージがあるときはスケッチツールを使う。
- Claude Design ZIP をインポートして既存のデザインシステムを再利用する。
- クレジット残高を見張り、安い API モデル（GLM/Kimi/DeepSeek）に切り替えてスケールする。
FAQ
Open Design は Web ページだけでなくプレゼンも作れますか？ はい——スライドデッキモードは prompt（または貼り付けた字幕/記事）を、フルスクリーンで見せられたり PowerPoint/PDF にエクスポートできたりする、洗練されたアニメーション付きの HTML デッキに変えます。
完全に無料で動かせますか？ はい——無料の ChatGPT アカウントで Codex を接続（または Gemini の無料枠）。Eli はお金を払わずにページとデッキを作り、毎週のクレジット残高を見張るだけです。
どんな入力から始められますか？ テキストの prompt、手描きのスケッチ、参照用の画像/スクリーンショット/フォルダー、またはインポートした Claude Design ZIP。
無料でオープンソースですか？ はい——Apache-2.0。ローカルで無料に動かせます。支払うのは、接続したモデル/メディアの利用分だけです。
この読み物ガイドは Eli Rigobeli の詳細なウォークスルーに基づいています。上のフル動画を見て、さらなる AI ビルドのコンテンツについてはEli Rigobeli を購読してください。