Este artigo foi escrito em 6 de novembro de 2026.
As ferramentas de IA mudam rapidamente. A ossatura de uma página, não. Cabeçalho (header), hero (hero), seção (section), rodapé (footer), navegação (navigation) e cartão (card): dominar esses seis conceitos é o suficiente para estruturar uma primeira tela com clareza. Os menus das ferramentas de criação vão mudar de lugar; por isso, encare este texto como o mapa de uma página, e não como um guia de botões.
Antes do acabamento visual, uma página é uma sequência de papéis. Há um bloco que diz onde você está; outro que apresenta o propósito do site; um que organiza as informações em tópicos; um que aponta para os próximos caminhos e outro que fecha a página. Quando esses papéis não recebem nomes precisos no prompt, os modelos de IA tendem a criar um cartaz: uma imagem gigante, texto flutuando por cima e nenhuma forma de rolar para baixo. O resultado parece pronto à primeira vista, mas é impossível de usar no celular.
Defina a função dos blocos em inglês dentro da instrução técnica e explique o conteúdo no seu idioma logo abaixo. Se a sua língua já tem uma palavra comum e bem aceita, use-a acompanhada do termo em inglês entre parênteses na primeira menção. Se não houver um termo exato consolidado, não tente inventar um: uma breve explicação no seu idioma junto ao substantivo em inglês resolve perfeitamente.
Seis lugares na ordem em que o usuário os encontra
O cabeçalho (header) é a faixa fina no topo da tela. Ele reúne o nome do projeto e os acessos principais de saída. Não é o espaço para colocar tudo o que é importante; se o cabeçalho fica lotado, a página perde o topo e vira apenas uma aglomeração de links.
O hero (hero) é a primeira área de destaque. Ele traz uma mensagem principal, uma frase de apoio e uma ação clara. Um posto de saúde pode informar as especialidades atendidas e oferecer a opção “Agendar consulta”. Uma loja pode destacar o produto do dia com a ação “Ver catálogo”. Um hero que tenta abraçar todo o negócio vira um panfleto colado no topo; o usuário no celular acaba ignorando o bloco e nunca encontra os preços ou o endereço.
Uma seção (section) aborda um tema específico acompanhado de um título: horários, valores, equipe ou dúvidas frequentes. É o que permite escanear uma página longa rapidamente. Ao pedir seções à IA, especifique a dúvida real do visitante em vez de usar a palavra de forma genérica. Pedir “Uma seção chamada Horários, com os dias escritos em texto e não em uma imagem” funciona em qualquer idioma. Já colocar uma foto da tabela de horários impede a tradução e dificulta a leitura.
O rodapé (footer) representa o encerramento. Ele traz o endereço, os dados de contato e a confirmação dos horários. Quando as pessoas estão perdidas em um site, costumam rolar até o final de propósito. Se o rodapé for apenas uma faixa enfeitada sem dados úteis, a experiência falha.
A navegação (navigation) é a lista curta de links, geralmente situada no cabeçalho. Exibir mais de cinco itens em um celular é excessivo. Se houver mais opções, elas devem ficar atrás de um único menu, e não espremidas em uma linha de palavras minúsculas. Evite pedir uma navegação que repita todos os títulos da página; isso seria um sumário fingindo ser menu.
Um cartão (card) é um bloco repetitivo projetado para exibir informações do mesmo tipo: serviços, aulas ou produtos. Cada cartão mantém a mesma estrutura interna: uma imagem ou ícone se houver, um título, uma frase curta e um botão de ação. Se cada cartão inventa um layout diferente, eles deixam de ser um conjunto coerente e viram vários cartazes soltos.
Os mesmos cartões em duas larguras
Projetar uma página pensando apenas na tela do computador é um erro grave em locais onde o celular é o principal meio de acesso. Por isso, defina a distribuição das colunas no prompt: em telas largas, três cartões em linha; em telas estreitas, um cartão abaixo do outro. As informações dentro do cartão não mudam, apenas a fileira se reorganiza. Isso é um layout responsivo (responsive layout), e trata-se de uma regra de funcionamento, não de um mero gosto estético. Dizer apenas “faça responsivo” dá liberdade para a IA esconder botões essenciais. Já a instrução “três colunas no computador e uma no celular, mantendo a ação visível” garante o resultado correto.
No caso dos tablets, é possível prever uma distribuição intermediária de duas colunas, embora não seja obrigatório. A regra de uma ou três colunas já ensina o conceito fundamental: o conteúdo é uma lista organizada e a fileira horizontal é apenas um proveito da largura da tela.
O cabeçalho fixo (sticky header) — aquele que permanece visível enquanto a página é rolada — é opcional. Ele ajuda quando o menu precisa estar sempre acessível, mas atrapalha se ocupar um terço da tela de um celular pequeno. Peça esse recurso apenas se voltar ao menu for mais importante do que ler o parágrafo seguinte. Se optar por usá-lo, mantenha o termo em inglês “sticky header” e defina a condição: ele deve ser fino e não pode cobrir os títulos principais ao rolar a página.
Uma página que parecia pronta, mas era inutilizável
Uma pequena clínica pediu a uma IA “uma página inicial bonita”. O modelo entregou uma foto alta de um corredor, um slogan flutuando por cima e uma fileira de ícones apagados sem nenhum texto explicativo. No computador da recepção parecia elegante; no celular de quem esperava o ônibus, o slogan cobria a entrada, os ícones se amontoavam de forma ilegível e os horários estavam salvos dentro da própria imagem, impedindo que leitores de tela os lessem ou que navegadores os traduzissem. Nada naquela tela era um cabeçalho (header), um hero (hero), uma seção (section) ou um cartão (card); era só um cartaz que aprendera a rolar.
A segunda instrução nomeou os blocos com precisão e deixou os adjetivos estéticos de fora: cabeçalho com o nome da clínica e três links diretos (consultas, horários e localização); hero com uma frase direta e o botão “Agendar consulta”; três seções escritas em texto simples; um conjunto de cartões para os três tipos de atendimento (três lado a lado no computador e empilhados no celular); e um rodapé com o endereço em texto. A página ganhou uma estrutura clara e funcional, pronta para quem precisa de informações rápidas. A foto do corredor continuou existindo dentro do hero, em um tamanho adequado, sem atrapalhar o conteúdo.
Essa é a transformação que esses seis termos trazem para o trabalho prático. Eles impedem que a IA gasta todo o tempo criando efeitos visuais em vez de estrutura. A estética pode ficar dentro de um bloco bem definido, mas nunca substituir esse bloco. Ao criar prompts no seu idioma, inclua os seis nomes em inglês na ordem técnica e escreva os textos reais da sua organização logo abaixo. A ossatura viaja; o conteúdo permanece onde os leitores estão.
O que isso muda na sua primeira instrução
Uma primeira instrução completa pode ser escrita em apenas um parágrafo técnico:
Build a page with a header (the name and three links), a hero (one sentence and one button), three sections, a row of cards that becomes a single column on a narrow screen, and a footer with the address as text.
Logo abaixo, no seu idioma, detalhe o que estará em cada uma das três seções. O modelo não precisa do seu idioma para posicionar um cabeçalho; você precisa do seu idioma para definir que as seções serão horários, valores e como chegar, em vez de repetir a mesma frase publicitária três vezes.
Essa é a página que quase toda organização realmente precisa. É também a estrutura que a IA vai encher de enfeites desnecessários se você pedir apenas algo “moderno e limpo”. O termo “moderno” não indica uma área física da tela; cabeçalho, hero, seção, rodapé, navegação e cartão indicam. Aprenda esses nomes, cole-os em inglês no prompt e mantenha as informações reais no idioma de quem vai usar a tela.
A próxima decisão não é adicionar outro bloco genérico, mas definir o que acontece quando a página precisa pedir uma resposta ao usuário ou exibir mais dados sem redirecioná-lo para outro lugar. Essa é uma função diferente de uma seção, e é o tema do próximo artigo.