Codex para design.

O que o OpenAI Codex realmente é (e o que não é)

Primeiro, uma desambiguação que confunde quase todo mundo que busca por “Codex”. O OpenAI Codex original era um modelo de autocompletar código de 2021 que alimentava as primeiras versões do GitHub Copilot e foi descontinuado em 2023. Não é disso que esta página trata. O Codex de hoje é a ferramenta de programação agêntica da OpenAI — ele planeja, escreve, executa e verifica código a partir de tarefas em linguagem natural.

O Codex moderno está disponível em quatro superfícies: uma CLI de terminal (reescrita em Rust, licenciada sob Apache-2.0), uma extensão para IDE no VS Code, Cursor e Windsurf, uma experiência em nuvem/web para tarefas assíncronas delegadas e um aplicativo desktop com um navegador embutido e Computer Use.

• Modelo padrão: Em meados de 2026, o modelo recomendado é o gpt-5.5, sendo o gpt-5.4 o modelo que a OpenAI treinou explicitamente para frontend e computer use.
• Arquivo de instruções: O Codex lê um arquivo AGENTS.md no seu projeto (um padrão entre ferramentas) para as regras do projeto — o lugar natural para codificar suas convenções de design.
• Sandbox: Ele roda em um sandbox a nível de kernel (workspace-write por padrão), então um agente editando sua UI não consegue sair dos limites do projeto.

• Fornecedor: OpenAI
• Credencial: chave de API da OpenAI (BYOK) ou assinatura do ChatGPT (Free / Go / Plus / Pro / Business / Enterprise)
• Licença da CLI: Apache-2.0, open source

Por que o Codex é bom em design agora

Três coisas convergiram no início de 2026 para tornar o Codex uma ferramenta de design de verdade, em vez de um gerador de código genérico.

• Um modelo treinado para frontend: A OpenAI lançou o GPT-5.4, seu primeiro modelo de linha principal treinado para frontend e computer use, com compreensão de imagens muito melhor ao longo do fluxo de design e autoverificação mais forte. Ele consegue até gerar mood boards e opções visuais antes de se comprometer com os assets finais.
• Uma skill oficial de frontend: O catálogo openai/skills traz uma frontend-skill curada que impõe bom gosto de verdade: layouts sem cards, heros full-bleed, hierarquia que prioriza a marca, movimento contido, no máximo dois tipos de fonte e uma cor de destaque — e faz o Codex escrever uma tese visual antes de construir.
• Verificação no navegador: Com a skill do Playwright, o Codex abre um navegador real, redimensiona para os breakpoints e compara sua saída de volta com a referência, em vez de apenas verificar que o build passou.

A lição por trás das três: o Codex não tem bom gosto por padrão. Ele produz bom design quando você lhe dá restrições — um design system, uma skill estética e referências concretas. O Open Design empacota exatamente esses insumos, e é por isso que os dois se encaixam (mais sobre isso abaixo).

Configure o Codex para trabalho de design, do zero

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

# 1. Install the Codex CLI
npm install -g @openai/codex
# or: brew install --cask codex
# or: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Authenticate (ChatGPT sign-in recommended for higher limits)
codex            # then choose “Sign in with ChatGPT”

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

# 4. Add the official frontend skill, then restart Codex
# (in the Codex app) $skill-installer frontend-skill

# 5. Wire the Figma MCP server (optional, for design handoff)
codex mcp add figma --url https://mcp.figma.com/mcp

• Codifique suas regras de design: Coloque seus tokens, primitivos e convenções no AGENTS.md ou em um DESIGN.md e aponte o Codex para eles, para que a saída combine com uma marca em vez de cair em uma aparência genérica.
• Escolha o nível de raciocínio certo: A OpenAI observa que níveis de raciocínio de baixo a médio costumam produzir resultados de frontend mais fortes do que o nível mais alto.

O fluxo de screenshot para UI

O loop de design de maior alavancagem com o Codex é transformar uma imagem de referência em uma UI funcional e responsiva e iterar até que ela corresponda. A própria orientação da OpenAI se resume a cinco passos.

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 Codex onde ficam os tokens e os primitivos canônicos.
4. Habilite a skill interativa do Playwright para que o Codex renderize em um navegador real e redimensione para os breakpoints.
5. Itere fazendo o Codex comparar sua implementação de volta com as capturas de tela — em vez de apenas confirmar que o build funciona.

Alimente as imagens arrastando uma captura de tela para o terminal ou usando a flag de imagem, e então escreva o prompt com restrições concretas:

codex -i reference-desktop.png -i reference-mobile.png \
  "Implement this design in React + Vite + Tailwind + TypeScript.
   Reuse my existing design-system components and tokens.
   Match spacing, layout, and hierarchy; make it responsive.
   Use the Playwright skill to verify the UI matches the
   references and iterate until it does."

Rode um servidor de desenvolvimento em um segundo terminal, mantenha os prompts pequenos e focados, e faça commit das boas iterações / reverta as ruins (avisando o Codex quando reverter), para que cada passada parta de uma base limpa.

Codex + Figma: ida e volta entre design ↔ código

Em fevereiro de 2026, a OpenAI e a Figma anunciaram uma parceria oficial, transformando o beta anterior do MCP do Figma em uma integração bidirecional de primeira classe. Ela funciona nas duas direções.

• Design → Código: Copie o “link to selection” de um frame no Figma, cole-o no Codex com get_design_context e peça que ele implemente o design usando sua biblioteca de componentes existente.
• Código → Design: A ferramenta generate_figma_design (“Code to Canvas”) transforma uma UI viva e em execução de volta em frames editáveis do Figma — a tela inteira, um elemento selecionado ou um arquivo completo.

O MCP do Figma roda como um servidor remoto e está isento de limites de taxa. Adicione-o uma vez e ele fica disponível para Codex, Claude Code, Cursor, VS Code e mais — exatamente o tipo de capacidade portátil e multiagente que o Open Design foi feito para orquestrar.

Codex vs Cursor vs Claude Code 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 os três 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.

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

A reclamação mais comum sobre o design gerado pelo Codex é 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, instruções vazando para o texto da UI e atingir os limites de uso rapidamente.

• Instale uma skill de frontend: Uma skill estética curada força o Codex a se comprometer com uma direção real em vez da aparência padrão.
• Habilite a verificação com Playwright: Faça o Codex renderizar e verificar 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. Manter esse contexto na mão, projeto a projeto, é o trabalho braçal que o Open Design elimina.

Projetando com o Codex dentro do Open Design

O Open Design é a camada de design open-source que o fluxo acima fica pedindo. Ele trata o Codex 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 o Codex bom esteja presente desde a primeira execução, e não montado à mão a cada vez.

1. Instale o Open Design e selecione o Codex como seu agente.
2. Autentique-se com sua chave de API da OpenAI (BYOK) ou sua assinatura do ChatGPT — as credenciais permanecem na sua máquina e nunca passam por um proxy nosso.
3. Escolha 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 Codex, a mesma chave — 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 OpenAI Codex realmente consegue fazer trabalho de design? +

   Sim — com uma skill de frontend, um design system e imagens de referência reais no contexto, o Codex (especialmente no GPT-5.4) produz UI responsiva e de qualidade de produção e pode verificá-la em um navegador. Sem esse contexto, ele tende a cair em uma aparência genérica, e é essa a lacuna que o Open Design preenche.

2. 02 Isto é o plugin Product Design do OpenAI Codex? +

   Não. O Open Design é um projeto open-source independente que integra o Codex como um agente. Ele complementa as próprias ferramentas da OpenAI com uma biblioteca aberta e local-first de skills e design systems.

3. 03 Preciso de uma assinatura do ChatGPT para projetar com o Codex? +

   Você pode usar uma chave de API da OpenAI (BYOK) ou sua assinatura do ChatGPT. O login com o ChatGPT geralmente oferece limites mais generosos; de qualquer forma, o Open Design nunca usa um proxy para suas credenciais.

4. 04 Codex ou Claude Code para design de frontend? +

   Ambos são fortes. O Claude Code é conhecido por decisões de design específicas e cientes da base de código; o Codex tem forte refinamento visual após o GPT-5.4 e se destaca em builds delegados e em sandbox. Muitos times usam os dois — o Open Design permite trocar de agente sem mudar o seu fluxo de design.

5. 05 Como conecto o Codex ao Figma? +

   Adicione o servidor MCP oficial do Figma (codex mcp add figma --url https://mcp.figma.com/mcp). Você pode então implementar frames do Figma em código com get_design_context e enviar uma UI em execução de volta para frames editáveis do Figma com generate_figma_design.

6. 06 Como evito a estética genérica de “lixo de IA”? +

   Instale uma skill de frontend, forneça tokens de design reais e capturas de tela de referência, codifique as regras da marca no AGENTS.md e habilite a verificação com Playwright. O Open Design entrega tudo isso como uma biblioteca curada para que você pule a configuração projeto a projeto.

7. 07 O Open Design é afiliado à OpenAI? +

   Não. O Codex é um produto da OpenAI; o Open Design é um projeto open-source independente que o suporta como um adaptador de primeira parte. OpenAI e Codex são marcas registradas da OpenAI.

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 da OpenAI são usadas diretamente pelo seu agente, nunca roteadas por servidores do Open Design.