Open Design をインストール —— 無料の AI デザインツール（Claude Design の代替）
AI Unlocked のインストール手順に基づき、4つのステップで Open Design をセットアップします——無料のデスクトップアプリをダウンロードし、すでに持っているコーディングエージェントをデザインエンジンとして接続し、デフォルトのモデルのままにして、プライバシー設定をロックダウンします。有料サブスクリプションは不要です。
このガイドは、有料のホスト型サブスクリプションなしで Open Design をインストールする方法を解説します——すでに持っているコーディングエージェント CLI を、このアプリのデザインエンジンとして使います。AI Unlocked がインストール動画で実演する4つのステップに沿って、クリックごとに追えるよう書き起こしました。実際の操作は上の動画でご覧いただくか、続けて記事版をお読みください。
ローカルのコーディングエージェントに接続してインストールした後の Open Design のワークスペース——クラウドのサブスクリプションは不要です。
Open Design とは？
- オープンソース、Apache-2.0——コードを確認し、セルフホストし、あるいはパッケージ化されたアプリをそのままダウンロードできます。
- ローカルファースト——アプリもあなたのプロジェクトも、自分のマシン上で動作します。
- 自分のエージェント、自分の key を持ち込む——別のAIサブスクリプションを売りつけるのではなく、すでにインストール済みのコーディングエージェント CLI（とモデル）の上で動作します。
- プロトタイプ以上のもの——UI モックアップだけでなく、同じワークスペースからスライドデック、画像生成、動画も作れます。
ステップ 1 —— アプリをダウンロードする
Open Design の GitHub ページに行き、Releases セクションを開くか、open-design.ai から直接ダウンロードリンクを取得してください。自分のマシンに合ったビルドを選びます——Apple シリコン Mac なら macOS arm64 ビルドです。ファイルをダウンロードして開き、Open Design のアイコンを Applications フォルダにドラッグします。他のデスクトップアプリと同じようにインストールでき、この方法ではコンパイルもターミナルも不要です。
ステップ 2 —— コーディングエージェントを接続する
アプリを開きます。サインイン画面で、有料のクラウドボタンはスキップし、その下にある小さなリンク——local coding agent——をクリックしてください。Open Design はあなたのマシンをスキャンして、Claude Code、Codex、Cursor など、すでにインストール済みの CLI を見つけます。デザイン生成を担わせたいものを選び、続行をクリックします。これで追加料金なしにエンジンが接続されます——すでに持っているエージェントへのアクセスをそのまま使うだけです。
ステップ 3 —— モデルを選ぶ
モデルのボックスは default CLI config のままにしておきます。これにより、Open Design は接続したコーディングエージェントが現在設定しているモデル——通常は最新のもの——をそのまま引き継ぎます。ドロップダウンにある古いモデルは単なるフォールバックの選択肢なので選ばないでください。
ステップ 4 —— プライバシーをロックダウンする
Settings → Privacy に移動します。デフォルトでオンになっているスイッチが2つあり、そのうち1つは実際のプロジェクトデータをアプリの外に共有します。両方オフにしてから、delete my data をクリックし、すでに収集されたデータを消去します。これを行っても Open Design の動作はまったく変わりません——これらのスイッチはあなたのマシンから何が出ていくかだけを制御し、アプリの機能自体には影響しません。
ワークスペースを探索する
接続が済むと、2つのライブラリが白紙のキャンバスをなくしてくれます。
デザインシステムライブラリ——白紙のパレットから始める代わりに、実在するブランドのトークンを選べます。
- デザインシステムは、色・タイポグラフィ・スペーシングといったトークンとしてブランドの見た目をまとめたもので、その上に直接構築できます。
- テンプレートはプロトタイプ、スライドデック、画像・動画生成をカバーしており、空の画面の代わりに出発点を fork できます。
テンプレートライブラリ——プロトタイプ、スライド、画像、動画の出発点で、いつでも fork できます。
ここから、作りたいものを説明すれば、接続したエージェントが最初のバージョンを生成します。
FAQ
Open Design は無料ですか？ はい——Apache-2.0 のもとでオープンソースであり、ローカルでの実行は無料です。あなたが接続するコーディングエージェントとモデルの利用分だけ費用がかかりますが、それはすでに使っているものである可能性が高いです。
これを使うために Claude Design や他の有料デザインツールを買う必要がありますか？ いいえ。Open Design は Claude Code のような、すでに持っているコーディングエージェント CLI の上で動作するので、別途買うべきデザインサブスクリプションはありません。
どのコーディングエージェントを接続できますか？ この動画では Claude Code、Codex、Cursor が検出されていますが、Open Design が対応するコーディングエージェント CLI のリストはもっと長く、あなたのマシンにすでにインストールされているものが表示されます。
なぜセットアップ中にプライバシー設定を尋ねられるのですか？ 2つのデータ共有スイッチがデフォルトでオンになっており、そのうち1つは実際の作業内容をアプリの外に送信します。Settings → Privacy でオフにすれば、機能を損なうことなくすべてをローカルに保てます。
どのモデルを選ぶべきですか？ default CLI config のままにしておけば、Open Design は接続したコーディングエージェントが現在実行しているモデルを使います——それが通常、あなたが使える中で最も高性能な選択肢です。
この文章ガイドは AI Unlocked のインストール手順を基にしています。上の完全な動画をご覧になり、AI Unlocked を購読して、毎日新しい無料 AI ツールをチェックしましょう。