> ## 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 Key 把 Claude Design 開源平替變成本地 AI 設計工作室
[Open Design](https://open-design.ai/)（官網；開源儲存庫 [`nexu-io/open-design`](https://github.com/nexu-io/open-design)）是一款**開源、本地優先的「Claude Design 平替」**。它本身不帶模型，而是把你接入的 AI 當作設計引擎，直接產出網頁 / 桌面 / 行動端原型、可互動 dashboard、簡報、圖片與影片，並能匯出為 HTML / PDF / PPTX / MP4——交付的是真實 CSS、真實元件的可執行產物，而不是畫布上的像素。Apache-2.0 開源，專案資料都留在你本機。
**AIHubMix 現已是 Open Design 內建支援的 BYOK 閘道**：在它的 API（BYOK）模式裡選 AIHubMix，一把 Key 就能同時驅動聊天、配圖、出片、配音。本文講的就是怎麼把它接進來、怎麼用。
Open Design 提供兩種執行模式（Settings → Execution mode）：
* **Local CLI**——呼叫本機已安裝的 CLI agent（Claude Code / Codex 等）當設計引擎，能直接讀寫專案程式碼檔案。
* **API provider（BYOK，自帶金鑰）**——不安裝任何 CLI，直接指向一個 OpenAI / Anthropic 相容端點。**本文用 AIHubMix 走這條路。**
## 為什麼用 AIHubMix 驅動
一把 Key，聊天、配圖、出片、配音全打通。Open Design 原生的媒體生成往往要分別對接各家，配圖、出影片、配音可能要設定上多家廠商的 Key。
[AIHubMix](https://aihubmix.com) 是一個 **OpenAI 介面相容的聚合閘道**，一把 Key 背後同時接通 OpenAI / Anthropic / Google Gemini / DeepSeek 以及主流圖像、影片、語音模型。Open Design 會**按模型名選 AIHubMix 對應的原生協定端點**——`claude*` 走 Anthropic、`gemini*` / `imagen*` 走 Gemini、其餘走 OpenAI 相容介面——於是 Claude 的思考鏈、Gemini 的原生出圖都不打折，而你只需要管一把 Key。
### 和常見工具比
下表維度取自 [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、自帶 Key（BYOK） | ❌ 鎖定各自後端 | ✅ 22 個 CLI + BYOK |
| 一把 Key 混用 Claude / GPT / Gemini / DeepSeek | ❌ | ✅ |
| 設計系統 `DESIGN.md` | 專有 / 受限 | ✅ 內建 150 套 |
| 技能 / 外掛 | 封閉 | ✅ 100+ 技能 · 261 外掛 |
| HyperFrames（HTML→MP4 動效） | ❌ | ✅ |
| 計費 | 訂閱（Pro / Team） | BYOK，按各家模型用量 |
對比維度與競品標註以 Open Design 官方 README 的 Comparison 表為準；競品按其閉源 / 訂閱形態合併為一欄，各產品更新較快，以官方最新為準。
## 三步接入
### 前置：拿到 AIHubMix Key
登入 [aihubmix.com](https://aihubmix.com)，在主控台 **Keys** 頁建立一個 API Key（格式形如 `sk-...`）。新建後請馬上複製儲存，彈窗關掉就看不到完整明文了。建議預存一點額度——後面圖像、影片生成會用到（影片尤其耗額度）。
### 第 1 步：選執行模式與協定
開啟 Open Design，點右上角齒輪進入 **Settings（設定）→ Execution mode（執行模式）→ 選 BYOK**，再在 **Gateways** 一行選擇 **AIHubMix**。
### 第 2 步：貼上 Key（位址已固定，無需手填）
在上圖同一彈窗的 **API key** 一欄貼上你的 Key（佔位符是 `sk-...`），點 **Test** 即可驗證連通（截圖裡顯示 `Connected. Replied in … 'ok'`）。
和其他 provider 不同的是：**AIHubMix 是固定單一入口的閘道，位址（`https://aihubmix.com/v1`）已經內建、在表單裡對你隱藏**，你不用、也無法手填——少一處可能填錯的欄位。
### 第 3 步：選模型，挑一個開工
聊天、圖像、影片、語音模型都在這個 BYOK 面板裡選：**聊天模型**在 **Model** 下拉選單（Key 驗證通過後即可搜尋 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 的主線——用聊天模型生成原型與設計產物，也額外點亮圖像、影片、語音三類媒體生成。
### 設計與原型生成（主能力）
這是 Open Design 的主場。你選定的聊天模型負責理解需求，生成**網頁 / 桌面 / 行動端原型、可互動 dashboard、簡報 / deck**，寫設計系統、改稿評審——交付的是真 CSS、真元件的可執行產物。對話裡可隨時在頂列切換模型，同一把 Key 無縫切廠商。
**BYOK 模式的能力邊界**：API（BYOK）模式下聊天 + 圖 / 影片 / 語音生成都齊全，但 AI **不會直接讀寫、編輯你的專案程式碼檔案**，只產出 artifact。需要讓 agent 直接改本地程式碼時，請切到 **Local CLI** 模式。
### 圖像 / 影片 / 語音生成（配套媒體）
除了原型，AIHubMix 還讓 Open Design 直接出圖、出片、配音。這三類媒體模型都在 **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 步：選模型」；各家文生 / 圖生、時長、比例、配音的具體支援以即時目錄與對應官方為準）。
聊天裡把模式切到 **Video**、描述一句即可觸發 `generate_video`，支援設定時長、比例。圖生影片（i2v）模型需要一張參考圖——**你不指定時，應用程式會自動取專案裡最新的那張圖**（要精確控制就明確指定參考圖），銜接「先出圖、再出片」非常順手。影片是非同步生成的，應用程式會自動輪詢，完成後直接嵌進對話裡。
#### 語音 / 配音
**語音模型**與**音色**在 BYOK 面板裡也都已預選預設項（音色預設 `alloy`，另有 `echo` / `fable` / `onyx` / `nova` / `shimmer` 可選），就能在聊天裡用 `generate_speech` 把任意文案轉成配音——給原型 demo、影片旁白直接配音。
## 常見問題（FAQ）
Local CLI（呼叫本機已安裝 agent）能直接改本地程式碼，但要求你先裝好對應 CLI。API（BYOK）模式不安裝任何 CLI，設定一把 AIHubMix Key 就能直接拿到聊天 + 圖 / 影片 / 語音全套，上手最快。兩種模式可按需切換。
不能。BYOK 模式下 AI 只產出 artifact，不讀寫 / 編輯專案檔案。需要讓 agent 直接改本地程式碼時，請切到 Local CLI 模式。聊天與圖 / 影片 / 語音生成不受此限制。
不需要手填。AIHubMix 在 Open Design 裡是固定單一入口的閘道，位址（`https://aihubmix.com/v1`）已經內建、在表單裡對你隱藏。你只填 API Key 即可——位址唯一固定，少一處可能填錯的欄位。
Key 連接成功後，在 **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-` Key 並預存一點額度（圖 / 影片生成會用到）
2. 在 Open Design → Settings → Execution mode → API provider(BYOK) 選 **AIHubMix**，貼上 Key
3. 在 Model 下拉選單裡挑一個模型，讓它跑一個著陸頁 + 主視覺，開始創作
下載 Open Design：[open-design.ai](https://open-design.ai/)。