Como pedir um hero profissional para o Claude Code (com prompts prontos)

O hero é a primeira tela de um site: o título, o subtítulo, os botões e o fundo. Se ele não convence em poucos segundos, a pessoa fecha a aba. O problema é que, quando você pede "um hero bonito" para uma ferramenta de IA, o resultado costuma ser genérico: um degradê, um título centralizado e dois botões iguais a milhares de outros sites.

A boa notícia é que a IA responde muito melhor quando você é específico. Este guia mostra o que descrever e como pedir, para o resultado sair certo logo na primeira tentativa.

Por que "um hero bonito" não funciona

A IA não sabe o que é bonito para o seu negócio. Sem referências, ela escolhe o caminho mais comum, e o mais comum é justamente o que todo mundo já viu. Quanto mais vago o pedido, mais parecido com um template genérico o resultado.

Três coisas ajudam a destacar o resultado:

• Dizer o objetivo da página, e não só como ela deve parecer.
• Dar uma referência visual concreta, como um tipo de fundo, uma cor ou um componente que você já viu.
• Limitar o que não pode acontecer, como "sem imagens de banco" ou "sem mais de duas cores".

A estrutura de um bom pedido

Um pedido que funciona costuma ter cinco partes:

1. Contexto: o que o site vende e para quem.
2. Mensagem: o título e o subtítulo, ou a ideia que eles precisam passar.
3. Ação: qual botão é o principal e o que acontece ao clicar.
4. Visual: fundo, cores, tipografia e nível de movimento.
5. Restrições: o que evitar e como deve se comportar no celular.

Veja um exemplo:

Crie o hero de uma página de venda de um curso de fotografia para iniciantes.
Título: "Aprenda a fotografar em 30 dias". Subtítulo curto sobre as aulas práticas.
Botão principal "Quero começar" e um botão secundário "Ver o conteúdo".
Fundo escuro com aurora em laranja e violeta, movimento lento e suave.
Título grande, fonte sem serifa, centralizado. Funcionar bem no celular.
Sem imagens de banco e sem mais de duas cores de destaque.

Compare com "faça um hero bonito para um curso de fotografia". O primeiro pedido deixa pouco espaço para a IA inventar o que você não quer.

Use um componente como referência

A forma mais rápida de acertar é mostrar à IA um componente pronto e pedir uma versão adaptada. Em vez de descrever um efeito com palavras, você entrega o código de partida, e ela só precisa trocar textos e cores.

Por exemplo, o Hero Aurora traz um fundo de aurora em camadas com título grande. O Hero Holofote acende o título com um cone de luz, e o Hero em Duas Colunas é o clássico de texto à esquerda e imagem do produto à direita.

Na biblioteca do Integra Sites, cada componente já vem com um prompt pronto para copiar. Você escolhe o que mais combina, copia e cola na ferramenta, e depois pede os ajustes de texto e de cor.

Peça uma coisa de cada vez

Depois da primeira versão, evite mandar dez mudanças juntas. Ajuste em sequência:

• Primeiro o texto: título, subtítulo e botões.
• Depois as cores: troque os tons para os da sua marca.
• Por fim o movimento: diminua ou aumente a velocidade, ou desligue no celular.

Assim, se algo quebrar, você sabe qual pedido causou o problema e pode desfazer só ele.

Não esqueça do celular

A maior parte dos visitantes chega pelo telefone. Peça de forma explícita:

"No celular, reduza o tamanho do título, deixe os botões um embaixo do outro e desligue as animações pesadas."

Também vale pedir que o efeito respeite a configuração de menos movimento do aparelho, para quem se incomoda com animações.

Checklist antes de publicar

• O título diz, em uma frase, o que a pessoa ganha?
• O botão principal está claro e é diferente do secundário?
• O texto continua legível sobre o fundo, em qualquer tela?
• A página carrega rápido? Animações em excesso pesam.
• No celular, nada fica cortado ou sobreposto?

Em resumo

Um hero profissional não depende de sorte: depende de um pedido claro, de uma boa referência e de ajustes em ordem. Se quiser partir de algo pronto, explore os heros da biblioteca e use o prompt que acompanha cada um.