Do primeiro prompt até o site no ar, sem escrever uma linha de código
Passo 1
+
Antes de gerar qualquer imagem, defina a direção visual: a paleta de cores e uma referência de estética. É isso que deixa o site inteiro coerente e com cara de profissional.
Modelo: troque o segmento
Monte uma paleta de cores para um site de [SEGMENTO] de alto padrão, no estilo "luxo silencioso". Preciso de: 1 cor de fundo escura, 1 off-white para o texto claro, 1 cor de destaque metálica (dourado ou bronze) e 1 cor secundária mais escura para apoio. Me entregue os códigos hexadecimais de cada uma e uma frase explicando a sensação que essa paleta passa.
Pronto pra colar na aula
Monte uma paleta de cores para um site de construtora de casas de alto padrão, no estilo "luxo silencioso". Preciso de: 1 cor de fundo escura, 1 off-white para o texto claro, 1 cor de destaque metálica (dourado ou bronze) e 1 cor secundária mais escura para apoio. Me entregue os códigos hexadecimais de cada uma e uma frase explicando a sensação que essa paleta passa.
Guarde os códigos das cores. Você vai usar a mesma paleta na logo e no site.
Passo 2
+
Em vez de inventar do zero, parta de uma referência que você gosta no Pinterest. Você não vai usar a foto dos outros: vai pedir para a IA descrever o estilo e gerar uma imagem nova e parecida.
Tamanho certo: proporção 16:9, no mínimo 1920 por 1080, de preferência 2K ou 4K. O Freepik gera em resolução maior que o ChatGPT, então prefira ele para banner e vídeo.
Prompt: Referência em imagem
Analise a imagem que estou enviando como referência visual. Descreva em detalhes o ambiente, o estilo, os materiais, as cores, a iluminação, o ângulo da câmera e a atmosfera geral. Depois transforme essa descrição em um prompt em inglês, pronto para gerar uma imagem NOVA e parecida (inspirada, não uma cópia) em um gerador de imagens. O prompt deve gerar uma foto fotorrealista, alta qualidade, proporção 16:9, sem pessoas, sem texto e sem marcas. Me devolva apenas o prompt final.
Se a foto é do imóvel real do cliente e precisa ser fiel, não recrie. Use o upscaler para aumentar a resolução da foto original e manter o imóvel verdadeiro.
Passo 3
+
Com as cinco imagens em mãos (fachada, sala, cozinha, quarto e área gourmet), gere o vídeo do tour com efeito de câmera 360. Saída em Full HD, MP4, abaixo de 15 MB. Use Kling, Runway, Luma ou similar.
Prompt: Vídeo do tour 360
Create a high-quality cinematic real estate walkthrough video using the uploaded reference images.
Important: this is NOT an interactive 360 panorama. I want a regular video that SIMULATES a 360-degree immersive effect through camera movement only.
The video should feel like a luxury architectural house tour. Start with the exterior facade of the house, showing it in a beautiful cinematic way. Then the camera should move forward naturally, as if entering the house.
After that, continue the tour through the interior spaces in this order: 1. House facade 2. Living room 3. Kitchen 4. Bedroom 5. Outdoor gourmet / pool area
The transitions between scenes should feel smooth, connected, elegant and immersive, as if the camera is traveling through the property. Use subtle 360-style camera motion, slow pans, slight orbit movement, forward motion, and natural cinematic flow to create the illusion of a 360 tour, but the result must remain a normal video, not an interactive experience.
Each scene should be clearly shown before transitioning to the next. Preserve the architecture, furniture, materials, colors, lighting and luxury aesthetic of the reference images.
Style: photorealistic, high-end real estate video, luxury modern architecture, warm natural lighting, elegant cinematic movement, immersive camera path, smooth transitions, premium atmosphere, ultra-detailed.
Important: - Use all uploaded reference images - Keep the exact scene order - Make the camera movement feel immersive and premium - Simulate a 360-degree tour effect only through video motion - Final output must be a standard video, not a true 360 interactive file
Negative: no people, no text, no logos, no abrupt cuts, no slideshow effect, no distorted furniture, no warped walls, no low quality visuals.
Para o vídeo correr liso quando a pessoa rola a página, exporte com keyframes bem frequentes. Sem isso, ele trava.
Passo 4
+
Crie a logo no Canva usando a cor de destaque da sua paleta. Para um site premium, um monograma simples com uma fonte serifada elegante já entrega muito.
Exporte a logo em PNG com fundo transparente para usar no cabeçalho e no rodapé.
Passo 5
+
Agora os textos. Preencha o prompt abaixo com os dados do projeto e a IA devolve a copy de todas as seções, já no tom certo.
Modelo: preencha os dados
Você é um copywriter especialista em landing pages de alto padrão em português do Brasil. Escreva a copy completa de um site de uma página para o projeto abaixo.
DADOS DO PROJETO - Segmento: [EX: construtora de casas de alto padrão] - Nome da empresa: [NOME] - Cidade/região: [CIDADE] - O que faz, em uma frase: [DESCRIÇÃO] - Para quem é: [PÚBLICO] - Diferenciais (3 a 5): [DIFERENCIAL 1], [DIFERENCIAL 2], [DIFERENCIAL 3] - Provas e números: [EX: 12 anos de mercado, 80 obras entregues, prazo em contrato] - Ação principal do cliente: [EX: falar no WhatsApp / pedir orçamento]
SEÇÕES (escreva o texto de cada uma) 1. Topo: uma frase de impacto + uma frase de apoio + texto do botão 2. Números: 3 ou 4 números curtos com legenda 3. Sobre: 2 parágrafos curtos que geram confiança 4. Diferenciais: título + 3 a 5 blocos com título curto e 1 frase 5. Etapas do processo: 5 passos com nome curto e 1 frase 6. Prova social: uma frase de abertura para os depoimentos 7. Contato: título + 1 frase + texto do botão
REGRAS - Português do Brasil, tom profissional, acolhedor e direto - Comece pela conclusão e depois explique - Nunca use travessão - Nunca use o formato "não é sobre X, é sobre Y". Desenvolva o contraste com uma frase que explique o porquê - Nada de palavras de encheção típicas de IA - Frases curtas, sem jargão, tratando o leitor por você
Pronto pra colar (exemplo VÉRTICE)
Você é um copywriter especialista em landing pages de alto padrão em português do Brasil. Escreva a copy completa de um site de uma página para o projeto abaixo.
DADOS DO PROJETO - Segmento: construtora de casas de alto padrão - Nome da empresa: VÉRTICE Construtora - Cidade/região: Uberlândia, MG - O que faz, em uma frase: projeta e constrói casas de alto padrão sob medida, com prazo em contrato - Para quem é: famílias que querem construir a casa dos sonhos sem dor de cabeça - Diferenciais: prazo de entrega em contrato, acompanhamento da obra pelo celular, time próprio de arquitetura, acabamento premium - Provas e números: 12 anos de mercado, 80 obras entregues, 100% das obras no prazo - Ação principal do cliente: falar com um arquiteto no WhatsApp
SEÇÕES (escreva o texto de cada uma) 1. Topo: uma frase de impacto + uma frase de apoio + texto do botão 2. Números: 3 ou 4 números curtos com legenda 3. Sobre: 2 parágrafos curtos que geram confiança 4. Diferenciais: título + 3 a 5 blocos com título curto e 1 frase 5. Etapas do processo: 5 passos com nome curto e 1 frase 6. Prova social: uma frase de abertura para os depoimentos 7. Contato: título + 1 frase + texto do botão
REGRAS - Português do Brasil, tom profissional, acolhedor e direto - Comece pela conclusão e depois explique - Nunca use travessão - Nunca use o formato "não é sobre X, é sobre Y". Desenvolva o contraste com uma frase que explique o porquê - Nada de palavras de encheção típicas de IA - Frases curtas, sem jargão, tratando o leitor por você
Passo 6
+
Com a copy, as imagens e o vídeo prontos, peça o site. O modelo serve para qualquer projeto. O segundo prompt já vem pronto e gera o site da VÉRTICE igual ao que montamos.
Modelo: preencha os dados
Crie um site de uma página, em um único arquivo HTML (com CSS e JavaScript dentro do próprio arquivo), sem nenhuma biblioteca externa. Tema: [SEGMENTO] de alto padrão. Estética "luxo silencioso".
IDENTIDADE VISUAL - Paleta: fundo escuro [HEX], off-white [HEX], destaque metálico [HEX], apoio escuro [HEX] - Tipografia: uma fonte serifada elegante nos títulos (ex: Fraunces) e uma fonte limpa no corpo (ex: Manrope), via Google Fonts - Largura do conteúdo: 1140px, centralizado - Sensação premium, com respiro, sombras suaves e detalhes em metálico
SEÇÕES, NESTA ORDEM 1. Cabeçalho fixo com logo e menu, com degradê escuro no topo para o menu ficar legível sobre o vídeo 2. Topo: vídeo em tela cheia que avança conforme a pessoa rola a página, com frases que aparecem e somem e um degradê escurecendo só a base 3. Números em destaque 4. Sobre a empresa 5. Diferenciais em blocos 6. Portfólio: cards com imagem, selo de status, ficha rápida e botão "Ver projeto", com filtros e abertura em lightbox 7. Etapas do processo: seção com rolagem travada, imagem grande de um lado e texto do outro, trocando de cena (01 a 05) 8. Banner de vídeo grande em tela cheia, degradê embaixo e texto na base, em loop automático 9. Depoimentos: carrossel estilo avaliações do Google, rodando sozinho em loop, que pausa quando o mouse passa por cima, com degradê claro nas pontas 10. Chamada final de contato 11. Localização com mapa em preto e branco 12. Rodapé 13. Botão flutuante de WhatsApp
COMPORTAMENTO - Totalmente responsivo, testado no celular - Respeitar "reduzir movimento" do sistema, desligando as animações pesadas - Rolagem com efeito de imã suave entre as seções, deixando o topo e as etapas livres - Use a copy que vou colar abaixo
COPY DO SITE [COLE AQUI A COPY DA ETAPA ANTERIOR]
Pronto pra colar: gera o site igual
Crie um site de uma página, em um único arquivo HTML com todo o CSS e JavaScript dentro do próprio arquivo, sem nenhuma biblioteca externa. É o site de uma construtora de casas de alto padrão chamada VÉRTICE. Estética "luxo silencioso", sofisticada e elegante.
IDENTIDADE VISUAL - Paleta: fundo espresso escuro #16120F, off-white #F5F0E7 no texto, dourado #C9A968 como destaque, bronze #8C6E45 de apoio e #14100B nas seções alternadas - Tipografia via Google Fonts: Fraunces (serifada) nos títulos e Manrope no corpo - Largura do conteúdo: 1140px, centralizado, com bastante respiro - Sombras suaves, cantos arredondados, detalhes em dourado
SEÇÕES, NESTA ORDEM 1. Cabeçalho fixo com logo e menu (A construtora, Empreendimentos, Como funciona, Localização) e um botão Fale conosco. Degradê escuro no topo para o menu ficar legível sobre o vídeo 2. Topo em tela cheia com vídeo de fundo que avança conforme a pessoa rola a página, com frases que aparecem e somem sobre o vídeo e um degradê escurecendo só a base. Vídeo: https://soaresmicaela.com/wp-content/uploads/2026/06/Create_a_high_quality_cinemati-1.mp4 3. Faixa de números: 12 anos de mercado, 80 obras entregues, 100% das obras no prazo 4. Sobre a construtora, com dois parágrafos que passam confiança 5. Diferenciais em blocos: prazo em contrato, acompanhamento pelo celular, time próprio de arquitetura, acabamento premium 6. Empreendimentos: cards com foto, selo de status (Entregue, Em obras, Lançamento), ficha rápida (tipo, suítes, metragem), barra de progresso da obra e um botão Ver projeto. Filtros no topo e abertura da foto em lightbox ao clicar 7. Etapas da obra, do terreno à entrega: seção com rolagem travada, uma imagem grande de um lado e o texto do outro, trocando entre cinco cenas (01 Conversa e conceito, 02 Projeto e planta em 3D, 03 Fundação e estrutura, 04 Acabamento premium, 05 Entrega das chaves) 8. Banner de vídeo grande em tela cheia, com degradê embaixo e o texto na base, em loop automático. Vídeo: https://soaresmicaela.com/wp-content/uploads/2026/06/Crie_um_video_como_se_fosse_um-1.mp4 9. Depoimentos no estilo avaliações do Google, em carrossel que roda sozinho em loop infinito, pausa quando o mouse passa por cima e tem degradê claro nas pontas 10. Chamada final de contato com botão de WhatsApp 11. Localização com um mapa do Google em preto e branco 12. Rodapé com logo e dados 13. Botão flutuante de WhatsApp
COMPORTAMENTO - Totalmente responsivo, funcionando bem no celular - Respeitar reduzir movimento do sistema, desligando as animações pesadas - Rolagem com efeito de imã suave entre as seções, deixando o topo e as etapas livres para os efeitos funcionarem - Textos elegantes em português do Brasil em todas as seções, sem travessão
O site dificilmente fica pronto na primeira tentativa. O caminho é pedir melhorias aos poucos: aumenta o título, diminui esse espaço, troca a foto, até ficar do jeito que você quer.
Passo 7
+
Antes de publicar, rode uma revisão de segurança e SEO no arquivo. Isso deixa o site pronto para o Google e protegido.
Prompt: Segurança e SEO
Revise este site HTML para deixá-lo pronto para publicação, cuidando de SEO, performance e segurança. Faça as alterações no arquivo e me explique o que mudou.
SEO - Defina o idioma da página como português do Brasil - Crie um título e uma descrição com a cidade e o segmento - Adicione Open Graph e Twitter Card (título, descrição e imagem) para ficar bonito ao compartilhar no WhatsApp e redes - Adicione um favicon - Garanta um único título principal e textos alternativos descritivos em todas as imagens - Inclua dados estruturados do tipo LocalBusiness com nome, endereço, telefone e horário
PERFORMANCE - Comprima e use carregamento preguiçoso nas imagens de baixo da página - Use preconnect para o Google Fonts - Garanta que o vídeo está leve e com imagem inicial
SEGURANÇA - Gere um arquivo .htaccess para a Hostinger com cabeçalhos de segurança e forçando o HTTPS - Se houver formulário, valide e limpe os campos e proteja contra envio automatizado - Não deixe nenhum dado sensível exposto no código
LGPD - Se o site coletar dados, adicione um aviso de privacidade e um link para a política de privacidade
Passo 8
+
Com o site revisado, é hora de colocar no ar. Você precisa de hospedagem. Contrate a Hostinger com o cupom abaixo, crie um subdomínio e suba o arquivo HTML pelo gerenciador de arquivos.