Criando designs de frontend sofisticados com o GPT-5.4

• A OpenAI publicou técnicas práticas de prompting e guias de design para elevar as capacidades de desenvolvimento frontend do GPT-5.4
• Compreensão de imagens, completude funcional e capacidade de uso do computador (Computer Use) são os principais eixos de melhoria, permitindo gerar resultados visualmente mais sofisticados e ambiciosos em comparação com modelos anteriores
• O texto aponta que, quando o prompt é ambíguo, o modelo tende a regredir para padrões de alta frequência dos dados de treino e ficar preso a designs genéricos, e apresenta técnicas concretas para superar isso
• Enfatiza quatro dicas práticas centrais: definir o sistema de design, fornecer referências visuais, estruturar a narrativa e configurar um baixo nível de raciocínio
• Um pacote de prompts frontend-skill foi disponibilizado como open source, pronto para uso imediato em agentes de programação como o Codex

---

Melhorias no modelo

• O GPT-5.4 se concentra em três melhorias práticas no trabalho de frontend:
  • Reforço da compreensão de imagens
  • Geração de apps/sites mais completos e refinados
  • Melhora na capacidade de usar ferramentas para inspecionar, testar e validar o próprio trabalho

• Compreensão de imagens e uso de ferramentas

  • Foi treinado para usar nativamente busca de imagens e ferramentas de geração de imagens, realizando raciocínio visual diretamente durante o processo de design
  • Para obter os melhores resultados, recomenda-se instruir o modelo a gerar primeiro um moodboard ou várias opções visuais antes de escolher os assets finais
  • É possível orientá-lo a produzir referências visuais fortes descrevendo explicitamente os atributos que a imagem deve capturar, como estilo, paleta de cores, composição e atmosfera
  • Também é apresentado um padrão de prompt que explicita que o modelo deve priorizar imagens enviadas ou pré-geradas por padrão e, na ausência delas, criar novos visuais com a ferramenta de geração de imagens

• Melhoria na completude funcional

  • Foi treinado para desenvolver apps mais completos e funcionalmente sólidos
  • É mais estável em tarefas longas e consegue implementar em 1 a 2 turnos experiências antes impossíveis, como jogos ou experiências de usuário complexas

• Computer Use e validação

  • O GPT-5.4 é o primeiro modelo principal treinado para Computer Use, podendo navegar interfaces de forma nativa
  • Em conjunto com o Playwright, pode inspecionar páginas renderizadas, testar múltiplos viewports, percorrer fluxos do app e detectar problemas de estado e navegação
  • Ao fornecer ferramentas/habilidades do Playwright, a chance de o GPT-5.4 gerar interfaces sofisticadas e funcionalmente completas aumenta bastante
  • Graças à melhora na compreensão de imagens, também consegue validar visualmente os resultados e verificar se correspondem à UI de referência fornecida

Início rápido com dicas práticas

• Se você adotar apenas algumas práticas, comece por estas quatro:
  • Comece com baixo nível de raciocínio (low reasoning level)
  • Defina antecipadamente o sistema de design e as restrições, como tipografia, paleta de cores e layout
  • Forneça referências visuais ou moodboards, como screenshots anexados, para criar guardrails visuais
  • Defina previamente a narrativa ou estratégia de conteúdo para orientar a geração de conteúdo pelo modelo
• Prompt inicial
  • When doing frontend design tasks, avoid generic, overbuilt layouts.
  • Ao realizar tarefas de design frontend, evite layouts genéricos e excessivamente elaborados
  • Use these hard rules:
  • Aplique estas regras rígidas:
    • One composition: The first viewport must read as one composition, not a dashboard (unless it's a dashboard).
    • Uma composição: o primeiro viewport deve ser lido como uma única composição, não como um dashboard (a menos que seja um dashboard)
    • Brand first: On branded pages, the brand or product name must be a hero-level signal, not just nav text or an eyebrow. No headline should overpower the brand.
    • Marca em primeiro lugar: em páginas de marca, o nome da marca/produto deve ser um sinal de nível hero, e não apenas texto de navegação ou um eyebrow. Nenhum headline deve se sobrepor à marca
    • Brand test: If the first viewport could belong to another brand after removing the nav, the branding is too weak.
    • Teste de marca: se, ao remover a navegação, o primeiro viewport puder pertencer a outra marca, o branding está fraco demais
    • Typography: Use expressive, purposeful fonts and avoid default stacks (Inter, Roboto, Arial, system).
    • Tipografia: use fontes expressivas e intencionais e evite stacks padrão (Inter, Roboto, Arial, system)
    • Background: Don't rely on flat, single-color backgrounds; use gradients, images, or subtle patterns to build atmosphere.
    • Fundo: não dependa de fundos chapados de uma única cor; use gradientes, imagens ou padrões sutis para construir atmosfera
    • Full-bleed hero only: On landing pages and promotional surfaces, the hero image should be a dominant edge-to-edge visual plane or background by default. Do not use inset hero images, side-panel hero images, rounded media cards, tiled collages, or floating image blocks unless the existing design system clearly requires it.
    • Apenas hero full-bleed: em landing pages e superfícies promocionais, a imagem principal deve ser, por padrão, um plano visual dominante de ponta a ponta (edge-to-edge) ou um fundo. Não use imagens hero em inset, hero em painel lateral, cartões de mídia arredondados, colagens em mosaico ou blocos de imagem flutuantes, a menos que o sistema de design existente exija isso claramente
    • Hero budget: The first viewport should usually contain only the brand, one headline, one short supporting sentence, one CTA group, and one dominant image. Do not place stats, schedules, event listings, address blocks, promos, "this week" callouts, metadata rows, or secondary marketing content in the first viewport.
    • Orçamento do hero: o primeiro viewport normalmente deve conter apenas a marca, um headline, uma frase curta de apoio, um grupo de CTA e uma imagem dominante. Não coloque estatísticas, agendas, listas de eventos, blocos de endereço, promos, destaques de “esta semana”, linhas de metadados ou conteúdo de marketing secundário no primeiro viewport
    • No hero overlays: Do not place detached labels, floating badges, promo stickers, info chips, or callout boxes on top of hero media.
    • Sem overlays no hero: não coloque rótulos soltos, badges flutuantes, adesivos promocionais, chips informativos ou caixas de callout sobre a mídia do hero
    • Cards: Default: no cards. Never use cards in the hero. Cards are allowed only when they are the container for a user interaction. If removing a border, shadow, background, or radius does not hurt interaction or understanding, it should not be a card.
    • Cards: padrão = sem cards. Nunca use cards no hero. Cards só são permitidos quando são o contêiner de uma interação do usuário. Se remover borda, sombra, fundo ou arredondamento não prejudicar a interação ou o entendimento, então aquilo não deve ser um card
    • One job per section: Each section should have one purpose, one headline, and usually one short supporting sentence.
    • Uma função por seção: cada seção deve ter um propósito, um headline e, normalmente, uma frase curta de apoio
    • Real visual anchor: Imagery should show the product, place, atmosphere, or context. Decorative gradients and abstract backgrounds do not count as the main visual idea.
    • Âncora visual real: as imagens devem mostrar o produto, o lugar, a atmosfera ou o contexto. Gradientes decorativos e fundos abstratos não contam como ideia visual principal
    • Reduce clutter: Avoid pill clusters, stat strips, icon rows, boxed promos, schedule snippets, and multiple competing text blocks.
    • Reduza a poluição visual: evite grupos de pills, faixas de estatísticas, linhas de ícones, promos em caixa, trechos de agenda e múltiplos blocos de texto competindo entre si
    • Use motion to create presence and hierarchy, not noise. Ship at least 2-3 intentional motions for visually led work.
    • Use motion para criar presença e hierarquia, não ruído. Entregue pelo menos 2 a 3 motions intencionais em trabalhos guiados pelo visual
    • Color & Look: Choose a clear visual direction; define CSS variables; avoid purple-on-white defaults. No purple bias or dark mode bias.
    • Cor e visual: escolha uma direção visual clara; defina variáveis CSS; evite o padrão roxo sobre branco. Sem viés para roxo nem para dark mode
    • Ensure the page loads properly on both desktop and mobile.
    • Garanta que a página carregue corretamente tanto no desktop quanto no mobile
    • For React code, prefer modern patterns including useEffectEvent, startTransition, and useDeferredValue when appropriate if used by the team. Do not add useMemo/useCallback by default unless already used; follow the repo's React Compiler guidance.
    • Para código React, prefira padrões modernos como useEffectEvent, startTransition e useDeferredValue quando fizer sentido e se forem usados pela equipe. Não adicione useMemo/useCallback por padrão, a menos que já estejam em uso; siga as orientações do React Compiler no repositório
    • Exception: If working within an existing website or design system, preserve the established patterns, structure, and visual language.
    • Exceção: ao trabalhar dentro de um site ou sistema de design existente, preserve os padrões, a estrutura e a linguagem visual já estabelecidos

Técnicas para um design melhor

• Comece pelos princípios de design

  • Defina restrições como um único headline H1, no máximo 6 seções, no máximo 2 fontes, uma cor de destaque e um CTA principal acima da dobra

• Forneça referências visuais

  • Screenshots de referência ou moodboards ajudam a inferir ritmo de layout, escala tipográfica, sistema de espaçamento e forma de tratar imagens
  • O texto inclui um exemplo em que o GPT-5.4 gera seu próprio moodboard para revisão do usuário (inspirado na cultura cafeeira de NYC e na estética Y2K)

• Estruture a página como uma narrativa

  • Estrutura comum de página de marketing:
    • Hero — estabelece identidade e promessa
    • Supporting imagery — expressa contexto ou ambiente
    • Product detail — explica a proposta
    • Social proof — constrói credibilidade
    • Final CTA — converte interesse em ação

• Instrua o cumprimento do sistema de design

  • Incentive o estabelecimento de um sistema de design claro logo no início do build
  • Defina os principais design tokens: background, surface, primary text, muted text, accent
  • Defina os papéis tipográficos: display, headline, body, caption
  • Na maioria dos projetos web, começar com a stack React e Tailwind é eficaz, e o GPT-5.4 apresenta desempenho especialmente forte com essas ferramentas
  • Ao trabalhar com animações, overlays e camadas decorativas, recomenda-se incluir orientações de comportamento de layout seguro para que elementos fixos/flutuantes de UI não se sobreponham ao conteúdo principal, como texto e botões

• Reduza o nível de raciocínio

  • Em sites simples, mais raciocínio nem sempre significa resultado melhor
  • Níveis low e medium de raciocínio frequentemente produzem resultados de frontend mais fortes
  • Isso permite que o modelo seja rápido, focado e menos propenso a pensar demais, ao mesmo tempo em que preserva espaço para designs mais ambiciosos

• Apoie o design em conteúdo real

  • Fornecer texto real, contexto do produto e objetivos claros do projeto é uma das formas mais simples de melhorar os resultados de frontend
  • Esse contexto ajuda a escolher a estrutura correta do site, construir uma narrativa mais clara por seção e escrever mensagens mais convincentes em vez de placeholders genéricos

Pacote de prompts Frontend Skill

• Para ajudar no uso do GPT-5.4 em tarefas gerais de frontend, a OpenAI publicou no GitHub o [frontend-skill](https://github.com/openai/skills/…) dedicado
• Ele fornece orientações fortes sobre estrutura, gosto e padrões de interação, gerando por padrão designs mais sofisticados, intencionais e agradáveis
• Pode ser instalado no app Codex com o comando $skill-installer frontend-skill

• Estrutura central do Frontend Skill

  • Working Model: antes de construir, escreva primeiro três coisas — tese visual (clima, materialidade, energia), plano de conteúdo (hero, suporte, detalhe, CTA final) e tese de interação (2 a 3 ideias de motion)
  • Beautiful Defaults: comece pela composição, não pelos componentes. Prefira hero full-bleed, coloque marca/nome do produto como o maior texto, faça o copy ser escaneável em poucos segundos e adote layout sem cards como padrão
  • Sequência padrão de Landing Pages: Hero → Support → Detail → Final CTA
    • Regras do hero: uma composição, imagem full-bleed, marca em primeiro lugar, sem cards, faixas de estatísticas ou nuvem de logos no hero
    • Orçamento do viewport: se houver header fixo, ele deve caber junto com o hero dentro do viewport inicial
  • Apps: o padrão é a contenção no estilo Linear — hierarquia de superfícies discreta, tipografia e espaçamento fortes, poucas cores e cards apenas quando houver interação
  • Imagery: as imagens devem cumprir um papel narrativo, com preferência por fotos com sensação de realidade em vez de gradientes abstratos ou objetos 3D falsos. É essencial haver uma âncora visual real no primeiro viewport
  • Copy: escreva na linguagem do produto, não em comentário de design. O headline deve transmitir significado e, se a página melhorar ao remover 30% do copy, continue removendo
  • Utility Copy: em dashboards, apps e ferramentas de administração, o padrão deve ser copy utilitário em vez de marketing — priorize direção, estado e ação
  • Motion: motion para presença e hierarquia, não para ruído. Implemente no mínimo 2 a 3 motions intencionais, como sequência de entrada do hero, efeitos ligados ao scroll e transições de hover/reveal. Preferência por Framer Motion
  • Hard Rules: sem cards por padrão, uma ideia dominante por seção, no máximo 2 fontes, no máximo 1 cor de destaque e nada de copy filler
  • Litmus Checks: verifique se a marca está clara na primeira tela, se há uma âncora visual forte, se é possível entender a página só pelo headline, se cada seção cumpre apenas um papel, se os cards são realmente necessários e se o motion melhora a hierarquia

Resultados de exemplo

• São apresentados exemplos gerados com o Frontend Skill em três categorias: landing page, jogo e dashboard (cada uma com vários demos em vídeo)

Pontos principais

• O GPT-5.4 pode gerar interfaces frontend de alta qualidade quando o prompt inclui restrições claras de design, referências visuais, narrativa estruturada e um sistema de design definido
• Projetos totalmente gerados apenas com o GPT-5.4 em agentes de programação como o Codex podem ser enviados para a galeria da OpenAI para showcase

[ndrgrd]

Sinceramente, quando você olha para os frontends dos serviços de LLM, dá vontade de pensar “que porcaria é essa?” de tão lentos, limitados em recursos e incômodos de usar, então quando vejo um texto desses só acho engraçado.

[click]

Eu uso por causa do ChatGPT Pro no KakaoTalk, mas acho que todos os designs de front-end que o GPT cria são meio sem graça.

[slowandsnow]

Não use gpt de jeito nenhum no frontend. É péssimo. Compare com o opus usando o mesmo prompt.

[frogbam]

Como o design de front-end costuma ficar bem ruim com o GPT, pedi para outro modelo fazer, então espero que com este o resultado saia um pouco melhor.

[angrybird0]

Fico curioso para saber qual seria a diferença em relação ao frontend-design do Claude.
Acho que é difícil comparar em termos de “quem faz melhor design de frontend”, mas o fato importante deve ser que isso também apareceu no Codex, certo?