> ## 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은 두 가지 Execution mode를 제공합니다(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 표를 기준으로 합니다. 경쟁 제품은 비공개 소스 / 구독 형태에 따라 한 열로 합쳤으며, 각 제품은 업데이트가 빠르므로 공식 최신 정보를 따르세요.
## 3단계 연동
### 사전 준비: AIHubMix Key 받기
[aihubmix.com](https://aihubmix.com)에 로그인하여 콘솔의 **Keys** 페이지에서 API Key(`sk-...` 형식)를 생성합니다. 생성 후에는 바로 복사해 저장하세요. 팝업을 닫으면 전체 평문을 다시 볼 수 없습니다. 약간의 잔액을 미리 충전해 두는 것을 권장합니다 — 이후 이미지, 영상 생성에 사용됩니다(영상은 특히 잔액 소모가 큽니다).
### 1단계: Execution mode와 프로토콜 선택
Open Design을 열고 오른쪽 상단의 톱니바퀴를 눌러 **Settings(설정) → Execution mode(실행 모드) → BYOK 선택**으로 이동한 뒤, **Gateways** 행에서 **AIHubMix**를 선택합니다.
### 2단계: Key 붙여넣기(주소는 고정되어 있어 직접 입력할 필요 없음)
위 그림과 같은 팝업의 **API key** 칸에 여러분의 Key를 붙여넣고(placeholder는 `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 1위)、`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 하나로 업체를 매끄럽게 바꿀 수 있습니다.
**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(Doubao), Wan(Tongyi Wanxiang), 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/).