Open Design

O Open Design (site oficial; repositório open source 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 é 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: _{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 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; os modelos abaixo já foram confirmados como disponíveis na AIHubMix. ① Chat / geração de protótipos web (principal) · Referências: Code/WebDev Arena (votação humana para geração de UI web, o mais próximo do Open Design), Agent Arena (orquestração de ferramentas)

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 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 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, 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.

​

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)

​

Comece agora

1. Cadastre-se em 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.