Com qual agente de código você deve rodar o Open Design?

A primeira decisão de verdade do Open Design não é o que construir — é qual agente de código o conduz. Este guia foca nessa escolha: a (longa) lista de agentes suportados, como escolher um e como configurar e construir. Ele segue o passo a passo que Tony Xhepa apresenta em seu vídeo, reescrito e atualizado para a versão atual. Assista ao vídeo acima ou continue lendo para a versão escrita.

O espaço de trabalho do Open Design: descreva o que você quer construir, escolha um modo, e seu agente faz o resto.

Por que o agente é a escolha importante

O Open Design não vem com um modelo próprio — é uma superfície open source, local-first, que roda sobre qualquer agente de código que você já tenha. Então o agente que você escolhe é o seu motor de design: ele determina qualidade, custo e velocidade. A beleza está na amplitude. A lista de agentes suportados de Tony é longa: Claude Code, Codex, Devin for Terminal, Cursor, Gemini, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro — e mais. Seja o que for que você já esteja usando, o Open Design provavelmente suporta, e se você não tiver nenhum instalado, pode usar uma chave de API da Anthropic ou da OpenAI em vez disso.

Como escolher um

Um jeito rápido de escolher:

• Já paga por uma CLI de código? Use-a — o Open Design se apoia nessa assinatura, então não há uma segunda cobrança.
• Quer o melhor resultado de design? Aponte-o para um modelo de ponta (por exemplo, Claude Code num modelo capaz) para a construção inicial.
• Quer barato ou de graça? O nível gratuito da Gemini CLI ou os modelos embutidos do OpenCode funcionam bem; você também pode trazer sua própria chave.
• Se importa com privacidade/local? Qualquer CLI local mantém a geração sobre credenciais que nunca saem da sua máquina.

Você não fica preso — troque o agente ativo depois com um clique.

Passo 1 — Instalar a partir do código-fonte

O Open Design é um app Next.js; o início rápido são alguns poucos 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 (uma porta dinâmica — não fixe uma no código). Um ponto que Tony destaca: ele quer o Node 24 — no Node 22 você verá um aviso de “unsupported engine”, então instale o Node 24 primeiro. Prefere não usar o terminal? Há um app de desktop em open-design.ai/download.

Passo 2 — Configurar o modo de execução (escolha seu agente)

No primeiro início você define o modo de execução: CLI local, Anthropic API ou OpenAI API. Escolha CLI local e o Open Design mostra quais agentes ele detectou na sua máquina — Tony tem Codex, Gemini, OpenCode e Pi instalados (Claude Code aparece como não instalado naquela máquina). Escolha um (ele vai de OpenCode), opcionalmente escolha o modelo, e Get started.

O hub de plugins: navegue pelo registro, importe plugins e prepare-os para a sua equipe.

Passo 3 — Crie seu primeiro design

Crie um Prototype, dê um nome, escolha a fidelidade (alta) e comece a partir de um brief sugerido (Tony escolhe um dashboard de analytics SaaS). O Open Design roda as perguntas de descoberta (contexto de marca, fonte de dados dos gráficos, direção visual), você responde, escolhe uma direção, e ele constrói. O artefato finalizado tem um preview, uma visualização do código-fonte, comentários e um menu Share — exportar como PDF, baixar, HTML autônomo, salvar como template e mais.

A biblioteca de plugins: instale skills direto do registro — incluindo skills de design anti-slop.

Dicas

• Escolha o agente pelo qual você já paga — sem uma segunda assinatura, e ele define sua qualidade/custo.
• Instale o Node 24 primeiro para evitar o aviso de engine não suportada.
• Use o modo local CLI para que o Open Design detecte automaticamente seus agentes instalados.
• Troque de agente a qualquer momento — a escolha não é permanente; mude-a com um clique.
• Sem CLI? Use uma chave de API (Anthropic ou OpenAI).

Perguntas frequentes

Quais agentes o Open Design suporta? Muitos — Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen, GitHub Copilot CLI, Devin, Hermes, Kimi, Pi, Kiro e mais. Ele detecta automaticamente os que estão instalados na sua máquina.

Como eu escolho um? Use a CLI pela qual você já paga; escolha um modelo forte para a construção inicial e um mais barato para a iteração; ou use um nível gratuito / sua própria chave de API.

Por que o aviso do Node 24? O Open Design exige o Node 24; no Node 22 você verá um aviso de “unsupported engine”. Instale o Node 24 para eliminá-lo.

É gratuito e open source? Sim — Apache-2.0, local-first. Rode de graça; você só paga pelo uso de modelo do agente ou da chave que conectar.

---

Este guia escrito é baseado no passo a passo de Tony Xhepa. Assista ao vídeo completo acima e inscreva-se no canal de Tony Xhepa para mais ferramentas de desenvolvimento open source.