> ## 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、PPT、图片和视频，并能导出为 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，按各家模型用量               |

<sub>对比维度与竞品标注以 Open Design 官方 README 的 Comparison 表为准；竞品按其闭源 / 订阅形态合并为一列，各产品更新较快，以官方最新为准。</sub>

## 三步接入

### 前置：拿到 AIHubMix Key

登录 [aihubmix.com](https://aihubmix.com)，在控制台 **Keys** 页创建一个 API Key（格式形如 `sk-...`）。新建后请马上复制保存，弹窗关掉就看不到完整明文了。建议预存一点额度——后面图像、视频生成会用到（视频尤其耗额度）。

### 第 1 步：选执行模式与协议

打开 Open Design，点右上角齿轮进入 **Settings（设置）→ Execution mode（执行模式）→ 选 BYOK**，再在 **Gateways** 一行选择 **AIHubMix**。

<Frame>
  <img src="https://mintcdn.com/aihubmix/pQ_LUUTlc81jEl7R/images/clients/open-design/step1.png?fit=max&auto=format&n=pQ_LUUTlc81jEl7R&q=85&s=32c882a4efc65bfe52f2ad5e9896f775" alt="点击 Open Design 右上角齿轮打开设置" width="2560" height="1734" data-path="images/clients/open-design/step1.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/aihubmix/pQ_LUUTlc81jEl7R/images/clients/open-design/step2.png?fit=max&auto=format&n=pQ_LUUTlc81jEl7R&q=85&s=7239fdc3f64b32b8f24779010a794d85" alt="在 Execution mode 里选 BYOK 并选择 AIHubMix 网关" width="2560" height="1734" data-path="images/clients/open-design/step2.png" />
</Frame>

### 第 2 步：粘贴 Key（地址已固定，无需手填）

在上图同一弹窗的 **API key** 一栏粘贴你的 Key（占位符是 `sk-...`），点 **Test** 即可验证连通（截图里显示 `Connected. Replied in … 'ok'`）。

和其他 provider 不同的是：**AIHubMix 是固定单一入口的网关，地址（`https://aihubmix.com/v1`）已经内置、在表单里对你隐藏**，你不用、也无法手填——少一处可能填错的字段。

<Frame>
  <img src="https://mintcdn.com/aihubmix/pQ_LUUTlc81jEl7R/images/clients/open-design/step3.png?fit=max&auto=format&n=pQ_LUUTlc81jEl7R&q=85&s=7460de4ab8ef970299f3286edfc63238" alt="在 AIHubMix 控制台创建并复制 sk- 开头的 API Key" width="2940" height="1672" data-path="images/clients/open-design/step3.png" />
</Frame>

### 第 3 步：选模型，挑一个开工

聊天、图像、视频、语音模型都在这个 BYOK 面板里选：**聊天模型**在 **Model** 下拉（Key 验证通过后即可搜索 AIHubMix 实时目录，开箱默认 `gpt-5.5`），**图像 / 视频 / 语音模型**在面板下方对应的选择器。可对着 [Arena 各领域榜](https://arena.ai/) 按用途挑，下面型号都已确认 AIHubMix 可用。

<Frame>
  <img src="https://mintcdn.com/aihubmix/pQ_LUUTlc81jEl7R/images/clients/open-design/step4.png?fit=max&auto=format&n=pQ_LUUTlc81jEl7R&q=85&s=4a20f8ceea1a52f93f4e1d6a5785ddb6" alt="BYOK 面板内的图像、视频、语音模型与音色默认选择器" width="2560" height="1734" data-path="images/clients/open-design/step4.png" />
</Frame>

**① 聊天 / 生成网页原型（主力）** · 参考 [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、PPT / deck**，写设计系统、改稿评审——交付的是真 CSS、真组件的可运行产物。会话里可随时在顶栏切换模型，同一把 Key 无缝切厂商。

<Note>
  **BYOK 模式的能力边界**：API（BYOK）模式下聊天 + 图 / 视频 / 语音生成都齐全，但 AI **不会直接读写、编辑你的项目代码文件**，只产出 artifact。需要让 agent 直接改本地代码时，请切到 **Local CLI** 模式。
</Note>

### 图像 / 视频 / 语音生成（配套媒体）

除了原型，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 原生出图接口。

<Frame>
  <img src="https://mintcdn.com/aihubmix/pQ_LUUTlc81jEl7R/images/clients/open-design/image1.png?fit=max&auto=format&n=pQ_LUUTlc81jEl7R&q=85&s=5a8e9d0583503a11a511f9b41f4fcb05" alt="在 Open Design 里切到 Image 模式输入图片生成需求" width="2560" height="1734" data-path="images/clients/open-design/image1.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/aihubmix/pQ_LUUTlc81jEl7R/images/clients/open-design/image2.png?fit=max&auto=format&n=pQ_LUUTlc81jEl7R&q=85&s=524ea09c0a2070922783d840e95229a6" alt="AIHubMix 出的龙舟节图片直接嵌进对话" width="2560" height="1734" data-path="images/clients/open-design/image2.png" />
</Frame>

#### 视频生成

视频家族覆盖 **Seedance（豆包）、Wan（通义万相）、Veo（Google）、Sora（OpenAI）** 等（型号建议见上文「第 3 步：选模型」；各家文生 / 图生、时长、比例、配音的具体支持以实时目录与对应官方为准）。

聊天里把模式切到 **Video**、描述一句即可触发 `generate_video`，支持设定时长、比例。图生视频（i2v）模型需要一张参考图——**你不指定时，应用会自动取项目里最新的那张图**（要精确控制就显式指定参考图），衔接「先出图、再出片」非常顺手。视频是异步生成的，应用会自动轮询，完成后直接嵌进对话里。

<Frame>
  <img src="https://mintcdn.com/aihubmix/pQ_LUUTlc81jEl7R/images/clients/open-design/video1.png?fit=max&auto=format&n=pQ_LUUTlc81jEl7R&q=85&s=0c3140fa5f3a59f7501489675979f6bd" alt="在 Open Design 里切到 Video 模式输入视频生成需求" width="2560" height="1734" data-path="images/clients/open-design/video1.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/aihubmix/pQ_LUUTlc81jEl7R/images/clients/open-design/video3.png?fit=max&auto=format&n=pQ_LUUTlc81jEl7R&q=85&s=c15189c093d882156ac73ffff23d94f6" alt="AIHubMix 生成的龙舟视频结果（左侧为自动取用的参考首帧）" width="2560" height="1734" data-path="images/clients/open-design/video3.png" />
</Frame>

#### 语音 / 配音

**语音模型**与**音色**在 BYOK 面板里也都已预选默认项（音色默认 `alloy`，另有 `echo` / `fable` / `onyx` / `nova` / `shimmer` 可选），就能在聊天里用 `generate_speech` 把任意文案转成配音——给原型 demo、视频旁白直接配音。

## 常见问题（FAQ）

<AccordionGroup>
  <Accordion title="Open Design 自带的 Local CLI 模式更强，为什么还用 BYOK？">
    Local CLI（调用本机已装 agent）能直接改本地代码，但要求你先装好对应 CLI。API（BYOK）模式不装任何 CLI，配一把 AIHubMix Key 就能直接拿到聊天 + 图 / 视频 / 语音全套，上手最快。两种模式可按需切换。
  </Accordion>

  <Accordion title="BYOK 模式能让 AI 直接改我的本地代码文件吗？">
    不能。BYOK 模式下 AI 只产出 artifact，不读写 / 编辑项目文件。需要让 agent 直接改本地代码时，请切到 Local CLI 模式。聊天与图 / 视频 / 语音生成不受此限制。
  </Accordion>

  <Accordion title="需要填 Base URL 吗？">
    不需要手填。AIHubMix 在 Open Design 里是固定单一入口的网关，地址（`https://aihubmix.com/v1`）已经内置、在表单里对你隐藏。你只填 API Key 即可——地址唯一固定，少一处可能填错的字段。
  </Accordion>

  <Accordion title="找不到想用的模型怎么办？">
    Key 连接成功后，在 **Model** 下拉里就能搜索 AIHubMix 的实时模型目录（数百个模型）。下拉还预置了几款常用旗舰模型方便快速上手。只要 AIHubMix 支持该模型名就能选用，当前可用型号以实时目录为准。
  </Accordion>

  <Accordion title="连不上 / 出不了图怎么办？">
    * **Test 失败、连不上**：检查 API Key 是否填对、AIHubMix 账户是否有余额、本机网络能否访问 `aihubmix.com`。
    * **聊天正常但不出图 / 不出片**：多半是当前聊天模型没发起工具调用。换一个**支持 function calling** 的模型（如 `gpt-5.5`、`claude-opus-4-8`），媒体生成才会触发。
    * **提示某模型不支持**：以 AIHubMix 实时目录里能搜到的型号为准。
  </Accordion>

  <Accordion title="Claude 的 thinking、Gemini 的原生能力会被削弱吗？">
    不会。Open Design 会按模型名走 AIHubMix 对应的原生协议端点：`claude*` 走 Anthropic、`gemini*` / `imagen*` 走 Gemini、其余走 OpenAI 兼容接口。原生协议保真，思考链、原生出图等专属能力都能完整发挥。
  </Accordion>

  <Accordion title="我的 Key 和数据安全吗？">
    Open Design 是本地优先应用：API Key 与项目数据都保存在你本机（本地 SQLite，项目文件在 `.od/projects/` 下）。遥测默认关闭、可选开启（opt-in）。请求由本地 daemon 转发到 AIHubMix，AIHubMix 只做模型路由转发。
  </Accordion>
</AccordionGroup>

## 立即开始

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/)。