OpenCode para design.

O que o OpenCode realmente é

O OpenCode é um agente de programação com IA open-source feito para o terminal, mantido pelo time por trás do SST (Anomaly Innovations). Ele lê seu repositório, executa comandos, edita arquivos e conversa com um grande modelo de linguagem — mas, diferente dos agentes presos a um fornecedor, ele não traz seu próprio modelo. Você o aponta para qualquer provedor e modelo que quiser e traz sua própria chave.

Ele roda como uma UI de terminal (TUI), com um aplicativo desktop e extensões para IDE em cima do mesmo motor. Por baixo, ele usa uma arquitetura cliente/servidor, então o agente que faz o trabalho é desacoplado da superfície a partir da qual você o controla. Dois agentes embutidos — build e plan — alternam com a tecla Tab.

• Agnóstico quanto a modelos: Os modelos e provedores vêm do models.dev, um catálogo aberto. Você os configura no opencode.json com uma string provider/model-id e pode desabilitar provedores que não quer carregar — então o mesmo fluxo de design roda em Anthropic, OpenAI, Google, OpenRouter, modelos locais e mais.
• Arquivo de instruções: O OpenCode lê um arquivo AGENTS.md no seu projeto (o padrão entre ferramentas, também compatível com CLAUDE.md) para as regras do projeto — o lugar natural para codificar suas convenções de design. Execute /init para gerar um.
• Extensível: Ele suporta integração com LSP, servidores MCP, temas, atalhos de teclado e comandos personalizados, além de links de sessão compartilháveis para colaboração.

• Mantenedor: SST / Anomaly Innovations (projeto open-source)
• Credencial: sua(s) própria(s) chave(s) de API de provedor de modelo — BYOK, sem lock-in de fornecedor
• Licença: MIT, open source

Por que um agente aberto e de qualquer modelo se encaixa em trabalho de design

O OpenCode não tem um único “modelo de design” como tem um agente de fornecedor — e é esse o ponto. Como ele é agnóstico quanto a modelos e aberto, você pode rodar o mesmo fluxo de design em qualquer modelo que esteja atualmente melhor em frontend, trocá-lo depois ou recorrer a um modelo local, tudo sem mudar sua configuração.

Mas a escolha do modelo sozinha não compra bom gosto. Como todo agente de programação, o OpenCode produz UI genérica a menos que você lhe dê restrições. Boa saída de design vem de três insumos que você fornece.

• Um design system: Tokens, primitivos e convenções reais que o agente reutiliza, para que a saída combine com uma marca em vez de cair em uma aparência genérica.
• Uma skill estética: Uma skill curada que impõe bom gosto de verdade — movimento contido, hierarquia que prioriza a marca, no máximo dois tipos de fonte e uma cor de destaque — e faz o agente se comprometer com uma direção antes de construir.
• Referências concretas: Imagens de referência reais e múltiplos estados (desktop e mobile, hover, vazio, carregando), não uma única imagem de destaque.

A lição: o OpenCode lhe dá liberdade de modelo, mas o bom gosto ainda vem de um contexto de design curado. O Open Design empacota exatamente esses insumos, e é por isso que os dois se encaixam — ambos são open-source e local-first (mais sobre isso abaixo).

Configure o OpenCode para trabalho de design, do zero

Aqui está o caminho completo, de uma máquina limpa até um OpenCode capaz de criar e verificar UI.

# 1. Install OpenCode
curl -fsSL https://opencode.ai/install | bash
# or: npm i -g opencode-ai@latest
# or: brew install sst/tap/opencode

# 2. Start the TUI in your project, then authenticate your provider
opencode          # then run /login and pick your provider + paste your key

# 3. Generate project context
opencode          # inside your project, run /init to create AGENTS.md

# 4. Pick your model (any provider, via models.dev)
#    set "provider/model-id" in opencode.json or switch in the TUI

# 5. Add an MCP server (optional, e.g. for design handoff)
#    configure it under the "mcp" key in opencode.json

• Codifique suas regras de design: Coloque seus tokens, primitivos e convenções no AGENTS.md (ou em um DESIGN.md referenciado a partir dele) para que a saída combine com uma marca em vez de cair em uma aparência genérica. A opção instructions no opencode.json pode apontar para arquivos de regras adicionais via globs.
• Escolha um modelo capaz: Como o OpenCode é agnóstico quanto a modelos, escolha o provedor/modelo que estiver atualmente mais forte em frontend para a passada de design — e mantenha o resto do seu fluxo inalterado.

O fluxo de screenshot para UI

O loop de design de maior alavancagem com qualquer agente é transformar uma imagem de referência em uma UI funcional e responsiva e iterar até que ela corresponda. A mesma forma de cinco passos se aplica no OpenCode.

1. Comece pelas referências visuais mais claras que você tiver — e inclua múltiplos estados (desktop e mobile, hover, vazio, carregando), não apenas uma única imagem de destaque.
2. Seja específico no prompt; prompts vagos produzem UI genérica.
3. Prepare um design system e diga ao OpenCode onde ficam os tokens e os primitivos canônicos (no AGENTS.md).
4. Rode um servidor de desenvolvimento e faça o agente renderizar em um navegador real, redimensionando para os breakpoints para checar o resultado.
5. Itere fazendo o OpenCode comparar sua implementação de volta com as capturas de tela — em vez de apenas confirmar que o build funciona.

Referencie arquivos com @ na TUI para uma busca aproximada no seu diretório de trabalho, execute comandos de shell inline com um ! inicial e dispare ações com comandos /. Então escreva o prompt com restrições concretas:

opencode
# in the TUI:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from AGENTS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, open it in a browser, and iterate until the
  UI matches the references across breakpoints.

Mantenha os prompts pequenos e focados, faça commit das boas iterações e reverta as ruins (avisando o OpenCode quando reverter), para que cada passada parta de uma base limpa.

AGENTS.md, MCP e sessões compartilháveis

Três pontos de extensão tornam o OpenCode prático para trabalho de design sustentado, e todos os três mapeiam de forma limpa para um fluxo de design aberto.

• Regras do AGENTS.md: As regras de projeto vivem em um AGENTS.md na raiz do repositório (ou regras globais em ~/.config/opencode/AGENTS.md). É a casa durável das suas convenções de design, lida a cada execução, e é compatível com os arquivos CLAUDE.md que outros agentes usam.
• Servidores MCP: O OpenCode suporta servidores MCP locais (comando) e remotos (URL), configurados sob a chave mcp — a forma portátil de trazer contexto de design e ferramentas externas que funcionam entre agentes, não só no OpenCode.
• Sessões compartilháveis: O comando /share cria um link público para uma conversa para colaboração ou revisão, e o /unshare o revoga — útil para obter feedback sobre uma passada de design.

Essas são capacidades portáteis e multiagente — exatamente o tipo de coisa que o Open Design foi feito para orquestrar, em vez de recriar projeto a projeto.

OpenCode vs Codex vs Claude Code vs Cursor para design

Não há um único vencedor para o trabalho de design — cada agente tem uma força diferente, e times experientes os combinam. Um resumo justo:

O veredito recorrente da comunidade é que o bom gosto vem dos humanos: todos eles caem em uma estética genérica sem skills, referências e restrições. Esse é o problema real a resolver — e ele tem forma de ferramenta de design, não de modelo, que é precisamente por que um agente aberto como o OpenCode combina tão bem com uma camada de design aberta.

Armadilhas e como evitar a aparência de “lixo de IA”

A reclamação mais comum sobre o design gerado por IA é que ele parece genérico — gradientes suaves, painéis flutuantes, cantos arredondados exagerados, sombras dramáticas, uma vibe de Inter-e-roxo que “grita que uma IA fez isso”. Outros problemas relatados incluem layouts mobile quebrados e instruções vazando para o texto da UI. Nenhum deles é exclusivo do OpenCode; é o que acontece quando qualquer agente roda sem um contexto de design curado.

• Adicione uma skill estética: Uma skill de design curada força o agente a se comprometer com uma direção real em vez da aparência padrão.
• Verifique em um navegador real: Renderize e verifique a si mesmo nos diferentes breakpoints para que os layouts não quebrem silenciosamente no mobile.
• Forneça tokens e referências: Tokens de design reais e capturas de tela de referência são a maior alavanca isolada sobre a qualidade da saída.
• Codifique regras no AGENTS.md: Coloque regras de estilo como “sem hero cards, no máximo dois tipos de fonte, hierarquia que prioriza a marca” onde o agente as lê a cada execução.

Note que toda mitigação tem a ver com dar ao agente um contexto de design curado — independentemente do modelo que você roda. Manter esse contexto na mão, projeto a projeto, é o trabalho braçal que o Open Design elimina.

Projetando com o OpenCode dentro do Open Design

O Open Design é a camada de design open-source que o fluxo acima fica pedindo. Ele trata o OpenCode como um adaptador de primeira parte e o envolve em uma biblioteca curada de skills e design systems, um pipeline de renderização estruturado e uma UI desktop local — para que o contexto de design que torna qualquer agente bom esteja presente desde a primeira execução, e não montado à mão a cada vez. Ambos os projetos são open-source e local-first, o que torna a combinação um encaixe natural.

1. Instale o Open Design e selecione o OpenCode como seu agente.
2. Autentique-se com sua própria chave de API de provedor de modelo (BYOK) — as credenciais permanecem na sua máquina e nunca passam por um proxy nosso.
3. Escolha qualquer provedor e modelo, mais um design system e uma skill, e então gere decks, protótipos e landing pages com bom gosto consistente.
4. Cada artefato e arquivo DESIGN.md vive no seu próprio repositório, não em uma nuvem hospedada.

O mesmo agente OpenCode, a mesma liberdade de modelo — mais um fluxo de design real, portátil e open-source ao redor. É local-first e Apache-2.0, então nada do seu trabalho ou das suas credenciais sai da sua máquina.

Perguntas frequentes

1. 01 O OpenCode realmente consegue fazer trabalho de design? +

   Sim — com uma skill estética, um design system e imagens de referência reais no contexto, o OpenCode produz UI responsiva e de qualidade de produção e pode verificá-la em um navegador. Como ele é agnóstico quanto a modelos, você roda qualquer modelo que esteja atualmente melhor em frontend. Sem esse contexto curado, ele tende a cair em uma aparência genérica, e é essa a lacuna que o Open Design preenche.

2. 02 Qual modelo devo usar com o OpenCode para design? +

   O que você preferir — o OpenCode é agnóstico quanto a provedores via models.dev, então você pode rodar Anthropic, OpenAI, Google, OpenRouter ou modelos locais por trás do mesmo fluxo e trocar a qualquer momento. A qualidade da saída de design depende muito mais da sua skill, do seu design system e das suas referências do que do modelo sozinho.

3. 03 O Open Design é feito pelo time do OpenCode (SST)? +

   Não. O Open Design é um projeto open-source independente que integra o OpenCode como um agente. Ele complementa o OpenCode com uma biblioteca aberta e local-first de skills e design systems.

4. 04 Preciso de uma assinatura especial para projetar com o OpenCode? +

   Não — o OpenCode é BYOK. Você traz sua própria chave de API de provedor de modelo, e o Open Design nunca usa um proxy para suas credenciais. Não há lock-in de fornecedor.

5. 05 OpenCode, Codex ou Claude Code para design de frontend? +

   Todos são fortes, e muitos times os combinam. A vantagem do OpenCode é ser totalmente open-source e agnóstico quanto a modelos; o Codex se destaca em builds delegados e em sandbox; o Claude Code é conhecido por decisões de design específicas e cientes da base de código. O Open Design permite trocar de agente sem mudar o seu fluxo de design.

6. 06 Como estendo o OpenCode para contexto de design? +

   Codifique regras no AGENTS.md, adicione servidores MCP sob a chave mcp para ferramentas portáteis e contexto de design, e use sessões compartilháveis para revisão. O Open Design oferece uma biblioteca curada de skills e design systems para que você pule a configuração projeto a projeto.

7. 07 O Open Design é afiliado ao OpenCode ou ao SST? +

   Não. O OpenCode é um projeto open-source mantido pelo SST (Anomaly Innovations); o Open Design é um projeto open-source independente que o suporta como um adaptador de primeira parte.

8. 08 Meus arquivos e credenciais estão seguros? +

   Sim — o Open Design é local-first. Seus arquivos, artefatos e DESIGN.md permanecem no seu próprio repositório, e suas credenciais de provedor de modelo são usadas diretamente pelo seu agente, nunca roteadas por servidores do Open Design.