🤯 Estou abandonando o Claude Design… esta alternativa é melhor
Um freelancer reconstrói exatamente o mesmo mockup de SaaS de cliente que fez primeiro no Claude Design — desta vez no Open Design, movido pela sua Claude Code CLI local, então não custa nada a mais. Protótipos clicáveis, um design system de verdade e um PRD que você entrega direto ao seu agente de código. Baseado na análise prática de Jérémy DE CAMPOS.
Esta é uma análise prática de alguém que vive de desenhar trabalho para clientes. Jérémy DE CAMPOS cria produtos SaaS para agências reais e vinha usando o Claude Design para rascunhar interfaces antes de programar. Em seu vídeo, um membro da comunidade aponta o Open Design para ele, então ele faz o teste mais justo que existe: reconstrói exatamente a mesma ferramenta de cliente que já tinha feito no Claude Design e compara. Esta versão escrita acompanha a execução dele, reescrita para este guia e atualizada para a versão atual. Assista ao vídeo acima para as reações ao vivo, ou continue lendo.
Open Design: um espaço de trabalho de design open source e agent-native que você roda na sua própria máquina.
O que é o Open Design?
O Open Design é uma plataforma de design open source e local-first — uma alternativa agent-native ao Claude Design e ao Figma. Em vez de prender você a um único modelo pago, ela roda sobre o agente de código que você já tem: Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode e outros.
O que Jérémy percebeu no primeiro minuto:
- Open source, Apache-2.0 — está no GitHub, evolui rápido e já é surpreendentemente completo.
- Roda localmente — os projetos vão parar numa pasta real na sua máquina, que você pode abrir e inspecionar.
- Traga o seu próprio agente — mais de 21 agentes são suportados; a página de preços é só para os modelos hospedados deles, então, se você conectar sua própria chave ou CLI, não precisa dela.
- Mais do que protótipos — protótipos, dashboards, apresentações, imagens e até vídeo, além de ferramentas irmãs como HTML Anything e HTML Video.
Se você já usou o Claude Design, a interface vai parecer familiar na hora — e então ela acrescenta por cima o motor da sua escolha.
O teste justo: reconstruir uma ferramenta de cliente real
Em vez de um prompt de brincadeira, Jérémy reaproveita um projeto de verdade: um SaaS interno de acompanhamento de entregas e bugs que ele está construindo para gerenciar as atualizações dos clientes da sua agência. Ele já tinha alimentado esse brief e um arquivo de design system no Claude Design, então entrega ao Open Design as entradas idênticas — mesma especificação, mesmo design system — e deixa rodar. Mesmo prompt, mesmo material de partida, duas ferramentas: essa é a única comparação em que dá para confiar.
Rode na sua assinatura do Claude, não em tokens
A primeira decisão é o motor, e é aí que a história do custo muda. O Open Design deixa você conectar uma chave de API pura — mas Jérémy aponta o risco óbvio: tocar a geração com um modelo pago como o Opus, cobrado por token, «pode custar os olhos da cara».
Então ele encontra a opção que importa: rodar a Claude Code CLI local. Em vez de queimar tokens de API medidos, o Open Design aciona a sua CLI claude já instalada, de modo que a geração roda na assinatura do Claude que você já paga. Ele muda para ela na hora — «quando eu digo muito interessante, é muito interessante mesmo» — e no fim confirma o estrago: uma sessão inteira usou cerca de 9% da janela dele. Para uma agência que faz isso todos os dias, essa diferença é o argumento inteiro.
Dica: escolha o motor no canto inferior esquerdo do espaço de trabalho. Aponte o Open Design para uma CLI local (Claude Code, Codex, Gemini) para reaproveitar uma assinatura existente e mantenha uma chave de API medida só como reserva.
O que ele construiu: um protótipo clicável, não uma figura
Este é o momento em que a análise vira. O Open Design não devolve um screenshot chapado — ele constrói um protótipo funcional e clicável. Jérémy entra num quadro de tickets, abre tickets individuais para ver a visão de detalhe e arrasta cartões entre as colunas. O kanban é interativo; o detalhe do ticket mostra notas do cliente, logs de captura e uma visão de console; as telas se ligam umas às outras como num app de verdade.
Não é um mockup estático — as telas se conectam e os elementos respondem aos cliques.
Depois ele vai além com um prompt de acompanhamento: faça as outras páginas e conecte os links da barra lateral para o mockup ficar navegável. Ele obedece, gera as páginas adicionais e as conecta e, em seguida, adapta o layout para versões tablet e mobile sem precisar pedir duas vezes.
O design system, apresentado do jeito certo
Como ele alimentou o mesmo design system que tinha dado ao Claude Design, a comparação é direta — e o veredito dele é seco: os design systems do Open Design são mais bem apresentados. Cores, tipografia, espaçamento e componentes são dispostos com clareza, com aquele estilo de anotações e guias pontilhadas que faz um sistema parecer pensado em vez de largado de qualquer jeito.
Um design system que se lê como documentação, não como um amontoado de cores.
Dá para editar e anotar direto no canvas: selecione uma região, deixe uma nota, ajuste o texto ali mesmo e coloque as mudanças na fila para o agente aplicar — o que ele faz, voltando com um resultado mais limpo a cada passada.
Do mockup ao PRD — o repasse para o seu agente
O recurso que combina com o fluxo de trabalho real de Jérémy é a geração de PRD. O método dele é vibe-coding: agrupar tickets, descrever a mudança e entregar uma especificação ao Claude Code para que ele mesmo faça as edições de código. O Open Design produz exatamente essa ponte — um PRD em três formatos:
- uma versão de prévia para ele ler,
- uma versão em Markdown para jogar direto na IA,
- e uma versão em PDF para enviar a um cliente quando precisar.
Somado a uma visão de entrega (marcar o trabalho como concluído) e a um changelog do app, isso fecha o ciclo da «tela desenhada» até a «especificação a partir da qual meu agente de código consegue construir» — sem sair do espaço de trabalho.
Além do mockup
Enquanto roda, ele passeia pelo resto e não para de encontrar coisas:
- Memória — retém automaticamente o que você fez ao longo da sessão.
- Biblioteca de imagens + geração — traga ou crie imagens ali mesmo.
- Skills — uma pilha de skills prontos, extensíveis com os seus.
- Servidores MCP e conectores — suporte a MCP externo e também o inverso: expor o Open Design como servidor MCP para que sua Claude Code CLI conduza o canvas e faça edições direto do terminal.
- Importar do Figma, um hub de plugins e pacotes de templates.
- Um painel de revisão de design — quando ativado, uma revisão de cinco painéis aparece ao lado do agente e dá nota ao resultado.
Veredito
A conclusão dele é inequívoca: ele está considerando seriamente largar o Claude Design e migrar seus projetos reais para o Open Design — para design e para vídeo. A combinação que o conquista é específica: as mesmas entradas produzem um design system mais bem apresentado e um protótipo de fato interativo, roda na assinatura do Claude que ele já paga em vez de tokens medidos e cospe um PRD que ele entrega direto ao seu agente de código. Ele pretende usar a ferramenta com força por algumas semanas e depois dar um retorno — mas a impressão do primeiro uso é que não se trata só de um clone gratuito: é a melhor ferramenta para o fluxo de trabalho dele.
Perguntas frequentes
O Open Design é mesmo gratuito? O app é open source (Apache-2.0) e roda localmente. Você só paga pelo modelo que escolher — e, se conectar uma CLI local como o Claude Code, ela roda na assinatura que você já tem, sem cobrança extra por token.
Preciso do plano pago da página de preços? Não. Esse plano é para os modelos hospedados do Open Design. Traga sua própria chave ou CLI local e você pode pular.
Posso importar o que já construí no Claude Design? Sim — exporte seu design system do Claude Design e importe-o no Open Design, depois continue gerando com a mesma marca.
Ele exporta uma especificação de verdade? Sim. O Open Design consegue gerar um PRD em prévia, Markdown e PDF, então você entrega o Markdown ao seu agente de código e o PDF a um cliente.
Qual agente devo usar? Qualquer um suportado — a qualidade da saída acompanha o modelo que você escolher. Usar sua Claude Code, Codex ou Gemini CLI local é o caminho mais barato, porque reaproveita uma assinatura existente.