Gerador de Site de Serviços
Construa sites completos para negócios de serviços com centenas de páginas otimizadas para SEO local em um fluxo de trabalho automatizado.
Stack: NextJS 14 + TypeScript + Tailwind CSS + PostgreSQL + Prisma ORM + Jina AI + Unsplash
Início Rápido
Etapa 0: Coletar Entradas do Usuário (OBRIGATÓRIO)
Antes de prosseguir, colete estas informações:
- Nicho de Serviço: Qual serviço? (ex.: "Encanador", "Lavagem de Pressão", "HVAC")
- Área de Atendimento: Cidade/região principal (ex.: "Port Orange, Flórida", "Galway, Irlanda")
- Nome do Negócio (opcional): Para personalização (ex.: "Serviços de Encanamento Murphy")
- Chave da API Jina: Necessária para pesquisa e coleta de imagens Unsplash
- Design HTML/CSS/JS (opcional): O usuário fornece OU o sistema gera
NÃO prossiga até ter: Nicho de serviço, área de atendimento e chave da API Jina confirmados.
Etapa 1: Geração de Design
IMPORTANTE: Use as diretrizes da skill frontend-aesthetics ao gerar designs!
Se o usuário NÃO forneceu design:
Invocar: agente design-generator
Entrada:
- Nicho de serviço
- Público-alvo (clientes locais)
- DEVE seguir as diretrizes da skill frontend-aesthetics:
- Tipografia: Usar fontes distintas (Plus Jakarta Sans, Space Grotesk, Cabinet Grotesk)
- Cores: Paletas específicas do setor, NÃO gradientes roxos
- Movimento: Animações CSS para encantar
- Fundos: Gradientes em camadas, padrões sutis
- Tailwind v4: Usar gap-* não space-x-*, sem resets CSS personalizados
Saída: /design/index.html, /design/styles.css, /design/script.js
Se o usuário forneceu design:
Salve o design deles na pasta /design/.
Etapa 2: Descoberta de Localidades
Invocar: agente location-generator
Entrada: Área de atendimento, nicho de serviço, chave da API Jina
Saída: /locations.json (20-50+ localidades com metadados)
Descobre todas as cidades, subúrbios e bairros dentro do raio de atendimento (tipicamente 15-50 milhas dependendo da geografia).
Etapa 3: Criação de Schema de Serviço
Invocar: agente service-schema-creator
Entrada: Nicho de serviço, chave da API Jina, localidades de amostra
Saída: /service-schema-template.json (5-15 serviços com schema abrangente)
Etapa 4: Configuração do Banco de Dados
Invocar: agente database-agent
Entrada: Diretório do projeto, nicho de serviço, área de atendimento
Saída: PostgreSQL + Prisma ORM configurados
Cria tabelas: ContactForm, QuoteRequest, CallbackRequest, PageView, EmailSubscriber, ServiceAreaLead
Etapa 5: Calcular Estratégia de Geração de Páginas
Total de páginas = Serviços × Localidades
Agentes necessários = Total de páginas ÷ 12 (média de páginas por agente)
Exemplo: 15 serviços × 48 localidades = 720 páginas → 60 agentes
Etapa 6: Disparar Geradores de Páginas (EM PARALELO)
CRÍTICO: Dispensar TODOS os agentes simultaneamente, não sequencialmente!
Invocar: agentes service-page-generator (N agentes em paralelo)
Entrada por agente:
- Caminho do template de schema de serviço
- Combinações de serviço+localidade atribuídas (10-15 páginas)
- Chave da API Jina (para raspagem de imagens Unsplash)
- Contexto do nicho de serviço
Saída: /pages/*.json (10-15 arquivos por agente)
Cada agente:
- Pesquisa no Unsplash via Jina por imagens relevantes
- Gera descrições de serviço, benefícios, processo, FAQ
- Cria arquivos JSON completos com todos os dados + imagens
Etapa 7: Construção do Site NextJS
Invocar: agente nextjs-builder
Entrada: Arquivos de design, todas as páginas JSON, schema de serviços, localidades
Saída: Pasta /website/ com aplicação NextJS completa
Cria:
- Página inicial com visão geral dos serviços
- Página principal de serviços
- Página principal de localidades
- Páginas individuais de serviço+localidade (ex.: /encanador-emergencial-athenry)
- Páginas de categorias de serviço
- Páginas de localidades
- Funcionalidade clique-para-ligar
- Sinais de confiança e CTAs
Etapa 8: Testes com Playwright
# Iniciar servidor de desenvolvimento em segundo plano
cd [projeto]/website && npm run dev &
# Invocar agente playwright-tester
# Testa todas as páginas, valida SEO, verifica imagens
# Matar servidor de desenvolvimento após os testes
kill [PID]
Etapa 9: Deploy no GitHub
cd [diretório-do-projeto]
git init
git add -A
git commit -m "Commit inicial: site [Nicho de Serviço] em [Área de Atendimento]"
gh repo create [nome-repo] --public --source=. --push
Se a CLI gh não estiver disponível, forneça instruções manuais.
Agentes Disponíveis
| Agente | Propósito | Invocação |
|---|---|---|
business-researcher | Pesquisar negócio específico (se nome fornecido) | Uma vez, Etapa 1 |
design-generator | Gerar design HTML/CSS/JS | Uma vez, Etapa 1 |
location-generator | Descobrir localidades na área de atendimento | Uma vez, Etapa 2 |
service-schema-creator | Criar lista e schema de serviços | Uma vez, Etapa 3 |
database-agent | Configurar PostgreSQL + Prisma | Uma vez, Etapa 4 |
service-page-generator | Gerar 10-15 páginas com imagens | N agentes, em paralelo |
nextjs-builder | Construir site NextJS completo | Uma vez, Etapa 7 |
playwright-tester | Testar todas as páginas e funcionalidades | Uma vez, Etapa 8 |
Diretrizes de Design & Estilo
CRÍTICO: Siga a skill frontend-aesthetics para evitar "AI slop"!
Tipografia (de frontend-aesthetics)
- Nunca use: Inter, Roboto, Open Sans, Lato, Arial, fontes de sistema
- Boas escolhas: Plus Jakarta Sans, Space Grotesk, Cabinet Grotesk, Outfit, Bricolage Grotesque
- Use extremos: Peso 100/200 vs 800/900, saltos de tamanho de 3x+
Cores por Tipo de Serviço
- Lavagem de Pressão/Limpeza: Azul forte (#1e40af) + Laranja (#ea580c) + Verde (#059669)
- Encanamento: Azul água (#0284c7) + Vermelho emergência (#dc2626) + Verde ecológico (#16a34a)
- HVAC: Azul frio (#0369a1) + Laranja quente (#ea580c) + Verde (#059669)
- Elétrica: Amarelo elétrico (#eab308) + Azul profissional (#1e40af) + Vermelho (#dc2626)
- Paisagismo: Verde natural (#15803d) + Marrom terra (#92400e) + Azul (#0284c7)
- Marketing/B2B: Azul marinho (#0A66C2) + Roxo acento (#8B5CF6) + Verde sucesso (#10B981)
Compatibilidade com Tailwind v4 (CRÍTICO)
- Nunca use:
space-x-*,space-y-*(removidos no v4) - Sempre use:
gap-*com contêineres flex/grid - Não adicione: Resets personalizados
* { margin: 0 }(quebra mx-auto) - Adicione:
@config "../tailwind.config.ts"ao CSS se usar configuração
Requisitos de Site de Serviços
- CTAs fortes (botões Ligue Agora, formulários Solicite Orçamento)
- Funcionalidade clique-para-ligar em dispositivos móveis
- Sinais de confiança (certificações, garantias, avaliações)
- Números de telefone locais em destaque
- Área de cobertura claramente mostrada
- Galerias de antes/depois
- Movimento/animações para carregamentos de página e interações
Estrutura de Arquivos
raiz-do-projeto/
├── design/
│ ├── index.html
│ ├── styles.css
│ └── script.js
├── pages/
│ └── [servico]-[localidade].json (200+ arquivos)
├── website/
│ ├── app/
│ │ ├── [slug]/page.tsx
│ │ ├── servicos/page.tsx
│ │ ├── localidades/page.tsx
│ │ └── ...
│ ├── components/
│ └── package.json
├── prisma/
│ └── schema.prisma
├── locations.json
├── service-schema-template.json
└── business-profile.json (se nome do negócio fornecido)
Exemplo de Fluxo de Trabalho
Usuário: "Faça um site de serviços para lavagem de pressão em Port Orange, Flórida"
- Coletar entradas (nicho: lavagem de pressão, área: Port Orange FL, chave Jina)
- Gerar design com sinais de confiança, CTAs, esquema de cores azul/laranja
- Descobrir 48 localidades num raio de 15 milhas
- Criar schema de 15 serviços de lavagem de pressão
- Configurar PostgreSQL com 6 tabelas de captura de leads
- Calcular: 15 × 48 = 720 páginas → disparar ~60 agentes
- Gerar todos os arquivos JSON de serviço+localidade com imagens Unsplash
- Construir site NextJS com 214+ páginas
- Executar testes Playwright (meta: taxa de aprovação de 80%+)
- Subir para o GitHub
- Relatar: URL do repositório, instruções de execução, instruções de deploy
Regras Críticas
FAÇA:
- Colete TODAS as entradas antes de começar
- Gere o design PRIMEIRO se não fornecido
- Descubra localidades ANTES de criar páginas
- Crie o schema de serviço ANTES de gerar páginas
- Dispense TODOS os agentes geradores de página SIMULTANEAMENTE
- Teste com Playwright ANTES do deploy
- Forneça instruções claras de deploy
NUNCA:
- Pule a fase de coleta de entradas
- Prossiga sem a chave da API Jina
- Dispense agentes sequencialmente (deve ser paralelo!)
- Construa o site NextJS antes de todas as páginas estarem prontas
- Pule os testes Playwright
- Deixe o usuário sem os próximos passos
Critérios de Sucesso
- Design existe (gerado OU fornecido pelo usuário)
- 20-50+ localidades descobertas
- 5-15 serviços no schema
- 200+ páginas de serviço+localidade geradas
- Todas as páginas têm imagens Unsplash
- Site NextJS construído e funcionando
- Testes Playwright passam (taxa de 80%+)
- Código commitado no git
- Usuário tem instruções de deploy