For the complete documentation index, see llms.txt. Markdown versions of documentation pages are available by appending .md to the page URL.
Navegação principal
Codex

Codex use case

Faça alterações pontuais na interface

Use o Codex-Spark para fazer iterações rápidas e pontuais na interface de um aplicativo existente.

Difficulty Fácil
Time horizon 5 min

Use o Codex para fazer um pequeno ajuste na interface por vez em um aplicativo existente, verificá-lo no navegador e continuar iterando rapidamente com uma janela flutuante do chat perto da prévia.

Ideal para

  • Aplicativos existentes cuja estrutura principal já está pronta e que precisam de pequenos ajustes visuais
  • Ciclos rápidos de revisão de produto ou design em que cada observação deve resultar em uma única alteração pontual no código
  • Rodadas de refinamento da interface que exigem verificação no navegador, mas não devem se transformar em uma reformulação ampla

Contents

    ← Todos os casos de uso

    Faça alterações pontuais na interface

    Use o Codex-Spark para fazer iterações rápidas e pontuais na interface de um aplicativo existente.

    Use o Codex para fazer um pequeno ajuste na interface por vez em um aplicativo existente, verificá-lo no navegador e continuar iterando rapidamente com uma janela flutuante do chat perto da prévia.

    Fácil
    5 min

    Use o Codex para fazer um pequeno ajuste na interface por vez em um aplicativo existente, verificá-lo no navegador e continuar iterando rapidamente com uma janela flutuante do chat perto da prévia.

    Fácil
    5 min

    Ideal para

    • Aplicativos existentes cuja estrutura principal já está pronta e que precisam de pequenos ajustes visuais
    • Ciclos rápidos de revisão de produto ou design em que cada observação deve resultar em uma única alteração pontual no código
    • Rodadas de refinamento da interface que exigem verificação no navegador, mas não devem se transformar em uma reformulação ampla

    Habilidades e Plug-ins

    • Abra o aplicativo em execução em um navegador real, inspecione a rota afetada pela alteração e verifique cada pequeno ajuste na interface antes da próxima iteração.
    Skill Why use it
    Playwright Abra o aplicativo em execução em um navegador real, inspecione a rota afetada pela alteração e verifique cada pequeno ajuste na interface antes da próxima iteração.

    Prompt inicial

    Faça esta alteração na interface do aplicativo existente: [describe the exact spacing, alignment, color, copy, responsive, or component-state adjustment] Restrições: - Altere apenas os arquivos necessários para este ajuste na interface. - Reutilize os componentes, tokens, ícones e padrões de layout existentes. - Mantenha o comportamento, o fluxo de dados e o roteamento inalterados, salvo se eu pedir explicitamente o contrário. - Inicie ou reutilize o servidor de desenvolvimento, inspecione a interface atual no navegador, aplique o menor patch possível e verifique visualmente o resultado. Pare após esta única alteração e resuma quais arquivos foram alterados e qual verificação você realizou no navegador.
    Faça esta alteração na interface do aplicativo existente: [describe the exact spacing, alignment, color, copy, responsive, or component-state adjustment] Restrições: - Altere apenas os arquivos necessários para este ajuste na interface. - Reutilize os componentes, tokens, ícones e padrões de layout existentes. - Mantenha o comportamento, o fluxo de dados e o roteamento inalterados, salvo se eu pedir explicitamente o contrário. - Inicie ou reutilize o servidor de desenvolvimento, inspecione a interface atual no navegador, aplique o menor patch possível e verifique visualmente o resultado. Pare após esta única alteração e resuma quais arquivos foram alterados e qual verificação você realizou no navegador.

    Introdução

    Quando você já tem um aplicativo e quer iterar rapidamente na interface, pode usar gpt-5.3-codex-spark para fazer alterações pequenas e pontuais na interface. O Codex-Spark é o nosso modelo mais rápido, otimizado para iterações de código quase instantâneas e em tempo real.

    O melhor é manter um ciclo curto: uma observação visual, uma edição pontual, uma verificação no navegador e, depois, a próxima observação.

    Você pode usar o modelo Codex Spark para esta tarefa. Ele está disponível nos planos Pro.

    Escolha seu modelo

    Para iterar rapidamente na interface, comece com gpt-5.3-codex-spark, se tiver acesso a ele. Ele é menos capaz do que nossos modelos de uso geral, mas foi projetado para iterações de código em tempo real. Se não tiver acesso a ele, use gpt-5.6 com o esforço de raciocínio definido como medium ou low.

    Esse equilíbrio entre capacidade e velocidade é útil para alterações pontuais na interface. Em geral, você não precisa do modelo com o raciocínio mais profundo para mover um botão, ajustar um breakpoint ou alterar o estado de um componente. Você precisa de um modelo que responda rapidamente, entenda o código local, edite o arquivo certo e possa repetir o ciclo sem tornar cada iteração trabalhosa.

    Fluxo de desenvolvimento

    1. Abra o aplicativo existente e exiba a rota ou o componente relevante.
    2. Destaque o chat ativo do Codex em uma janela flutuante e mantenha-a perto do navegador, do editor ou da prévia do design enquanto trabalha.
    3. Peça ao Codex uma alteração específica na interface por vez. Inclua a rota, o viewport, a captura de tela atual, a captura de tela desejada ou a observação exata sobre o produto, se houver.
    4. Peça ao Codex que inspecione a implementação atual, faça a menor alteração justificável e preserve os componentes, tokens, primitivas de layout e fluxo de dados já existentes no aplicativo.
    5. Revise o resultado e envie o próximo ajuste pontual no mesmo chat.

    Escreva prompts curtos

    Os prompts para alterações pontuais na interface devem ser diretos e bem delimitados. Um bom prompt identifica a área da interface, a alteração desejada e a validação esperada.

    Se o resultado estiver quase certo, mantenha o mesmo nível de especificidade no prompt de acompanhamento:

    A alteração está quase certa. Mantenha a implementação, mas ajuste apenas este detalhe: [describe the remaining mismatch] Antes de parar, verifique novamente a mesma rota e o mesmo viewport.

    Quando reduzir o ritmo

    Não continue com o ciclo rápido se a tarefa deixar de ser pontual. Mude para um modelo mais potente e um prompt mais elaborado quando a alteração exigir uma refatoração ampla, uma nova primitiva do sistema de design, um comportamento de acessibilidade não trivial ou uma decisão de produto que afete mais de uma tela.

    A iteração rápida na interface funciona melhor quando o Codex ajusta uma área que já conhece, em vez de reformular o aplicativo do zero.

    Casos de uso relacionados