5 prompts para melhorar o visual de um site no Lovable

Quem já criou um site com IA conhece a sensação: o resultado funciona, mas parece um modelo. Cores previsíveis, cartões iguais, nenhum detalhe que prenda o olhar. A diferença entre um site comum e um site com cara de produto bem-feito costuma estar em pequenos detalhes, e a boa notícia é que dá para pedir cada um deles.

Estes cinco prompts funcionam em ferramentas como Lovable, Cursor e Claude Code. Adapte os textos para o seu projeto.

1. Defina uma identidade antes de mexer em qualquer tela

Antes de pedir seções novas, fixe as regras visuais. Sem isso, cada tela sai com uma cara.

Defina uma identidade visual para o site e aplique em todas as páginas:
- Fundo escuro (quase preto) e uma única cor de destaque: laranja.
- Fonte sem serifa, com títulos grandes e bem espaçados.
- Cantos arredondados em cards e botões, com bordas finas e translúcidas.
Não use mais de uma cor de destaque.

Limitar a uma cor de destaque é o jeito mais barato de parecer profissional.

2. Dê vida aos cards

Cards parados são a marca registrada do visual genérico. Um efeito sutil de interação já muda a percepção.

Nos cards de recursos, adicione uma borda que acende seguindo o mouse
(efeito de holofote) e uma leve elevação ao passar o cursor.
Mantenha o efeito discreto e desligue no celular.

O Cards Holofote é um exemplo pronto desse efeito, com a borda iluminada acompanhando o cursor.

3. Destaque uma palavra do título

Um título todo igual é lido sem nenhuma pausa. Destacar uma palavra cria ritmo e direciona o olhar.

No título principal, aplique um degradê animado em laranja e rosa
somente na palavra "futuro". O resto do título fica branco.

Para um efeito pronto, veja o Texto Aurora, em que um degradê flui dentro das letras.

4. Melhore o botão principal

O botão de ação é o elemento mais importante da página, e merece um tratamento próprio.

Faça o botão principal reagir ao mouse: ele deve ser levemente atraído
pelo cursor quando o mouse chegar perto e voltar ao lugar quando sair.
Os botões secundários ficam simples, só com contorno.

Há várias opções na biblioteca, como o Botão Magnético. A regra de ouro é ter só um botão chamativo por tela.

5. Mostre números com impacto

Números concretos passam confiança. Em vez de uma frase, use contadores que animam ao aparecer na tela.

Adicione uma faixa com quatro números grandes (clientes, projetos, anos de
experiência e avaliação) que contam do zero até o valor quando a seção
entrar na tela. Use tipografia grande e rótulos pequenos embaixo.

O componente de estatísticas com contadores resolve isso, e o importante é usar números reais.

Como aplicar sem bagunçar o projeto

• Um pedido por vez. Mudar tudo de uma vez dificulta desfazer o que não ficou bom.
• Teste no celular depois de cada mudança. A maior parte dos seus visitantes está lá.
• Peça para respeitar a preferência por menos movimento, para quem se incomoda com animações.
• Mostre uma referência. Quando possível, cole o código de um componente que você gostou e peça uma versão adaptada.

Um truque que poupa tempo

Em vez de escrever o pedido do zero toda vez, comece de um componente pronto. Na biblioteca do Integra Sites, cada recurso tem um prompt preparado para ferramentas como o Lovable. Você copia, cola e só ajusta os textos e as cores.

Quer ver todas as opções? Explore os cards, os botões e os efeitos de texto.