Projete com o Open Design um site que combina com sua marca atual

Este guia foca em um truque de destaque do Open Design: aponte-o para o seu site existente e o agente puxa a sua marca real — fontes, cores, tom — para uma especificação e, então, projeta na sua voz. Ele também cobre a instalação desktop em um clique e uma leitura franca sobre por que recorrer a uma alternativa aberta. Segue a construção prática que Brendan O'Connell conduz em seu passo a passo, reescrita e atualizada para a versão atual. Assista ao vídeo acima para ver a execução ao vivo, ou continue lendo para a versão escrita.

Um protótipo real gerado, renderizado na pré-visualização — uma landing page de agência escura e cinematográfica.

O que é o Open Design?

O Open Design é uma plataforma de design de código aberto e local-first que roda sobre o agente de programação que você já usa — Claude Code, Codex, Cursor, Gemini, OpenCode e mais — ou com a sua própria chave de API. É, em essência, um espaço de trabalho no estilo do Claude Design que você executa na sua própria máquina, sem ficar preso à nuvem de um único fornecedor e sem os limites de uso daquela ferramenta. É Apache-2.0, vem com uma vasta biblioteca de skills e design systems e acrescenta por cima a geração de mídia (imagem, vídeo, áudio).

Por que recorrer a uma alternativa aberta

A motivação de Brendan é concreta e vale a pena repetir, porque é o fator decisivo para muita gente. Ele gerou um único design system na ferramenta fechada na nuvem e isso devorou ~75% do seu limite semanal — deixando-o travado até a semana seguinte. Esse limite é separado da cota normal do plano, o que faz o fluxo de trabalho parecer quase inutilizável para uma iteração de verdade. Rodar na sua própria assinatura do Claude Code (ou qualquer outra) remove essa parede: você não esbarra num teto de design separado e não fica preso a um único ecossistema.

Passo 1 — Instalar (o caminho de um clique)

A rota mais fácil, e a que Brendan recomenda, é o aplicativo desktop: vá até open-design.ai/download e pegue o executável para macOS ou Windows. O app fica no ar em pouco tempo e detecta automaticamente os CLIs de agentes já presentes na sua máquina — Brendan não configurou nada; ele reconheceu a assinatura do Claude Code dele e ficou pronto para usar.

Prefere o terminal? A partir do código-fonte:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Abra a URL local que ele imprime (uma porta dinâmica — não fixe nenhuma no código). À direita você encontrará as configurações: os agentes detectados, além de provedores de mídia (OpenAI para imagem, MiniMax para vídeo, ElevenLabs para voz), conectores (Composio MCP) e até bichinhos de desktop. Você também pode usar a sua própria chave para qualquer provedor.

Passo 2 — Projetar a partir da sua marca existente

Este é o truque que sozinho já vale o preço do ingresso. Crie um projeto, escolha alta fidelidade e, no seu brief, diga a ele para projetar para o seu site existente. O agente tem uma ferramenta de busca na web, então ele vai ler o seu site no ar e, em seguida, derivar dele uma especificação de marca.

No vídeo, Brendan o aponta para o próprio site e o Open Design:

1. Busca a página e extrai o conteúdo real.
2. Escreve um brand-spec.md capturando a fonte real dele (reconheceu corretamente a Fig Tree), a cor dele e suas escolhas de design — "sem botões em formato de pílula, sem cartões totalmente arredondados, cor de destaque usada com parcimônia, espaços em branco generosos" — além do tom de voz ("nada de marketing ofegante").
3. Gera um DESIGN.md e constrói a página naquela voz, mesclando a marca existente dele com um layout mais limpo.

O espaço de trabalho do Open Design: descreva o que você quer criar, escolha um modo e seu agente faz o resto.

Antes de construir, o Open Design roda um breve formulário de descoberta (uma página ou algumas páginas? direção visual? combinar com o site atual? espaços reservados realistas?) para travar a direção certa. O resultado mantém o slogan dele, o azul dele e a fonte dele e, por cima, sobrepõe um layout mais nítido — uma saída de várias páginas pelas quais você pode navegar clicando.

Passo 3 — Revisar a autoverificação anti-slop e exportar

Ao concluir, o Open Design roda uma autoverificação anti-slop — Brendan a vê confirmar "sem emojis, uma tipografia, um floreio decisivo, texto de posicionamento real do começo ao fim". Essa é a barreira de proteção que impede que o resultado pareça gerado.

A galeria HyperFrames: peças de motion e vídeo orientadas por código que você pode forkar e remixar.

Navegue pelas abas exemplos e design systems em busca de pontos de partida (cada design system te dá um DESIGN.md totalmente editável) e, quando estiver satisfeito, exporte o artefato como HTML, PDF ou um ZIP. Como tudo roda localmente no seu próprio agente, não há um teto de design separado para esbarrar enquanto você itera.

Dicas

• Aponte-o para o seu site no ar para herdar suas fontes, cores e tom reais — o caminho mais rápido para um resultado fiel à marca.
• Use o aplicativo desktop para o caminho sem configuração; ele detecta o seu agente automaticamente.
• Rode na sua própria assinatura de CLI para escapar do teto semanal de design separado das ferramentas fechadas.
• Leia os brand-spec.md / DESIGN.md gerados — são arquivos editáveis, então corrija qualquer coisa que a extração tenha captado errado.
• Invista um pouco no prompt — um brief mais rico produz uma primeira versão visivelmente melhor.

Perguntas frequentes

Ele realmente consegue projetar a partir do meu site existente? Sim — o agente tem uma ferramenta de busca na web. Diga a ele para projetar para o seu site e ele extrai suas fontes, cores, escolhas de layout e tom para um brand-spec.md e, então, projeta naquela voz.

Eu preciso configurar o meu agente? Geralmente não. O aplicativo desktop detecta automaticamente os CLIs de agentes já instalados (Claude Code, Codex, Gemini e mais). Você também pode usar a sua própria chave.

Ele tem os limites de uso da ferramenta fechada? Nenhum teto de design separado — a geração depende de qualquer agente/assinatura que você conectar, então você não fica bloqueado depois de um único design.

É grátis? O app é de código aberto sob a Apache-2.0 e gratuito para rodar localmente. Você só paga pelo uso de modelo e mídia de qualquer agente e provedores que conectar.

---

Este guia escrito é baseado no passo a passo de Brendan O'Connell. Assista ao vídeo completo acima e inscreva-se no canal de Brendan O'Connell para mais análises de ferramentas de código aberto.