Substituí o Claude Design por esta alternativa de código aberto!

Este guia mostra como rodar o Open Design inteiramente na sua própria máquina — sem conta na nuvem, sem cobrança por design, nada saindo do seu notebook. A ideia é combinar o Open Design com um executor de modelos locais (algo como o Ollama) e os agentes de codificação de linha de comando que você já tem instalados, de modo que a geração aconteça localmente e seu trabalho permaneça privado. Ele segue o caminho que a AI Automation Station adota em seu passo a passo de configuração local, reescrito e atualizado para corresponder à versão atual. Assista ao vídeo acima para ver ao vivo, ou continue lendo para a versão escrita.

O espaço de trabalho do Open Design rodando localmente — seus projetos, seu agente, sua máquina.

O que é o Open Design?

O Open Design é uma plataforma de design de código aberto e local-first — uma alternativa agent-native ao Claude Design e ao Figma. O que torna possível uma configuração totalmente local é sua arquitetura central: em vez de estar atrelado a um único provedor de modelos, o Open Design roda em cima do agente de codificação que você já usa. Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode e outros se conectam. É "traga seu próprio agente" em vez de apenas "traga sua própria chave".

Isso importa para este tutorial porque, se o agente que você escolher rodar localmente — um agente de linha de comando aberto que conduz um modelo local por meio de um executor como o Ollama — então todo o ciclo permanece na sua máquina. Nenhum crédito queimado, nenhum prompt enviado para uma API remota.

Algumas coisas que vale a pena saber:

• Código aberto, Apache-2.0 — clone, hospede você mesmo, leia cada linha.
• Roda localmente — seus projetos vivem nas suas próprias pastas, não na nuvem de outra pessoa.
• Agentes plugáveis — 21+ agentes de codificação são suportados; você escolhe qual CLI 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 reais embutidos — sistemas de design modelados em marcas conhecidas (Airbnb, Airtable e outras), além de templates e predefinições de imagem, para você nunca ficar diante de uma tela em branco.

Se você já usou o Claude Design, a sensação será familiar. O Open Design mantém aquela mesma estética tranquila e roda no navegador exatamente como o Claude Design — mas então abre o motor por baixo para que você possa encaixar qualquer agente que quiser.

Antes de começar

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

Caminho	Melhor para	Requisitos
Aplicativo 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	Uma CLI de agente de codificação já existente

O vídeo segue o caminho de rodar a partir do código-fonte, mas o aplicativo desktop é o caminho recomendado hoje — ele não precisa de Node, nem de pnpm, nem de clonar nada.

Para uma configuração totalmente local, você também vai querer ter, antes de começar, um agente de linha de comando capaz de rodar localmente instalado — por exemplo o OpenCode, que vem com modelos gratuitos embutidos e pode apontar para um executor local como o Ollama. O Open Design o detectará automaticamente assim que ele estiver no seu PATH.

Passo 1 — Instalar o Open Design

Opção A — Aplicativo 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 a instalação, o aplicativo detecta automaticamente cada CLI de agente de codificação que já esteja no seu PATH e carrega para você as skills e os sistemas de design embutidos.

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

Para rodá-lo direto do repositório — como o vídeo faz — você só precisa de alguns 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 no seu terminal. Você precisa de Node ~24 e pnpm 10.33.x; o Corepack escolherá a versão fixada do pnpm para você. A porta é atribuída dinamicamente, então use o endereço que o comando mostrar em vez de adivinhar um.

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

Para conduzir o Open Design a partir do terminal — chamando-o como uma skill ou servidor MCP dentro do seu agente, sem GUI — execute:

od mcp install <agent>
# od ships with Open Design; <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Depois peça, dentro do agente: Use open-design to generate a dense analytics dashboard with the Airbnb design system.

Primeira execução: conecte seu agente local

Na primeira vez que você inicia o Open Design, ele examina sua máquina e mostra cada agente de linha de comando que encontrou — Claude Code, OpenCode, Codex, Gemini e outros. Este é o momento que torna real um fluxo de trabalho somente local: você escolhe qual agente gera seus designs.

• Escolha um agente local para não gastar créditos. O Claude Code é excelente, mas consome seus créditos do Claude. Escolher em vez disso uma opção gratuita e local como o OpenCode significa que a geração roda na sua máquina de graça. O OpenCode reúne vários modelos gratuitos (o MiniMax entre eles) e pode ficar na frente de um executor local como o Ollama, de modo que o modelo nunca sai do seu computador.
• Adicione chaves de API de provedores apenas se quiser. Há um lugar para colar chaves de Anthropic, OpenAI, Azure e Google Gemini caso você um dia queira recorrer a um modelo hospedado. Para uma execução totalmente local, você pode pular isso por completo.
• Adicione provedores de mídia (opcional). Se quiser gerar imagens, vídeo ou áudio, adicione suas próprias chaves para esses provedores. Esta é a parte "traga sua própria chave" — e ela é opcional.
• Ative skills e sistemas de design. Habilite apenas as capacidades de que você precisa para o trabalho à sua frente.

Tudo aqui pode ser alterado depois, então mantenha a primeira passagem simples: escolha seu agente local e siga em frente.

Explore o espaço de trabalho

O Open Design mantém seu trabalho delimitado por projeto — os designs que você cria vivem dentro da pasta de projeto em que você está trabalhando. Troque de pasta e você troca de projeto.

Inicie um novo protótipo (o vídeo nomeia um de "Tube Analytics") e você imediatamente tem uma escolha: começar a partir de um sistema de design ou trabalhar em formato livre. Você não é obrigado a definir um sistema de design primeiro. Você pode escolher um dos sistemas embutidos — o sistema da Claude/Anthropic, Airbnb, Airtable e mais — ou importar um ZIP do Claude Design para que todos os seus tokens e componentes existentes venham junto.

A biblioteca de sistemas de design: pontos de partida reais de marcas que você pode pré-visualizar, dos quais pode pegar o DESIGN.md e encaixar em qualquer projeto.

Aqui há mais do que sistemas de marca. O Open Design vem com uma galeria de designs de exemplo que você pode pré-visualizar antes de usar — clique em um e ele abre uma pré-visualização ao vivo junto com o prompt que o produziu. Toque em Use prompt para começar a partir dali. Ao lado deles ficam templates de imagem que você pode forkar como ponto de partida.

Designs de exemplo e templates de imagem — pré-visualize qualquer um, depois forke-o ou reutilize seu prompt.

Construa algo — localmente

Agora a parte que prova que o ciclo local funciona. No vídeo, o criador abre um painel de analytics SaaS e pede ao Open Design para estendê-lo.

1. Inicie o protótipo. Escolha um sistema de design (ou formato livre) e, opcionalmente, importe seu ZIP do Claude Design para que o agente tenha o contexto completo do seu design existente.
2. Anexe uma referência. Solte ou cole imagens como referência visual, ou digite @ para anexar um arquivo do projeto — por exemplo, um arquivo "SaaS Analytics dashboard".
3. Escreva o briefing. Dê a ele um prompt concreto: "Build out the remaining tabs in the dashboard using your design system." Você obtém o familiar layout dividido — a conversa à esquerda, a pré-visualização ao vivo e os arquivos de design à direita.
4. Veja-o rodar no seu agente. O Open Design chama a CLI que você escolheu — OpenCode, no vídeo — e constrói as novas telas. Como roda localmente por meio dos modelos gratuitos do OpenCode, isso custa zero créditos: nada é cobrado do Claude, do Gemini ou do Codex. Novas abas (tendências, geradores de scripts de conteúdo, transcrições, comentários) aparecem, estilizadas para combinar com o sistema existente.
5. Exporte ou faça o deploy. Quando o design estiver pronto, peça para baixá-lo como ZIP para repassar à sua base de código, ou para fazer o deploy direto na Vercel de dentro do Open Design — algo que o Claude Design não oferece. Para incorporar as mudanças de volta ao seu app, solte o ZIP em um agente de codificação como o Claude Code e diga "implement these design changes using the ZIP file."

O resultado é um design real e interativo — construído de ponta a ponta na sua própria máquina, com seu próprio agente, de graça.

Dicas

• Escolha um agente local gratuito para geração sem custo. O OpenCode com seus modelos gratuitos embutidos (ou um modelo local via Ollama) mantém cada execução em zero créditos.
• Guarde as chaves hospedadas para quando você precisar delas. Cole chaves de Anthropic/OpenAI/Gemini apenas se quiser recorrer a um modelo premium; um agente local não precisa de nenhuma.
• Você não precisa de um sistema de design para começar. Comece a partir de um embutido, importe um ZIP do Claude Design ou simplesmente vá de formato livre.
• Seus designs ficam com a pasta do projeto — organize o trabalho rodando o Open Design no diretório certo.
• A exportação é uma entrega, não um aprisionamento. Baixe como ZIP, faça o deploy na Vercel ou alimente os arquivos a um agente de codificação para mesclá-los ao seu código existente.

Perguntas frequentes

Posso realmente rodar o Open Design sem nenhum custo de nuvem? Sim. O próprio Open Design é de código aberto (Apache-2.0) e gratuito para rodar. Se você o apontar para um agente local gratuito como o OpenCode — opcionalmente apoiado por um executor local como o Ollama — a geração acontece na sua máquina sem custo de créditos. Você só paga se optar por conectar um modelo hospedado pago ou um provedor de mídia.

Como mantenho tudo local e privado? Escolha um agente de linha de comando local durante a primeira execução em vez de um na nuvem. Como o Open Design roda em cima do agente que você escolher, um agente local e um modelo local significam que seus prompts e designs nunca saem do seu computador.

Quais agentes de codificação ele suporta? 21+ agentes, incluindo Claude Code, Codex, Cursor, Gemini, GitHub Copilot e OpenCode. O Open Design detecta as CLIs já instaladas na sua máquina e deixa você escolher qual conduz a geração.

Como ele é diferente do Claude Design? A mesma sensação familiar baseada no navegador, mas de código aberto, local-first e com agentes plugáveis. Você traz seu próprio agente (local ou hospedado), não é obrigado a definir um sistema de design de antemão e pode fazer coisas extras que o Claude Design não consegue — como fazer deploy direto na Vercel e gerar slides, imagens e vídeo a partir do mesmo espaço de trabalho.

---

Este guia escrito é baseado no passo a passo de configuração local da AI Automation Station. Assista ao vídeo completo acima e inscreva-se na AI Automation Station para mais tutoriais práticos sobre ferramentas de IA.