Construtor de sites

Esta skill funciona para qualquer negócio: um dentista, um escritório de advocacia, um empreiteiro, um coach, uma empresa de software, uma padaria, uma igreja, um criador de cursos. Nunca presuma um ramo, um lugar ou um tipo de página. Tudo específico vem da entrevista e da pesquisa. Os exemplos nestes arquivos são apenas exemplos, nada mais.

A pessoa provavelmente não é técnica. Ela responde perguntas, clica em botões que você descreve e aprova o que você mostra a ela. Você faz todo o resto.

Escolha como trabalhar (pergunte uma vez, no início)

A menos que o pedido da pessoa já deixe claro, pergunte com a ferramenta AskUserQuestion (em palavras simples se essa ferramenta não estiver disponível). Pergunta: "Como você gostaria de trabalhar?" Duas opções:

Entrevista normal. "Eu vou te guiar passo a passo: o que suas páginas oferecem, pesquisa de palavras-chave, um site completo com contratos e verificações, publicado no Cloudflare de graça."
Livre (Freeform). "Você me diz o que quer e eu construo do seu jeito, em qualquer configuração ou hospedagem que você escolher. Ainda usarei boas práticas de copywriting, conversão, SEO e busca por IA, mas não vou questionar suas escolhas ou te colocar em um caminho pré-definido."

Lembre a resposta em content/notes.md (ou no arquivo de notas do projeto) para não perguntar novamente. A pessoa pode mudar a qualquer momento dizendo isso.

Modo Livre (Freeform)

Siga references/any-stack.md. Em resumo:

As palavras deles decidem. Construa o que eles pedirem, na ordem que pedirem, na stack, plataforma e hospedagem que eles nomearem ou já tiverem. Se não nomearem nada, escolha algo sensato para o trabalho e diga o que escolheu em uma frase. Não execute a entrevista, não exija contratos ou arquivos, e não discuta escolhas de layout ou design.
As convenções são seus padrões, não regras. Escreva o copy com references/copywriting.md (incluindo a verificação de 'marcas de IA'), molde as páginas com references/conversion.md e aplique references/technical-seo.md, references/geo-aeo.md e references/indexing.md onde couberem. Se um pedido claramente trabalhar contra seu próprio objetivo (dois botões concorrentes, um rastreador de IA bloqueado, uma página escondida da busca), mencione uma vez, em uma frase, e então faça do jeito deles.
O Lead Desk funciona no Modo Livre também, para qualquer site em qualquer hospedagem: os formulários enviam para ele e uma tag de script vai no rodapé do site (references/lead-desk.md).
Ímãs de leads funcionam da mesma forma no Modo Livre. "Faça um ímã de leads para mim" vai direto para references/lead-magnets.md e scripts/build-magnet.mjs, para qualquer site ou nenhum.
Use qualquer outra referência quando ajudar (pesquisa de palavras-chave, arquivos, páginas de sucesso, contratos), e apenas quando eles pedirem ou isso servir claramente ao que pediram.
As verificações ainda são executadas onde puderem: aponte scripts/check-site.mjs --freeform para a pasta de HTML construída do site, ou busque um site ativo primeiro com scripts/fetch-site.mjs. No modo livre, as convenções de layout aparecem como sugestões, não como falhas.
Ainda sempre: as regras de "Como trabalhar com a pessoa" abaixo, nenhum fato inventado, nenhum manuseio de senhas ou chaves, e perguntar antes de qualquer coisa que custe dinheiro, mude um domínio ou apague algo.

Tudo a partir de "Escolha o trabalho" é a Entrevista normal. No Modo Livre, use essas seções apenas como referência.

O objetivo: converter a ação

Cada página de destino existe para que uma ação seja tomada: a reserva, o formulário, o download, o registro, a compra. Busca, respostas de IA, posts sociais e anúncios apenas trazem pessoas para a página. A página funciona quando elas agem. Quando uma escolha ajuda o ranqueamento mas prejudica a conversão, a conversão vence. Leia references/conversion.md antes de projetar ou escrever qualquer página, e meça cada página pela sua taxa de conversão.

A ideia por trás do site (explique nestas palavras)

Seu site é uma coleção de páginas de destino. Cada página de destino é construída para um tipo de visitante que quer uma coisa, e pede que eles façam uma coisa: agendar uma chamada, obter um orçamento, baixar um guia, reservar um lugar, comprar. Tudo que eles precisam para decidir está na primeira tela, e não há menu para distraí-los. Depois que eles agem, caem em uma página de sucesso que entrega o que pediram e oferece um próximo passo.

Páginas de destino do mesmo tipo são agrupadas em um arquivo, que é uma página simples que as lista todas. Seus arquivos dependem do que você oferece ou vende. Eles podem ser lugares que você atende, seus serviços, as pessoas que você ajuda, guias gratuitos, eventos, ou algo completamente diferente. O rodapé no final de cada página linka para cada arquivo. Visitantes que quiserem dar uma olhada podem rolar para baixo e encontrar tudo, e o Google e assistentes de IA seguem esses links do rodapé para descobrir cada página.

O site cresce adicionando páginas de destino, nunca adicionando itens de menu. Cada página segue um contrato (uma lista de verificação de fatos e regras necessárias), então novas páginas são rápidas de adicionar e sempre atendem ao padrão.

Como trabalhar com a pessoa (sempre)

Autoatendimento: faça o pensamento você mesmo e ofereça menus curtos de opções concretas para escolher (AskUserQuestion), com sua recomendação primeiro. Faça perguntas abertas apenas para fatos que só eles sabem.
Um passo de cada vez. Palavras simples. Espere o "pronto" antes do próximo passo.
Quando eles precisarem clicar em algo, diga exatamente o que o botão diz e onde ele está na tela.
Nunca lide com senhas, chaves de API ou tokens. Nunca peça por eles no chat, e nunca os leia de arquivos ou do computador. Serviços que precisam de login são conectados pela própria pessoa: Cloudflare através do login do navegador, outras ferramentas através de seus próprios conectores Claude ou exportações CSV. Senhas e links de webhook do Lead Desk são digitados pela pessoa em suas próprias páginas do Lead Desk, nunca no chat.
Pergunte antes de qualquer coisa que custe dinheiro, mude um domínio, ou apague algo.
Após cada passo, diga o que você fez em uma frase. Sem jargão.
Mostre, não descreva: inicie a pré-visualização local e dê a eles o link sempre que houver algo para ver.
Nunca invente fatos: sem números, avaliações, lugares, credenciais ou volumes de busca inventados. Se um fato estiver faltando, pergunte.

Escolha o trabalho (Entrevista normal)

Construir um novo site. Cada fase, em ordem.
Fazer um ímã de leads (e, se quiser, sua página de destino, página de sucesso, posts, anúncios e emails). Siga references/lead-magnets.md.
Adicionar uma página de destino de qualquer tipo, em qualquer arquivo existente. Siga "Adicionando uma página" em references/contracts.md.
Adicionar um novo arquivo (um novo tipo de página de destino). Siga "Adicionando um arquivo" em references/contracts.md.
Encontrar palavras-chave e lugares, e planejar novas páginas. Fase 4, depois devolva o plano de páginas.
Verificar, corrigir e indexar um site existente. Fases 8, 9 e 10.
Configurar o Lead Desk, a própria caixa de entrada de leads do negócio com logins de administrador, resultados e alertas, em sua conta Cloudflare. Siga references/lead-desk.md. Funciona com qualquer site.
Configurar uma rotina que adiciona páginas em um cronograma. Veja "Rotinas" em references/contracts.md.

Fase 1: O que devo fazer para você? (sempre primeiro na entrevista)

Siga references/offers-and-archives.md. Mantenha o autoatendimento: você faz o pensamento e oferece menus para escolher.

Pergunte o que eles vendem, depois "Que ímãs de leads você quer que eu faça para você?" com 3-4 ideias elaboradas para o negócio deles (references/lead-magnets.md), depois quais páginas fazer.
Construa o inventário de ofertas a partir das escolhas deles: tudo que o site vai oferecer ou dar, e a ação única que cada um pede.
Aprenda o modelo de negócio, de onde vêm os clientes e o plano de mídias sociais. Cada post social que promete algo precisa de uma página de destino que entregue.
Decida se lugares importam. Muitos negócios não têm páginas de localização.
Escolha os arquivos a partir dos templates. Nomeie-os nas próprias palavras do negócio e obtenha a aprovação da pessoa.

Fase 2: Reúna os fatos

Leia about.md e voice.md primeiro se existirem, e pule qualquer coisa que eles já responderem. Depois pergunte, uma pergunta de cada vez, apenas pelo que os arquivos escolhidos precisam:

Prova: anos no mercado, números atendidos, credenciais ou licenças, garantias, prêmios, classificação e número de avaliações, e 3+ depoimentos com nome, lugar (se relevante) e um resultado específico.
Preços ou faixas de preço que eles estejam felizes em publicar, e quanto tempo as coisas levam.
Para cada oferta, os fatos específicos que sua página precisa (os campos do contrato te dizem quais).
Para onde os leads vão. Ofereça um menu: o próprio Lead Desk deles (recomendado: gratuito, na conta Cloudflare deles, mostra de onde cada lead veio e quais se tornaram clientes; references/lead-desk.md), o CRM ou ferramenta de email que eles já usam (o Lead Desk pode passar leads para ela), ou uma ferramenta de agendamento para chamadas.
Marca: logotipo, cores, fotos reais do trabalho e das pessoas.
Nome, endereço (se público) e telefone exatamente como no Perfil da Empresa no Google, mais links para todos os perfis oficiais.
Se eles possuem um domínio, e onde o compraram.

Salve tudo em content/business.yaml, content/offers.md e content/notes.md para que nada seja perguntado duas vezes.

Fase 3: Configure e conecte o Cloudflare

Siga references/cloudflare-setup.md: Node (se faltar), uma conta Cloudflare gratuita, Wrangler instalado no site em uma versão fixa, npm run cf:login, depois npm run cf:whoami para confirmar.

Fase 4: Pesquisa de palavras-chave, descoberta de lugares e plano de páginas

Siga references/keyword-research.md:

Construa candidatos a partir do inventário de ofertas, das próprias palavras dos clientes e (apenas se lugares importarem) dos lugares descobertos no nível de detalhe certo.
Obtenha demanda real de uma fonte nomeada e verifique a concorrência real nos resultados de busca reais.
Agrupe palavras-chave que compartilham resultados de busca em uma página, e passe cada página pelo filtro.
Salve research/keywords.csv, research/places.csv (se lugares importarem) e research/page-plan.md. Mostre o plano para a pessoa em palavras simples e obtenha sua aprovação.

Fase 5: Configure os contratos

Siga references/contracts.md:

Crie contracts/archives/<id>.json para cada arquivo escolhido a partir de assets/contracts/archive-templates/, com o próprio id, rótulo, caminho e objetivo do negócio.
Copie os contratos de sucesso que o site precisa de assets/contracts/success/.
Copie scripts/contracts.mjs, scripts/new-page.mjs, scripts/check-site.mjs e scripts/build-magnet.mjs para a pasta scripts/ do site.
Estruture cada página planejada com node scripts/new-page.mjs.

Fase 6: Construa o site

Siga references/site-structure.md. A stack é Astro + Tailwind com saída estática. As coleções de conteúdo são geradas a partir dos contratos, então a compilação recusa qualquer página que quebre seu contrato.

As regras que mais importam:

Um objetivo de conversão por página de destino. Cada botão e formulário leva à mesma ação, marcada com data-cta="<goal>" e data-success="/thanks/<goal>/". Uma segunda oferta ganha sua própria página.
Tudo importante na primeira tela: logotipo, um título que nomeia o problema e contém a palavra-chave principal da página, no máximo duas linhas de subtítulo, a única conversão, e confiança (emblemas mais 2-3 depoimentos curtos). A página pode rolar, mas ninguém deve precisar.
Nenhum menu de navegação superior. O cabeçalho contém apenas o logotipo e a chamada para ação.
Arquivos listam cada página de destino do seu tipo. O rodapé em cada página linka para cada arquivo.
Cada arquivo tem um papel. Arquivos search são construídos para ranquear e serem citados por IA (filtro de palavra-chave, SEO/AEO/GEO completo). Arquivos resource guardam coisas linkadas de conteúdo, posts sociais e email; suas páginas focam em mostrar exatamente o que o visitante recebe (uma prévia é necessária) e pulam o filtro de palavra-chave. both significa um recurso que também passou no filtro.
Páginas de sucesso seguem seu contrato de sucesso: entregam o que foi prometido, oferecem um próximo passo, nunca são indexadas.

Fase 6b: Faça os ímãs de leads

Para cada ímã de leads que eles pediram, siga references/lead-magnets.md: escreva lead-magnets/<slug>/magnet.md, execute node scripts/build-magnet.mjs lead-magnets/<slug> --site public, mostre a eles o PDF e a capa, e use a capa como pré-visualização da página de destino. Escreva promo.md (posts, fluxo de comentário-para-DM, anúncios e emails de acompanhamento) se eles quiserem.

Fase 7: Escreva o copy

Siga references/copywriting.md e references/conversion.md: consciente do problema, focado na solução, construído em torno da palavra-chave da página, frases curtas e simples, fatos em vez de adjetivos. Execute a verificação de 'marcas de IA' em cada página antes de mostrá-la.

Fase 8: Verificações

references/geo-aeo.md: a lista de verificação completa de busca por IA. Aplique tudo.
references/technical-seo.md: metadados, dados estruturados, sitemap, robots.txt, llms.txt, velocidade.
Adicione "check": "node scripts/contracts.mjs check && astro build && node scripts/check-site.mjs dist" ao package.json e execute npm run check após cada alteração. Nunca publique com uma linha FAIL. Corrija avisos a menos que haja uma razão declarada para não fazê-lo, e diga à pessoa quais você deixou e por quê.

Fase 8b: Lead Desk

Se eles escolheram o Lead Desk, configure-o com references/lead-desk.md antes de publicar: banco de dados, endereço (subdomínio deles se o domínio estiver no Cloudflare), convite do proprietário, formulários postando para ele com _success definido para a página de sucesso de cada página, o script auxiliar em cada página, e pelo menos um alerta. Envie um lead de teste da pré-visualização local e mostre-o chegando.

Fase 9: Publique

Mostre a pré-visualização local e aguarde a aprovação deles.
npm run deploy (executa as verificações primeiro; na primeira vez, crie o projeto como no guia de configuração).
Dê a eles o link ativo, depois abra cada arquivo, uma página de destino com sua página de sucesso, /sitemap-index.xml e /llms.txt.
Ofereça-se para conectar o domínio deles (guia de configuração, Parte 5). A indexação precisa do domínio final, então faça isso antes da fase 10 se eles quiserem um.
Após publicar, execute a verificação de velocidade ao vivo em references/technical-seo.md.

Fase 10: Seja indexado

Siga references/indexing.md: verificações pré-voo, Google Search Console, Bing Webmaster Tools, IndexNow, listagens de mapas, e manter a cópia .pages.dev fora da busca. Verifique o progresso com a pessoa nos dias 3, 7 e 14.

cartcodes/website-builder

O que é website-builder?

Perguntar na sua IA favorita

Documentação