← Guias Previa: 🤯 Estou abandonando o Claude Design… esta alternativa é melhor
Detalhes

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

Jérémy DE CAMPOS 1 de julho de 2026 24:37 YouTube ↗

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.

O espaço de trabalho do Open Design — descreva o que você quer e escolha um modo. 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.

Um protótipo clicável gerado no Open Design. 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.

A biblioteca de design systems integrada. 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.