← Programa
Destrava · aula 5

Site dentro da Conexão

Como a Conexão passa a construir, publicar e medir site de cliente sem depender de fornecedor, com prazo, portão de qualidade e preço.

Por que isso agora. Em 02/09 vocês encerraram a terceirização de sites por causa de prazo. O site virou uma entrega sem dono e sem processo. Esta aula fecha isso: você sai com o site da Ponte em prévia e com o processo de site da Conexão escrito.

1. Antes da aula: instalar as skills

Faça isso antes do nosso encontro. São quatro skills, e só uma delas chega por arquivo.

Skill	Pra que serve	De onde vem
frontend-design	Constrói a página com cara de projeto, não de template	Oficial da Anthropic
impeccable	Critica e dá acabamento: espaçamento, contraste, hierarquia, celular	Pública (pbakaus)
ads-landing	Confere se a página aguenta tráfego pago: mensagem, velocidade, formulário	Pública (claude-ads)
auditar-seo	Nota de 0 a 100 do SEO técnico, com o que corrigir	Arquivo auditar-seo.zip da pasta Skills Avantys - Alunos, no Drive

Você já tem a brand-chief e a ficha de marca. As duas fazem o papel da marca no processo, então não precisa de skill nova pra isso.

Salve o zip

Baixe o auditar-seo.zip pra pasta Downloads. Não precisa abrir.

Peça pro Claude instalar tudo

Abra o VS Code, abra o Claude e cole:

Instala estas skills de forma global, pra eu usar em qualquer projeto. Rode um comando por vez e me avise se algum falhar:

npx skills add anthropics/skills@frontend-design -g -y
npx skills add pbakaus/impeccable@impeccable -g -y
npx skills add agricidaniel/claude-ads@ads-landing -g -y

Depois descompacte o auditar-seo.zip que está em Downloads e instale como skill global também, na pasta de skills do Claude. Antes de instalar, dê uma olhada no que cada uma executa e me diga se tem algo que eu deveria saber.

No fim, me liste as skills instaladas.

Se aparecer erro de Node ou npx, ou de Python na auditar-seo, peça: "instala o que estiver faltando pra esses comandos funcionarem".

Recarregue o VS Code

Abra a paleta de comandos (Cmd + Shift + P no Mac, Ctrl + Shift + P no Windows) e rode Reload Window. Sem isso, o Claude não enxerga as skills novas.
Teste

Pergunte ao Claude: quais skills você tem? As quatro precisam aparecer. Depois rode um teste real:
```
/auditar-seo [endereço do site da Conexão]
```
Se voltar uma nota de 0 a 100, está tudo pronto. Mande o print no grupo.
Crie a conta no Cloudflare

É onde os sites vão ser publicados. O plano gratuito serve. Crie em dash.cloudflare.com com o e-mail da Conexão. A gente conecta na aula.

Se travar: "skill vazia" ou "faltam arquivos" quase sempre é zip baixado pela metade. Baixe de novo inteiro. Se a skill não aparece, faltou o Reload Window.

2. As 4 camadas de um site

Todo site tem quatro camadas. A gente vai usar sempre esses mesmos nomes.

Camada	Em uma frase	Na Conexão
Estratégia	Pra quem é o site e qual ação a pessoa deve tomar	Ficha de marca + briefing que você já usa
Front-end	O que a pessoa vê e clica	Páginas, textos, fotos, botões
Back-end	Pra onde vai o que a pessoa envia	Formulário → n8n → Drive ou planilha, igual ao seu briefing por LP
Performance	Carrega rápido, aparece no Google e é medido	Velocidade, SEO, Google Meu Negócio, GA4, Pixel

Você já fez back-end. A LP de briefing que cria a pasta no Drive, gera o .docx e manda o link da etapa 2 é exatamente isso.

3. Qual ferramenta usar

Site feito pelo Claude (padrão)

LP de campanha, prévia, comércio local, site institucional
Rápido de fazer, carrega rápido, sem mensalidade de plugin
Publicado no Cloudflare, grátis
Alteração: você pede ao Claude e publica de novo

WordPress (exceção)

Só quando o cliente vai editar o site sozinho, toda semana
Tem hospedagem paga, plugin e atualização
Precisa de manutenção mensal no contrato
Fica mais pesado e mais lento

Na dúvida, pergunte ao cliente: quem vai mexer no site depois que ficar pronto? Se a resposta for "vocês", é o padrão.

4. O processo, passo a passo

Do briefing ao site medido. Cada passo tem o pedido pronto pra colar no Claude; troque o que está entre colchetes. Trabalhe sempre dentro da pasta do cliente no Drive: [cliente]/site/.

Estratégia: ficha de marca e ação principal

Sem ficha de marca, o site não começa. É a mesma regra que vocês usam pra cliente novo. Aqui também se decide uma única ação principal: WhatsApp, pedir orçamento ou agendar.

Leia a ficha de marca do [cliente] em [pasta], o site atual [URL] e o Instagram [@perfil]. Me entregue num arquivo site/estrategia.md:
1) pra quem é o site, em uma frase;
2) a única ação principal que o visitante deve tomar;
3) o mapa de páginas (para comércio local, uma página só; para serviço B2B: home, uma página por serviço, cases, sobre e contato);
4) as provas reais que existem (números, cases, depoimentos, clientes conhecidos) e o que está faltando pedir ao cliente.

Prévia: só a home, no máximo um dia

A prévia serve pra vender o projeto, provando que você entendeu o negócio. O site inteiro só entra depois do aceite. Passou de um dia de trabalho, você está entregando de graça.

Front-end: construção

Skill frontend-design. Celular primeiro, foto real do cliente.

Use a skill frontend-design pra criar a home do site do [cliente], seguindo a ficha de marca e o site/estrategia.md. Uma página em HTML e CSS, pensada primeiro pro celular. Seções: 1) o que faz, pra quem e o próximo passo, na primeira tela; 2) os serviços principais; 3) provas reais; 4) como funciona em 3 passos; 5) perguntas frequentes; 6) chamada final. Uma única ação principal em todos os botões: [WhatsApp com mensagem pronta / formulário]. Use só fotos reais da pasta [fotos]. Imagens em WebP com no máximo 200 KB. Salve em site/index.html.

Front-end: acabamento

Skill impeccable. Pode ser a parte do Léo.

Use a skill impeccable pra fazer uma crítica da site/index.html e depois um polish. Prioridade: clareza da primeira tela no celular, contraste do texto, tamanho dos botões e qualquer coisa com cara de template. Não mude a marca nem o texto sem me perguntar.

Back-end: formulário, WhatsApp e LGPD

O contato sempre fica gravado em algum lugar. Nunca dependa só de a pessoa mandar mensagem.

Na site/index.html:
1) Ligue o formulário ao meu webhook do n8n [URL do webhook], enviando nome, telefone, e-mail, mensagem, a página de origem e os parâmetros utm da URL. Mostre mensagem de sucesso na tela e, se o envio falhar, ofereça o WhatsApp como plano B.
2) Faça o botão de WhatsApp [número] abrir com mensagem pronta que diga de qual página a pessoa veio.
3) Coloque uma caixa de consentimento obrigatória no formulário (LGPD) e um link para a política de privacidade. Gere a política em site/privacidade.html com os dados do [cliente].

No n8n, o fluxo recebe o envio e grava na planilha do cliente ou no CRM, mais um aviso pra vocês. É o mesmo desenho do seu briefing.

Performance: velocidade, Google e medição

Teste no pagespeed.web.dev. Meta no celular: conteúdo principal aparece em menos de 2,5 segundos.

Prepare a site/ pra performance e medição:
1) title e meta description próprios em cada página, Open Graph pra compartilhar no WhatsApp, e o schema LocalBusiness com endereço, telefone e horário do [cliente];
2) sitemap.xml e robots.txt;
3) a tag do Google Analytics 4 [ID G-XXXX] com eventos para clique no WhatsApp e envio do formulário;
4) o Pixel da Meta [ID] com o evento Lead no envio do formulário;
5) confira o peso de todas as imagens e reduza o que passar de 200 KB.

Junto com o site, ofereça a organização do Google Meu Negócio do cliente apontando pro site. Na Ponte, é o upsell imediato.

Portão de qualidade

Skills auditar-seo e ads-landing, mais a lista da seção 5. Se um item falhar, o site não vai ao ar.

Rode a skill auditar-seo em [URL da prévia] e corrija tudo que for de código. Depois rode a skill ads-landing na mesma página, considerando que ela vai receber tráfego de [Meta / Google] com a mensagem "[mensagem do anúncio]". Me devolva uma tabela: o que foi corrigido, o que depende do cliente e a nota final.

Publicar

Prévia sempre com noindex, pra não aparecer no Google. O site oficial só tira o noindex quando passar no portão.

Me ajude a publicar a pasta site/ no Cloudflare Pages com o nome [cliente]-previa. Se eu ainda não estiver logado, rode npx wrangler login e me diga o que clicar no navegador. Antes, garanta que a página tem meta robots noindex. No fim, me dê o link pra eu testar no celular.

Quando virar site oficial, peça: "conecte o domínio [dominio.com.br] a esse projeto e me diga exatamente o que mudar no DNS".

Revisão de 30 dias

Com 30 dias no ar, olhe no GA4: quantas visitas, quantos cliques no WhatsApp, quantos formulários. Isso vira slide do relatório mensal e argumento pra renovar. A medição completa é a aula 6, e aparecer no Google e nas IAs é a aula 7.

5. Portão antes de publicar

Recorte dos itens obrigatórios do checklist de site. Todos têm que passar.

A primeira tela diz o que é, pra quem e o próximo passo. Três pessoas de fora acertam em 5 segundos.
O título fala do resultado do cliente, não da empresa. "Somos líderes" e "soluções completas" estão fora.
Pelo menos 3 provas reais: número, case, depoimento, logo de cliente ou foto real.
Uma única ação principal, igual em todos os botões.
Abre bem no celular: sem rolagem lateral, texto com 16px ou mais.
WhatsApp com mensagem pronta funcionando.
Formulário gravando de verdade (envio de teste chegou) e com consentimento LGPD.
Nenhuma imagem acima de 200 KB. PageSpeed no celular acima de 80.
Title e description em todas as páginas. Nota do auditar-seo acima de 80.
GA4 e Pixel registrando clique e envio de teste.
Texto revisado por você, sem cara de IA e sem travessão.
Domínio com cadeado (https) e noindex retirado só no site oficial.

6. O processo no papel

Preencha com a gente no fim da aula. É isso que transforma site em produto da Conexão. Fica salvo neste navegador e vai junto quando você enviar a trilha.

Quem é o dono do site, do briefing à publicação Prazo da prévia Prazo do site completo Quantas rodadas de ajuste Preço do pacote LP (uma página) Preço do pacote site institucional Manutenção mensal: o que inclui e quanto custa Quem paga domínio e hospedagem

7. Trilha depois da aula

Marque quando cumprir o "pronto quando". O avanço fica salvo neste navegador; use o botão no fim pra mandar pra Charlaine.

Skills instaladas e testadasPronto quando: as quatro aparecem na lista e o auditar-seo devolveu nota do site da Conexão.
Estratégia do site da PontePronto quando: o site/estrategia.md tem ação principal, mapa de páginas e lista de provas.
Prévia da home da Ponte no arPronto quando: tem link no Cloudflare com noindex e a nota do auditar-seo passou de 80.
Formulário gravandoPronto quando: um envio de teste da prévia chegou na planilha pelo n8n.
Proposta de site + Google Meu Negócio pra PontePronto quando: foi enviada ao cliente junto com o link da prévia.
Processo de site escritoPronto quando: a seção 6 está preenchida e o Léo consegue seguir o processo sem perguntar.

Link da prévia da Ponte Nota do auditar-seo: antes e depois Onde você travou

8. Glossário

Domínio: O endereço do site, como nomedocliente.com.br. Comprado no Registro.br, no nome do cliente.
Hospedagem: Onde os arquivos do site ficam guardados. Aqui, o Cloudflare Pages.
DNS: A placa que aponta o domínio pra hospedagem. Mexe uma vez, quando o site vira oficial.
SSL (https): O cadeado do navegador. O Cloudflare liga sozinho.
Webhook: Um endereço do n8n que recebe o que o formulário envia.
noindex: Aviso pro Google não mostrar a página na busca. Obrigatório em prévia.
UTM: Etiqueta no fim do link (?utm_source=instagram) que diz de onde a visita veio.
GA4: O Google Analytics: conta visitas e as ações que importam, como clique no WhatsApp.
Pixel: O código da Meta que avisa o anúncio que alguém virou contato. É o que deixa a campanha aprender.
PageSpeed: Teste de velocidade do Google, em pagespeed.web.dev. Olhe sempre a aba Celular.