Open Design 全機能ツアー — スライド、プロトタイプ、画像、動画、そしてデスクトップペット

本ガイドは Open Design の横断的なツアーです。ひとつのものを深く作り込むのではなく、このワークスペースが作れるものすべて——スライド、ポスター、スケッチから生成した画像、スケッチから生成したアプリプロトタイプ、コード駆動のモーショングラフィックス、動画、さらにはデスクトップペットまで——を一気に見渡します。硅基麻辣拌 がそのウォークスルーで行う機能ツアーを踏襲し、英語で書き直して現行リリースに合わせて更新しました。実際の操作は上の動画で、文章版は以下をお読みください。

Open Design のワークスペース——プロトタイプ、スライド、画像、動画が、落ち着いた見慣れたキャンバスにひとつにまとまっています。

Open Design とは？

Open Design は、あなたが既に使っているコーディング agent の上で動く、オープンソースかつローカルファーストのデザインプラットフォームです。プロジェクト全体はローカルにデプロイされる Web アプリで、モデルレイヤーがあなた自身のコーディング agent を完全にサポートします——API key で接続しても、OAuth サブスクリプションでも、既存の CLI を直接使ってもかまいません。

硅基麻辣拌 は、本物のハイライトとしてある一点を挙げています。API key や認証トークンを露出する必要が一切ないという点です。Open Design をローカルの Codex や Claude Code に CLI 経由で向けると、生成はあなたのマシンから一切出ない認証情報を通じて行われます——これは、もっと多くのオープンソース agent プロジェクトに真似してほしいと彼らが願うセキュリティ特性です。動画では、GPT-5.5 上で動く OpenAI Codex のサブスクリプションですべてを動かしています。

ステップ 1 —— agent をインストールして接続する

最速の道は open-design.ai/download からデスクトップアプリを入手することです——設定不要で、インストール済みの agent CLI を自動検出します。ソースから動かすには：

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

表示されたローカル URL を開きます（ポートは動的です——ハードコードしないこと）。硅基麻辣拌 が指摘するように、ドキュメントを読むことすら丸ごと飛ばせます。リポジトリのリンクを agent に渡し、dev モードのセットアップで Open Design をインストールするよう伝えるだけです。初回起動時に、ローカルの CLI——Codex、Claude Code、Cursor、OpenCode——を指定すれば準備完了です。

実際に何を作れるか

トップ画面は例で埋め尽くされています——Web ページ、ポスター、アプリアイコン、モーショングラフィックス、記事のカバー画像、ピクセル風アニメーション、スライド、財務レポート、雑誌風ポスター。どの例も Open Design の内蔵プロンプトとスキルが直接作り出せるもので、それぞれ背後にあるプロンプトとデザインシステムも示されています。

デザインシステムライブラリ：各エントリは実在ブランドを、再利用できるパレット、タイポグラフィ、コンポーネント、視覚的な雰囲気へと分解します。

では、これらの機能をひとつずつ見ていきましょう。

スライド（PPT）

Slideshow をクリックし、名前を付け、デザインシステムを選びます（硅基麻辣拌 は Anthropic/Claude 風のシステムを使っています）。すると Open Design は、単に agent にスライドを頼むのとは一線を画すことを行います。あなたのプロンプトに基づいて動的な発見フォームを生成するのです——キャンバス比率、対象オーディエンス、スライド枚数、調査上の位置づけ、ビジュアルの方向性——そして作り始める前に、あなたが何を望んでいるかを確認します。このフォームはハードコードされたものではなく、あなたのプロンプトから生成され、その不足を補うように仕立てられます。出来上がりは、選んだブランドスタイルのすっきりした横長スライドです。

手描きスケッチからの画像

Open Design は手描き入力に対応しています。何かラフに描いてみてください——動画ではあえて抽象的な「ドラゴン」——そして、そのスケッチから本物の画像を生成するよう頼みます。向きと背景についての質問をしたうえで画像を生成し、あなたのデザインファイルに戻してくれます。ポイントは明快です。絵の技術は要らず、必要なのはアイデアだけです。

スケッチからのアプリプロトタイプ

同じ手口で、出力が違います。粗いワイヤーフレームを描き——ここに円、あそこに四角——スケッチファイルを保存し、それを参照してモバイルアプリの画面を頼みます。Open Design は同じ「フォーム—確認—生成」のループを使い、抽象的なスケッチを成熟した見た目の画面へと変えます。

コードで作るモーショングラフィックス

内蔵のモーションスキルを使って、硅基麻辣拌 は擬人化された 2 台の iPhone が出会って会話するアニメーションを生成します。これは完全に SVG と CSS アニメーションで作られており——あらゆる視覚要素がコードです——だからこそ、何かを動かしたいときに、スライドやページへきれいに収まります。

テンプレートライブラリ：プロトタイプ、スライド、画像、動画の出発点。タイプで絞り込み、fork して着手できます。

画像と動画の生成

画像ライブラリは GPT Image のような一般的なケースをカバーし、プロンプトはあらかじめパッケージ化されています——ひとつ選べば生成できます。動画もサポートされており、モデルが生成したクリップや、プロダクト/ダイナミックスライド効果も含みます。モーションの多い動画作業は hyperframes プロジェクトとの協働で行われ、こちらはコードでプロダクトプロトタイプやデータ可視化アニメーションを駆動します。

デスクトップペット

もっとも愛らしい機能：ペットを育てる。ひとつ選び——コミュニティ提供のキャラクターも含む——保存を押すと、デスクトップに現れて触れ合えます。小さなことですが、これは成果物だけでなくツールの感情的な手触りを大切にするプロジェクトであることを物語っています。

率直な評価

硅基麻辣拌 はトレードオフについて公正です。内部では、Open Design は組み合わせ可能な一連のスキル（Open Design の中で使うことも、あなた自身の Codex/Claude Code へ抽出することもできます）と、よく知られたブランドを網羅する充実したデザインシステムライブラリを同梱しています——そして Claude Design 風のフレームワーク全体がリポジトリでオープンソースなので、新しいデザインタイプを自分で追加できます。

現状のギャップ：いくつかの仕上げ機能はまだ欠けています——とりわけ、レンダリングされたページに注釈を付けて修正するためのピクセル単位のコメントモードです。しかし、それを補って余りある強みは確かです。広範な agent サポート（Codex、Claude Code、Cursor、OpenCode）を API key の露出なしに備え、しかもプロジェクトの反復が速い。スケールでき、拡張でき、しかも貢献を還元できるプラットフォームが欲しいなら、これは強力な入口です。

ヒント

• ローカルの CLI で動かす——API key はあなたのマシンから出ず、生成はあなたが既に支払っているサブスクリプションに乗ります。
• 発見フォームに仕事をさせる——その質問に先に答えておくことが、スライドやプロトタイプを一発で決める鍵です。
• 形が重要なときは、説明せずに描く——手描き入力は画像にもアプリプロトタイプにも効きます。
• スライドやページに何か動きが必要なときは、モーションスキルに手を伸ばす。コードなので、持ち運べます。
• GUI の外で機能を使いたいときは、スキルをあなた自身の agent へ抽出する。

よくある質問

API key を露出しなければなりませんか？ いいえ——これはハイライトされた強みです。CLI 経由でローカルの Codex、Claude Code、Cursor、OpenCode を使って Open Design を動かせば、認証情報はあなたのマシンから決して出ません。

静的なデザインだけでなく、本当に動画やアニメーションも作れますか？ はい。コードベースのモーショングラフィックス（SVG + CSS）、画像と動画の生成、そして hyperframes プロジェクトとの協働によるモーションの多い作業を行えます。

まだ欠けているものは？ ウォークスルーの時点では、レンダリングされたページに注釈を付けるピクセル単位のコメントモードはまだ利用できませんでした。プロジェクトの動きは速いので、現行リリースを確認してください。

無料ですか？ このアプリは Apache-2.0 のもとでオープンソースであり、ローカルで無料に動かせます。支払うのは、接続した agent とプロバイダーのモデルおよびメディア利用分だけです。

---

この文章ガイドは 硅基麻辣拌 の機能ツアーに基づいています。上の完全な動画をご覧いただき、より多くの AI ツールのウォークスルーは硅基麻辣拌 をフォローしてください。