Codex para design: crie UI com o OpenAI Codex

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.
• Um frontend design skill oficial: O catálogo openai/skills traz um frontend design skill selecionado que impõe bom gosto de verdade: layouts sem cards, heros que ocupam a tela inteira, hierarquia com a marca em primeiro lugar, movimento contido, no máximo duas fontes e uma única cor de destaque, e faz o Codex escrever uma tese visual antes de construir. Adicionar esse frontend design skill é a alavanca única mais rápida para elevar o resultado do Codex.
• 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.

Prefere o caminho de um clique? Baixe o app de desktop do Open Design, ele reúne o Codex com uma biblioteca selecionada de skill e design system, então basta escolher o Codex como seu agent e começar a projetar sem nenhuma configuração de CLI. Os passos abaixo são o caminho manual, caso você prefira conectar o Codex por conta própria.

# 1. Instale o Codex CLI
npm install -g @openai/codex
# ou: brew install --cask codex
# ou: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Autentique-se (login com ChatGPT recomendado para limites maiores)
codex            # depois escolha “Sign in with ChatGPT”

# 3. Gere o contexto do projeto
codex            # dentro do seu projeto, rode /init para criar AGENTS.md

# 4. Adicione o skill de frontend oficial e reinicie o Codex
# (no app do Codex) $skill-installer frontend-skill

# 5. Conecte o servidor MCP do Figma (opcional, para o handoff de design)
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 \
  "Implemente este design em React + Vite + Tailwind + TypeScript.
   Reutilize meus componentes e tokens de design system existentes.
   Mantenha espaçamento, layout e hierarquia; deixe responsivo.
   Use o skill do Playwright para verificar se a UI corresponde às
   referências e itere até corresponder."

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.

O Codex para design de frontend e UI

Transformar uma captura de tela em uma página é a demonstração; entregar um frontend de verdade é o trabalho. O trabalho de design de UI com o Codex fica bom quando você o trata como a construção de um sistema, componentes reutilizáveis, layouts responsivos e cada estado de interação, e não como uma única imagem de destaque. A compreensão de imagens mais forte e a autoverificação do GPT-5.4 tornam isso prático, mas a estrutura ainda vem de você.

• Componentes primeiro: Peça ao Codex para construir componentes atômicos e reutilizáveis (botões, inputs, cards, navegação) com base nos seus tokens antes de compor páginas inteiras, para que o frontend permaneça consistente em vez de pontual.
• Responsivo por padrão: Forneça referências de desktop e mobile e nomeie os breakpoints; faça o Codex redimensionar em um navegador real e corrigir os layouts que quebram, em vez de confiar em uma única viewport.
• Cada estado de interação: Detalhe os estados de hover, foco, ativo, vazio, carregando e erro, os estados que fazem a UI parecer finalizada e que a saída genérica de IA costuma pular.
• Marcação acessível: Exija HTML semântico, controles rotulados, anéis de foco visíveis e contraste adequado, e peça ao Codex para verificá-los como parte da construção.

Peça no prompt por um componente e seus estados de forma explícita, e então deixe o Codex verificar em relação à referência:

codex "Construa uma seção de preços responsiva em React + Tailwind + TypeScript.
   Reutilize os tokens do meu design system e os componentes Button/Card.
   Inclua os estados de hover, foco e empilhado no mobile.
   Use a skill do Playwright para compará-la com pricing-desktop.png
   e pricing-mobile.png em 375px e 1280px, e itere até que ela corresponda."

O padrão que separa uma boa saída de frontend do “lixo de IA” é a verificação: o Codex renderiza a UI, compara-a com as suas referências ao longo dos breakpoints e itera, em vez de apenas confirmar que o build passou.

Construindo um design system com o Codex

Um design system é a maior alavanca isolada sobre a qualidade da saída, é como o Codex conhece suas cores, escala tipográfica, espaçamento e componentes em vez de cair na aparência genérica de Inter-e-roxo. Dê um design system ao Codex para usar como base e cada tela que ele produz herda o mesmo bom gosto.

• Defina os tokens: Capture cor, tipografia, espaçamento, raio e sombra como tokens nomeados, o vocabulário que o Codex reutiliza em vez de inventar valores a cada tela.
• Capture os primitivos: Aponte o Codex para os seus componentes canônicos (Button, Input, Card, Modal) para que ele componha a partir deles em vez de redesenhar cada um.
• Escreva onde o Codex lê: Codifique as regras em um AGENTS.md ou DESIGN.md que o agente carrega a cada execução: sem hero cards, no máximo dois tipos de fonte, uma cor de destaque, hierarquia que prioriza a marca.
• Reforce a cada passada: Peça ao Codex para verificar cada nova UI em relação ao sistema e sinalizar desvios, para que o design system permaneça real em vez de se degradar após a primeira tela.

Você também pode trabalhar na direção contrária: entregue ao Codex algumas telas de referência e peça que ele extraia um design system inicial, tokens mais primitivos, que você então refina. De qualquer forma, o sistema é o artefato que torna os resultados repetíveis.

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.

Comparativo de plugins de design do Codex (incluindo o Open Design)

A capacidade de design do Codex vem quase inteiramente do que você conecta a ele. Estes são os principais plugins e ferramentas de design que você pode usar com o Codex hoje, e onde o Open Design se encaixa entre eles:

Como escolher: se você quer o próprio fluxo de design da OpenAI dentro do Codex, o Product Design plugin cobre explorar direções, auditar fluxos e prototipar a partir de uma URL ao vivo. Para a qualidade bruta da saída, a frontend design skill é o acréscimo de maior alavancagem. A integração com o Figma oficial é essencial se o seu time vive no Figma, e ela é portátil, então dá para combiná-la com qualquer uma das outras, incluindo o Claude Code e o Cursor.

O Open Design é a única opção que é de código aberto, local-first e BYOK de ponta a ponta. Ele envolve o Codex em uma skill e uma biblioteca de sistemas de design curadas, um pipeline de renderização estruturado e uma UI de desktop local, assim, o contexto de design que torna o Codex bom já está presente desde a primeira execução, sem precisar montá-lo à mão em cada projeto, e cada artefato permanece no seu próprio repositório.

O Codex para designers que não programam

Você não precisa ser engenheiro para projetar com o Codex. O agente recebe uma intenção em linguagem natural e referências reais e devolve uma UI funcional e responsiva, o que faz dele uma ferramenta genuína para designers e pessoas de produto, não apenas para desenvolvedores frontend. O truque é conduzi-lo como um briefing de design, não como uma sessão de programação.

• Descreva em linguagem natural: Diga o que você quer em termos de design, layout, hierarquia, tom, a sensação, e deixe o Codex traduzir isso em marcação.
• Trabalhe a partir de referências: Insira capturas de tela, um moodboard ou o site de uma marca; referências concretas superam qualquer quantidade de texto para acertar a aparência.
• Faça o preview em um navegador real: Deixe o Codex renderizar e abrir o resultado para que você o julgue com os próprios olhos, redimensione-o e aponte o que está errado.
• Itere e reverta com segurança: O agente roda em sandbox, então você pode testar uma direção, manter as boas passadas e reverter as ruins sem quebrar nada.

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.

BYOK: sua chave da OpenAI, seu plano do ChatGPT, seus limites

O Codex é bring-your-own-key (BYOK): você se autentica com a sua própria chave de API da OpenAI ou com a sua assinatura do ChatGPT, e as suas credenciais pertencem a você. Isso importa para o controle de custos e para a privacidade, nada sobre a sua chave ou o seu trabalho precisa passar por um terceiro.

• Escolha o nível de raciocínio certo: A OpenAI observa que níveis de raciocínio de baixo a médio costumam dar resultados de frontend mais fortes do que o nível mais alto, e custam menos.
• Mantenha os prompts pequenos e focados: Tarefas curtas e específicas usam menos tokens e produzem diffs mais limpos do que um único prompt gigante.
• Faça commit das boas iterações: Salve as passadas que funcionam e reverta o resto, para que você não pague para regenerar uma base limpa a cada vez.

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.

9. 09 O Codex consegue construir UI de frontend responsiva? +

   Sim. Com referências de desktop e mobile e a skill do Playwright, o Codex constrói UI de frontend responsiva, renderiza-a em um navegador real em cada breakpoint e itera até que ela corresponda, incluindo componentes, layouts e estados de interação. Fornecer os tokens do seu design system é o que mantém a saída consistente em vez de genérica.

10. 10 Como dou um design system ao Codex? +

    Codifique seus tokens (cor, tipografia, espaçamento) e componentes canônicos em um arquivo AGENTS.md ou DESIGN.md que o Codex lê a cada execução, e peça que ele construa com base neles. O Open Design traz uma biblioteca curada de design systems para que você possa escolher um sistema em vez de escrever um do zero, e o Codex então constrói cada tela com base nele.

11. 11 Posso usar o Codex para design se não sei programar? +

    Sim. O Codex transforma briefings em linguagem natural e imagens de referência em UI funcional, então designers e pessoas de produto podem usá-lo sem escrever código. O aplicativo desktop do Open Design elimina o terminal e a configuração por completo, você escolhe um agente, um design system e uma skill, e então gera e faz o preview em uma UI local.

12. 12 O Open Design suporta BYOK com o Codex? +

    Sim. O Open Design é bring-your-own-key: autentique o Codex com a sua própria chave de API da OpenAI ou assinatura do ChatGPT, e a credencial é usada diretamente pelo seu agente, nunca passando por um proxy do Open Design. Ele é local-first, então seus arquivos e o DESIGN.md permanecem no seu próprio repositório.

13. 13 Como adiciono um frontend design skill ao Codex? +

    Instale o frontend design skill oficial do catálogo openai/skills: no app do Codex, execute o instalador de skill para o frontend-skill e depois reinicie o Codex. O frontend design skill faz o Codex se comprometer com uma estética de verdade, layouts sem cards, hierarquia com a marca em primeiro lugar, no máximo duas fontes e uma única cor de destaque, em vez do visual genérico padrão, e é a maior alavanca sobre a qualidade de design do Codex.