ADEUS, Claude Design! Este é o MELHOR gerador de UI com IA de código aberto

Este guia é para usuários de Windows que querem rodar o Open Design na própria máquina — sem conta na nuvem, sem créditos mensais para gastar. Ele segue o caminho que o AI Automation percorre no tutorial de instalação no Windows, reescrito e atualizado para a versão atual para que você possa acompanhar comando a comando. Assista ao vídeo acima para ver a execução ao vivo, ou continue lendo para a versão escrita.

Open Design rodando localmente no Windows: um espaço de trabalho de design de código aberto e nativo de agentes que você controla por completo.

O que é o Open Design?

O Open Design é uma plataforma de design de código aberto e local-first — uma alternativa nativa de agentes ao Claude Design e ao Figma. Em vez de prendê-lo a um único provedor de modelo, ele roda sobre o agente de programação que você já usa: Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode e mais uma dúzia. É «traga seu próprio agente» em vez de apenas trazer sua própria chave.

Algumas coisas que fazem dele algo que vale a pena conhecer:

• Código aberto, Apache-2.0 — clone, hospede você mesmo, leia cada linha.
• Roda localmente — seus projetos ficam nas suas próprias pastas, na sua máquina, não na nuvem de outra pessoa.
• Plugável a agentes — mais de 21 agentes de programação são suportados; você escolhe qual CLI conduz a geração, e a qualidade do resultado acompanha o modelo que você escolher.
• Mais do que protótipos — protótipos, artefatos ao vivo, apresentações de slides, layouts no estilo revista, geração de imagens e até vídeo, tudo a partir de um único espaço de trabalho.
• Uma biblioteca integrada de design systems e templates, para que você não comece de uma tela em branco.

Se você já usou o Claude Design, a sensação será imediatamente familiar — o Open Design mantém a mesma estética tranquila e, por cima, adiciona recursos (e a escolha do seu modelo).

Antes de começar

Você tem três formas de instalar o Open Design no Windows. Escolha a que combina com você:

Caminho	Ideal para	Requisitos
App de desktop (Windows x64)	A maioria dos usuários de Windows — zero configuração	Nenhum. Baixe e abra.
Rodar a partir do código-fonte (WSL)	Desenvolvedores que querem ler ou modificar o código	WSL2 + Ubuntu, Node ~24, pnpm 10.33.x
Instalar no seu agente	Quem vive no terminal	Uma CLI de agente de programação existente

O vídeo usa o caminho a partir do código-fonte via WSL, ótimo se você quer viver dentro do repositório. Mas, para a maioria das pessoas, a versão de desktop nativa do Windows é o caminho recomendado — há um instalador para Windows (x64) que não precisa de WSL, nem de Node, nem de clonar nada. Este guia cobre os dois; o tutorial de WSL abaixo é para quando você quiser especificamente o caminho a partir do código-fonte.

Passo 1 — Configurar o WSL

Se você só quer o app de desktop, pule para o Passo 2, Opção A. Se quer o caminho a partir do código-fonte, primeiro precisa de um ambiente Linux dentro do Windows. É exatamente isso que o WSL (Subsistema do Windows para Linux) oferece — um shell Ubuntu real rodando ao lado do Windows, sem dual-boot, sem máquina virtual para ficar cuidando.

1. Instale o WSL e o Ubuntu. Abra o PowerShell e execute wsl --install — isso ativa o WSL2 e instala o Ubuntu por padrão. Reinicie se o Windows pedir, depois abra o Ubuntu pelo menu Iniciar e defina seu nome de usuário e senha do Linux na primeira vez que ele abrir. (Já tem o Ubuntu de outra ferramenta? Reutilize-o — não precisa repetir isso.)

2. Atualize os pacotes base. Dentro do shell do Ubuntu, atualize o índice de pacotes e instale o essencial:

sudo apt update && sudo apt install -y curl git

Dica de solução de problemas do vídeo: se um passo posterior lançar um erro estranho, reinicie sua instância do Linux de forma limpa — no PowerShell execute wsl --shutdown e depois reabra o Ubuntu. Começar do zero resolve a maioria dos tropeços da primeira execução.

3. Instale o Node 24. A versão a partir do código-fonte tem como alvo o Node ~24. Um Ubuntu limpo ainda não tem o nvm, então instale-o primeiro e depois use-o para obter o Node 24:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc            # carrega o nvm no shell atual
nvm install 24
nvm use 24
node --version              # deve imprimir v24.x

Com o Ubuntu configurado e o Node 24 ativo, você está pronto para instalar o Open Design.

Passo 2 — Instalar o Open Design

Opção A — App de desktop do Windows (recomendado, zero configuração)

Acesse open-design.ai e clique em Download desktop. Existe uma versão nativa para Windows (x64) (além das de macOS e Linux). Execute o instalador, abra o app e ele detecta automaticamente todas as CLIs de agentes de programação que já estão no seu PATH, depois carrega para você as skills e os design systems integrados. Sem WSL, sem terminal — este é o caminho mais simples no Windows.

Opção B — Rodar a partir do código-fonte (dentro do WSL)

Este é o caminho que o AI Automation demonstra. Trabalhando dentro do seu shell do Ubuntu com o Node 24 ativo, clone o repositório e inicie o runtime web:

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

O corepack enable permite que o Corepack selecione a versão do pnpm fixada no repositório (10.33.x), de modo que você não instala o pnpm por conta própria. O pnpm install baixa as dependências e compila as partes nativas — isso pode levar alguns minutos na primeira execução, o que é esperado, não uma falha. O pnpm tools-dev run web então inicia o daemon local e o servidor web.

Quando termina, o comando imprime uma URL local — copie-a e cole-a no seu navegador do Windows. O WSL encaminha a porta para o Windows automaticamente, então o app simplesmente abre.

Importante: a porta é atribuída dinamicamente na inicialização — leia o endereço real que o comando imprime. Não presuma uma porta fixa; o endereço pode variar na sua máquina e entre execuções.

Opção C — Instalar no seu agente de programação (WSL)

Prefere pular a interface gráfica e chamar o Open Design como um servidor MCP dentro do seu agente? No WSL há um passo extra primeiro. O Linux já vem com o /usr/bin/od (a ferramenta de octal-dump), que sobrepõe o próprio od do Open Design — então o od mcp install … falharia, do contrário, com «file not found» para mcp/install. Adicione um pequeno wrapper que aponte o od para o seu clone e coloque-o primeiro no PATH:

mkdir -p ~/.local/bin
cat > ~/.local/bin/od <<'EOF'
#!/usr/bin/env bash
repo="$HOME/open-design"     # o clone ~/open-design da Opção B
cd "$repo" || exit 127
exec corepack pnpm exec od "$@"
EOF
chmod +x ~/.local/bin/od
export PATH="$HOME/.local/bin:$PATH"
hash -r
type -a od                   # agora o od do Open Design deve vencer

Depois, integre-o ao seu agente:

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

Depois, dentro do agente, basta pedir: Use open-design to generate a landing page with the Airbnb design system.

Primeira execução: conecte seu agente de programação

Na primeira vez que o espaço de trabalho carrega, o Open Design varre seu ambiente e mostra todas as CLIs que encontrou. Como o WSL é uma máquina Linux de verdade, ele detecta os agentes instalados dentro do Ubuntu — então uma CLI do Gemini ou outro agente que viva no WSL é detectado ali. Clique em rescan se algo ainda não aparecer.

• Escolha um agente e um modelo padrão. Deixe a CLI instalada conduzir a geração, ou aponte-a para um provedor e modelo específicos. Como o vídeo enfatiza, um modelo mais forte significa um resultado visivelmente melhor, então recorra a um modelo capaz quando o resultado importar.
• Adicione provedores de mídia (opcional). Para gerar imagens, vídeo ou áudio, cole suas próprias chaves de API — traga sua própria chave, apenas para os provedores que você realmente usa.
• Conecte serviços MCP (opcional). Integre conectores se quiser que o agente busque dados de outras fontes.
• Defina suas preferências. Idioma, aparência, notificações — até um pet de desktop. Você pode mudar tudo isso depois, então mantenha a primeira passada simples.

Explore o espaço de trabalho

O Open Design mantém seu trabalho delimitado por projeto: quando você o executa sobre uma pasta, os designs que cria ficam dentro do diretório daquele projeto. Sua primeira lista de projetos estará vazia — isso é normal.

Dentro de um projeto você pode criar protótipos, apresentações de slides, imagens, vídeos e mais. Dois pontos de partida fazem a tela em branco desaparecer:

A biblioteca de design systems: escolha o visual de uma marca real — Airbnb, Airtable e muitas outras — e o Open Design leva seus tokens, cores e tipografia para o seu design.

• Os design systems capturam o visual de uma marca como um DESIGN.md de tokens — cores primárias e secundárias, tipografia, espaçamento. Visualize um e você poderá construir diretamente sobre ele em vez de definir uma paleta do zero.
• Os templates abrangem protótipos, slides e geração tanto de imagem quanto de vídeo. Filtre por tipo e faça um fork de qualquer um para começar com vantagem.

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

Você pode explorar a biblioteca completa na web em open-design.ai/plugins antes de instalar qualquer coisa.

Crie algo

Aqui está o fluxo que o AI Automation executa, reescrito para a versão atual:

1. Escolha um design system. Escolha um de que você goste — digamos Airbnb — e abra-o para inspecionar seu DESIGN.md e seus tokens.
2. Importe-o como ponto de partida. Use Share → Download as ZIP e, em seguida, no seu projeto, escolha Import flat design ZIP. O design aparece no espaço de trabalho, pronto para construir sobre ele.
3. Descreva a mudança que você quer. Digite um briefing em linguagem natural — «Você pode deixar o fundo escuro?» — e envie. O agente lê o design system, planeja seu trabalho e produz uma nova versão do artefato.
4. Itere à vontade. Mude fontes, adicione ou remova um logotipo, faça upload dos seus próprios recursos e deixe que sejam posicionados nos lugares certos. Cada prompt produz uma nova proposta para manter ou descartar.
5. Exporte quando estiver satisfeito. Clique em Share e baixe o resultado como um ZIP.

O resultado é um design real e editável conduzido pelo modelo que você conectou — então um agente capaz se traduz diretamente naquilo que você recebe de volta.

Dicas para extrair mais do produto

• Escolha um modelo forte. A qualidade do resultado acompanha o agente que você conecta — um modelo gratuito serve para aprender o fluxo, mas um modelo capaz vale a pena para o trabalho de verdade.
• Leia a URL impressa toda vez. O endereço local é dinâmico; copie o que o tools-dev imprime em vez de reutilizar um link antigo.
• Instale seus agentes onde o Open Design vai procurar. Rodando a partir do código-fonte no WSL? Instale suas CLIs dentro do Ubuntu para que o espaço de trabalho as detecte; o app de desktop lê o seu PATH do Windows.
• Você não precisa de um design system para começar. Comece a partir de um integrado, importe um ZIP ou deixe o Open Design inferir os padrões. Seus designs ficam com a pasta do projeto, então organize o trabalho executando-o sobre o diretório certo.

Perguntas frequentes

O Open Design é gratuito? Sim — é de código aberto sob a licença Apache-2.0. Você pode rodá-lo localmente de graça; você só paga pelo uso do modelo/API de qualquer agente e provedores de mídia que conectar.

Devo usar o WSL ou o app de desktop do Windows? Para a maioria das pessoas, a versão de desktop nativa do Windows (x64) é mais simples — sem WSL, sem Node, sem clonar nada. Use o caminho a partir do código-fonte via WSL quando quiser especificamente ler ou modificar o código. Observe que o WSL2 é um caminho suportado de forma primária, enquanto o nativo do Windows é de melhor esforço; se você encontrar atrito com um, tente o outro.

Quais agentes de programação ele suporta? Mais de 21 agentes, incluindo Claude Code, Codex, Cursor, Gemini, GitHub Copilot e OpenCode. O Open Design detecta as CLIs já instaladas na sua máquina — dentro do WSL para o caminho a partir do código-fonte, ou no seu PATH do Windows para o app de desktop.

Como ele se diferencia do Claude Design? A mesma sensação familiar, mas de código aberto, local-first e plugável a agentes — então você não fica preso a um único modelo nem queima um pool fixo de créditos. Ele também vai além dos protótipos, com apresentações de slides, layouts no estilo revista, geração de imagens e vídeo.

---

Este guia escrito é baseado no tutorial de instalação no Windows do AI Automation. Assista ao vídeo completo acima e inscreva-se no canal do AI Automation para mais vídeos práticos sobre ferramentas de IA.