Introdução

O Codex pode usar capturas de tela, uma descrição breve do design ou algumas referências visuais para criar uma interface responsiva que siga os padrões já adotados no projeto.

Com a habilidade do Playwright, o Codex pode abrir o aplicativo em um navegador real, comparar a implementação com as capturas de tela de referência para cada tamanho de tela e ajustar o layout ou o comportamento até que o resultado se aproxime do esperado.

Comece pelas referências

Mostre ao Codex as referências que melhor representam a interface que você quer criar. Uma única captura de tela pode bastar para uma tarefa pontual. Para orientar melhor a implementação, mostre os layouts para computadores e dispositivos móveis, a aparência dos elementos quando o ponteiro está sobre eles ou quando estão selecionados e, quando relevante, as telas sem conteúdo ou em carregamento.

Você pode usar referências mesmo que o design ainda esteja em esboço. Basta que elas mostrem a hierarquia visual, o espaçamento e o estilo pretendido com clareza suficiente para que o Codex saiba o que implementar.

Dê instruções específicas

Quanto mais precisão você tiver ao descrever os padrões de interação esperados e o estilo desejado, melhor será o resultado. O modelo tende a recorrer aos padrões e estilos mais comuns. Se você quiser algo diferente e isso não estiver claro nas referências, a interface pode ficar genérica. Quanto mais referências visuais ou instruções específicas você fornecer, maior será a chance de obter uma interface que se destaque.

Prepare o sistema de design

O Codex funciona melhor quando o repositório em que você vai trabalhar já tem uma camada de componentes bem definida. Ele pode reutilizar automaticamente os componentes e o sistema de design existentes, sem precisar recriá-los do zero.

Se necessário, por exemplo, se o projeto usar um conjunto de tecnologias fora do padrão, diga ao Codex quais componentes primitivos reutilizar, onde encontrar os tokens de design e quais botões, campos de entrada, cartões, estilos tipográficos e ícones servem de referência no repositório.

Se você partir de uma base de código existente, o Codex provavelmente entenderá por conta própria como usar os componentes e o sistema de design. Se estiver começando do zero, vale a pena explicar como usá-los.

Peça ao Codex que use as capturas de tela como referência visual e implemente o design com os utilitários, os wrappers de componentes, o sistema de cores, a escala tipográfica e os tokens de espaçamento do projeto. A implementação também deve seguir os padrões de roteamento, gerenciamento de estado e busca de dados do projeto.

Use o Playwright

O Playwright ajuda o Codex a refinar a interface. Com ele, o Codex pode abrir o aplicativo em um navegador real, comparar a implementação com as capturas de tela que você forneceu e ajustar o layout ou o comportamento.

O Codex pode redimensionar a janela do navegador para simular diferentes tamanhos de tela e verificar o layout em diferentes pontos de quebra.

Verifique se a habilidade interativa do Playwright está habilitada no Codex. Para saber mais, consulte a documentação sobre habilidades.

Refine a implementação

A primeira versão já deve se aproximar do que aparece nas capturas de tela. Layouts ou interações complexas e interfaces com muitas animações podem exigir algumas rodadas de ajustes.

Peça ao Codex que, além de verificar se a página compila, compare a implementação com as capturas de tela. Se houver divergências, ele deve priorizar os tokens do sistema de design do repositório e fazer apenas os ajustes mínimos de espaçamento ou tamanho necessários para preservar a aparência geral do design.

Use outras capturas de tela ou observações breves para esclarecer estados que uma única imagem não mostra bem.

Sugestão de prompt para a próxima rodada