> ## 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
> Transforme a alternativa open source ao Claude Design em um estúdio de design de IA local com uma única Key da AIHubMix
O [Open Design](https://open-design.ai/) (site oficial; repositório open source [`nexu-io/open-design`](https://github.com/nexu-io/open-design)) é uma **alternativa open source, local-first ao «Claude Design»**. Ele não traz nenhum modelo próprio; em vez disso, usa a IA que você conecta como motor de design, produzindo diretamente protótipos web / desktop / mobile, dashboards interativos, apresentações, imagens e vídeos, com exportação para HTML / PDF / PPTX / MP4 — o que ele entrega são artefatos executáveis com CSS real e componentes reais, e não pixels em uma tela. Open source sob Apache-2.0, com todos os dados do projeto permanecendo na sua própria máquina.
**A AIHubMix já é um gateway BYOK com suporte nativo no Open Design**: no modo API (BYOK), basta selecionar a AIHubMix e, com uma única Key, você impulsiona simultaneamente chat, geração de imagens, vídeos e voz. Este artigo explica exatamente como integrá-la e como usá-la.
O Open Design oferece dois modos de execução (Settings → Execution mode):
* **Local CLI** — invoca um agente CLI já instalado na sua máquina (Claude Code / Codex etc.) como motor de design, podendo ler e escrever diretamente os arquivos de código do projeto.
* **API provider (BYOK, com sua própria chave)** — não instala nenhum CLI, apontando diretamente para um endpoint compatível com OpenAI / Anthropic. **Neste artigo, usamos a AIHubMix por este caminho.**
## Por que usar a AIHubMix como motor
Uma única Key conecta chat, geração de imagens, vídeos e voz, tudo de uma vez. A geração nativa de mídia do Open Design normalmente exige integrações separadas com cada fornecedor; gerar imagens, vídeos e voz pode exigir configurar Keys de vários provedores diferentes.
A [AIHubMix](https://aihubmix.com) é um **gateway agregador compatível com a interface da OpenAI**: por trás de uma única Key, ela conecta simultaneamente OpenAI / Anthropic / Google Gemini / DeepSeek e os principais modelos de imagem, vídeo e voz. O Open Design **seleciona o endpoint de protocolo nativo correspondente na AIHubMix conforme o nome do modelo** — `claude*` vai para a Anthropic, `gemini*` / `imagen*` vão para o Gemini, e o restante vai para a interface compatível com OpenAI — de modo que a cadeia de raciocínio do Claude e a geração de imagens nativa do Gemini não sofrem nenhuma perda, e você só precisa gerenciar uma única Key.
### Comparação com ferramentas comuns
As dimensões da tabela abaixo foram extraídas da [tabela Comparison do README oficial do Open Design](https://github.com/nexu-io/open-design#comparison):
| Dimensão | Ferramentas proprietárias como Claude Design / Figma / Lovable / v0 | Open Design + AIHubMix |
| ----------------------------------------------------------- | ------------------------------------------------------------------- | ---------------------------------- |
| Open source | ❌ | ✅ Apache-2.0 |
| Self-hosting / desktop | ❌ | ✅ macOS · Windows · Vercel |
| Roda no seu próprio Agent, com sua própria Key (BYOK) | ❌ presos a cada backend | ✅ 22 CLIs + BYOK |
| Misturar Claude / GPT / Gemini / DeepSeek com uma única Key | ❌ | ✅ |
| Design system `DESIGN.md` | proprietário / restrito | ✅ 150 conjuntos integrados |
| Skills / plugins | fechado | ✅ mais de 100 skills · 261 plugins |
| HyperFrames (HTML→MP4 com animações) | ❌ | ✅ |
| Cobrança | assinatura (Pro / Team) | BYOK, por uso de cada modelo |
As dimensões de comparação e as marcações dos concorrentes seguem a tabela Comparison do README oficial do Open Design; os concorrentes foram agrupados em uma única coluna por seu formato proprietário / por assinatura, e como cada produto evolui rapidamente, a referência é sempre a versão oficial mais recente.
## Integração em três passos
### Pré-requisito: obter a Key da AIHubMix
Faça login em [aihubmix.com](https://aihubmix.com) e crie uma API Key na página **Keys** do console (no formato `sk-...`). Copie e salve imediatamente após criar, pois ao fechar o pop-up você não verá mais o texto completo. Recomendamos pré-carregar algum saldo — será usado posteriormente na geração de imagens e vídeos (vídeos consomem saldo especialmente).
### Passo 1: escolher o modo de execução e o protocolo
Abra o Open Design, clique na engrenagem no canto superior direito para entrar em **Settings (configurações) → Execution mode (modo de execução) → selecione BYOK**, e então, na linha **Gateways**, selecione **AIHubMix**.
### Passo 2: colar a Key (o endereço já é fixo, não precisa ser preenchido manualmente)
No mesmo pop-up da imagem acima, cole sua Key no campo **API key** (o placeholder é `sk-...`) e clique em **Test** para verificar a conexão (a captura mostra `Connected. Replied in … 'ok'`).
Ao contrário de outros providers: **a AIHubMix é um gateway de entrada única e fixa, com o endereço (`https://aihubmix.com/v1`) já embutido e oculto no formulário**, você não precisa — nem pode — preenchê-lo manualmente, eliminando um campo a menos passível de erro.
### Passo 3: escolher o modelo e começar a trabalhar
Os modelos de chat, imagem, vídeo e voz são todos selecionados neste painel BYOK: o **modelo de chat** no menu suspenso **Model** (após a Key ser validada, você pode pesquisar o catálogo em tempo real da AIHubMix; o padrão inicial é `gpt-5.5`), e os **modelos de imagem / vídeo / voz** nos respectivos seletores na parte inferior do painel. Você pode escolher conforme a finalidade usando os [rankings de cada área da Arena](https://arena.ai/); os modelos abaixo já foram confirmados como disponíveis na AIHubMix.
**① Chat / geração de protótipos web (principal)** · Referências: [Code/WebDev Arena](https://arena.ai/leaderboard/code) (votação humana para geração de UI web, o mais próximo do Open Design), [Agent Arena](https://arena.ai/leaderboard/agent) (orquestração de ferramentas)
| Finalidade | Modelo recomendado |
| ------------------------------------------------------------ | -------------------------------------------------------------------------- |
| Raciocínio de design / protótipos web (principal) | `gpt-5.5`, `claude-opus-4-8`, `claude-fable-5` |
| Seguir instruções com rigor / chamada de ferramentas estável | `claude-fable-5` (líder em Steerability), `kimi-k2.6` (poucas alucinações) |
| Velocidade / em lote / economia de custo | `gpt-4o-mini`, `claude-haiku-4-5`, `deepseek-v4-flash` |
> **A geração de mídia depende de chamadas de ferramentas**: no chat, gerar imagens / vídeos / voz é um function call iniciado pelo modelo, então dê prioridade aos modelos principais que suportam **function calling** (`gpt-5.5`, a série Claude Opus são os mais estáveis); caso contrário, você terá «o chat funciona, mas não gera imagens». O `claude-fable-5` está entre os primeiros nos rankings WebDev / Agent, mas o catálogo atualmente indica que seu acesso pelo canal oficial é restrito; **a referência é a disponibilidade real**.
**② Modelos de imagem** · Referência: [Text-to-Image Arena](https://arena.ai/leaderboard/text-to-image)
Bem posicionados no ranking e disponíveis na AIHubMix: `gpt-image-2`, `gemini-3.1-flash-image` (ou seja, nano-banana-2), `gemini-3-pro-image` (nano-banana-pro).
**③ Modelos de vídeo** · Referência: [Video Arena](https://arena.ai/leaderboard/text-to-video)
Bem posicionados no ranking e disponíveis na AIHubMix: `doubao-seedance-2-0-260128`, `happyhorse-1.0-i2v` (padrão do Open Design), `veo-3.1-generate-preview`, `wan2.7-i2v`.
> Tanto os rankings quanto os modelos disponíveis mudam rapidamente: **a referência para os rankings é a versão mais recente da [Arena](https://arena.ai/), e a referência para os IDs de modelo é o catálogo em tempo real da AIHubMix** (pesquise direto no menu suspenso).
## O que você pode fazer após integrar a AIHubMix
Após a integração, a AIHubMix impulsiona tanto a linha principal do Open Design — gerar protótipos e artefatos de design com modelos de chat — quanto, adicionalmente, ativa três categorias de geração de mídia: imagem, vídeo e voz.
### Geração de design e protótipos (capacidade principal)
Este é o ponto forte do Open Design. O modelo de chat que você escolher fica responsável por entender os requisitos e gerar **protótipos web / desktop / mobile, dashboards interativos, apresentações / decks**, escrever design systems e revisar versões — entregando artefatos executáveis com CSS real e componentes reais. Você pode trocar de modelo a qualquer momento na barra superior da conversa, alternando entre fornecedores de forma transparente com a mesma Key.
**Limites de capacidade do modo BYOK**: no modo API (BYOK), chat + geração de imagem / vídeo / voz estão todos disponíveis, mas a IA **não lê, escreve nem edita diretamente os arquivos de código do seu projeto**, produzindo apenas artefatos. Quando precisar que o agente altere diretamente o código local, mude para o modo **Local CLI**.
### Geração de imagem / vídeo / voz (mídia complementar)
Além dos protótipos, a AIHubMix também permite que o Open Design gere imagens, vídeos e voz diretamente. Esses três tipos de modelos de mídia são todos configurados **dentro do painel BYOK**, e cada um já vem com um modelo padrão pré-selecionado marcado como `Default` (para recomendações de modelos específicos, veja acima «Passo 3: escolher o modelo»).
#### Geração de imagens
No chat, mude o modo para **Image** e descreva diretamente o que você quer, por exemplo «Generate an image of the Dragon Boat Festival»; o modelo invocará a ferramenta integrada `generate_image` para gerar a imagem, com suporte a várias proporções (1:1, 16:9, 9:16 etc.). As séries Gemini / Imagen passam automaticamente pela interface de geração de imagens nativa do Gemini.
#### Geração de vídeos
A família de vídeo cobre **Seedance (Doubao), Wan (Tongyi Wanxiang), Veo (Google), Sora (OpenAI)** etc. (para recomendações de modelos, veja acima «Passo 3: escolher o modelo»; o suporte específico a texto-para-vídeo / imagem-para-vídeo, duração, proporção e áudio de cada fornecedor segue o catálogo em tempo real e a respectiva documentação oficial).
No chat, mude o modo para **Video** e descreva uma frase para acionar o `generate_video`, com suporte a definição de duração e proporção. Modelos de imagem-para-vídeo (i2v) exigem uma imagem de referência — **quando você não especifica uma, o aplicativo usa automaticamente a imagem mais recente do projeto** (para controle preciso, especifique explicitamente a imagem de referência), tornando muito fluida a sequência «primeiro gerar a imagem, depois o vídeo». O vídeo é gerado de forma assíncrona; o aplicativo faz o polling automaticamente e, ao concluir, o incorpora diretamente na conversa.
#### Voz / dublagem
O **modelo de voz** e o **timbre** também já vêm com padrões pré-selecionados no painel BYOK (timbre padrão `alloy`, com `echo` / `fable` / `onyx` / `nova` / `shimmer` também disponíveis), permitindo que você use o `generate_speech` no chat para converter qualquer texto em voz — ideal para dublar diretamente demos de protótipos e narrações de vídeo.
## Perguntas frequentes (FAQ)
O Local CLI (que invoca um agente já instalado na máquina) pode alterar diretamente o código local, mas exige que você tenha o CLI correspondente instalado. O modo API (BYOK) não instala nenhum CLI; basta configurar uma Key da AIHubMix para ter imediatamente o conjunto completo de chat + imagem / vídeo / voz, sendo o caminho mais rápido para começar. Os dois modos podem ser alternados conforme a necessidade.
Não. No modo BYOK, a IA apenas produz artefatos, sem ler/escrever ou editar arquivos do projeto. Quando precisar que o agente altere diretamente o código local, mude para o modo Local CLI. A geração de chat e de imagem / vídeo / voz não está sujeita a essa restrição.
Não é necessário preencher manualmente. No Open Design, a AIHubMix é um gateway de entrada única e fixa, com o endereço (`https://aihubmix.com/v1`) já embutido e oculto no formulário. Você só preenche a API Key — o endereço é único e fixo, eliminando um campo a menos passível de erro.
Após a Key conectar com sucesso, você pode pesquisar o catálogo de modelos em tempo real da AIHubMix (centenas de modelos) no menu suspenso **Model**. O menu também traz alguns modelos topo de linha mais usados pré-configurados para facilitar o início rápido. Desde que a AIHubMix suporte aquele nome de modelo, ele pode ser usado; os modelos atualmente disponíveis seguem o catálogo em tempo real.
* **Test falha, não conecta**: verifique se a API Key foi preenchida corretamente, se a conta da AIHubMix tem saldo e se a rede da sua máquina consegue acessar `aihubmix.com`.
* **O chat funciona, mas não gera imagens / vídeos**: na maioria das vezes, o modelo de chat atual não iniciou a chamada de ferramenta. Troque por um modelo que **suporte function calling** (como `gpt-5.5`, `claude-opus-4-8`) para que a geração de mídia seja acionada.
* **Aviso de que algum modelo não é suportado**: a referência são os modelos pesquisáveis no catálogo em tempo real da AIHubMix.
Não. O Open Design seleciona o endpoint de protocolo nativo correspondente na AIHubMix conforme o nome do modelo: `claude*` vai para a Anthropic, `gemini*` / `imagen*` vão para o Gemini, e o restante vai para a interface compatível com OpenAI. A fidelidade ao protocolo nativo é preservada, e capacidades exclusivas como a cadeia de raciocínio e a geração de imagens nativa funcionam plenamente.
O Open Design é um aplicativo local-first: a API Key e os dados do projeto ficam salvos na sua própria máquina (SQLite local, com os arquivos do projeto em `.od/projects/`). A telemetria fica desativada por padrão e pode ser ativada opcionalmente (opt-in). As requisições são encaminhadas por um daemon local até a AIHubMix, e a AIHubMix faz apenas o roteamento e encaminhamento dos modelos.
## Comece agora
1. Cadastre-se em [aihubmix.com](https://aihubmix.com), crie uma Key `sk-` no console e pré-carregue algum saldo (será usado na geração de imagens / vídeos)
2. No Open Design → Settings → Execution mode → API provider(BYOK), selecione **AIHubMix** e cole a Key
3. Escolha um modelo no menu suspenso Model, peça para ele criar uma landing page + visual principal e comece a criar
Baixe o Open Design: [open-design.ai](https://open-design.ai/).