オープンソースの Claude Design — 完全無料の AI デザインシステム
WorldofAI が、Open Design とは何か、なぜ GitHub で爆発的に注目を集めたのか、そしてすでに使っているコーディングエージェントの上でランディングページ・ピッチデック・モバイルアプリを生成する方法を解説します。単一モデルへのロックインも、有料サブスクリプションもありません。
本ガイドは、WorldofAI による Open Design 解説の読みもの版です。インストール手順の解説というより、「これは実際に何なのか、そしてなぜ重要なのか」をひもとく内容です。WorldofAI の動画の構成にならいつつ、最新リリースに合わせて書き直し、内容を更新しています。ライブツアーは上の動画をご覧ください。あるいは、コンセプト優先のこのテキスト版を読み進めてください。Open Design とは何か、なぜ広まったのか、何が作れるのか、そしてどう始めるかを順に説明します。
Open Design のワークスペース。プロトタイプ、スライドデック、画像、動画のすべてがひとつの場所から始まります。
Open Design とは？
Open Design は、オープンソースでローカルファーストのデザインプラットフォームであり、Claude Design や Figma に代わるエージェントネイティブな選択肢です。中心となる発想はシンプルですが、ありそうでなかったものです。ひとつのモデルプロバイダーに固定された閉じたアプリではなく、Open Design はすでに使っているコーディングエージェントの上で動きます。
プロジェクトフォルダを指定すると、Open Design はマシンにインストールされたコーディングエージェントの CLI — Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode、そしてその他多数 — をスキャンし、生成を担わせるものを選ばせてくれます。その CLI があなたのデザインエージェントになります。つまり、自分のキーを持ち込んでその上乗せ料金を払うのではなく、自分のエージェントを持ち込み、すでに支払っているサブスクリプションやプランを通じてデザインを動かすのです。
そして、これは本当の意味でローカルです。下層には実際のファイルシステムアクセスを持つデーモンがあります。ファイルを読み書きし、コマンドを実行し、状態をローカルの SQLite データベースに永続化します。デザインは自分のフォルダの中に存在し、プロジェクトはあなたのもので、誰かのクラウドを経由して往復する必要は一切ありません。このローカルランタイムの上に、エクスポートパイプライン（HTML、PDF、スライドデック、ZIP）、Claude Design の ZIP インポート、そしてデザインファイルへのエージェント間アクセスを可能にする MCP サーバーが乗っています。だからこれは、既存のツールを置き換えるのではなく、それらに自然に組み込まれます。
なぜ広まったのか
Open Design は GitHub で最も急速に成長したオープンソースプロジェクトのひとつになりました。WorldofAI はその理由を明快に述べています。要点は 3 つです。
オープンソースで無料であること。 Apache-2.0 ライセンスです — クローンして、セルフホストして、一行残らず読めます。アクセスを制限するサブスクリプションもなければ、追加で購入するシートもありません。支払うのは、接続したエージェントやプロバイダーのモデル利用料とメディア利用料だけです。一方で Claude Design はペイウォールの内側にあり、レート制限をあっという間に使い切ります。本格的な生成を数回やれば、もう追加利用分の請求を気にすることになります。
「キーの持ち込み」ではなく「エージェントの持ち込み」であること。 ここが計算を根本から変える部分です。ほとんどの「オープンな代替手段」は、結局ひとつのモデルに縛りつけます。API キーを差し替えても、誰かのエコシステムの中にいることに変わりはありません。Open Design は、システムにすでにあるコーディングエージェントの CLI を検出し、選んだものを通じて生成をルーティングします。高い推論努力で Codex を動かしたいですか？ あるいは Claude Code、OpenCode、Gemini CLI、または Web 作業向けに MiniMax のような効率的なオープンモデルが好みですか？ それはあなた次第で、プロジェクトごとに決められます。複数モデルへのロックインはありません。そして CLI を用意していなくても、OpenAI 互換の「キー持ち込み」プロキシが、ローカル設定なしで同じワークフローを動かします。
どんなプロジェクトにもはめ込める実用的なデザインシステム — だから白紙のキャンバスから始める必要はありません。
デザインが画像モデルではなくコーディングの上に築かれていること。 これが目立たないながらも決定的な差別化要因です。Open Design は、組み合わせ可能なスキルと完全なデザインシステムのライブラリを備えています。だからあなたは一度きりの絵を生成しているのではなく、本物の、構造化された、本番品質のデザインを生成しているのです。出力がコードと同じように組み立てられるため、デザインからそのまま本番へと進めます。生成されたファイルを別のコーディングエージェントに渡して、開発を続けられるのです。WorldofAI の評価は、出力品質は Claude Design に引けを取らないうえに、より多くのことができ、しかもひとつのベンダーに閉じ込められない、というものです。
何が作れるか
Open Design は一芸だけの UI ジェネレーターではありません。ひとつのワークスペースから、次のものを生み出せます。
- 高忠実度のプロトタイプとランディングページ — ワイヤーフレームではなく、実在のデザインシステムに基づいて作られた、完全にスタイルの整ったページ。
- スライドデックとピッチデック — きちんとしたセクションを備えた、構造化されアニメーションの付いたプレゼンテーション。
- マガジン・エディトリアルレイアウト — 長くスクロールするエディトリアル記事、年次報告書風のドキュメント、その他のリッチなレイアウト。
- モバイルアプリのインターフェース — 自動生成ではなくデザインされたものとして読み取れる、洗練されたアプリ UI。
- 画像 — 接続したメディアプロバイダー（たとえば OpenAI の画像モデル）を通じて生成されるアセット。
- 動画と音声 — 同じ場所から、こちらも自分のプロバイダーキーを通じて生み出すモーションとサウンド。
アプリに組み込まれたサンプルギャラリー — ランディングページ、スライドデック、デザインシステム — を見れば、その幅の広さは一目瞭然です。すべてがひとつのツールから、選んだエージェントに駆動されて出てきます。しかもひとつのプロバイダーに制限されることなく、モデルを自由に組み合わせられます。
始め方
Open Design の動かし方は 3 通りあります。自分に合うものを選んでください。
| 方法 | 向いている人 | 必要なもの |
|---|---|---|
| デスクトップアプリ | ほとんどの人 — 設定不要 | なし。ダウンロードして開くだけ。 |
| ソースから実行 | コードを読んだり改変したい開発者 | Node ~24、pnpm（Corepack 経由） |
| エージェントに組み込む | ターミナルで暮らしている人 | 既存のコーディングエージェントの CLI |
デスクトップアプリ（推奨）。 open-design.ai にアクセスし、自分のプラットフォーム向けのデスクトップビルドをダウンロードして開きます。Node も pnpm もクローンも不要です — アプリが PATH 上のコーディングエージェントの CLI を自動検出し、組み込みのスキルとデザインシステムを読み込んでくれます。
ソースから実行 — WorldofAI が動画で取る方法 — はコマンド 4 つです。
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run webそれから、表示されるローカル URL を開きます（ポートは動的に割り当てられます — ターミナルに表示されたものをコピーしてください。固定の番号だと思い込まないように）。Node ~24 が必要です。Corepack が固定された pnpm のバージョンを選んでくれます。
コーディングエージェントに組み込む — GUI を一切開かずに、エージェントの中からスキルとして Open Design を呼び出すには次のようにします。
od mcp install <agent>
# od には Open Design が同梱されています。<agent> = claude | codex | cursor | copilot | gemini | opencode | …初回起動するとウェルカムデーモンが開き、そこで基本設定を行います。デフォルトのエージェントとモデルを選び（アプリがローカルの CLI を自動検出するか、OpenAI 互換のキーを差し込みます）、必要に応じて画像・動画・音声用のメディアプロバイダーキーを追加し、任意の MCP サービスを接続します。保存して始めたら、プロトタイプを作成します。名前を付け、ワイヤーフレームではなく高忠実度を選び、ブリーフを書きます。エージェントはいくつかの確認の質問（プラットフォーム、記事の切り口、デザインの方向性）をして、作業を計画し、デザインシステムを読み込み、成果物を構築します。WorldofAI の実演では、Codex がきれいなニュースレターのランディングページを約 5 分で生成しました — 彼自身の Codex プランに課金され、すべて Open Design のスキルを通じてルーティングされました。
ヒント
- 仕事に合ったエージェントを選ぶ。 Open Design は選んだ CLI を通じてルーティングします — 素早い Web 作業には MiniMax のような効率的なモデルを試し、最も洗練された出力を得たいなら Codex を高い推論努力に設定してください。
- まずは高忠実度から 本物を見たいときに。構造をすばやく大まかに固めたいときだけワイヤーフレームに落としましょう。
- メディアキーは自分が実際に使うプロバイダーの分だけ持ち込む — デザインを始めるのにすべてのキーが必要なわけではありません。
- 先にデザインシステムを用意する必要はありません。 組み込みのものから始めるか、Claude Design の ZIP をインポートするか、Open Design に妥当なデフォルトを推測させましょう。
- デザインはプロジェクトフォルダとともに残ります。 適切なディレクトリに対して Open Design を実行することで、作業を整理しましょう。
FAQ
Open Design は本当に無料ですか？ はい — Apache-2.0 のもとでオープンソースであり、サブスクリプションはありません。支払うのは、接続したエージェントやプロバイダーのモデル利用料とメディア利用料だけです。
「エージェントの持ち込み」は「キーの持ち込み」とどう違うのですか？ キーの持ち込みは、結局ひとつのプロバイダーに縛りつけます — あなたはただキーを供給するだけです。Open Design は、マシンにすでにあるコーディングエージェントの CLI を検出し、どれが生成を駆動するかをプロジェクトごとに選ばせてくれます。単一モデルへのロックインはありません。
Claude を使わなければなりませんか？ いいえ。Claude Code は数ある選択肢のひとつにすぎません — Codex、Cursor、Gemini、Copilot、OpenCode などすべてがサポートされており、ワークスペースから好きなときにエージェントを切り替えられます。
UI モックアップ専用ですか？ いいえ。同じワークスペースが、ランディングページ、スライドデックとピッチデック、マガジンレイアウト、モバイルアプリのインターフェース、画像、動画を生み出します — そしてデザインがコードの上に築かれているため、デザインからそのまま本番へと進みます。
この読みものガイドは、WorldofAI による Open Design の解説に基づいています。上の動画全編をご覧いただき、最新の AI ツールやワークフローについてもっと知りたい方は WorldofAI をチャンネル登録してください。