Claude Design はもう不要……最高の無料 Claude Design 代替ツール（無制限・オープンソース）
Open Design をセットアップし、Gemini CLI で駆動することで、高精細な AI デザイン生成を Gemini の無料枠で動かす——エージェントに課金せずに使える、オープンソースかつローカルファーストのワークスペース。
本ガイドでは、生成を駆動するエージェントとして Gemini CLI を使い Open Design を動かす方法を紹介します——プロトタイプ、ランディングページ、UI を一つのワークスペースから生み出しつつ、Gemini の寛大な無料枠に頼ります。Sandeep Singh が実践的なウォークスルーでたどった道筋を、現行リリースに合わせて書き直し・更新したものです。ライブ版は上の動画をご覧いただくか、このまま読み進めてください。
コストの話こそが要点です。Open Design 自体は無料かつオープンソース。あなたが「支払う」のは持ち込むエージェントとモデルだけです。Gemini CLI を持ち込み、Google アカウントで認証すれば、その請求額は実質ゼロになります。
Open Design のワークスペース——オープンソース、ローカルファーストで、接続したコーディングエージェントによって駆動される。
Open Design とは？
Open Design はオープンソースかつローカルファーストのデザインプラットフォームで、特定のモデルプロバイダーに縛りつけるのではなく、あなたが既に使っているコーディングエージェントの上で動作します。「自分のエージェントを持ち込む」方式です：Claude Code、Codex、Cursor、Gemini、GitHub Copilot、OpenCode、そして 21 を超えるその他のエージェントが、それぞれ生成を駆動できます。あなたがエージェントを選び、Open Design がデザイン面を担当します。
注目に値するポイントをいくつか挙げます：
- オープンソース、Apache-2.0 —— クローンし、セルフホストし、一行残らず読める。
- ローカルで動作 —— あなたのプロジェクトは他人のクラウドではなく、自分のマシン上のフォルダに保存される。
- エージェント差し替え可能 —— Gemini CLI を含む 21 を超えるコーディングエージェントに対応。どれが生成を駆動するかはあなたが選ぶ。
- プロトタイプにとどまらない —— プロトタイプ、ライブアーティファクト、スライドデッキ、雑誌レイアウト、画像生成、さらには動画まで、すべて一つのワークスペースから。
- 組み込みの出発点 —— ブランド化されたデザインシステムとテンプレートが標準搭載され、白紙のキャンバスを前に立ち尽くすことがない。
それ自体の魅力で成り立っています：ローカルで、モデルに依存しないデザインワークスペース。Gemini CLI のような無料エージェントときれいに組み合わせられる点は、それを本当に無料で使えるものにするボーナスです。
始める前に
Open Design のインストール方法は 3 通りあります。自分に合うものを選んでください：
| 方法 | 向いている人 | 要件 |
|---|---|---|
| デスクトップアプリ | ほとんどの人——設定不要 | なし。ダウンロードして開くだけ。 |
| ソースから実行 | コードを読みたい・改変したい開発者 | Node ~24、pnpm 10.33.x |
| エージェントに組み込む | ターミナルで生活する人 | 既存のコーディングエージェント CLI |
現在はデスクトップアプリが推奨ルートです——Node も pnpm もクローンも不要。Sandeep は自分のプラットフォーム向けのインストーラー（macOS では .dmg、Windows では setup.exe）を最新リリースから直接ダウンロードしています。
ステップ 1 —— Open Design をインストールする
選択肢 A —— デスクトップアプリ（推奨、設定不要）
open-design.ai にアクセスし、Download desktop をクリックします。ビルドは macOS（Apple Silicon と Intel）、Windows（x64）、Linux（AppImage）向けに用意されています。インストール後、アプリはあなたの PATH 上にある全コーディングエージェント CLI を自動検出し、組み込みのスキルとデザインシステムを読み込みます。初回起動時は接続画面に着地し、そこでローカル CLI を選ぶか、自分の API key を貼り付けます。
選択肢 B —— ソースから実行する
リポジトリから実行したい場合、必要なコマンドはわずかです：
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 と pnpm 10.33.x が必要です。Corepack が固定された pnpm バージョンを自動で選びます。
選択肢 C —— コーディングエージェントに組み込む
GUI を一切開かずに Open Design を使う——エージェント内部のスキルまたは MCP サーバーとして呼び出す——には、次を実行します：
od mcp install <agent>
# <agent> = gemini | claude | codex | cursor | copilot | opencode | …その後、エージェント内部でこう尋ねるだけです：Use open-design to generate a landing page with a modern minimal design system。
Gemini CLI をエージェントとして接続する
これがワークフローを無料にするステップです。Open Design は自前のモデルを搭載していません——あなたが指し示した任意の CLI を駆動します——なので Gemini CLI を持ち込み、その無料枠に仕事をさせます。
なぜ Gemini CLI なのか？ Sandeep の言葉を借りれば理由は 2 つ：Gemini モデルは他のモデルに引けを取らないこと、そして無料枠が寛大であること。Google アカウントでサインインすれば、無料で 1 日あたり大量のリクエスト枠が得られます。Gemini API key の無料枠はそれより小さめです。継続的なデザイン作業には Google アカウントのサインインを使うのがよいでしょう。
- Gemini CLI をインストールする。 Gemini CLI のホームページにあるインストールコマンドに従ってください（macOS と Linux では Homebrew、それ以外ではドキュメント記載のインストーラー）。どのターミナルでも動きます。
geminiを実行して認証する。 起動し、プロンプトが出たら作業フォルダを信頼し、Sign in with Google を選びます。ブラウザが開いて 2 クリックの Google ログインが行われ、成功が報告されます。Gemini CLI を再起動すると、アクティブなモデルとクォータ使用量0%が表示されるはずです。- Open Design をそれに向ける。 Open Design を再起動し、Settings を開きます。Gemini CLI が利用可能なエージェントとして表示されるようになります——選択し、Test the connection を実行すると
OKが返ってくるはずです。保存すれば、デザインを始める準備は完了です。
ここではローカル CLI を使う代わりに自分の API key を貼り付けることもでき、後でメディア生成をしたい場合は画像・動画・音声モデル用の個別のキーを追加できます。とはいえ、無料で無制限のように感じられるデザイン作業には、Gemini CLI のサインインだけで十分です。Settings の項目はすべて後から変更できるので、最初の一巡はシンプルに保ちましょう。
ワークスペースを探索する
Open Design はあなたの作業をプロジェクト単位に保ちます：各プロジェクトはそれぞれのフォルダに存在し、フォルダを切り替えるとプロジェクトが切り替わります。プロジェクト内ではプロトタイプ、ライブアーティファクト、スライドデッキ、画像、さらには動画や音声まで作成できます——UI だけではありません。
デザインシステムライブラリ——プレビューして任意のプロジェクトにはめ込める、ブランド化された出発点。
組み込みのデザインシステムライブラリは、プレビューして再利用できるブランド化された出発点を提供するので、始める前にトークンの定義で足止めを食らうことはありません。自分のデザインシステムを持ち込んだり、既存の Claude Design プロジェクトをインポートしたり、何もない状態から始めて Open Design に妥当なデフォルトを推測させたりもできます。
テンプレート：プロトタイプ、スライド、画像、動画の出発点——種類で絞り込み、フォークして始める。
テンプレートライブラリはブランドシステムにとどまらず、プロトタイプ、スライド、そして画像・動画生成にまで広がります。種類で絞り込み、どれでもフォークして出発点にできます。何かをインストールする前に、ウェブ上で open-design.ai/plugins にてプラグインライブラリ全体を閲覧できます。
何かを作ってみる
Gemini CLI を接続したら、構築フローは Sandeep が動画で実演しているものと同じです：
- プロジェクトを作成する。 名前を付け、欲しい見た目に合うデザインシステムを選び、ワイヤーフレームではなく実物が見えるように High fidelity を選びます。
- ブリーフを書く。 提案されたプロンプトのどれかではなく、欲しいものを記述します——Sandeep はランディングページを依頼します。気に入ったレイアウトのスクリーンショットを添付し、そのテーマに従うよう Open Design に頼むこともできます。
- 確認の質問に答える。 エージェントは気の利いた追加質問をします：単一のランディングページか、ランディング＋価格ページか、レスポンシブ対応か、誰向けか、ビジュアルのトーン（Sandeep はモダンでミニマルな Linear/Vercel 風を選択）、そしてブランドカラーやフォントの有無。フィールドは空欄のまま残しても、方向性を任せてもかまいません。
- ビジュアルの方向性を選んで生成する。 提案された方向性の一つを選び、送信すると、数秒後に依頼したセクションを備えたスタイル付きのランディングページが現れます。
- プロンプトで反復する。 ロゴを差し替えたい、欠けているアイコンを足したい、FAQ を拡張したい？ その変更を記述して送信するだけです。ある編集が何かを崩してしまっても、追いのプロンプトで元に戻せます。
満足したら、デザインファイルを開いてソースコードを検査し、必要なら手動でレイヤーを編集して、エクスポートします——PDF、PPTX、圧縮バンドル、または Vercel へのデプロイ。
無料の部分は本物です：Sandeep は数回の反復を伴う 2 つのプロトタイプを作り、その後 Gemini の使用量を確認したところ、1 日あたりの枠の約 2% しか消費していませんでした。毎日リフレッシュされる大きな 1 日枠のおかげで、メーターを気にせずほぼ途切れることなくデザインできます。
ヒント
- Gemini CLI には API key ではなく Google アカウントでサインインする——1 日あたりの無料枠がはるかに大きく、それこそがこのワークフローを実質無料にしているものです。
- 実際のデザインを判断したいときは高精細から始める。素早く構造を組みたいときだけワイヤーフレームに落とす。
- Gemini CLI の
statsで使用量を確認する。1 日の枠に対してデザイン作業が実際どれほど少ないコストで済むかが分かる。 - あなたのデザインはプロジェクトフォルダに付いて回る——正しいディレクトリに対して Open Design を実行することで作業を整理する。
- 始めるのにデザインシステムは必要ない。 組み込みのものから始めるか、Claude Design プロジェクトをインポートするか、Open Design にデフォルトを推測させる。
よくある質問
本当に無料なの？ 実質的にはイエスです。Open Design は Apache-2.0 のもとオープンソースなので、ソフトウェアには一切お金がかかりません。唯一のコストは持ち込むエージェントとモデルだけ——そして Google アカウント経由で認証した Gemini CLI なら、大きな 1 日あたりの無料枠を使えます。動画では、反復を含む 2 つのプロトタイプでその日のクォータのおよそ 2% を使い、それは毎日リフレッシュされます。
どのコーディングエージェントに対応している？ Gemini、Claude Code、Codex、Cursor、GitHub Copilot、OpenCode を含む 21 を超えるエージェントです。Open Design はあなたのマシンに既にインストールされている CLI を検出し、その一つをデフォルトとして選ばせてくれます。
Gemini CLI を使わなければならない？ いいえ。Gemini CLI は無料で高クォータな構成への道ですが、対応する任意のエージェントを接続することも、エージェント用または画像・動画・音声モデル用に自分の API key を貼り付けることもできます。
始める前にデザインシステムが必要？ いいえ。Open Design はブランド化されたデザインシステムとテンプレートを出発点として標準搭載しており、既存のデザインシステムをインポートしたり、妥当なデフォルトを推測させたりもできます。
この書面ガイドは Sandeep Singh の実践的ウォークスルーに基づいています。上の完全な動画をご覧いただき、より実用的な AI ツールチュートリアルのためにSandeep Singh をチャンネル登録してください。