diegosouzapw/service-website-generator

Generador de Sitios Web de Servicios

Construye sitios web completos basados en servicios con cientos de páginas optimizadas para SEO local en un solo flujo de trabajo automatizado.

Stack: NextJS 14 + TypeScript + Tailwind CSS + PostgreSQL + Prisma ORM + Jina AI + Unsplash

Inicio Rápido

Paso 0: Recopilar Entradas del Usuario (REQUERIDO)

Antes de proceder, recopila estas entradas:

1. Nicho de Servicio: ¿Qué negocio de servicio? (ej., "Plomero", "Lavado a Presión", "HVAC")
2. Área de Servicio: Ciudad/región principal (ej., "Port Orange, Florida", "Galway, Irlanda")
3. Nombre del Negocio (opcional): Para personalización (ej., "Servicios de Plomería Murphy")
4. Clave API de Jina: Requerida para investigación y recopilación de imágenes de Unsplash
5. Diseño HTML/CSS/JS (opcional): El usuario proporciona O el sistema genera

NO continúes hasta que tengas: Nicho de servicio, área de servicio y clave API de Jina confirmados.

Paso 1: Generación de Diseño

IMPORTANTE: ¡Usa las pautas de la habilidad frontend-aesthetics al generar diseños!

Si el usuario NO proporcionó diseño:

Invoke: design-generator agent
Input:
  - Nicho de servicio
  - Audiencia objetivo (clientes locales)
  - DEBE seguir las pautas de frontend-aesthetics:
    - Tipografía: Usar fuentes distintivas (Plus Jakarta Sans, Space Grotesk, Cabinet Grotesk)
    - Colores: Paletas específicas de la industria, NO degradados morados
    - Movimiento: Animaciones CSS para deleite
    - Fondos: Degradados en capas, patrones sutiles
    - Tailwind v4: Usar gap-* no space-x-*, sin reseteos CSS personalizados
Output: /design/index.html, /design/styles.css, /design/script.js

Si el usuario SÍ proporcionó diseño: Guardar su diseño en la carpeta /design/.

Paso 2: Descubrimiento de Ubicaciones

Invoke: location-generator agent
Input: Área de servicio, nicho de servicio, clave API de Jina
Output: /locations.json (20-50+ ubicaciones con metadatos)

Descubre todos los pueblos, suburbios y vecindarios dentro del radio de servicio (típicamente 15-50 millas dependiendo de la geografía).

Paso 3: Creación de Esquema de Servicios

Invoke: service-schema-creator agent
Input: Nicho de servicio, clave API de Jina, ubicaciones de muestra
Output: /service-schema-template.json (5-15 servicios con esquema completo)

Paso 4: Configuración de Base de Datos

Invoke: database-agent agent
Input: Directorio del proyecto, nicho de servicio, área de servicio
Output: PostgreSQL + Prisma ORM configurados

Crea tablas: ContactForm, QuoteRequest, CallbackRequest, PageView, EmailSubscriber, ServiceAreaLead

Paso 5: Calcular Estrategia de Generación de Páginas

Total páginas = Servicios × Ubicaciones
Agentes necesarios = Total páginas ÷ 12 (páginas promedio por agente)

Ejemplo: 15 servicios × 48 ubicaciones = 720 páginas → 60 agentes

Paso 6: Generar Páginas (EN PARALELO)

CRÍTICO: ¡Genera TODOS los agentes simultáneamente, no secuencialmente!

Invoke: service-page-generator agents (N agentes en paralelo)
Input por agente:
  - Ruta de plantilla de esquema de servicio
  - Combinaciones de servicio+ubicación asignadas (10-15 páginas)
  - Clave API de Jina (para extracción de imágenes de Unsplash)
  - Contexto del nicho de servicio
Output: /pages/*.json (10-15 archivos por agente)

Cada agente:

• Busca en Unsplash a través de Jina imágenes relevantes
• Genera descripciones de servicios, beneficios, proceso, FAQ
• Crea archivos JSON completos con todos los datos + imágenes

Paso 7: Construcción del Sitio NextJS

Invoke: nextjs-builder agent
Input: Archivos de diseño, todas las páginas JSON, esquema de servicios, ubicaciones
Output: Carpeta /website/ con la aplicación NextJS completa

Crea:

• Página de inicio con resumen de servicios
• Página principal de servicios
• Página principal de ubicaciones
• Páginas individuales de servicio+ubicación (ej., /plomero-emergencia-athenry)
• Páginas de categorías de servicios
• Páginas de ubicaciones
• Funcionalidad de clic para llamar
• Señales de confianza y CTAs

Paso 8: Pruebas con Playwright

# Iniciar servidor de desarrollo en segundo plano
cd [proyecto]/website && npm run dev &

# Invocar agente playwright-tester
# Prueba todas las páginas, valida SEO, verifica imágenes

# Detener servidor de desarrollo después de las pruebas
kill [PID]

Paso 9: Despliegue en GitHub

cd [directorio-del-proyecto]
git init
git add -A
git commit -m "Commit inicial: Sitio web de [Nicho de Servicio] en [Área de Servicio]"
gh repo create [nombre-repo] --public --source=. --push

Si gh CLI no está disponible, proporcionar instrucciones manuales.

Agentes Disponibles

Agente	Propósito	Invocación
business-researcher	Investigar negocio específico (si se proporcionó nombre)	Una vez, Paso 1
design-generator	Generar diseño HTML/CSS/JS	Una vez, Paso 1
location-generator	Descubrir ubicaciones en el área de servicio	Una vez, Paso 2
service-schema-creator	Crear lista y esquema de servicios	Una vez, Paso 3
database-agent	Configurar PostgreSQL + Prisma	Una vez, Paso 4
service-page-generator	Generar 10-15 páginas con imágenes	N agentes, en paralelo
nextjs-builder	Construir sitio web NextJS completo	Una vez, Paso 7
playwright-tester	Probar todas las páginas y funcionalidad	Una vez, Paso 8

Pautas de Diseño y Estilo

CRÍTICO: ¡Sigue la habilidad frontend-aesthetics para evitar "AI slop"!

Tipografía (de frontend-aesthetics)

• Nunca usar: Inter, Roboto, Open Sans, Lato, Arial, fuentes del sistema
• Buenas opciones: Plus Jakarta Sans, Space Grotesk, Cabinet Grotesk, Outfit, Bricolage Grotesque
• Usar extremos: peso 100/200 vs 800/900, saltos de tamaño de 3x+

Colores por Tipo de Servicio

• Lavado a Presión/Limpieza: Azul fuerte (#1e40af) + Naranja (#ea580c) + Verde (#059669)
• Plomería: Azul agua (#0284c7) + Rojo emergencia (#dc2626) + Verde eco (#16a34a)
• HVAC: Azul frío (#0369a1) + Naranja cálido (#ea580c) + Verde (#059669)
• Electricidad: Amarillo eléctrico (#eab308) + Azul profesional (#1e40af) + Rojo (#dc2626)
• Paisajismo: Verde natural (#15803d) + Marrón tierra (#92400e) + Azul (#0284c7)
• Marketing/B2B: Azul marino (#0A66C2) + Acento morado (#8B5CF6) + Verde éxito (#10B981)

Compatibilidad con Tailwind v4 (CRÍTICO)

• Nunca usar: space-x-*, space-y-* (eliminados en v4)
• Siempre usar: gap-* con contenedores flex/grid
• No agregar: Reseteos personalizados * { margin: 0 } (rompe mx-auto)
• Agregar: @config "../tailwind.config.ts" al CSS si se usa configuración

Requisitos del Sitio Web de Servicios

• CTAs fuertes (Botones de Llamar Ahora, formularios de Cotización)
• Funcionalidad de clic para llamar en móvil
• Señales de confianza (certificaciones, garantías, reseñas)
• Números de teléfono locales destacados
• Área de cobertura claramente mostrada
• Galerías de imágenes antes/después
• Movimiento/animaciones para cargas de página e interacciones

Estructura de Archivos

raiz-del-proyecto/
├── design/
│   ├── index.html
│   ├── styles.css
│   └── script.js
├── pages/
│   └── [servicio]-[ubicacion].json (200+ archivos)
├── website/
│   ├── app/
│   │   ├── [slug]/page.tsx
│   │   ├── services/page.tsx
│   │   ├── locations/page.tsx
│   │   └── ...
│   ├── components/
│   └── package.json
├── prisma/
│   └── schema.prisma
├── locations.json
├── service-schema-template.json
└── business-profile.json (si se proporcionó nombre del negocio)

Ejemplo de Flujo de Trabajo

Usuario: "Hazme un sitio web de servicios para lavado a presión en Port Orange, Florida"

1. Recopilar entradas (nicho: lavado a presión, área: Port Orange FL, clave Jina)
2. Generar diseño con señales de confianza, CTAs, esquema de colores azul/naranja
3. Descubrir 48 ubicaciones en un radio de 15 millas
4. Crear esquema de 15 servicios de lavado a presión
5. Configurar PostgreSQL con 6 tablas de captura de leads
6. Calcular: 15 × 48 = 720 páginas → generar ~60 agentes
7. Generar todos los archivos JSON de servicio+ubicación con imágenes de Unsplash
8. Construir sitio NextJS con 214+ páginas
9. Ejecutar pruebas Playwright (objetivo: 80%+ de tasa de aprobación)
10. Subir a GitHub
11. Reportar: URL del repositorio, instrucciones de ejecución, instrucciones de despliegue

Reglas Críticas

HACER:

• Recopilar TODAS las entradas antes de comenzar
• Generar diseño PRIMERO si no se proporciona
• Descubrir ubicaciones ANTES de crear páginas
• Crear esquema de servicios ANTES de generar páginas
• Generar TODOS los agentes de generación de páginas SIMULTÁNEAMENTE
• Probar con Playwright ANTES del despliegue
• Proporcionar instrucciones de despliegue claras

NUNCA:

• Saltar la fase de recopilación de entradas
• Proceder sin la clave API de Jina
• Generar agentes secuencialmente (¡debe ser en paralelo!)
• Construir el sitio NextJS antes de que todas las páginas estén listas
• Saltar las pruebas de Playwright
• Dejar al usuario sin próximos pasos

Criterios de Éxito

• El diseño existe (generado O proporcionado por el usuario)
• 20-50+ ubicaciones descubiertas
• 5-15 servicios en el esquema
• 200+ páginas de servicio+ubicación generadas
• Todas las páginas tienen imágenes de Unsplash
• Sitio web NextJS construido y funcionando
• Pruebas Playwright pasan (80%+ de tasa)
• Código comprometido en git
• El usuario tiene instrucciones de despliegue