Open Design

Open Design（官網；開源儲存庫 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 是一個 OpenAI 介面相容的聚合閘道，一把 Key 背後同時接通 OpenAI / Anthropic / Google Gemini / DeepSeek 以及主流圖像、影片、語音模型。Open Design 會按模型名選 AIHubMix 對應的原生協定端點——claude* 走 Anthropic、gemini* / imagen* 走 Gemini、其餘走 OpenAI 相容介面——於是 Claude 的思考鏈、Gemini 的原生出圖都不打折，而你只需要管一把 Key。

​

和常見工具比

下表維度取自 Open Design 官方 README 的 Comparison 表： _{對比維度與競品標註以 Open Design 官方 README 的 Comparison 表為準；競品按其閉源 / 訂閱形態合併為一欄，各產品更新較快，以官方最新為準。}

​

三步接入

​

前置：拿到 AIHubMix Key

登入 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 各領域榜 按用途挑，下面型號都已確認 AIHubMix 可用。 ① 聊天 / 生成網頁原型（主力） · 參考 Code/WebDev Arena（生成網頁 UI 的人類投票，最貼 Open Design）、Agent Arena（工具編排）

媒體生成靠工具呼叫：聊天裡出圖 / 出片 / 配音是模型發起的 function call，主力優先選支援 function calling 的（gpt-5.5、Claude Opus 系最穩），否則會「聊天正常但不出圖」。claude-fable-5 在 WebDev / Agent 雙榜前列，但目錄目前標註其官方通道存取受限，以實際可用為準。

② 圖像模型 · 參考 Text-to-Image Arena 榜單靠前且 AIHubMix 可用：gpt-image-2、gemini-3.1-flash-image（即 nano-banana-2）、gemini-3-pro-image（nano-banana-pro）。 ③ 影片模型 · 參考 Video Arena 榜單靠前且 AIHubMix 可用：doubao-seedance-2-0-260128、happyhorse-1.0-i2v（Open Design 預設）、veo-3.1-generate-preview、wan2.7-i2v。

排名與可用型號變動都快：排名以 Arena 最新為準，模型 ID 以 AIHubMix 即時目錄為準（下拉直接搜）。

​

接入 AIHubMix 後能做什麼

接入後，AIHubMix 既驅動 Open Design 的主線——用聊天模型生成原型與設計產物，也額外點亮圖像、影片、語音三類媒體生成。

​

設計與原型生成（主能力）

這是 Open Design 的主場。你選定的聊天模型負責理解需求，生成網頁 / 桌面 / 行動端原型、可互動 dashboard、簡報 / deck，寫設計系統、改稿評審——交付的是真 CSS、真元件的可執行產物。對話裡可隨時在頂列切換模型，同一把 Key 無縫切廠商。

​

圖像 / 影片 / 語音生成（配套媒體）

除了原型，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）

​

立即開始

1. 去 aihubmix.com 註冊，在主控台建立 sk- Key 並預存一點額度（圖 / 影片生成會用到）
2. 在 Open Design → Settings → Execution mode → API provider(BYOK) 選 AIHubMix，貼上 Key
3. 在 Model 下拉選單裡挑一個模型，讓它跑一個著陸頁 + 主視覺，開始創作

下載 Open Design：open-design.ai。