Claude Design をこのオープンソースの代替ツールに乗り換えました！
Open Design を完全ローカルで動かす方法を解説します。Ollama のようなローカルモデルランナーと、手元のコマンドラインエージェント（OpenCode、Claude Code、Codex、Gemini）を組み合わせれば、プライベートで無料、しかも自分のエージェントを持ち込める Claude Design の代替環境が手に入ります。
このガイドでは、Open Design をすべて自分のマシン上で動かす方法を紹介します。クラウドアカウントも、デザインごとの課金も不要で、ノートパソコンの外にデータが出ていくこともありません。アイデアはシンプルで、Open Design をローカルモデルランナー（Ollama のようなもの）と、すでにインストール済みのコマンドライン用コーディングエージェントと組み合わせることで、生成処理がローカルで行われ、作業内容が外部に漏れないようにするというものです。これは AI Automation Station がローカルセットアップの解説動画でたどった流れを、現在のリリースに合わせて書き直し、最新化したものです。実際の操作は上の動画で確認するか、テキスト版を読み進めてください。
ローカルで動く Open Design のワークスペース。あなたのプロジェクト、あなたのエージェント、あなたのマシン。
Open Design とは？
Open Design は、オープンソースかつローカルファーストのデザインプラットフォームであり、Claude Design や Figma に代わるエージェントネイティブな選択肢です。完全ローカルなセットアップを可能にしているのは、その中核となるアーキテクチャです。Open Design は特定のモデルプロバイダーに固定されているのではなく、あなたがすでに使っているコーディングエージェントの上で動作します。Claude Code、Codex、Cursor、Gemini、GitHub Copilot、OpenCode など、いずれも接続できます。単なる「自分のキーを持ち込む」ではなく、「自分のエージェントを持ち込む」という発想です。
これがこのチュートリアルにとって重要なのは、選んだエージェントがローカルで動くなら——Ollama のようなランナー経由でローカルモデルを駆動するオープンなコマンドラインエージェントなら——ループ全体が自分のマシン内で完結するからです。クレジットを消費することも、プロンプトをリモート API に送ることもありません。
知っておくと良いポイントをいくつか挙げます。
- オープンソース、Apache-2.0 — クローンして、セルフホストして、すべてのコードを読めます。
- ローカルで動作 — プロジェクトは誰かのクラウドではなく、自分のフォルダに保存されます。
- エージェント差し替え可能 — 21 以上のコーディングエージェントに対応し、生成を担う CLI を自分で選べます。
- プロトタイプにとどまらない — プロトタイプ、ライブアーティファクト、スライドデッキ、雑誌風レイアウト、画像生成、さらには動画まで、すべて一つのワークスペースから。
- 実用的な出発点が内蔵 — 著名ブランド（Airbnb、Airtable など）をモデルにしたデザインシステムに加え、テンプレートや画像プリセットも揃っているので、真っ白なキャンバスを前に立ち尽くすことはありません。
Claude Design を使ったことがあれば、操作感は馴染み深いはずです。Open Design は同じ落ち着いた美しさを保ち、Claude Design と同じくブラウザ上で動作します——そのうえで、内部のエンジンを開放し、好きなエージェントに差し替えられるようにしています。
始める前に
Open Design のインストール方法は 3 通りあります。自分に合うものを選んでください。
| 方法 | こんな人に最適 | 必要なもの |
|---|---|---|
| デスクトップアプリ | ほとんどの人 — 設定不要 | なし。ダウンロードして開くだけ。 |
| ソースから実行 | コードを読んだり改変したい開発者 | Node ~24、pnpm 10.33.x |
| エージェントに組み込む | ターミナルで暮らす人 | 既存のコーディングエージェント CLI |
動画ではソースから実行する方法を採っていますが、今日の時点で推奨されるのはデスクトップアプリです——Node も pnpm もクローンも不要です。
完全ローカルなセットアップのためには、始める前にローカル対応のコマンドラインエージェントを 1 つインストールしておくとよいでしょう——たとえば OpenCode は無料モデルが組み込まれており、Ollama のようなローカルランナーに接続できます。PATH に通っていれば、Open Design が自動的に検出します。
ステップ 1 — Open Design をインストールする
選択肢 A — デスクトップアプリ（推奨、設定不要）
open-design.ai にアクセスし、Download desktop をクリックします。ビルドは macOS（Apple Silicon および Intel）、Windows（x64）、Linux（AppImage）向けに用意されています。インストール後、アプリは PATH 上にあるすべてのコーディングエージェント CLI を自動検出し、内蔵のスキルやデザインシステムを読み込みます。
選択肢 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 が必要ですが、固定された pnpm のバージョンは Corepack が自動で選んでくれます。ポートは動的に割り当てられるので、自分で推測せず、コマンドが表示するアドレスを使ってください。
選択肢 C — コーディングエージェントに組み込む
ターミナルから Open Design を駆動するには——GUI なしで、エージェント内のスキルや MCP サーバーとして呼び出すには——次を実行します。
od mcp install <agent>
# od には Open Design が同梱されています。<agent> = claude | codex | cursor | copilot | gemini | opencode | …そのうえで、エージェント内でこう頼みます。Use open-design to generate a dense analytics dashboard with the Airbnb design system。
初回起動：ローカルエージェントを接続する
Open Design を初めて起動すると、マシンをスキャンし、見つかったすべてのコマンドラインエージェント——Claude Code、OpenCode、Codex、Gemini など——を表示します。ここがローカル限定のワークフローを現実にする瞬間です。どのエージェントにデザインを生成させるかを、あなたが選びます。
- クレジットを使わないために、ローカルエージェントを選びましょう。 Claude Code は優秀ですが、Claude のクレジットを消費します。代わりに OpenCode のような無料でローカルな選択肢を選べば、生成は自分のマシン上で無償で実行されます。OpenCode は複数の無料モデル（MiniMax もその一つ）を同梱しており、Ollama のようなローカルランナーの前段に置けるので、モデルがコンピューターの外に出ることはありません。
- プロバイダーの API キーは必要なときだけ追加します。 ホスト型モデルを使いたくなったときのために、Anthropic、OpenAI、Azure、Google Gemini のキーを貼り付ける場所があります。完全ローカルで動かすなら、ここは丸ごとスキップできます。
- メディアプロバイダーを追加（任意）。 画像、動画、音声を生成したい場合は、それらのプロバイダーのキーを自分で追加します。これが「自分のキーを持ち込む」部分であり、あくまで任意です。
- スキルとデザインシステムを切り替える。 目の前の作業に必要な機能だけを有効にします。
ここでの設定はすべて後から変更できるので、最初は簡単に済ませましょう。ローカルエージェントを選んだら、先に進んでください。
ワークスペースを探索する
Open Design は作業をプロジェクト単位で管理します——作成したデザインは、作業中のプロジェクトフォルダの中に保存されます。フォルダを切り替えれば、プロジェクトも切り替わります。
新しいプロトタイプを始めると（動画では「Tube Analytics」と名付けています）、すぐに選択を迫られます。デザインシステムから始めるか、フリーフォームで作業するかです。最初にデザインシステムを定義することを強制されはしません。内蔵システムの一つ——Claude/Anthropic のシステム、Airbnb、Airtable など——を選んでもよいし、Claude Design の ZIP をインポートして、既存のトークンやコンポーネントをすべて引き継いでくることもできます。
デザインシステムライブラリ：プレビューでき、DESIGN.md を取得でき、どんなプロジェクトにもはめ込める、本物のブランドの出発点。
ここにあるのはブランドシステムだけではありません。Open Design には、使う前にプレビューできるサンプルデザインのギャラリーが付属しています——一つクリックすると、それを生み出したプロンプトとともにライブプレビューが開きます。Use prompt を押せば、そこから始められます。それらと並んで、出発点としてフォークできる画像テンプレートも用意されています。
サンプルデザインと画像テンプレート——どれでもプレビューし、フォークするか、そのプロンプトを再利用できます。
何かを作る——ローカルで
いよいよ、ローカルループが機能することを証明するパートです。動画では、作者が SaaS 分析ダッシュボードを開き、それを拡張するよう Open Design に依頼します。
- プロトタイプを開始する。 デザインシステム（またはフリーフォーム）を選び、必要なら Claude Design の ZIP をインポートして、エージェントに既存デザインの全コンテキストを渡します。
- 参照を添付する。 視覚的な参照用に画像をドロップまたは貼り付けるか、
@と入力してプロジェクトからファイルを添付します——たとえば「SaaS Analytics dashboard」というファイルです。 - ブリーフを書く。 具体的な内容でプロンプトを与えます。「あなたのデザインシステムを使って、ダッシュボードの残りのタブを作り込んでください。」 おなじみの分割レイアウトが現れます——左に会話、右にライブプレビューとデザインファイルです。
- エージェント上で実行される様子を見る。 Open Design は選んだ CLI——動画では OpenCode——を呼び出し、新しい画面を構築します。OpenCode の無料モデルを通じてローカルで動いているため、これにかかるコストはクレジットゼロです。Claude にも Gemini にも Codex にも課金されません。新しいタブ（トレンド、コンテンツスクリプト生成、トランスクリプト、コメント）が、既存システムに合ったスタイルで現れます。
- エクスポートまたはデプロイする。 デザインが整ったら、コードベースに引き渡すために ZIP としてダウンロードするよう頼むか、Open Design の中から直接 Vercel にデプロイできます——これは Claude Design にはない機能です。変更を自分のアプリに取り込み直すには、ZIP を Claude Code のようなコーディングエージェントに渡し、「ZIP ファイルを使ってこれらのデザイン変更を実装してください」と伝えます。
こうして出来上がるのは、本物のインタラクティブなデザインです——自分のマシンで、自分のエージェントで、無料で、最初から最後まで作り上げたものです。
ヒント
- コストゼロの生成には、無料のローカルエージェントを選ぶ。 無料モデルを同梱した OpenCode（または Ollama 経由のローカルモデル）なら、すべての実行をクレジットゼロに保てます。
- ホスト型キーは必要なときのために取っておく。 プレミアムモデルを使いたいときだけ Anthropic／OpenAI／Gemini のキーを貼り付けます。ローカルエージェントにはどれも不要です。
- 始めるのにデザインシステムは要らない。 内蔵のものから始めても、Claude Design の ZIP をインポートしても、あるいはそのままフリーフォームでも構いません。
- デザインはプロジェクトフォルダとともに保管される — 適切なディレクトリで Open Design を実行することで作業を整理できます。
- エクスポートは引き渡しであって、囲い込みではない。 ZIP としてダウンロードし、Vercel にデプロイし、あるいはファイルをコーディングエージェントに渡して既存コードにマージできます。
よくある質問
本当にクラウド費用なしで Open Design を動かせますか？ はい。Open Design 自体はオープンソース（Apache-2.0）で、無料で実行できます。OpenCode のような無料のローカルエージェント——任意で Ollama のようなローカルランナーを後ろに置いて——に向ければ、生成は自分のマシン上でクレジットコストゼロで行われます。料金が発生するのは、有料のホスト型モデルやメディアプロバイダーを接続することを自分で選んだ場合だけです。
すべてをローカルでプライベートに保つには？ 初回起動時に、クラウド型ではなくローカルのコマンドラインエージェントを選びます。Open Design は選んだエージェントの上で動作するため、ローカルエージェントとローカルモデルを使えば、プロンプトもデザインもコンピューターの外に出ることはありません。
どのコーディングエージェントに対応していますか？ Claude Code、Codex、Cursor、Gemini、GitHub Copilot、OpenCode を含む 21 以上のエージェントです。Open Design はマシンにすでにインストールされている CLI を検出し、どれに生成を任せるかを選ばせてくれます。
Claude Design とは何が違うのですか？ おなじみのブラウザベースの操作感は同じですが、オープンソースで、ローカルファーストで、エージェント差し替え可能です。自分のエージェント（ローカルでもホスト型でも）を持ち込め、最初にデザインシステムを定義することを強制されず、Claude Design にはできないこと——Vercel への直接デプロイや、同じワークスペースからのスライド・画像・動画の生成など——もできます。
この記事版ガイドは AI Automation Station のローカルセットアップ解説をもとにしています。上の動画全編をご覧いただき、より実践的な AI ツールのチュートリアルを求める方は AI Automation Station をチャンネル登録してください。