Open Design: a alternativa open source GRATUITA ao Claude Design

O Open Design pega uma ideia e a transforma em protótipos, sites, slides e até vídeos HTML — tudo rodando localmente na sua própria máquina. Nesta demo, o Code A Program instala o app de desktop, conecta um agente de código e monta uma landing page premium para uma ferramenta de escrita com IA chamada Draft, e então a refina e faz o deploy sem sair do espaço de trabalho. Assista ao processo completo no vídeo do Code A Program, ou siga o guia escrito abaixo.

Open Design rodando localmente: um espaço de trabalho de design open source e agent-native que você controla por completo — sem estar preso a um único modelo.

O que é o Open Design?

O Open Design é uma plataforma de design open source e local-first — uma alternativa gratuita ao Claude Design e ao Figma. Em vez de prender você a um provedor de modelo, ele roda sobre o agente de código que você já usa, então você traz o seu próprio agente e a sua própria key.

• Open source, Apache-2.0 — leia cada linha, faça self-host ou apenas baixe o app de desktop.
• Roda localmente — os projetos ficam nas suas próprias pastas, na sua máquina, não na nuvem de outra pessoa.
• Traga o seu próprio agente — mais de 21 agentes de código são suportados, incluindo Claude Code, Codex, Cursor, Gemini, OpenCode e outros; você escolhe qual CLI conduz a geração.
• Mais do que protótipos — sites, protótipos, decks de slides, geração de imagens e até vídeo HTML, tudo a partir de um só espaço de trabalho.
• Já vem completo — 129 design systems integrados e mais de 460 plugins para você nunca começar de um canvas em branco.

Se você já usou o Claude Design, a sensação será familiar na hora — o Open Design mantém a mesma experiência tranquila e então acrescenta por cima o modelo da sua escolha.

Passo 1 — Escolha seu agente e seu modelo

Baixe o app de desktop em open-design.ai, instale-o e responda às breves perguntas de onboarding. Isso já leva você direto para a interface principal de chat.

No canto superior direito, escolha o provedor do seu agente de IA. Como provedores de CLI locais, você pode escolher Claude Code, Codex CLI, Gemini CLI (que tem limites de uso gratuitos), OpenCode e outros. Na demo, o Code A Program usa OpenCode com o modelo GLM 5.2 porque tem sido forte em trabalho de front-end — mas o ponto-chave é a flexibilidade: você não fica preso a um único modelo ou plataforma.

Passo 2 — Escreva seu prompt

O chat tem uma opção de anexar arquivo para material de referência, além de uma seção de plugins. O Open Design vem com mais de 460 plugins que cobrem auxiliares de build e teste, mockups 3D, molduras de dispositivos móveis e desktop e muito mais — então, se você precisar de elementos 3D ou de uma carcaça de dispositivo, adiciona o plugin em vez de brigar com o prompt.

A biblioteca de plugins: mais de 460 plugins para construir, testar, mockups 3D, molduras de dispositivos e mais — adicione o que o seu design precisar.

Agora cole um brief. O prompt da demo pede uma landing page premium para um assistente de escrita com IA chamado Draft, com uma paleta contida de preto ardósia, marfim e laranja elétrico, um hero editorial marcante com uma animação de geração de texto ao vivo, um canvas de escrita interativo, um fluxo de trabalho de três etapas, uma seção de resultados, uma tabela de preços de dois níveis, um FAQ e uma chamada para ação final forte — ao mesmo tempo em que evita explicitamente cards, gradientes, glassmorphism e imagens genéricas de robôs.

Há mais uma alavanca que vale conhecer: você pode basear um design em um design system popular de marcas como Apple, Airbnb, BMW, IBM ou Spotify. O Code A Program pula isso nesta execução, mas está ali quando você quiser acertar um visual específico.

Passo 3 — Veja ele construir e se autoverificar

Envie o prompt e o Open Design começa a preparar o projeto. Depois de cerca de um minuto, ele pode fazer algumas perguntas de acompanhamento — responda-as para resultados melhores, ou clique em pular tudo e deixe-o continuar.

Na demo, a landing page em si fica pronta em cerca de seis minutos. Em seguida, o Open Design gasta o tempo restante rodando autoverificações — conferindo a estrutura, revisando o layout, checando animações e corrigindo pequenos problemas antes de marcar o build como concluído. Quando termina, clique no ícone de apresentação para abrir o site em uma nova aba.

O resultado gerado: um hero editorial com animação de digitação ao vivo, fluxo de trabalho, resultados, preços, FAQ e rodapé — responsivo em tablet e mobile.

O resultado traz um hero com animação de digitação por IA, efeitos de rolagem suaves, uma seção de editor interativa, uma faixa de fluxo de trabalho, uma seção de resultados de clientes, preços mensais/anuais, um FAQ e um rodapé limpo. Alterne para as visualizações de tablet e mobile para confirmar que o design responsivo se sustenta.

Passo 4 — Refine com a barra de ferramentas do canvas

A barra de ferramentas da direita é onde você lapida sem queimar tokens em mudanças triviais:

• Screenshot — capture uma imagem do site.
• Comment — selecione qualquer elemento (por exemplo, o título do hero) e descreva uma mudança, como recolorir uma palavra para o tema laranja. Junte vários comentários e envie de uma vez, ou mande um direto para o chat.
• Marker — destaque qualquer área da página e compartilhe com o agente.
• Element edit — altere diretamente fontes, largura, cores e mais em um elemento selecionado, para que ajustes simples nunca precisem de uma regeneração completa.

Você também tem controles de zoom e uma visão de todos os comentários abertos. Na demo, o texto “actually” é recolorido para laranja bem ali, na barra de ferramentas.

Passo 5 — Exporte e faça deploy

Acima da barra de ferramentas está a opção de download — exporte o projeto como PDF, imagem, ZIP ou HTML. Há também salvar como template, para reutilizar este design como ponto de partida de projetos futuros.

O menu compartilhar é a parte interessante. A partir dele, você pode:

• fazer deploy na Vercel com um clique — conecte sua conta da Vercel com um token de acesso e clique em deploy.
• fazer deploy na Cloudflare do mesmo jeito.
• abrir em um editor como Cursor ou VS Code, ou em ferramentas CLI como Gemini CLI, Codex e Claude Code. O Open Design entrega o HTML gerado junto com a pasta Skills dele, para que você converta o design em um projeto Next.js — ou em qualquer framework que preferir.

Em configurações, você pode adicionar regras globais (por exemplo, “sempre usar TypeScript”), guardar memórias úteis como no recurso de memória do Claude e configurar provedores de mídia — uma key da ElevenLabs para voz e som, além de Nano Banana, OpenAI ou OpenRouter para a geração de imagens. Você também pode adicionar skills (há um skill agent-browser para automatizar tarefas de navegador, e vários skills de front-end), conectar servidores MCP e mudar o local padrão dos projetos.

Dicas para tirar mais proveito

• Modelos gratuitos bastam para começar. Todo o site da demo foi gerado com um nível gratuito do Gemini e ainda assim fica ótimo; recorra a um modelo pago quando quiser mais qualidade em trabalho real.
• Adicione plugins antes de promptar quando souber que vai precisar de mockups 3D ou molduras de dispositivos.
• Use a ferramenta certa para a mudança — o editor de elementos e os comentários dão conta de pequenos ajustes sem uma reconstrução completa.
• Salve os layouts que deram certo como templates para que seu próximo projeto comece na frente.

Perguntas frequentes

O Open Design é gratuito? Sim — é open source sob a Apache-2.0 e roda localmente de graça. Você só paga pelo uso de modelo/API de qualquer agente e provedores de mídia que conectar, e pode usar níveis gratuitos como o do Gemini.

Quais agentes de código ele suporta? Mais de 21 agentes, incluindo Claude Code, Codex CLI, Cursor, Gemini CLI e OpenCode. Você escolhe o provedor no menu do canto superior direito.

Em que ele difere do Claude Design? A mesma sensação familiar, mas open source, local-first e com agente plugável — você não fica preso a um modelo ou plataforma, e pode exportar ou fazer deploy do seu projeto do jeito que quiser.

Consigo fazer deploy sem sair do app? Sim — o menu compartilhar faz deploy na Vercel ou na Cloudflare com um clique (você fornece o token de acesso do provedor), ou entrega o código ao Cursor, ao VS Code ou a um agente CLI.

Preciso usar um modelo pago para bons resultados? Não — para a maioria das landing pages e designs de front-end, os modelos gratuitos já são capazes o bastante; mude para um modelo pago só quando quiser resultados mais avançados.

---

Este guia escrito é baseado na demo do Code A Program. Assista ao vídeo completo acima e inscreva-se no Code A Program para mais vídeos práticos sobre ferramentas de IA.