Open Design はどのコーディングエージェントで動かすべきか？

Open Design で最初にすべき本当の決断は、何を作るかではなく——どのコーディングエージェントで動かすかです。このガイドはその選択に焦点を当てます：（長い）対応エージェントの一覧、選び方、そしてセットアップして作り始める方法です。Tony Xhepa が動画で示すウォークスルーに沿っており、書き直したうえで現行リリースに合わせて更新しています。上の動画を視聴するか、続けて読んでテキスト版をご覧ください。

Open Design のワークスペース：作りたいものを説明し、モードを選べば、あとはエージェントがやってくれます。

なぜエージェントが重要な選択なのか

Open Design は独自のモデルを持ちません——オープンソースでローカルファーストの操作面であり、すでに手元にあるコーディングエージェントの上で動きます。だから選んだエージェントがそのままあなたのデザインエンジンになります：品質、コスト、速度を左右するのです。素晴らしいのはその幅広さです。Tony が挙げる対応エージェントの一覧は長い：Claude Code、Codex、Devin for Terminal、Cursor、Gemini、OpenCode、Qwen、GitHub Copilot CLI、Hermes、Kimi、Pi、Kiro——そしてさらに。あなたがすでに使っているものは、たいてい Open Design が対応していますし、何もインストールしていなくても、代わりに Anthropic か OpenAI の API キーを使えます。

選び方

手っ取り早い選び方：

• すでにコーディング CLI に課金している？それを使いましょう——Open Design はそのサブスクに乗るので、2 つ目の請求は発生しません。
• 最強のデザイン成果が欲しい？最初のビルドではトップクラスのモデル（例：高性能モデル上の Claude Code）に向けましょう。
• 安く、あるいは無料で使いたい？Gemini CLI の無料枠や OpenCode 同梱のモデルがよく機能します。自分のキーを持ち込むこともできます。
• プライバシー／ローカル性を重視？ローカル CLI ならどれでも、生成をマシンから決して出ない認証情報の上に保てます。

固定されることはありません——アクティブなエージェントは後からワンクリックで切り替えられます。

ステップ 1——ソースからインストール

Open Design は Next.js アプリです。クイックスタートはいくつかのコマンドだけ：

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

そして表示されるローカル URL を開きます（ポートは動的です——ハードコードしないこと）。Tony が指摘する点がひとつ：Node 24 が必要です——Node 22 では「unsupported engine」という警告が出るので、まず Node 24 をインストールしましょう。ターミナルは使いたくない？デスクトップアプリが open-design.ai/download にあります。

ステップ 2——実行モードを設定する（エージェントを選ぶ）

初回起動時に実行モードを設定します：ローカル CLI、Anthropic API、または OpenAI API。ローカル CLI を選ぶと、Open Design がマシン上で検出したエージェントを表示します——Tony は Codex、Gemini、OpenCode、Pi をインストールしています（そのマシンでは Claude Code は未インストールと表示）。ひとつ選び（彼は OpenCode を選択）、必要ならモデルを選んで、Get started をクリックします。

プラグインハブ：レジストリを閲覧し、プラグインをインポートして、チーム向けに準備します。

ステップ 3——最初のデザインを作る

Prototype を作成し、名前を付け、忠実度（高）を選び、提案されたブリーフから始めます（Tony は SaaS 分析ダッシュボードを選択）。Open Design はディスカバリー質問（ブランド背景、チャートのデータソース、ビジュアルの方向性）を実行し、あなたが答えて方向を選ぶと、それを構築します。完成した成果物にはプレビュー、ソースコードビュー、コメント、そして Share メニュー——PDF としてエクスポート、ダウンロード、スタンドアロン HTML、テンプレートとして保存、などがあります。

プラグインライブラリ：レジストリから skill を直接インストール——アンチスロップなデザイン skill も含みます。

ヒント

• すでに課金しているエージェントを選ぶ——2 つ目のサブスクは不要で、それが品質／コストを決めます。
• まず Node 24 をインストールして、エンジン非対応の警告を避けましょう。
• local CLI モードを使うと、Open Design がインストール済みのエージェントを自動検出します。
• いつでもエージェントを切り替え——この選択は恒久的ではなく、ワンクリックで変更できます。
• CLI がない？API キーを使う（Anthropic か OpenAI）。

よくある質問

Open Design はどのエージェントに対応していますか？ 多数です——Claude Code、Codex、Cursor、Gemini、OpenCode、Qwen、GitHub Copilot CLI、Devin、Hermes、Kimi、Pi、Kiro など。マシンにインストール済みのものを自動検出します。

どうやって選べばいいですか？ すでに課金している CLI を使いましょう。最初のビルドには強力なモデルを、反復には安価なものを選びます。あるいは無料枠／自分の API キーを使います。

なぜ Node 24 の警告が出るのですか？ Open Design は Node 24 を必要とします。Node 22 では「unsupported engine」警告が出ます。Node 24 をインストールすれば解消します。

無料でオープンソースですか？ はい——Apache-2.0、ローカルファーストです。無料で実行でき、接続したエージェントやキーのモデル使用分だけ支払います。

---

このテキストガイドは Tony Xhepa のウォークスルーに基づいています。上のフル動画を視聴し、より多くのオープンソース開発ツールについてはTony Xhepa をチャンネル登録してください。