O Claude Design acabou… A MELHOR alternativa gratuita ao Claude Design (ilimitada e de código aberto)

Este guia mostra como rodar o Open Design com a Gemini CLI como o agente que conduz a geração — para que protótipos, landing pages e UI saiam de um único espaço de trabalho, apoiando-se no generoso nível gratuito do Gemini. Ele segue o caminho que Sandeep Singh percorre em seu passo a passo prático, reescrito e atualizado para corresponder à versão atual. Assista ao vídeo acima para a versão ao vivo, ou continue lendo.

A questão do custo é o ponto central. O Open Design em si é gratuito e de código aberto; a única coisa que você “paga” é o agente e o modelo que você traz. Traga a Gemini CLI, autentique-se com sua conta Google, e essa conta efetivamente cai para zero.

O espaço de trabalho do Open Design — de código aberto, local-first e conduzido por qualquer agente de codificação que você conectar.

O que é o Open Design?

O Open Design é uma plataforma de design de código aberto e local-first que roda em cima do agente de codificação que você já usa, em vez de prendê-lo a um único provedor de modelo. É do tipo “traga seu próprio agente”: Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode e mais de 21 outros podem, cada um, conduzir a geração. Você escolhe o agente; o Open Design cuida da camada de design.

Algumas coisas que o tornam digno de atenção:

• Código aberto, Apache-2.0 — clone-o, hospede você mesmo, leia cada linha.
• Roda localmente — seus projetos vivem em pastas na sua própria máquina, não na nuvem de outra pessoa.
• Agente plugável — mais de 21 agentes de codificação são suportados, incluindo a Gemini CLI; você escolhe qual conduz a geração.
• Mais do que protótipos — protótipos, artefatos ao vivo, apresentações de slides, layouts de revista, geração de imagens e até vídeo, tudo a partir de um único espaço de trabalho.
• Pontos de partida integrados — sistemas de design com marca e modelos já vêm de fábrica, para que você nunca encare uma tela em branco.

Ele se sustenta por mérito próprio: um espaço de trabalho de design local e independente de modelo. O fato de combinar de forma limpa com um agente gratuito como a Gemini CLI é o bônus que o torna genuinamente gratuito de usar.

Antes de começar

Há três maneiras de instalar o Open Design. Escolha a que se encaixa em você:

Caminho	Melhor para	Requisitos
Aplicativo de 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	Quem vive no terminal	Um CLI de agente de codificação existente

O aplicativo de desktop é a rota recomendada hoje — sem Node, sem pnpm, sem clonar. Sandeep baixa o instalador para sua plataforma (um .dmg no macOS, um setup.exe no Windows) direto da versão mais recente.

Passo 1 — Instalar o Open Design

Opção A — Aplicativo de desktop (recomendado, zero configuração)

Acesse open-design.ai e clique em Download desktop. Há builds disponíveis para macOS (Apple Silicon e Intel), Windows (x64) e Linux (AppImage). Após instalar, o aplicativo detecta automaticamente cada CLI de agente de codificação já presente no seu PATH e carrega as skills e os sistemas de design integrados para você. Na primeira execução, você chega à tela de conexão, onde escolhe um CLI local ou cola sua própria API key.

Opção B — Rodar a partir do código-fonte

Se você preferir rodá-lo a partir do repositório, basta um punhado de comandos:

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

Depois, abra a URL local que ele imprime — a porta é atribuída dinamicamente, então use o endereço que aparecer no seu terminal, e não um fixo. Você precisa de Node ~24 e pnpm 10.33.x; o Corepack selecionará a versão fixada do pnpm para você.

Opção C — Instalar no seu agente de codificação

Para usar o Open Design sem nunca abrir a GUI — chamando-o como uma skill ou servidor MCP dentro do seu agente — execute:

od mcp install <agent>
# <agent> = gemini | claude | codex | cursor | copilot | opencode | …

Então, dentro do agente, basta pedir: Use open-design to generate a landing page with a modern minimal design system.

Conecte a Gemini CLI como seu agente

Este é o passo que torna o fluxo de trabalho gratuito. O Open Design não inclui um modelo próprio — ele conduz qualquer CLI para o qual você o apontar — então você traz a Gemini CLI e deixa o nível gratuito dela fazer o trabalho.

Por que a Gemini CLI? Duas razões, como Sandeep coloca: os modelos Gemini se saem bem frente aos demais, e o nível gratuito é generoso. Faça login com uma conta Google e você obtém uma grande cota diária de requisições sem custo; a API key do Gemini tem uma cota gratuita menor. Para trabalho de design contínuo, o login com conta Google é o indicado.

1. Instale a Gemini CLI. Siga o comando de instalação na página inicial da Gemini CLI (Homebrew no macOS e Linux, ou o instalador documentado em outros casos). Qualquer terminal funciona.
2. Execute gemini e autentique-se. Inicie-o, confie na pasta de trabalho quando solicitado e então escolha Sign in with Google. Seu navegador abre para um login Google de dois cliques e informa sucesso. Reinicie a Gemini CLI; você deve ver o modelo ativo e 0% de cota usada.
3. Aponte o Open Design para ela. Reinicie o Open Design e abra Settings. A Gemini CLI agora aparece como um agente disponível — selecione-a, Test the connection, e você deve receber um OK de volta. Salve e está pronto para projetar.

Você também pode colar aqui sua própria API key em vez de usar um CLI local, e adicionar keys separadas para modelos de imagem, vídeo e áudio se quiser geração de mídia mais tarde. Para um trabalho de design gratuito e com sensação de ilimitado, porém, o login pela Gemini CLI é tudo de que você precisa. Tudo em Settings pode ser alterado depois, então mantenha a primeira passada simples.

Explore o espaço de trabalho

O Open Design mantém seu trabalho delimitado por projeto: cada projeto vive em sua própria pasta, e trocar de pasta troca de projeto. Dentro de um projeto você pode criar protótipos, artefatos ao vivo, apresentações de slides, imagens e até vídeo e áudio — não apenas UI.

A biblioteca de sistemas de design — pontos de partida com marca que você pode pré-visualizar e encaixar em qualquer projeto.

A biblioteca de sistemas de design integrada oferece pontos de partida com marca para pré-visualizar e reutilizar, para que você não fique travado definindo tokens antes de poder começar. Você também pode trazer seu próprio sistema de design, importar um projeto existente do Claude Design ou começar do nada e deixar o Open Design inferir padrões sensatos.

Modelos: pontos de partida de protótipo, slide, imagem e vídeo — filtre por tipo e faça um fork para começar.

A biblioteca de modelos vai além dos sistemas de marca, alcançando protótipos, slides e geração tanto de imagem quanto de vídeo. Filtre por tipo e faça um fork de qualquer um como seu ponto de partida. Você pode navegar pela biblioteca completa de plugins na web em open-design.ai/plugins antes de instalar qualquer coisa.

Construa algo

Com a Gemini CLI conectada, o fluxo de construção é o mesmo que Sandeep executa no vídeo:

1. Crie um projeto. Dê um nome, escolha um sistema de design que combine com a aparência que você quer e selecione High fidelity para ver a coisa real em vez de um wireframe.
2. Escreva o briefing. Em vez de um dos prompts sugeridos, descreva o que você quer — Sandeep pede uma landing page. Você também pode anexar uma captura de tela de um layout que goste e pedir ao Open Design para seguir esse tema.
3. Responda às perguntas de esclarecimento. O agente faz perguntas de acompanhamento inteligentes: landing page única ou landing mais preços, superfície responsiva, para quem é, um tom visual (Sandeep escolhe um clima moderno, minimalista, ao estilo Linear/Vercel) e quaisquer cores ou fontes de marca. Você pode deixar campos em branco ou deixar que ele escolha uma direção para você.
4. Escolha uma direção visual e gere. Escolha uma das direções propostas, envie e, alguns segundos depois, a landing page estilizada surge com as seções que você pediu.
5. Itere por prompt. Quer trocar um logo, adicionar um ícone que falta ou ampliar a FAQ? Basta descrever a mudança e enviar. Se uma edição desencaixar algo, um prompt de acompanhamento o coloca de volta no lugar.

Quando estiver satisfeito, abra os arquivos de design, inspecione o código-fonte, edite camadas manualmente se quiser e então exporte — PDF, PPTX, um pacote comprimido ou um deploy para a Vercel.

A parte gratuita é real: Sandeep constrói dois protótipos com várias iterações e, quando depois verifica seu uso do Gemini, gastou apenas cerca de 2% de sua cota diária. Com uma grande cota diária se renovando todos os dias, você pode projetar quase continuamente sem ficar de olho num medidor.

Dicas

• Faça login na Gemini CLI com sua conta Google em vez de uma API key — a cota gratuita diária é muito maior, e é isso que torna este fluxo de trabalho efetivamente gratuito.
• Comece com alta fidelidade quando quiser avaliar o design real; recue para wireframe apenas para esboçar a estrutura rapidamente.
• Verifique seu uso com stats na Gemini CLI para ver o quão pouco o trabalho de design realmente custa frente à sua cota diária.
• Seus designs ficam com a pasta do projeto — organize o trabalho rodando o Open Design contra o diretório certo.
• Você não precisa de um sistema de design para começar. Comece por um integrado, importe um projeto do Claude Design ou deixe o Open Design inferir padrões.

Perguntas frequentes

É realmente gratuito? Na prática, sim. O Open Design é de código aberto sob Apache-2.0, então o software não custa nada. O único custo é o agente e o modelo que você traz — e com a Gemini CLI autenticada via conta Google, você recorre a uma grande cota gratuita diária. No vídeo, dois protótipos mais iterações usaram cerca de 2% da cota do dia, que se renova diariamente.

Quais agentes de codificação ele suporta? Mais de 21 agentes, incluindo Gemini, Claude Code, Codex, Cursor, GitHub Copilot e OpenCode. O Open Design detecta os CLIs já instalados na sua máquina e deixa você escolher um como padrão.

Eu tenho que usar a Gemini CLI? Não. A Gemini CLI é o caminho para uma configuração gratuita e de alta cota, mas você pode conectar qualquer agente suportado, ou colar sua própria API key para um agente ou para modelos de imagem, vídeo e áudio.

Preciso de um sistema de design antes de poder começar? Não. O Open Design já vem com sistemas de design com marca e modelos como pontos de partida, e você pode importar um sistema de design existente ou deixá-lo inferir padrões sensatos.

---

Este guia escrito é baseado no passo a passo prático de Sandeep Singh. Assista ao vídeo completo acima e inscreva-se no canal de Sandeep Singh para mais tutoriais práticos de ferramentas de IA.