> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aihubmix.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Open Design
> AIHubMix のキー 1 本で、Claude Design のオープンソース代替をローカル AI デザインスタジオに変える
[Open Design](https://open-design.ai/)（公式サイト。オープンソースリポジトリは [`nexu-io/open-design`](https://github.com/nexu-io/open-design)）は、\*\*オープンソースでローカルファーストな「Claude Design 代替」\*\*です。自前のモデルは持たず、あなたが接続した AI をデザインエンジンとして使い、ウェブ / デスクトップ / モバイルのプロトタイプ、インタラクティブな dashboard、PPT、画像、動画を直接生成し、HTML / PDF / PPTX / MP4 へエクスポートできます。納品されるのは本物の CSS、本物のコンポーネントで動く成果物であり、キャンバス上のピクセルではありません。Apache-2.0 でオープンソース化されており、プロジェクトのデータはすべて手元のマシンに残ります。
**AIHubMix はすでに Open Design が組み込みでサポートする BYOK ゲートウェイです**。その API（BYOK）モードで AIHubMix を選べば、キー 1 本でチャット、画像生成、動画生成、音声生成をまとめて駆動できます。本記事では、これをどう接続し、どう使うかを解説します。
Open Design は 2 種類の実行モード（Settings → Execution mode）を提供しています。
* **Local CLI**——ローカルにインストール済みの CLI agent（Claude Code / Codex など）をデザインエンジンとして呼び出し、プロジェクトのコードファイルを直接読み書きできます。
* **API provider（BYOK、自分のキーを持ち込む）**——どの CLI もインストールせず、OpenAI / Anthropic 互換のエンドポイントを直接指定します。**本記事では AIHubMix でこのルートを使います。**
## なぜ AIHubMix で駆動するのか
キー 1 本で、チャット、画像生成、動画生成、音声生成がすべてつながります。Open Design ネイティブのメディア生成は、各社へ個別に接続する必要があることが多く、画像、動画、音声でそれぞれ複数ベンダーのキーを用意しなければならない場合があります。
[AIHubMix](https://aihubmix.com) は **OpenAI インターフェース互換のアグリゲーションゲートウェイ**であり、キー 1 本の背後で OpenAI / Anthropic / Google Gemini / DeepSeek に加え、主要な画像・動画・音声モデルへ同時に接続します。Open Design は**モデル名に応じて AIHubMix の対応するネイティブプロトコルのエンドポイントを選びます**——`claude*` は Anthropic、`gemini*` / `imagen*` は Gemini、それ以外は OpenAI 互換インターフェースへ——その結果、Claude の思考チェーンも Gemini のネイティブ画像生成も損なわれず、あなたが管理するのはキー 1 本だけで済みます。
### 一般的なツールとの比較
下表の比較軸は [Open Design 公式 README の Comparison 表](https://github.com/nexu-io/open-design#comparison)から取っています。
| 比較軸 | Claude Design / Figma / Lovable / v0 などのクローズドソースツール | Open Design + AIHubMix |
| ---------------------------------------------- | --------------------------------------------------- | -------------------------- |
| オープンソース | ❌ | ✅ Apache-2.0 |
| セルフホスト / デスクトップ | ❌ | ✅ macOS · Windows · Vercel |
| 自前の Agent 上で動作、キー持ち込み（BYOK） | ❌ それぞれのバックエンドにロックイン | ✅ 22 個の CLI + BYOK |
| キー 1 本で Claude / GPT / Gemini / DeepSeek を混在利用 | ❌ | ✅ |
| デザインシステム `DESIGN.md` | 専有 / 制限あり | ✅ 150 セット内蔵 |
| スキル / プラグイン | クローズド | ✅ 100+ スキル · 261 プラグイン |
| HyperFrames（HTML→MP4 アニメーション） | ❌ | ✅ |
| 課金 | サブスクリプション（Pro / Team） | BYOK、各社モデルの使用量に応じて |
比較軸と競合製品の表記は Open Design 公式 README の Comparison 表に準拠しています。競合製品はクローズドソース / サブスクリプション形態に応じて 1 列にまとめています。各製品は更新が速いため、最新の情報は公式をご確認ください。
## 3 ステップで接続
### 事前準備：AIHubMix のキーを取得する
[aihubmix.com](https://aihubmix.com) にログインし、コンソールの **Keys** ページで API Key（`sk-...` のような形式）を作成します。新規作成後はすぐにコピーして保存してください。ポップアップを閉じると完全な平文は二度と表示されません。少し残高をチャージしておくことをおすすめします——後の画像・動画生成で使用します（特に動画は残高を多く消費します）。
### ステップ 1：実行モードとプロトコルを選ぶ
Open Design を開き、右上の歯車をクリックして **Settings（設定）→ Execution mode（実行モード）→ BYOK を選択**し、続いて **Gateways** の行で **AIHubMix** を選びます。
### ステップ 2：キーを貼り付ける（アドレスは固定済み、手入力不要）
上図と同じポップアップの **API key** 欄にキー（プレースホルダーは `sk-...`）を貼り付け、**Test** をクリックすると接続を検証できます（スクリーンショットでは `Connected. Replied in … 'ok'` と表示されます）。
他の provider と異なる点は、**AIHubMix は単一固定入口のゲートウェイであり、アドレス（`https://aihubmix.com/v1`）はすでに内蔵され、フォーム上では非表示になっている**ことです。手入力する必要はなく、できません——入力ミスの起こりうるフィールドが 1 つ減ります。
### ステップ 3：モデルを選んで作業開始
チャット、画像、動画、音声のモデルはすべてこの BYOK パネルで選びます。**チャットモデル**は **Model** ドロップダウン（キー検証が通れば AIHubMix のリアルタイムカタログを検索可能。デフォルトは `gpt-5.5`）、**画像 / 動画 / 音声モデル**はパネル下部の対応するセレクターで選びます。[Arena の各分野ランキング](https://arena.ai/) を用途別に参照して選べます。以下のモデルはすべて AIHubMix で利用可能であることを確認済みです。
**① チャット / ウェブプロトタイプ生成（主力）** · 参考：[Code/WebDev Arena](https://arena.ai/leaderboard/code)（ウェブ UI 生成に対する人間の投票で、Open Design に最も近い）、[Agent Arena](https://arena.ai/leaderboard/agent)（ツールのオーケストレーション）
| 用途 | 推奨モデル |
| ----------------------- | ---------------------------------------------------------------- |
| デザイン推論 / ウェブプロトタイプ（主力） | `gpt-5.5`、`claude-opus-4-8`、`claude-fable-5` |
| 指示への厳密な追従 / 安定したツール呼び出し | `claude-fable-5`（Steerability ランキング首位）、`kimi-k2.6`（ハルシネーションが少ない） |
| 速度 / バッチ処理 / コスト削減 | `gpt-4o-mini`、`claude-haiku-4-5`、`deepseek-v4-flash` |
> **メディア生成はツール呼び出しに依存します**：チャット内での画像 / 動画 / 音声生成は、モデルが発行する function call です。主力には **function calling** をサポートするもの（`gpt-5.5`、Claude Opus 系が最も安定）を優先して選んでください。そうしないと「チャットは正常なのに画像が出ない」状態になります。`claude-fable-5` は WebDev / Agent 両ランキングの上位ですが、カタログでは現在、公式チャネルでのアクセスが制限されていると表記されています。**実際の利用可否を基準にしてください。**
**② 画像モデル** · 参考：[Text-to-Image Arena](https://arena.ai/leaderboard/text-to-image)
ランキング上位かつ AIHubMix で利用可能：`gpt-image-2`、`gemini-3.1-flash-image`（すなわち nano-banana-2）、`gemini-3-pro-image`（nano-banana-pro）。
**③ 動画モデル** · 参考：[Video Arena](https://arena.ai/leaderboard/text-to-video)
ランキング上位かつ AIHubMix で利用可能：`doubao-seedance-2-0-260128`、`happyhorse-1.0-i2v`（Open Design のデフォルト）、`veo-3.1-generate-preview`、`wan2.7-i2v`。
> ランキングも利用可能なモデルも変動が速いです。**ランキングは [Arena](https://arena.ai/) の最新を、モデル ID は AIHubMix のリアルタイムカタログを基準にしてください**（ドロップダウンで直接検索できます）。
## AIHubMix を接続すると何ができるか
接続後、AIHubMix は Open Design のメインライン——チャットモデルでプロトタイプやデザイン成果物を生成すること——を駆動するだけでなく、画像・動画・音声の 3 種類のメディア生成も追加で有効化します。
### デザインとプロトタイプ生成（主機能）
これが Open Design の本領です。選んだチャットモデルが要件を理解し、**ウェブ / デスクトップ / モバイルのプロトタイプ、インタラクティブな dashboard、PPT / deck** を生成し、デザインシステムを書き、原稿の修正・レビューを行います——納品されるのは本物の CSS、本物のコンポーネントで動く成果物です。セッション中はいつでも上部バーでモデルを切り替えられ、同じキー 1 本でベンダーをシームレスに切り替えられます。
**BYOK モードの能力範囲**：API（BYOK）モードではチャット + 画像 / 動画 / 音声生成がすべて揃っていますが、AI は **プロジェクトのコードファイルを直接読み書き・編集することはありません**。artifact を生成するだけです。agent にローカルコードを直接編集させたい場合は、**Local CLI** モードに切り替えてください。
### 画像 / 動画 / 音声生成（付属メディア）
プロトタイプに加え、AIHubMix は Open Design に画像生成、動画生成、音声生成も直接行わせます。これら 3 種類のメディアモデルはすべて **BYOK パネル内**で設定し、各項目には `Default` と表記されたデフォルトモデルがあらかじめ選択されています（具体的なモデルの推奨は上記「ステップ 3：モデルを選ぶ」を参照）。
#### 画像生成
チャットでモードを **Image** に切り替え、要件をそのまま記述するだけです。たとえば「Generate an image of the Dragon Boat Festival」のように。モデルが内蔵の `generate_image` ツールを呼び出して画像を生成し、複数のアスペクト比（1:1、16:9、9:16 など）をサポートします。Gemini / Imagen 系は自動的に Gemini ネイティブの画像生成インターフェースを通ります。
#### 動画生成
動画ファミリーは **Seedance（豆包）、Wan（通義万相）、Veo（Google）、Sora（OpenAI）** などをカバーしています（モデルの推奨は上記「ステップ 3：モデルを選ぶ」を参照。各社の text-to-video / image-to-video、長さ、アスペクト比、音声の具体的なサポートはリアルタイムカタログと各公式を基準にしてください）。
チャットでモードを **Video** に切り替え、一文記述するだけで `generate_video` をトリガーでき、長さやアスペクト比を設定できます。image-to-video（i2v）モデルには参照画像が 1 枚必要です——**指定しない場合、アプリはプロジェクト内の最新の画像を自動で取得します**（厳密に制御したい場合は参照画像を明示的に指定してください）。「先に画像を生成し、続けて動画を生成する」流れに非常にスムーズにつながります。動画は非同期で生成され、アプリが自動でポーリングし、完了するとそのまま会話に埋め込まれます。
#### 音声 / ナレーション
**音声モデル**と**音色**も BYOK パネルでデフォルト項目があらかじめ選択されており（音色のデフォルトは `alloy`、ほかに `echo` / `fable` / `onyx` / `nova` / `shimmer` を選択可能）、チャット内で `generate_speech` を使って任意のテキストをナレーションに変換できます——プロトタイプのデモや動画のナレーションにそのまま音声を付けられます。
## よくある質問（FAQ）
Local CLI（ローカルにインストール済みの agent を呼び出す）はローカルコードを直接編集できますが、対応する CLI を事前にインストールしておく必要があります。API（BYOK）モードはどの CLI もインストールせず、AIHubMix のキー 1 本を設定するだけで、チャット + 画像 / 動画 / 音声のフルセットをすぐに利用でき、最も手早く始められます。2 つのモードは必要に応じて切り替えられます。
できません。BYOK モードでは AI は artifact を生成するだけで、プロジェクトファイルを読み書き・編集しません。agent にローカルコードを直接編集させたい場合は、Local CLI モードに切り替えてください。チャットおよび画像 / 動画 / 音声生成はこの制限を受けません。
手入力する必要はありません。AIHubMix は Open Design では単一固定入口のゲートウェイであり、アドレス（`https://aihubmix.com/v1`）はすでに内蔵され、フォーム上では非表示になっています。入力するのは API Key だけで済みます——アドレスは唯一固定で、入力ミスの起こりうるフィールドが 1 つ減ります。
キーの接続が成功すると、**Model** ドロップダウンで AIHubMix のリアルタイムモデルカタログ（数百のモデル）を検索できます。ドロップダウンには、すぐに使い始められるよう、よく使われるフラッグシップモデルもいくつかプリセットされています。AIHubMix がそのモデル名をサポートしてさえいれば選んで利用でき、現在の利用可能なモデルはリアルタイムカタログを基準にしてください。
* **Test 失敗、接続できない**：API Key が正しく入力されているか、AIHubMix アカウントに残高があるか、ローカルのネットワークから `aihubmix.com` にアクセスできるかを確認してください。
* **チャットは正常なのに画像 / 動画が出ない**：多くの場合、現在のチャットモデルがツール呼び出しを発行していません。**function calling をサポートする**モデル（`gpt-5.5`、`claude-opus-4-8` など）に変更すると、メディア生成がトリガーされます。
* **あるモデルがサポートされていないと表示される**：AIHubMix のリアルタイムカタログで検索できるモデルを基準にしてください。
弱められません。Open Design はモデル名に応じて AIHubMix の対応するネイティブプロトコルのエンドポイントを通ります：`claude*` は Anthropic、`gemini*` / `imagen*` は Gemini、それ以外は OpenAI 互換インターフェースへ。ネイティブプロトコルが忠実に保たれ、思考チェーンやネイティブ画像生成などの専用能力を完全に発揮できます。
Open Design はローカルファーストのアプリです：API Key とプロジェクトデータはすべて手元のマシンに保存されます（ローカル SQLite。プロジェクトファイルは `.od/projects/` 配下）。テレメトリはデフォルトで無効で、任意で有効化（opt-in）できます。リクエストはローカルの daemon から AIHubMix へ転送され、AIHubMix はモデルのルーティング転送のみを行います。
## 今すぐ始める
1. [aihubmix.com](https://aihubmix.com) で登録し、コンソールで `sk-` キーを作成して少し残高をチャージする（画像 / 動画生成で使用します）
2. Open Design → Settings → Execution mode → API provider(BYOK) で **AIHubMix** を選び、キーを貼り付ける
3. Model ドロップダウンでモデルを 1 つ選び、ランディングページ + メインビジュアルを 1 つ作らせて、制作を始める
Open Design のダウンロード：[open-design.ai](https://open-design.ai/)。