Service Website Generator
Erstellen Sie komplette dienstleistungsbasierte Websites mit Hunderten von lokalen SEO-Seiten in einem automatisierten Workflow.
Stack: NextJS 14 + TypeScript + Tailwind CSS + PostgreSQL + Prisma ORM + Jina AI + Unsplash
Schnellstart
Schritt 0: Benutzereingaben sammeln (ERFORDERLICH)
Sammeln Sie vor dem Fortfahren diese Eingaben:
- Dienstleistungsnische: Welches Service-Geschäft? (z. B. "Klempner", "Hochdruckreinigung", "HLK")
- Servicegebiet: Hauptstadt/Region (z. B. "Port Orange, Florida", "Galway, Irland")
- Geschäftsname (optional): Für Personalisierung (z. B. "Murphys Klempnerdienste")
- Jina-API-Schlüssel: Erforderlich für Recherche und Unsplash-Bildersammlung
- HTML/CSS/JS-Design (optional): Benutzer stellt bereit ODER System generiert
FAHREN SIE NICHT FORT, bis Sie haben: Dienstleistungsnische, Servicegebiet und Jina-API-Schlüssel bestätigt.
Schritt 1: Design-Generierung
WICHTIG: Befolgen Sie bei der Design-Generierung die Richtlinien der frontend-aesthetics-Fähigkeit!
Wenn der Benutzer KEIN Design bereitgestellt hat:
Agent aufrufen: design-generator
Eingabe:
- Dienstleistungsnische
- Zielgruppe (lokale Kunden)
- MUSS den frontend-aesthetics-Richtlinien folgen:
- Typografie: Verwenden Sie unverwechselbare Schriftarten (Plus Jakarta Sans, Space Grotesk, Cabinet Grotesk)
- Farben: Branchenspezifische Paletten, KEINE lila Verläufe
- Bewegung: CSS-Animationen für Freude
- Hintergründe: Geschichtete Verläufe, subtile Muster
- Tailwind v4: `gap-*` statt `space-x-*` verwenden, keine benutzerdefinierten CSS-Reset
Ausgabe: /design/index.html, /design/styles.css, /design/script.js
Wenn der Benutzer EIN Design bereitgestellt hat:
Speichern Sie ihr Design im Ordner /design/.
Schritt 2: Standortentdeckung
Agent aufrufen: location-generator
Eingabe: Servicegebiet, Dienstleistungsnische, Jina-API-Schlüssel
Ausgabe: /locations.json (20-50+ Standorte mit Metadaten)
Entdeckt alle Städte, Vororte und Nachbarschaften im Service-Radius (typischerweise 15-50 Meilen, abhängig von der Geografie).
Schritt 3: Dienstleistungsschema-Erstellung
Agent aufrufen: service-schema-creator
Eingabe: Dienstleistungsnische, Jina-API-Schlüssel, Beispielstandorte
Ausgabe: /service-schema-template.json (5-15 Dienstleistungen mit umfassendem Schema)
Schritt 4: Datenbank-Setup
Agent aufrufen: database-agent
Eingabe: Projektverzeichnis, Dienstleistungsnische, Servicegebiet
Ausgabe: PostgreSQL + Prisma ORM konfiguriert
Erstellt Tabellen: ContactForm, QuoteRequest, CallbackRequest, PageView, EmailSubscriber, ServiceAreaLead
Schritt 5: Seiten-Generierungsstrategie berechnen
Gesamtseiten = Dienstleistungen × Standorte
Benötigte Agents = Gesamtseiten ÷ 12 (durchschnittliche Seiten pro Agent)
Beispiel: 15 Dienstleistungen × 48 Standorte = 720 Seiten → 60 Agents
Schritt 6: Seitengeneratoren starten (PARALLEL)
KRITISCH: Alle Agents GLEICHZEITIG starten, nicht nacheinander!
Agent aufrufen: service-page-generator Agents (N Agents parallel)
Eingabe pro Agent:
- Pfad zur Dienstleistungsschema-Vorlage
- Zugewiesene Dienstleistung+Standort-Kombinationen (10-15 Seiten)
- Jina-API-Schlüssel (für Unsplash-Bildersuche)
- Kontext der Dienstleistungsnische
Ausgabe: /pages/*.json (10-15 Dateien pro Agent)
Jeder Agent:
- Durchsucht Unsplash über Jina nach relevanten Bildern
- Generiert Dienstleistungsbeschreibungen, Vorteile, Prozess, FAQ
- Erstellt vollständige JSON-Dateien mit allen Daten + Bildern
Schritt 7: NextJS-Website-Bau
Agent aufrufen: nextjs-builder
Eingabe: Design-Dateien, alle JSON-Seiten, Dienstleistungsschema, Standorte
Ausgabe: Ordner /website/ mit kompletter NextJS-App
Erstellt:
- Startseite mit Dienstleistungsübersicht
- Hauptseite für Dienstleistungen
- Hauptseite für Standorte
- Einzelne Dienstleistung+Standort-Seiten (z. B. /notdienst-klempner-athenry)
- Dienstleistungskategorieseiten
- Standortseiten
- Klick-zum-Anruf-Funktionalität
- Vertrauenssignale und CTAs
Schritt 8: Playwright-Tests
# Dev-Server im Hintergrund starten
cd [projekt]/website && npm run dev &
# playwright-tester Agent aufrufen
# Testet alle Seiten, validiert SEO, prüft Bilder
# Dev-Server nach Tests beenden
kill [PID]
Schritt 9: GitHub-Bereitstellung
cd [projekt-verzeichnis]
git init
git add -A
git commit -m "Initial commit: [Dienstleistungsnische] in [Servicegebiet] Website"
gh repo create [repo-name] --public --source=. --push
Wenn die gh-CLI nicht verfügbar ist, geben Sie manuelle Anweisungen.
Verfügbare Agents
| Agent | Zweck | Aufruf |
|---|---|---|
business-researcher | Rechere zu einem bestimmten Unternehmen (falls Name angegeben) | Einmal, Schritt 1 |
design-generator | HTML/CSS/JS-Design generieren | Einmal, Schritt 1 |
location-generator | Standorte im Servicegebiet entdecken | Einmal, Schritt 2 |
service-schema-creator | Dienstleistungsliste und Schema erstellen | Einmal, Schritt 3 |
database-agent | PostgreSQL + Prisma einrichten | Einmal, Schritt 4 |
service-page-generator | 10-15 Seiten mit Bildern generieren | N Agents, parallel |
nextjs-builder | Komplette NextJS-Website bauen | Einmal, Schritt 7 |
playwright-tester | Alle Seiten und Funktionalität testen | Einmal, Schritt 8 |
Design- & Stilrichtlinien
KRITISCH: Befolgen Sie die frontend-aesthetics-Fähigkeit, um "KI-Schlonz" zu vermeiden!
Typografie (aus frontend-aesthetics)
- Nie verwenden: Inter, Roboto, Open Sans, Lato, Arial, Systemschriftarten
- Gute Wahl: Plus Jakarta Sans, Space Grotesk, Cabinet Grotesk, Outfit, Bricolage Grotesque
- Extreme nutzen: 100/200 Schriftstärke vs. 800/900, Größensprünge von 3x+
Farben nach Dienstleistungstyp
- Hochdruckreinigung/Reinigung: Starkes Blau (#1e40af) + Orange (#ea580c) + Grün (#059669)
- Klempner: Wasserblau (#0284c7) + Notfall-Rot (#dc2626) + Öko-Grün (#16a34a)
- HLK: Kühles Blau (#0369a1) + Warmes Orange (#ea580c) + Grün (#059669)
- Elektriker: Elektrik-Gelb (#eab308) + Professionelles Blau (#1e40af) + Rot (#dc2626)
- Landschaftsbau: Naturgrün (#15803d) + Erdenbraun (#92400e) + Blau (#0284c7)
- Marketing/B2B: Marineblau (#0A66C2) + Lila Akzent (#8B5CF6) + Erfolgsgrün (#10B981)
Tailwind v4-Kompatibilität (KRITISCH)
- Nie verwenden:
space-x-*,space-y-*(in v4 entfernt) - Immer verwenden:
gap-*mit flex/grid-Containern - Nicht hinzufügen: Benutzerdefinierte
* { margin: 0 }-Resets (bricht mx-auto) - Hinzufügen:
@config "../tailwind.config.ts"zu CSS, wenn Konfiguration verwendet wird
Anforderungen an Dienstleistungs-Websites
- Starke CTAs (Jetzt Anrufen-Buttons, Angebot-Anfragen-Formulare)
- Klick-zum-Anruf-Funktionalität auf Mobilgeräten
- Vertrauenssignale (Zertifizierungen, Garantien, Bewertungen)
- Lokale Telefonnummern prominent angezeigt
- Servicegebiet-Abdeckung klar dargestellt
- Vorher/Nachher-Bildergalerien
- Bewegung/Animationen für Seitenladevorgänge und Interaktionen
Dateistruktur
projekt-root/
├── design/
│ ├── index.html
│ ├── styles.css
│ └── script.js
├── pages/
│ └── [dienstleistung]-[standort].json (200+ Dateien)
├── 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 (falls Geschäftsname angegeben)
Beispiel-Workflow
Benutzer: "Erstelle mir eine Dienstleistungs-Website für Hochdruckreinigung in Port Orange, Florida"
- Eingaben sammeln (Nische: Hochdruckreinigung, Gebiet: Port Orange FL, Jina-Schlüssel)
- Design mit Vertrauenssignalen, CTAs, Blau/Orange-Farbschema generieren
- 48 Standorte im 15-Meilen-Radius entdecken
- 15 Dienstleistungsschemata für Hochdruckreinigung erstellen
- PostgreSQL mit 6 Lead-Erfassungstabellen einrichten
- Berechnung: 15 × 48 = 720 Seiten → ~60 Agents starten
- Alle Dienstleistung+Standort-JSON-Dateien mit Unsplash-Bildern generieren
- NextJS-Website mit 214+ Seiten bauen
- Playwright-Tests ausführen (Ziel: 80%+ Bestehensquote)
- Auf GitHub pushen
- Bericht: Repository-URL, Ausführungsanweisungen, Bereitstellungsanweisungen
Kritische Regeln
TUN:
- ALLE Eingaben VOR dem Start sammeln
- Design ZUERST generieren, falls nicht bereitgestellt
- Standorte VOR der Seitenerstellung entdecken
- Dienstleistungsschema VOR der Seitengenerierung erstellen
- ALLE Seitengenerator-Agents GLEICHZEITIG starten
- VOR der Bereitstellung mit Playwright testen
- Klare Bereitstellungsanweisungen geben
NIE:
- Die Eingabesammelphase überspringen
- Ohne Jina-API-Schlüssel fortfahren
- Agents nacheinander starten (muss parallel sein!)
- NextJS-Website bauen, bevor alle Seiten fertig sind
- Playwright-Tests überspringen
- Den Benutzer ohne nächste Schritte lassen
Erfolgskriterien
- Design existiert (generiert ODER vom Benutzer bereitgestellt)
- 20-50+ Standorte entdeckt
- 5-15 Dienstleistungen im Schema
- 200+ Dienstleistung+Standort-Seiten generiert
- Alle Seiten haben Unsplash-Bilder
- NextJS-Website gebaut und läuft
- Playwright-Tests bestanden (80%+ Bestehensquote)
- Code in git committet
- Benutzer hat Bereitstellungsanweisungen