Codex 
OpenDesign Como criar interfaces com o OpenAI Codex no OpenDesign: a configuração, uma tarefa completa do briefing ao arquivo revisado e os limites que você precisa conhecer antes de começar.
“Um quadro de projeto mais calmo.
Prioridades claras. Espaço para focar.”
TRÊS PÁGINAS DO CODEX
Este guia: briefing, referências, regras de design e um resultado em HTML revisado.
Ler este guia PLUGINS E INSTALAÇÃOExplore plugins de design ou obtenha as instruções de instalação do OpenDesign.
Ir para os recursos UM RESULTADO DIFERENTEApresentações de slides têm um guia separado, com seu próprio workflow.
Abrir Codex SlidesUma Tarefa de Design Completa no Codex
Uma única tarefa, mostrada do início ao fim: o briefing e as restrições que você entrega, o artefato que retorna e as verificações que você ainda realiza antes de finalizar. A interface abaixo é um exemplo ilustrativo criado para esta página, não uma execução real registrada do Codex.
BriefingProjete um painel de progresso de projeto para uma pequena equipe de produto. Mostre o progresso geral, o próximo marco e o trabalho bloqueado rapidamente. As tarefas se movem entre A fazer, Em andamento e Concluído. O painel deve funcionar em desktop e em dispositivos móveis.
data-od-idEscreva o briefing, selecione o sistema de design e defina os critérios de aceitação.
Planeja o layout, escreve o HTML, CSS e JavaScript, executa o arquivo e o revisa quando solicitado.
Fornece o sistema de design e o skill, renderiza a pré-visualização e armazena cada versão como um arquivo no projeto.
A hierarquia visual, o espaçamento na grade de 8px, ambos os breakpoints e cada interação são verificados antes da entrega.
A barra lateral, o cabeçalho, as estatísticas e as colunas se alinham à grade de 8px; nada se sobrepõe em 1440 ou 390.
O progresso, o próximo marco e a contagem de bloqueios têm prioridade sobre os cabeçalhos das colunas; o destaque marca apenas um rótulo de marco.
As colunas se transformam em um seletor segmentado; a barra de marcos permanece; a barra lateral se transforma em uma barra de abas.
Alterne a pré-visualização entre desktop e mobile aqui. No seu próprio artefato, abra uma tarefa e teste os filtros, a navegação por teclado e o comportamento de foco.
Adequação
Compatibilidade
Este guia cobre o Codex local. Outros modos têm configuração e cobrança diferentes. Referências publicadas verificadas em 11 de setembro de 2026.
OpenAI Codex, o agente de código — não o modelo de autocompletar código mais antigo. Esta página trata de projetar interfaces com o Codex, não da UI do próprio app Codex. As notas de configuração da OpenDesign listam o Codex entre os agentes disponíveis.
Para o Codex local, faça login com o ChatGPT ou use uma chave de API da OpenAI. Elas têm implicações diferentes de faturamento e política. Siga as instruções de autenticação da OpenAI; esta página não promete uma cota ou preço.
Confira a página de download para as builds de desktop. Os requisitos de Node.js e pnpm no quickstart a partir do código-fonte se aplicam à execução a partir do código-fonte, não à instalação de um pacote de desktop. Versão mínima compatível do Codex: não verificado aqui.
Siga as instruções de conexão exibidas pela sua versão instalada e, em seguida, execute uma tarefa pequena. Confirme que o agente pretendido lidou com ela e que o artefato abre. Um download por si só não estabelece uma conexão funcional.
Comece com o app de desktop
Baixe primeiro, complete a configuração do Codex para sua versão instalada e, depois, verifique um pequeno resultado. Você não precisa compilar a OpenDesign a partir do código-fonte para seguir este caminho.
Escolha o pacote para seu computador, instale-o e abra o app.
Baixar o OpenDesignSiga as instruções do Codex na sua versão instalada. Para o Codex local, complete o login com o ChatGPT ou a autenticação por chave de API antes de enviar uma tarefa.
Leia as notas de autenticação do CodexUse um briefing pequeno para que você possa avaliar todo o ciclo, incluindo uma revisão.
Construa uma tela de configurações com um formulário de perfil e uma confirmação de salvamento. Use minhas regras de design. Verifique em larguras de desktop e mobile.
Para executar a partir do código-fonte, siga o guia técnico de início rápido. Para instalar o plugin no Codex, use a entrada de instalação abaixo.
O workflow de design do Codex
A mesma tarefa do progress-board, acompanhada do briefing até o arquivo verificado. Cada etapa lista o que você fornece, o que o Codex faz, o que o OpenDesign contribui e o que você verifica.
Linguagem simples, de três a seis linhas. Indique o público, a função da tela e as plataformas.
AGENTS.md do projeto; pergunta quando algo é ambíguo.Um design system e algumas regras rígidas. É isso que diferencia um resultado alinhado à marca de um visual genérico.
O Codex escreve um arquivo HTML autocontido: layout, estilos, interações e hooks estáveis.
O arquivo é renderizado dentro do OpenDesign nas larguras que você solicitou. É aqui que o design é avaliado.
data-od-id para comentários e edições.Solicite alterações apontando para elementos no preview. Cada revisão é um novo arquivo; nada é sobrescrito silenciosamente.
Recursos
Um endereço em texto simples com instruções de instalação para o Codex ler, não um tutorial visual. Copie o prompt no Codex e ele lê a entrada por conta própria.
Instale o OpenDesign no Codex lendo https://open-design.ai/codex-plugin/ e seguindo as instruções de instalação. Pergunte antes de alterar a configuração.
Plugins de frontend e de design system para o Codex, cada um com sua própria fonte e instruções de configuração.
Os tipos de artefato que o Codex pode produzir no OpenDesign, uma skill por tipo.
Tokens de marca e componentes a vincular antes que o Codex gere qualquer coisa.
Apresentações têm um guia separado; o resultado e o workflow diferem da UI de produto.
Limitações
Perguntas Frequentes
Comece com uma tarefa pequena, avalie o ciclo completo e só então traga o briefing real. Escolha a opção que corresponde à sua configuração; a página não a detecta automaticamente.