Open Design é o sonho de todo vibe coder

Este guia é um manual de vibe coding para o Open Design: use o agente que você já usa, escolha um design system para que o resultado não grite “gerado por IA”, faça prompts pensando em uma estrutura que realmente converte e depois itere por conversa. Ele acompanha as três construções consecutivas que Sean Kochel realiza em suas demonstrações práticas — uma landing page, um app mobile e um app desktop — reescritas e atualizadas com a versão atual. Assista ao vídeo acima para ver a execução ao vivo, ou continue lendo para a versão em texto.

O workspace do Open Design — protótipos, apresentações de slides, imagens e vídeo em um único canvas tranquilo e familiar.

O que é o Open Design?

O Open Design é uma plataforma de design open-source e local-first que roda em cima do agente de código que você já usa. Ele detecta as CLIs já presentes na sua máquina — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode e mais algumas dezenas — e deixa esse agente conduzir a geração. Como Sean coloca: existe uma camada de CLI onde você configura seu agente, um system prompt que conduz a qualidade e, então, as partes que tornam tudo valioso — suporte a skills e uma biblioteca profunda de design systems. As saídas são arquivos HTML reais, então o que você criar entra direto no seu projeto de verdade.

Por que os vibe coders se importam:

• Use seu próprio agente e sua chave — sem segunda assinatura, sem aprisionamento a um provedor.
• Roda localmente — a saída é HTML que você pode levar direto para o seu código.
• Design systems acabam com o visual de slop de IA — comece a partir de uma marca real em vez de um canvas em branco.
• As skills são personalizáveis — adicione suas próprias regras de copywriting, paradigmas de UX ou processos.
• Open source, Apache-2.0 — leia, faça fork e entregue trabalho para clientes com isso.

Os dois problemas que todo vibe build enfrenta

Sean enquadra todo o fluxo de trabalho em torno de dois modos de falha, e vale a pena nomeá-los porque o resto do manual é justamente como evitá-los:

1. Parece slop de IA. Gradientes genéricos, sempre a mesma fonte serifada, sopa de containers — você mesmo não gosta.
2. Não está estruturado para cumprir seu papel. Uma landing page que não converte, um app cujo fluxo não faz sentido.

Um design system resolve o problema um. Um prompt deliberado com estrutura real resolve o problema dois. Tenha os dois em mente em cada construção a seguir.

Passo 1 — Instale e escolha seu agente

Você tem três formas de entrar:

Caminho	Ideal para	Requisitos
App desktop	A maioria das pessoas — zero configuração	Nenhum. Basta baixar e abrir.
Rodar a partir do código-fonte	Desenvolvedores que querem ler ou modificar o código	Node ~24, pnpm 10.33.x
Instalar no seu agente	Pessoas que vivem no terminal	Uma CLI de agente de código já existente

O caminho mais rápido é o app desktop — baixe em open-design.ai/download; ele detecta automaticamente as CLIs de agente que já estão no seu PATH. Para rodar 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 exibe (ele usa uma porta dinâmica — não deixe nenhuma fixa no código). No primeiro lançamento, aponte o Open Design para o agente que você quer conduzindo o trabalho, ou use sua própria chave de API.

Passo 2 — Construa uma landing page que converte

Esta é a primeira demonstração de Sean, e ela é o modelo para todo o resto:

1. Escolha um design system. Na demonstração ele escolhe o da Anthropic. Esta é sua proteção anti-slop — o agente herda a paleta, a tipografia e a linguagem de componentes daquela marca.

A biblioteca de design systems: cada item decompõe uma marca real em paleta, tipografia, componentes e atmosfera visual que você pode reutilizar.

2. Faça o prompt da estrutura, não só do clima. Sean diz exatamente quais seções construir — onze delas — e cola o resumo executivo do seu PRD (visão de produto, definição do problema, usuário-alvo, solução proposta, funcionalidades principais) para que o texto tenha contexto real com que trabalhar.
3. Responda às perguntas de descoberta. Assim como o Claude Design, o Open Design faz perguntas de esclarecimento antes de escrever. Aqui ele recorre à sua skill de landing page SaaS para executar — e, como as skills são apenas arquivos, você poderia carregar suas próprias diretrizes de copywriting ou estrutura de seções como uma skill no lugar.
4. Deixe rodar. Cerca de cinco minutos depois ele tem uma primeira versão profissional — uma estrutura real orientada à conversão, uma tabela comparativa limpa, um card de estudo de caso com bom estilo, um FAQ sólido.

Quer uma pegada diferente? Sean roda novamente exatamente o mesmo brief com um tom brutalista em vez de editorial e obtém um design significativamente diferente — mesma estrutura, pele diferente, porque o design system faz o trabalho pesado.

Passo 3 — Construa um app mobile, tela por tela

Para a demonstração mobile, Sean trabalha uma tela de cada vez. Ele mantém o mesmo design system da Anthropic e, então, para cada tela, cola um prompt construído a partir do seu PRD — um feed inicial, uma tela de recomendação para “preencher as lacunas”, um registro de refeições ad-hoc. O agente faz suas perguntas de esclarecimento, monta um layout iOS e segue o design system escolhido nas três telas.

A lição: a forma como você faz o prompt da UX é a maior parte do resultado. Quando ele reformula o mesmo app como uma interface de coaching baseada em chat, obtém um conjunto de telas radicalmente diferente — mas ainda coerente. O design system mantém tudo dentro da marca; seu prompt decide o paradigma.

A biblioteca de templates: pontos de partida de protótipo, slide, imagem e vídeo que você pode filtrar por tipo e fazer fork para começar.

Passo 4 — Vá multimodal: das telas ao app desktop

A última demonstração mostra o truque multimodal. Sean tira screenshots das suas três telas mobile, joga-as em um novo chat e faz um pedido aberto: “monte uma versão web app dessa funcionalidade principal.” Cinco minutos depois ele tem uma tradução limpa para desktop em três painéis — navegação à esquerda, o canvas de trabalho no meio, uma visão de progresso à direita — com as interações de slash command também esboçadas.

Mesmo um prompt vago somado a imagens de referência dá a você um ponto de partida utilizável. Com uma especificação adequada fica mais afiado, mas o ponto se mantém: você pode transitar fluidamente entre superfícies.

Dicas

• Sempre comece a partir de um design system. É a maior alavanca contra o visual de slop de IA.
• Faça o prompt da estrutura de forma explícita. Liste as seções ou telas; cole contexto real de um PRD para que o texto não seja oco.
• Apoie-se nas skills — e escreva as suas. Skills são apenas arquivos; carregue suas regras de copywriting ou paradigmas de UX diretamente no fluxo de trabalho.
• Itere por conversa. Enquadramentos de UX diferentes produzem resultados muito diferentes; isso é uma vantagem, então experimente alguns.
• Use imagens de referência. Tire screenshots de telas existentes e jogue-as para traduzir entre superfícies.
• Lembre-se de que a saída é HTML. Foi feita para entrar em um projeto que você já começou.

FAQ

Preciso usar um modelo específico? Não. O Open Design conduz qualquer agente que você tenha configurado — Claude Code, Codex, Cursor, Gemini, OpenCode e mais — ou sua própria chave de API. Sem aprisionamento a um provedor.

Como isso é diferente do Claude Design? Mesma sensação familiar, mas gratuito, open-source, local-first, agnóstico a modelos e muito mais personalizável — você pode adicionar suas próprias skills e processos. Além de geração de imagem e vídeo que uma ferramenta de provedor único não oferece.

Posso integrar o que construo a um app existente? Sim — as saídas são arquivos HTML, então foram feitas para entrar em um projeto que você já começou. Sean aborda fluxos de integração orientados por especificação em um vídeo complementar.

É gratuito? O app é open source sob a licença Apache-2.0 e gratuito para rodar localmente. Você só paga pelo uso de modelo e de mídia do agente e dos provedores que você conectar.

---

Este guia em texto é baseado nas demonstrações práticas de Sean Kochel. Assista ao vídeo completo acima e inscreva-se no canal de Sean Kochel para mais fluxos de trabalho de construção com IA.