Générateur de Site Web de Services

Que fait Générateur de Site Web de Services ?

Construisez des sites web de services complets avec des centaines de pages SEO locales en un seul flux de travail automatisé.

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

Démarrage Rapide

Étape 0 : Collecter les Entrées Utilisateur (OBLIGATOIRE)

Avant de continuer, collectez ces entrées :

1. Niche de Service : Quel service ? (par ex., "Plombier", "Nettoyage Sous Pression", "HVAC")
2. Zone de Service : Ville/région principale (par ex., "Port Orange, Floride", "Galway, Irlande")
3. Nom de l'Entreprise (optionnel) : Pour la personnalisation (par ex., "Murphy's Plumbing Services")
4. Clé API Jina : Requise pour la recherche et la collecte d'images Unsplash
5. Design HTML/CSS/JS (optionnel) : Fourni par l'utilisateur OU généré par le système

NE PAS continuer tant que vous n'avez pas : la niche de service, la zone de service, et la clé API Jina confirmées.

Étape 1 : Génération du Design

IMPORTANT : Utilisez les directives du skill frontend-aesthetics lors de la génération des designs !

Si l'utilisateur n'a PAS fourni de design :

Invoquer : agent design-generator
Entrées :
  - Niche de service
  - Public cible (clients locaux)
  - DOIT suivre les directives du skill frontend-aesthetics :
    - Typographie : Utiliser des polices distinctives (Plus Jakarta Sans, Space Grotesk, Cabinet Grotesk)
    - Couleurs : Palettes spécifiques à l'industrie, PAS de dégradés violets
    - Mouvement : Animations CSS pour le plaisir visuel
    - Arrière-plans : Dégradés en couches, motifs subtils
    - Tailwind v4 : Utiliser gap-* et non space-x-*, pas de réinitialisation CSS personnalisée
Sortie : /design/index.html, /design/styles.css, /design/script.js

Si l'utilisateur a fourni un design : Enregistrez leur design dans le dossier /design/.

Étape 2 : Découverte de Localités

Invoquer : agent location-generator
Entrées : Zone de service, niche de service, clé API Jina
Sortie : /locations.json (20-50+ localités avec métadonnées)

Découvre toutes les villes, banlieues et quartiers dans le rayon de service (généralement 15 à 50 miles selon la géographie).

Étape 3 : Création d'un Schéma de Services

Invoquer : agent service-schema-creator
Entrées : Niche de service, clé API Jina, exemples de localités
Sortie : /service-schema-template.json (5-15 services avec schéma complet)

Étape 4 : Configuration de la Base de Données

Invoquer : agent database-agent
Entrées : Répertoire du projet, niche de service, zone de service
Sortie : PostgreSQL + Prisma ORM configuré

Crée les tables : ContactForm, QuoteRequest, CallbackRequest, PageView, EmailSubscriber, ServiceAreaLead

Étape 5 : Calcul de la Stratégie de Génération de Pages

Pages totales = Services × Localités
Agents nécessaires = Pages totales ÷ 12 (pages moyennes par agent)

Exemple : 15 services × 48 localités = 720 pages → 60 agents

Étape 6 : Lancement des Générateurs de Pages (EN PARALLÈLE)

CRITIQUE : Lancer TOUS les agents simultanément, pas séquentiellement !

Invoquer : agents service-page-generator (N agents en parallèle)
Entrées par agent :
  - Chemin du modèle de schéma de services
  - Combinaisons service+localité assignées (10-15 pages)
  - Clé API Jina (pour le scraping d'images Unsplash)
  - Contexte de la niche de service
Sortie : /pages/*.json (10-15 fichiers par agent)

Chaque agent :

• Recherche des images via Jina sur Unsplash
• Génère des descriptions de services, avantages, processus, FAQ
• Crée des fichiers JSON complets avec toutes les données + images

Étape 7 : Construction du Site NextJS

Invoquer : agent nextjs-builder
Entrées : Fichiers de design, toutes les pages JSON, schéma de services, localités
Sortie : Dossier /website/ avec l'application NextJS complète

Crée :

• Page d'accueil avec aperçu des services
• Page principale des services
• Page principale des localités
• Pages individuelles service+localité (par ex., /emergency-plumber-athenry)
• Pages de catégories de services
• Pages de localités
• Fonctionnalité Click-to-call
• Signaux de confiance et CTA

Étape 8 : Tests Playwright

# Démarrer le serveur de développement en arrière-plan
cd [projet]/website && npm run dev &

# Invoquer l'agent playwright-tester
# Teste toutes les pages, valide le SEO, vérifie les images

# Tuer le serveur de développement après les tests
kill [PID]

Étape 9 : Déploiement GitHub

cd [répertoire-du-projet]
git init
git add -A
git commit -m "Commit initial : site web [Niche de Service] à [Zone de Service]"
gh repo create [nom-du-repo] --public --source=. --push

Si la CLI gh n'est pas disponible, fournissez des instructions manuelles.

Agents Disponibles

Agent	Objectif	Invocation
business-researcher	Rechercher une entreprise spécifique (si le nom est fourni)	Une fois, Étape 1
design-generator	Générer un design HTML/CSS/JS	Une fois, Étape 1
location-generator	Découvrir les localités dans la zone de service	Une fois, Étape 2
service-schema-creator	Créer la liste et le schéma des services	Une fois, Étape 3
database-agent	Configurer PostgreSQL + Prisma	Une fois, Étape 4
service-page-generator	Générer 10-15 pages avec images	N agents, en parallèle
nextjs-builder	Construire le site NextJS complet	Une fois, Étape 7
playwright-tester	Tester toutes les pages et fonctionnalités	Une fois, Étape 8

Directives de Design & Style

CRITIQUE : Suivez le skill frontend-aesthetics pour éviter le "gâchis IA" !

Typographie (d'après frontend-aesthetics)

• Ne jamais utiliser : Inter, Roboto, Open Sans, Lato, Arial, polices système
• Bons choix : Plus Jakarta Sans, Space Grotesk, Cabinet Grotesk, Outfit, Bricolage Grotesque
• Utiliser des extrêmes : Poids 100/200 vs 800/900, sauts de taille de 3x+

Couleurs par Type de Service

• Nettoyage Sous Pression/Nettoyage : Bleu fort (#1e40af) + Orange (#ea580c) + Vert (#059669)
• Plomberie : Bleu eau (#0284c7) + Rouge urgence (#dc2626) + Vert éco (#16a34a)
• HVAC : Bleu froid (#0369a1) + Orange chaud (#ea580c) + Vert (#059669)
• Électricien : Jaune électrique (#eab308) + Bleu professionnel (#1e40af) + Rouge (#dc2626)
• Paysagisme : Vert naturel (#15803d) + Brun terre (#92400e) + Bleu (#0284c7)
• Marketing/B2B : Marine (#0A66C2) + Accent violet (#8B5CF6) + Vert succès (#10B981)

Compatibilité Tailwind v4 (CRITIQUE)

• Ne jamais utiliser : space-x-*, space-y-* (supprimés dans v4)
• Toujours utiliser : gap-* avec les conteneurs flex/grid
• Ne pas ajouter : Réinitialisation personnalisée * { margin: 0 } (casse mx-auto)
• Ajouter : @config "../tailwind.config.ts" au CSS si vous utilisez la configuration

Exigences pour un Site Web de Services

• CTA forts (Boutons Appeler Maintenant, formulaires Devis)
• Fonctionnalité Click-to-call sur mobile
• Signaux de confiance (certifications, garanties, avis)
• Numéros de téléphone locaux affichés en évidence
• Couverture de la zone de service clairement indiquée
• Galeries d'images avant/après
• Mouvement/animations pour les chargements de page et les interactions

Structure des Fichiers

racine-du-projet/
├── design/
│   ├── index.html
│   ├── styles.css
│   └── script.js
├── pages/
│   └── [service]-[localite].json (200+ fichiers)
├── 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 le nom de l'entreprise est fourni)

Exemple de Flux de Travail

Utilisateur : "Créez-moi un site web pour une entreprise de nettoyage sous pression à Port Orange, en Floride"

1. Collecter les entrées (niche : nettoyage sous pression, zone : Port Orange FL, clé Jina)
2. Générer un design avec signaux de confiance, CTA, palette de couleurs bleu/orange
3. Découvrir 48 localités dans un rayon de 15 miles
4. Créer un schéma de 15 services de nettoyage sous pression
5. Configurer PostgreSQL avec 6 tables de capture de leads
6. Calculer : 15 × 48 = 720 pages → lancer ~60 agents
7. Générer tous les fichiers JSON service+localité avec images Unsplash
8. Construire le site NextJS avec plus de 214 pages
9. Exécuter les tests Playwright (objectif : taux de réussite de 80%+)
10. Pousser sur GitHub
11. Rapport : URL du dépôt, instructions d'exécution, instructions de déploiement

Règles Critiques

À FAIRE :

• Collecter TOUTES les entrées avant de commencer
• Générer le design en PREMIER s'il n'est pas fourni
• Découvrir les localités AVANT de créer les pages
• Créer le schéma de services AVANT de générer les pages
• Lancer TOUS les agents générateurs de pages SIMULTANÉMENT
• Tester avec Playwright AVANT le déploiement
• Fournir des instructions de déploiement claires

NE JAMAIS :

• Sauter la phase de collecte des entrées
• Continuer sans la clé API Jina
• Lancer les agents séquentiellement (doivent être en parallèle !)
• Construire le site NextJS avant que toutes les pages soient prêtes
• Sauter les tests Playwright
• Laisser l'utilisateur sans prochaines étapes

Critères de Succès

• Le design existe (généré OU fourni par l'utilisateur)
• 20-50+ localités découvertes
• 5-15 services dans le schéma
• 200+ pages service+localité générées
• Toutes les pages ont des images Unsplash
• Site NextJS construit et fonctionnel
• Tests Playwright réussis (taux de 80%+)
• Code commité dans git
• L'utilisateur a des instructions de déploiement