Criando front-ends que encantam com o GPT-5.4

O GPT-5.4 desenvolve para a Web melhor que seus antecessores, gerando front-ends visualmente mais atraentes e ambiciosos. Treinamos o GPT-5.4 com foco especial no aprimoramento das capacidades de interface e no uso de imagens. Com a orientação certa, o modelo pode produzir front-ends prontos para produção, com detalhes sutis, interações bem elaboradas e belas imagens.

O design para a Web oferece uma grande variedade de possibilidades. Um ótimo design equilibra moderação e criatividade, recorrendo a padrões que resistiram ao tempo e, ao mesmo tempo, trazendo algo novo. O GPT-5.4 aprendeu esse amplo repertório de abordagens de design e compreende muitas formas diferentes de construir um site.

Quando os prompts são pouco específicos, os modelos costumam recorrer a padrões frequentes nos dados de treinamento. Alguns são convenções comprovadas, mas muitos são apenas hábitos excessivamente representados que queremos evitar. O resultado geralmente é plausível e funcional, mas pode acabar com uma estrutura genérica, uma hierarquia visual fraca e escolhas de design que ficam aquém do que imaginamos.

Este guia explica técnicas práticas para orientar o GPT-5.4 a criar os designs que você imagina.

Melhorias no modelo

Embora o GPT-5.4 traga melhorias em diversos aspectos, no desenvolvimento de front-end focamos em três ganhos práticos:

• melhor compreensão de imagens ao longo de todo o processo de design
• aplicativos e sites com funcionalidades mais completas
• melhor uso de ferramentas para inspecionar, testar e verificar o próprio trabalho

Compreensão de imagens e uso de ferramentas

O GPT-5.4 foi treinado para usar ferramentas de pesquisa e geração de imagens de forma nativa, o que permite incorporar raciocínio visual diretamente ao processo de design. Para obter os melhores resultados, instrua o modelo a gerar primeiro um painel de referências ou várias opções visuais antes de selecionar os recursos finais.

Você pode orientar o modelo a buscar boas referências visuais descrevendo explicitamente os atributos que as imagens devem transmitir, como estilo, paleta de cores, composição ou atmosfera. Inclua também instruções no prompt para orientar o modelo a reutilizar imagens geradas anteriormente, chamar a ferramenta de geração de imagens para criar novos elementos visuais ou usar imagens externas específicas como referência quando necessário.

Default to using any uploaded/pre-generated images. Otherwise use the image generation tool to create visually stunning image artifacts. Do not reference or link to web images unless the user explicitly asks for them.

Melhorias de funcionalidade

O modelo foi treinado para desenvolver aplicativos mais completos e com funcionamento mais sólido. Você pode esperar mais confiabilidade em tarefas de longa duração. Jogos e experiências de uso complexas que antes pareciam impossíveis agora são realidade em uma ou duas interações.

Uso do computador e verificação

O GPT-5.4 é nosso primeiro modelo da linha principal treinado para uso do computador. Ele consegue navegar por interfaces de forma nativa e, em conjunto com ferramentas como o Playwright, inspecionar o próprio trabalho, validar comportamentos e refinar implementações de forma iterativa, permitindo fluxos de trabalho de desenvolvimento mais longos e autônomos.

Assista ao nosso vídeo de lançamento para ver essas capacidades em ação.

O Playwright é especialmente útil para o desenvolvimento de front-end. Ele permite que o modelo inspecione páginas renderizadas, teste diferentes tamanhos de área de visualização, percorra fluxos do aplicativo e detecte problemas de estado ou navegação. Disponibilizar uma ferramenta ou habilidade do Playwright aumenta significativamente a probabilidade de o GPT-5.4 produzir interfaces refinadas e com funcionalidades completas. Com a melhor compreensão de imagens, o Playwright também oferece ao modelo uma forma de verificar visualmente o próprio trabalho e conferir se corresponde à interface de referência, quando fornecida.

Início rápido com dicas práticas

Se você for adotar apenas algumas práticas deste documento, comece por estas:

1. Selecione um nível de raciocínio baixo para começar.
2. Defina de antemão seu sistema de design e suas restrições, como tipografia, paleta de cores e layout.
3. Forneça referências visuais ou um painel de referências, por exemplo, anexando uma captura de tela, para estabelecer limites visuais para o modelo.
4. Defina de antemão uma narrativa ou estratégia de conteúdo para orientar a criação de conteúdo pelo modelo.

Aqui está um prompt para começar.

## Frontend tasks

When doing frontend design tasks, avoid generic, overbuilt layouts.

**Use these hard rules:**
- One composition: The first viewport must read as one composition, not a dashboard (unless it's a 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.
- Brand test: If the first viewport could belong to another brand after removing the nav, the branding is too weak.
- Typography: Use expressive, purposeful fonts and avoid default stacks (Inter, Roboto, Arial, system).
- Background: Don't rely on flat, single-color backgrounds; use gradients, images, or subtle patterns to build atmosphere.
- 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.
- 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.
- No hero overlays: Do not place detached labels, floating badges, promo stickers, info chips, or callout boxes on top of hero media.
- 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.
- One job per section: Each section should have one purpose, one headline, and usually one short supporting sentence.
- 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.
- Reduce clutter: Avoid pill clusters, stat strips, icon rows, boxed promos, schedule snippets, and multiple competing text blocks.
- Use motion to create presence and hierarchy, not noise. Ship at least 2-3 intentional motions for visually led work.
- Color & Look: Choose a clear visual direction; define CSS variables; avoid purple-on-white defaults. No purple bias or dark mode bias.
- Ensure the page loads properly on both desktop and 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.

Exception: If working within an existing website or design system, preserve the established patterns, structure, and visual language.

Técnicas para criar designs melhores

Comece pelos princípios de design

Defina restrições como um único título H1, no máximo seis seções, até duas famílias tipográficas, uma cor de destaque e uma chamada para ação (CTA) principal visível sem rolar a página.

Forneça referências visuais

Capturas de tela de referência ou painéis de referências ajudam o modelo a inferir o ritmo do layout, a escala tipográfica, os sistemas de espaçamento e o tratamento das imagens. Veja abaixo um exemplo em que o GPT-5.4 gera seu próprio painel de referências para o usuário revisar.

Estruture a página como uma narrativa

Estrutura típica de uma página de marketing:

1. Seção de abertura — estabeleça a identidade e a promessa
2. Imagens de apoio — mostre o contexto ou o ambiente
3. Detalhes do produto — explique o que é oferecido
4. Prova social — estabeleça credibilidade
5. CTA final — transforme interesse em ação

Instrua o modelo a seguir o sistema de design

Incentive o modelo a estabelecer um sistema de design claro logo no início do desenvolvimento. Defina tokens de design fundamentais, como background, surface, primary text, muted text e accent, além de funções tipográficas como display, headline, body e caption. Essa estrutura ajuda o modelo a produzir padrões de interface consistentes e escaláveis em todo o aplicativo.

Para a maioria dos projetos Web, começar com uma combinação conhecida de tecnologias, como React e Tailwind , funciona bem. O GPT-5.4 tem um desempenho especialmente bom com essas ferramentas, facilitando iterações rápidas e resultados refinados.

Movimento e elementos de interface em camadas podem trazer complexidade, especialmente quando componentes fixos ou flutuantes interagem com o conteúdo principal. Ao trabalhar com animações, sobreposições ou camadas decorativas, vale incluir orientações que ajudem a manter o bom funcionamento do layout. Por exemplo:

Keep fixed or floating UI elements from overlapping text, buttons, or other key content across screen sizes. Place them in safe areas, behind primary content where appropriate, and maintain sufficient spacing.

Reduza o nível de raciocínio

Para sites mais simples, mais raciocínio nem sempre é melhor. Na prática, níveis de raciocínio baixo e médio costumam gerar melhores resultados de front-end, ajudando o modelo a se manter rápido, focado e menos propenso a analisar em excesso, sem impedir que você aumente o nível de raciocínio para designs mais ambiciosos.

Baseie o design em conteúdo real

Fornecer ao modelo textos reais, contexto sobre o produto ou um objetivo claro para o projeto é uma das formas mais simples de melhorar os resultados de front-end. Esse contexto ajuda o modelo a escolher a estrutura adequada para o site, criar narrativas mais claras em cada seção e escrever mensagens mais convincentes, em vez de recorrer a textos genéricos de preenchimento.

Reunindo tudo com a habilidade de front-end

Para ajudar as pessoas a aproveitar ao máximo o GPT-5.4 em tarefas gerais de front-end, também preparamos uma habilidade específica, a frontend-skill, que você encontra abaixo. Ela oferece ao modelo orientações mais precisas sobre estrutura, senso estético e padrões de interação, ajudando a produzir designs mais refinados, bem pensados e encantadores desde o início.

---
name: frontend-skill
description: Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
---

# Frontend skill

Use this skill when the quality of the work depends on art direction, hierarchy, restraint, imagery, and motion rather than component count.

Goal: ship interfaces that feel deliberate, premium, and current. Default toward award-level composition: one big idea, strong imagery, sparse copy, rigorous spacing, and a small number of memorable motions.

## Working Model

Before building, write three things:

- visual thesis: one sentence describing mood, material, and energy
- content plan: hero, support, detail, final CTA
- interaction thesis: 2-3 motion ideas that change the feel of the page

Each section gets one job, one dominant visual idea, and one primary takeaway or action.

## Beautiful Defaults

- Start with composition, not components.
- Prefer a full-bleed hero or full-canvas visual anchor.
- Make the brand or product name the loudest text.
- Keep copy short enough to scan in seconds.
- Use whitespace, alignment, scale, cropping, and contrast before adding chrome.
- Limit the system: two typefaces max, one accent color by default.
- Default to cardless layouts. Use sections, columns, dividers, lists, and media blocks instead.
- Treat the first viewport as a poster, not a document.

## Landing Pages

Default sequence:

1. Hero: brand or product, promise, CTA, and one dominant visual
2. Support: one concrete feature, offer, or proof point
3. Detail: atmosphere, workflow, product depth, or story
4. Final CTA: convert, start, visit, or contact

Hero rules:

- One composition only.
- Full-bleed image or dominant visual plane.
- Canonical full-bleed rule: on branded landing pages, the hero itself must run edge-to-edge with no inherited page gutters, framed container, or shared max-width; constrain only the inner text/action column.
- Brand first, headline second, body third, CTA fourth.
- No hero cards, stat strips, logo clouds, pill soup, or floating dashboards by default.
- Keep headlines to roughly 2-3 lines on desktop and readable in one glance on mobile.
- Keep the text column narrow and anchored to a calm area of the image.
- All text over imagery must maintain strong contrast and clear tap targets.

If the first viewport still works after removing the image, the image is too weak. If the brand disappears after hiding the nav, the hierarchy is too weak.

Viewport budget:

- If the first screen includes a sticky/fixed header, that header counts against the hero. The combined header + hero content must fit within the initial viewport at common desktop and mobile sizes.
- When using `100vh`/`100svh` heroes, subtract persistent UI chrome (`calc(100svh - header-height)`) or overlay the header instead of stacking it in normal flow.

## Apps

Default to Linear-style restraint:

- calm surface hierarchy
- strong typography and spacing
- few colors
- dense but readable information
- minimal chrome
- cards only when the card is the interaction

For app UI, organize around:

- primary workspace
- navigation
- secondary context or inspector
- one clear accent for action or state

Avoid:

- dashboard-card mosaics
- thick borders on every region
- decorative gradients behind routine product UI
- multiple competing accent colors
- ornamental icons that do not improve scanning

If a panel can become plain layout without losing meaning, remove the card treatment.

## Imagery

Imagery must do narrative work.

- Use at least one strong, real-looking image for brands, venues, editorial pages, and lifestyle products.
- Prefer in-situ photography over abstract gradients or fake 3D objects.
- Choose or crop images with a stable tonal area for text.
- Do not use images with embedded signage, logos, or typographic clutter fighting the UI.
- Do not generate images with built-in UI frames, splits, cards, or panels.
- If multiple moments are needed, use multiple images, not one collage.

The first viewport needs a real visual anchor. Decorative texture is not enough.

## Copy

- Write in product language, not design commentary.
- Let the headline carry the meaning.
- Supporting copy should usually be one short sentence.
- Cut repetition between sections.
- do not include prompt language or design commentary into the UI
- Give every section one responsibility: explain, prove, deepen, or convert.

If deleting 30 percent of the copy improves the page, keep deleting.

## Utility Copy For Product UI

When the work is a dashboard, app surface, admin tool, or operational workspace, default to utility copy over marketing copy.

- Prioritize orientation, status, and action over promise, mood, or brand voice.
- Start with the working surface itself: KPIs, charts, filters, tables, status, or task context. Do not introduce a hero section unless the user explicitly asks for one.
- Section headings should say what the area is or what the user can do there.
- Good: "Selected KPIs", "Plan status", "Search metrics", "Top segments", "Last sync".
- Avoid aspirational hero lines, metaphors, campaign-style language, and executive-summary banners on product surfaces unless specifically requested.
- Supporting text should explain scope, behavior, freshness, or decision value in one sentence.
- If a sentence could appear in a homepage hero or ad, rewrite it until it sounds like product UI.
- If a section does not help someone operate, monitor, or decide, remove it.
- Litmus check: if an operator scans only headings, labels, and numbers, can they understand the page immediately?

## Motion

Use motion to create presence and hierarchy, not noise.

Ship at least 2-3 intentional motions for visually led work:

- one entrance sequence in the hero
- one scroll-linked, sticky, or depth effect
- one hover, reveal, or layout transition that sharpens affordance

Prefer Framer Motion when available for:

- section reveals
- shared layout transitions
- scroll-linked opacity, translate, or scale shifts
- sticky storytelling
- carousels that advance narrative, not just fill space
- menus, drawers, and modal presence effects

Motion rules:

- noticeable in a quick recording
- smooth on mobile
- fast and restrained
- consistent across the page
- removed if ornamental only

## Hard Rules

- No cards by default.
- No hero cards by default.
- No boxed or center-column hero when the brief calls for full bleed.
- No more than one dominant idea per section.
- No section should need many tiny UI devices to explain itself.
- No headline should overpower the brand on branded pages.
- No filler copy.
- No split-screen hero unless text sits on a calm, unified side.
- No more than two typefaces without a clear reason.
- No more than one accent color unless the product already has a strong system.

## Reject These Failures

- Generic SaaS card grid as the first impression
- Beautiful image with weak brand presence
- Strong headline with no clear action
- Busy imagery behind text
- Sections that repeat the same mood statement
- Carousel with no narrative purpose
- App UI made of stacked cards instead of layout

## Litmus Checks

- Is the brand or product unmistakable in the first screen?
- Is there one strong visual anchor?
- Can the page be understood by scanning headlines only?
- Does each section have one job?
- Are cards actually necessary?
- Does motion improve hierarchy or atmosphere?
- Would the design still feel premium if all decorative shadows were removed?

Instale a frontend-skill executando o seguinte comando no aplicativo Codex:

$skill-installer frontend-skill

Veja alguns exemplos de sites gerados com a ajuda da habilidade de design de front-end.

Páginas de destino

Jogos

Painéis

Principal conclusão

O GPT-5.4 pode gerar interfaces de front-end de alta qualidade quando os prompts apresentam restrições claras de design, referências visuais, narrativas estruturadas e sistemas de design definidos.

Esperamos que essas técnicas ajudem você a criar aplicativos com mais personalidade e um design bem elaborado.

Se quiser compartilhar um projeto que você gerou inteiramente com o GPT-5.4 e um agente de programação como o Codex, envie seu aplicativo para ser exibido em nossa galeria.