Como escrever prompts melhores para criar sites com IA

Quem usa IA para criar sites logo percebe: o mesmo assistente pode entregar um resultado excelente ou uma bagunça, e a diferença quase sempre está no pedido. Escrever bons prompts não exige técnica secreta, só clareza e um pouco de método.

Pense como quem briefa um designer

Imagine contratar uma pessoa para fazer a sua página. Você não diria "faça algo bonito". Você explicaria o negócio, o público, o objetivo e o que não quer. Com a IA é igual. Um bom prompt costuma ter:

1. Contexto: o que o site é e para quem.
2. Objetivo: a ação que a pessoa deve fazer.
3. Conteúdo: textos, títulos e botões que você já tem.
4. Visual: cores, fontes, nível de movimento, referências.
5. Restrições: o que evitar e como se comportar no celular.

Veja a diferença:

Fraco: "Crie uma página para minha academia."

Crie uma página de uma academia de bairro, em Curitiba, para pessoas de 25 a 45 anos
que querem voltar a treinar. O objetivo é agendar uma aula experimental gratuita.
Título: "Sua primeira aula é por nossa conta". Botão principal "Agendar aula".
Fundo escuro, laranja como única cor de destaque, fonte sem serifa, títulos grandes.
Sem fotos de banco. Funcionar bem no celular.

Dê referências, em vez de adjetivos

Palavras como "moderno", "limpo" e "profissional" significam coisas diferentes para cada um. É muito mais eficiente mostrar: cole o código de um componente que você gostou, descreva um site que admira ou indique o efeito exato ("uma borda que acende seguindo o mouse"). A IA parte de algo concreto e erra menos.

Peça uma coisa de cada vez

Prompts gigantes com dez pedidos geram resultados misturados, e fica difícil saber o que deu certo. Divida o trabalho:

• Primeiro a estrutura da página.
• Depois o conteúdo de cada seção.
• Em seguida o visual: cores e tipografia.
• Por último o movimento e os detalhes.

Teste entre uma etapa e outra. Se algo der errado, você sabe onde.

Refine em ciclos curtos

O primeiro resultado raramente é o final. Trate-o como um rascunho e faça ajustes específicos:

• Em vez de "melhore o visual", diga "aumente o espaçamento entre as seções e deixe os botões maiores".
• Em vez de "está estranho", descreva o que vê: "o texto fica ilegível sobre a imagem no celular".
• Aponte o trecho exato, quando possível.

O que fazer quando a IA erra

• Descreva o erro com exatidão. Cole a mensagem que apareceu, ou explique o que esperava e o que aconteceu.
• Volte um passo. Se uma mudança quebrou algo, peça para desfazer só ela. Por isso é bom guardar o código num repositório.
• Peça uma explicação. "O que esse trecho faz?" revela o problema e ensina você.
• Simplifique. Se o pedido ficou complicado, quebre em partes menores.
• Comece de um componente pronto. Um campo de prompt ou uma janela de chat bem feitos reduzem as chances de erro.

Peça o que você não quer

Restrições evitam surpresas. Alguns exemplos úteis:

• "Não use mais de duas cores de destaque."
• "Não invente depoimentos nem números."
• "Não adicione bibliotecas novas sem me avisar."
• "Mantenha o código dos componentes que já existem."

Padronize o que se repete

Se você faz muitos sites, guarde seus bons prompts: um modelo para hero, outro para seção de preços, outro para rodapé. Ajuste só os textos a cada projeto. Na biblioteca do Integra Sites, cada recurso traz um prompt pronto, justamente para você não começar do zero.

Cuidados de segurança

• Não cole senhas, chaves de API ou dados de clientes no que envia à ferramenta.
• Revise o que será executado, se a ferramenta rodar comandos no seu computador.
• Confira links e textos antes de publicar.

Em resumo

Bom prompt é contexto claro, referência concreta, um passo por vez e ajustes específicos. Para pedidos prontos, veja o post sobre hero profissional e os prompts para o Lovable. Quem entrega o código ao projeto pode ainda usar um botão que copia o comando ou abas de código por linguagem em documentações.