Open Design

Open Design(공식 사이트; 오픈소스 저장소 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는 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 표를 기준으로 합니다. 경쟁 제품은 비공개 소스 / 구독 형태에 따라 한 열로 합쳤으며, 각 제품은 업데이트가 빠르므로 공식 최신 정보를 따르세요.}

​

3단계 연동

​

사전 준비: AIHubMix Key 받기

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 각 분야 순위를 보고 용도에 맞게 고를 수 있으며, 아래 모델들은 모두 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, PPT / 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(Doubao), Wan(Tongyi Wanxiang), 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.