Como fazer landing pages incríveis com IA: o prompt pixel perfect (todos os prompts)

Você provavelmente já viu esses sites: uma paisagem que se separa em camadas quando o mouse anda, um robô que vira a cabeça seguindo o cursor, uma lanterna que mostra o que tem por dentro da imagem. Parecem trabalho de estúdio. Quase todos saem do mesmo tipo de prompt, o prompt pixel perfect, e de uma imagem ou um vídeo feito sob medida pra ele.

Essa página é o material de apoio do vídeo: como o prompt funciona, o passo a passo dos três sites, quanto custou cada asset e todos os prompts pra baixar no fim.

Última revisão: 7 de novembro de 2026.

O vídeo é patrocinado pelo Higgsfield. Se quiser testar o mesmo fluxo: higgsfield.ai

O que é um prompt pixel perfect

É um prompt chato de propósito. Não tem "crie um site bonito e moderno", não tem adjetivo nenhum. Tem medida, cor e tempo, em oito partes, sempre na mesma ordem:

Funciona porque o modelo não precisa adivinhar nada. Quando você fala "bonito", ele chuta. Quando você fala "dezesseis pixels", ele obedece. E como não sobra nada pra adivinhar, o resultado sai parecido até nos modelos mais baratos.

Mas o prompt não salva asset ruim. Na AUSTRAL, o layout saiu certinho e o site ficou feio mesmo assim: o recorte da imagem jogou a rocha fora e o trilheiro ficou flutuando no céu. O prompt garante que nada fica fora do lugar. O asset é o que faz alguém parar pra olhar.

Passo 0: ligar o Higgsfield no Claude

1. Entre em higgsfield.ai/mcp e clique em Connect.
2. Ele manda pro Claude com o nome e o endereço já preenchidos. Clique em adicionar.
3. Faça login no Higgsfield quando ele pedir.

A primeira coisa que eu faço com qualquer MCP novo é perguntar o que ele sabe fazer. Leva dez segundos e evita pedir uma coisa que não existe:

Liste as ferramentas do Higgsfield que você tem nesta sessão, com o nome exato de cada uma.

As que importam aqui são generate_image, generate_video, create_website e deploy_website.

Efeito 1: a paisagem em camadas (AUSTRAL)

Parece 3D, mas são três fotos uma em cima da outra: as montanhas no fundo, a colina no meio e o trilheiro na frente. O mouse mexe cada uma numa velocidade, e o seu olho lê essa diferença como profundidade.

As três camadas saem do mesmo modelo, no mesmo formato, com o fundo como referência de luz pras outras duas. Assim o sol vem do mesmo lado nas três e elas parecem uma foto só:

O fundo branco puro. O meio e a frente são gerados em cima de branco #FFFFFF. O removedor de fundo guarda só o objeto principal: na frente ele deixou só o trilheiro, sem a rocha, e na colina apagou mais da metade. Com o fundo branco, dá pra tirar exatamente o branco e o resto fica, sem gastar crédito:

O site. Cole o prompt da AUSTRAL inteiro e peça uma coisa só: não mudar nenhum número. No código, o JavaScript só atualiza duas variáveis (--mx e --my, a posição do mouse), e cada camada lê essas variáveis no CSS multiplicadas pela profundidade dela: o fundo anda 20 px pra um lado, o trilheiro 42 px pro outro. A cada quadro a camada anda 8% do caminho até o mouse, e é esse atraso que deixa o movimento macio.

Pegadinha: se a camada tem o tamanho exato da tela, quando ela anda aparece a borda. Ela precisa sobrar uns pixels pros lados.

Efeito 2: o robô que segue o mouse

Também parece 3D, e também não é. É um vídeo de cinco segundos em que ele vira a cabeça da esquerda pra direita. O site não deixa o vídeo tocar: o movimento do mouse anda pra frente e pra trás nele.

Imagem 1, ele olhando pra esquerda:

Peça a cabeça virada pra borda esquerda da imagem, não pra esquerda dele. "Esquerda dele" o modelo erra: comigo saiu olhando pro lado contrário.

Imagem 2 não é gerada do zero, é uma edição da primeira. Se gerar do zero, o suéter e a luz mudam e o corpo treme no vídeo:

O vídeo, no site do Higgsfield: Seedance 2.5, 1080p, 5 s, imagem 1 no frame inicial, imagem 2 no frame final, e de prompt só Animate.. Testei com um prompt longo (câmera travada, giro constante) e ficou praticamente igual: quando você trava o começo e o fim, o trabalho de verdade está nas duas imagens.

O site. Cole o prompt do robô e peça pra usar o seu vídeo sem mudar mais nada. Um acabamento: o pôster (a imagem que aparece antes do vídeo carregar) tem que ser o primeiro quadro do vídeo, não a imagem original. O Seedance mexe um pouco na cor e a tela dá um pulo quando o vídeo entra.

Pra rodar local, o vídeo precisa de um servidor que responda Range, senão trava no primeiro quadro. O serve_range.py está no repositório.

Efeito 3: a lanterna de raio-X (ninja)

São duas imagens exatamente no mesmo lugar. A de baixo é o que você vê, a de cima é o que tem por dentro, e o cursor abre um círculo na de cima.

O truque é o mesmo do robô: a segunda imagem é edição da primeira, e a frase que segura tudo no lugar é "mesma posição, tamanho e silhueta":

Confira o tamanho. O Nano Banana me devolveu a edição em 2752×1536, e a base era 2688×1520. Colando direto, a caveira ficava fora do capacete. Peça pro agente medir a diferença e ajustar, em vez de chutar um número.

O fundo em loop é um vídeo de 5 s com a mesma imagem no primeiro e no último quadro, então o loop fecha sozinho. Fiz no Kling 3.0 pro por 8,75 créditos; no Seedance em 1080p sairia 80.

Uma por vez: o Nano Banana faz uma imagem por vez. Se o agente manda duas juntas, volta erro, então ele tem que esperar uma terminar pra mandar a próxima.

Colocando no ar

Publique este site no Higgsfield e me devolva o endereço.

O próprio MCP cria o projeto, faz o deploy e devolve um endereço .higgsfield.app. Só presta atenção: todo deploy já sai público, não tem rascunho. Nada de chave ou dado seu dentro do site.

Quanto custou

O vídeo é o que pesa: os 80 créditos do robô dão quase 30 imagens no GPT Image em 2K. Erre na imagem, que é barata, e só gere o vídeo quando as duas imagens estiverem certas.

Vale a pena?

Sendo honesto, na prática esses sites são ruins em várias coisas. No celular não tem mouse, então o robô não vira e a lanterna não acende. O vídeo pesa uns 10 MB só pra uma cabeça virar. E quem pede pro sistema reduzir movimento tem que receber uma versão parada.

Viralizaram porque são bonitos, e bonitos em vídeo, e porque ficaram baratos: um personagem desses era trabalho de artista 3D, hoje são duas imagens e um vídeo de cinco segundos. O que eu tiro disso: use no topo, na primeira tela, onde a pessoa decide se fica. Do resto pra baixo, site normal, que carrega rápido.

Downloads

A skill escreve o prompt, gera os assets e confere o site por print. No Claude Code, descompacte em ~/.claude/skills/. No Claude do navegador, envie o .zip em Configurações, Capacidades.

Os três sites prontos, com os assets, estão no repositório: github.com/Kc1t/prompts-pixel-perfect