O caminho completo
Quatro ferramentas, cinco etapas. Cada uma resolve um pedaço do problema — e no fim você tem um site de verdade, no ar, com seu domínio.
O princípio mais importante da aula: nunca criar do nada. Antes de gerar qualquer coisa, a gente estuda quem já vende bem nesse mercado e rouba a estrutura.
1.1 — Referência de conteúdo (Manus AI)
O Manus faz a pesquisa e devolve um relatório com páginas reais do seu nicho. A qualidade da resposta depende inteiramente da qualidade do pedido — e todo bom prompt tem quatro partes:
Objetivo: Pesquisar e reunir referências de páginas de vendas / landing pages
de empresas que prestam serviço de instalação e manutenção de ar condicionado
(foco em mão de obra, NÃO em venda de aparelhos), para servir de inspiração na
criação da minha própria página.
Contexto do meu negócio:
- Empresa individual em Palmas, Tocantins (Brasil)
- Serviços: instalação de ar condicionado split, manutenção preventiva e
corretiva, higienização, carga de gás, desinstalação/reinstalação (mudança)
e instalação elétrica (ponto de energia)
- Diferencial: faço a instalação do ar E a parte elétrica com a mesma equipe
- Público: clientes residenciais e comerciais de Palmas e região
O que você deve entregar:
1. De 8 a 12 exemplos reais de páginas de empresas de instalação de ar
condicionado (priorize brasileiras, pequenas e médias). Para cada uma:
o link, descrição do visual, e o que faz de bom e de ruim.
2. Padrões que se repetem nas melhores páginas: estrutura das seções, tipo
de chamada para ação, uso de WhatsApp, provas de confiança, FAQ.
3. Os 5 elementos que mais convertem em página de serviço local.
4. Gatilhos de confiança para quem contrata mão de obra que vai entrar na
casa dele (garantia, fotos de trabalhos, avaliações do Google).
5. Uma estrutura recomendada de página, seção por seção, adaptada ao meu
negócio, com sugestões de título principal e chamadas para ação.
Regras:
- Foque em páginas de SERVIÇO/instalação, não em lojas que vendem aparelhos
- Priorize referências brasileiras e, se possível, do Centro-Oeste/Norte
- Inclua exemplos de páginas simples (Canva ou autônomos), orçamento enxuto
Formato de saída: relatório em seções, com lista de links no final.Referências que vamos abrir
| Página | Por que olhar |
|---|---|
| LSA Refrigeração | estrutura clássica de serviço local |
| VRV Ar Condicionado | uso de WhatsApp como CTA único |
| Ecotemp Climatização | provas de confiança |
| Rocha Climatização | apresentação de serviços |
| Rio Mais Frio ← feita no Canva | prova que simples também funciona |
| Unitek Assistência | página de assistência técnica |
1.2 — Referência de layout (galerias)
O Manus te dá referência de conteúdo do nicho. As galerias te dão referência de layout. São coisas diferentes e complementares.
Land-book
land-book.com — landing pages reais, filtráveis por categoria e estilo.
Lapa Ninja
lapa.ninja — LPs categorizadas, ótimo pra estudar estrutura de seções.
1.3 — A estrutura vencedora
Depois de olhar as referências, sempre aparece o mesmo esqueleto. É ele que vira o briefing do próximo bloco:
| Seção | Função |
|---|---|
| Hero | dor + solução + cidade + botão de WhatsApp |
| Barra de confiança | anos de experiência · nº de serviços · garantia · nota Google |
| Serviços | cards, um para cada serviço |
| Diferencial | o que só você faz — aqui: ar + elétrica juntos |
| Como funciona | 3 passos simples |
| Prova social | depoimentos + fotos de trabalhos reais |
| Área de atendimento | cidade e região |
| FAQ | quebra as objeções antes delas surgirem |
| CTA final + rodapé | WhatsApp, telefone, horário |
1.4 — O que realmente converte numa página de serviço local
| Princípio | Na prática |
|---|---|
| Regra dos 5 segundos | em 5s o visitante entende: o quê + onde + como contratar? |
| Um objetivo só | tudo aponta pro WhatsApp — nada de menu que espalha a atenção |
| Hierarquia visual | headline > subheadline > CTA. O botão tem que gritar |
| Mobile-first | a maioria vem do celular: botão grande, WhatsApp flutuante |
| Contraste no CTA | uma cor que não aparece em mais nada na página |
| Prova antes de pedir | foto real e avaliação vêm antes de pedir o contato |
| Velocidade é UX | página pesada perde lead antes de carregar |
Agora a estrutura do Bloco 1 vira um site de verdade. Você descreve, a IA constrói, você refina.
Claude.ai (Artifact)
Você vê o site aparecer na hora e conversa pra ajustar. Comece por aqui — é o caminho mais visual.
Claude Code
Gera o arquivo no seu computador e publica direto. Para quem já quer automatizar tudo num lugar só.
O prompt-mestre
Repare que ele é específico: diz o negócio, a estrutura seção por seção e as regras de design. Prompt vago gera site vago.
Você é um web designer especialista em landing pages de serviço local que
convertem.
Crie uma landing page completa em UM único arquivo HTML (HTML + CSS + JS
inline, sem frameworks, sem dependências externas), mobile-first, pronta
para publicar.
NEGÓCIO
- Nome: Palmas Eletro
- Serviço: instalação de ar-condicionado split, manutenção preventiva e
corretiva, higienização, carga de gás, desinstalação/reinstalação
(mudança) e instalação elétrica (ponto de energia)
- Diferencial principal: a MESMA equipe faz a instalação do ar E a parte
elétrica
- Local: Palmas, Tocantins e região
- Público: residencial e comercial
- Contato: WhatsApp (todos os botões devem abrir wa.me/55DDDNUMERO com uma
mensagem pré-preenchida pedindo orçamento)
ESTRUTURA (nesta ordem)
1. Header fixo: nome + botão "WhatsApp"
2. Hero: headline com dor + solução + cidade, subheadline, botão WhatsApp,
selo de confiança (garantia / nota Google)
3. Barra de prova: anos de experiência, nº de instalações, garantia, avaliação
4. Serviços: cards com ícone para cada serviço acima
5. Diferencial: destaque "ar + elétrica com a mesma equipe"
6. Como funciona: 3 passos (chama no WhatsApp → orçamento → equipe vai)
7. Prova social: 3 depoimentos + espaço para fotos de trabalhos
8. Área de atendimento: Palmas e região
9. FAQ: 5 perguntas que quebram objeção de quem contrata mão de obra
10. CTA final + rodapé (WhatsApp, telefone, horário)
DESIGN
- Visual profissional, sensação de "clima/refrigeração": azul + branco,
toques de laranja nos botões (CTA)
- Tipografia limpa, bom contraste, muito respiro
- Botão de WhatsApp flutuante fixo no canto
- 100% responsivo, carrega rápido, sem imagens externas (ícones SVG)
Deixe comentários no código marcando onde trocar telefone, WhatsApp e fotos.O loop de refinamento
O primeiro resultado nunca é o final — e tudo bem. É conversando que a página fica boa:
“O botão de WhatsApp precisa aparecer também dentro de cada card de serviço.”
“Deixa a headline mais focada em urgência: ar pingando ou sem gelar.”
“Adiciona uma seção de garantia de 90 dias no serviço.”
“Põe nome de bairro nos depoimentos, fica mais real.”
index.html dentro de uma pasta. Esse arquivo é o seu site inteiro.Em registro.br: pesquisar o nome → carrinho → pagar com o CPF/CNPJ que será o titular.
Compre o domínio e volte nele só no Bloco 5. Primeiro a gente coloca o site no ar num endereço gratuito.
Hospedagem gratuita, rápida e com SSL incluso. Em minutos o site sai do seu computador e vai pro mundo.
Duas formas de publicar
| Forma | Como | Pra quem |
|---|---|---|
| Arrastar e soltar | Workers & Pages → Create → Pages → Upload assets → arrasta a pasta | comece por aqui |
| Linha de comando | wrangler pages deploy | quem vai automatizar |
Pronto: o site ganha um endereço gratuito terminado em .pages.dev. Ele já está no ar, já tem cadeado de segurança e já pode ser compartilhado.
Três coisas que vão te confundir (e são normais)
6da37bf2.seusite.pages.dev. Use sempre a versão sem esse código: seusite.pages.dev. A com código costuma falhar nos primeiros minutos.O último passo: fazer o endereço que você comprou apontar para o site que está no ar.
Escolha a rota primeiro
| Rota | O que faz | Quando usar |
|---|---|---|
| A — Trocar os nameservers | o Cloudflare passa a gerenciar todo o DNS do domínio | quer o domínio raiz seudominio.com.br |
| B — Só um CNAME | aponta apenas um subdomínio, sem mexer no resto | basta www. ou site. |
Rota A — passo a passo
- Cloudflare → Adicionar domínio → Conectar um domínio → plano Free
- Conferir manualmente os registros importados: A, AAAA, CNAME, MX, TXT
- Copiar os 2 nameservers que o Cloudflare mostrar
- Registro.br → login com o CPF/CNPJ titular → Alterar Servidores DNS → colar os 2 → Salvar
- Aparece o aviso de “transição” (~2h) — é normal, só aguardar
- Acompanhar até o status virar Active no Cloudflare
- No projeto → Custom domains → adicionar o domínio e o
www
Quanto tempo demora
Tracking: medir o que a página gera
Site no ar sem medição é chute. Mas atenção a uma distinção que evita um acidente sério:
| Dado | É segredo? | Onde vai |
|---|---|---|
| Pixel ID do Meta | não — é público | direto no HTML |
| Google Analytics / GTM | não — é público | direto no HTML |
| Token da API de Conversões | sim | variável secreta, nunca no HTML |
Numa página de serviço local, o que mais importa é registrar uma conversão quando a pessoa clica no botão de WhatsApp. É esse número que diz se a página funciona.
Seu checklist
Clique para marcar. Ao final da aula, tudo aqui deve estar riscado:
- Referências coletadas (Manus + galerias de layout)
- Estrutura de seções definida a partir das referências
- Site gerado no Claude e refinado no chat
index.htmlbaixado no computador- Número de WhatsApp trocado no arquivo
- Domínio comprado no Registro.br
- Site publicado no Cloudflare Pages
- Endereço
.pages.devabrindo normalmente - Registros DNS conferidos manualmente (principalmente MX)
- Nameservers trocados no Registro.br
- Domínio adicionado em Custom domains
- Site abrindo no domínio próprio 🎉
E agora?
O pipeline que você acabou de aprender não é específico dessa empresa. Troque o negócio, a cidade e o diferencial no prompt e você tem uma página nova em minutos. É o mesmo caminho para qualquer cliente, qualquer segmento.
Pegue esta mesma landing page e adapte para:
- Nome do negócio: [NOME]
- Serviço: [SERVIÇO]
- Cidade: [CIDADE]
- Diferencial: [DIFERENCIAL]
- WhatsApp: [NÚMERO]
Mantenha a mesma estrutura e qualidade, mas troque as cores para combinar
com o segmento e reescreva todos os textos para o novo negócio.Cronograma da aula
| Bloco | Duração | Acumulado |
|---|---|---|
| Abertura | 5 min | 5 |
| 1 · Referências | 15 min | 20 |
| 2 · Criar o site | 35 min | 55 |
| 3 · Domínio | 10 min | 65 |
| 4 · Publicar | 25 min | 90 |
| 5 · Apontar o domínio | 15 min | 105 |
| Tracking (opcional) | 10 min | 115 |
| Fechamento | 5 min | 120 |