Wie KI eine komplette WordPress-Seite in 2 Minuten erstellt

Jedes Mal, wenn jemand eine Geschäftsbeschreibung in PAGEnza eingibt und auf "Generieren" klickt, geschieht im Hintergrund etwas ziemlich Komplexes – in etwa 90 Sekunden. Dieser Beitrag erklärt genau, was das ist.

Das Problem mit Vorlagen

Die meisten KI-Website-Builder funktionieren so: Sie wählen eine Vorlage, fügen Ihre Texte ein und nennen es "KI-generiert". Das Ergebnis sieht aus wie jede andere Website, die auf dieser Plattform erstellt wurde.

PAGEnza funktioniert anders. Es gibt keine Vorlagen. Jede Website beginnt auf einer leeren Gutenberg-Leinwand und wird algorithmisch aus einer Reihe von Designregeln aufgebaut, die wir Design-Mandat nennen.

Was ist das Design-Mandat?

Das Design-Mandat ist ein strukturierter Prompt – etwa 8.000 Token lang –, der jede visuelle und strukturelle Entscheidung für eine bestimmte Website beschreibt. Es wird in Python erstellt, bevor ein KI-Aufruf erfolgt, basierend auf Ihren Eingaben.

Es besteht aus sechs Teilen:

Teil A – Markenidentität: Branche, Firmenname, Ton (z. B. "professionell" vs. "spielerisch"), Zielgruppe.

Teil B – Farbsystem: eine 4-Farben-Palette (ink, bg1, bg2, accent), die algorithmisch generiert und gegen die WCAG AA-Kontrastregeln validiert wird. Jede Palette wird mit echter Luminanzmathematik geprüft – keine Schätzungen.

Teil C – Typografie: ein Schriftart-Trio (Überschrift / Text / Akzent) ausgewählt aus über 80 Google Fonts, gefiltert nach Branchen-Archetyp und verifiziert, dass es die latin-ext-Zeichenunterstützung enthält.

Teil D – Layout-Blaupause: die Seitenstruktur – welche Abschnitte erscheinen, in welcher Reihenfolge und mit welcher Variante (z. B. Hero mit Vollbild-Bild vs. Hero mit geteiltem Layout).

Teil E – Design-Beschränkungen: Stil des Radius für Ränder (scharf / weich / abgerundet), Formen von Abschnittstrennlinien, Bildbehandlung, Abstandssystem.

Teil F – Inhaltsregeln: welcher Text wohin kommt, wie Überschriften strukturiert sind, welche CTAs erscheinen.

Wie Paletten generiert werden

Farbe ist der Punkt, an dem die meisten KI-Tools versagen. Wenn man eine LLM bittet, Farben auszuwählen, erhält man zufällige Hex-Codes, die isoliert gut aussehen mögen, aber Zugriffstests nicht bestehen – oder einfach generisch wirken.

Wir verfolgen einen anderen Ansatz. Unser Palettensystem funktioniert so:

1. Basierend auf Ihrer Branche und Ihrem Archetyp (z. B. "Luxus", "kräftig", "erdig") wählen wir aus 20 vorab geprüften Palettengruppen.
2. Innerhalb jeder Gruppe wählen wir eine Palette, bei der ink einen Kontrast von ≥4,5:1 zu allen Hintergründen aufweist.
3. Wir verifizieren, dass accent einen Kontrast von ≥3,0:1 zu bg1 und bg2 aufweist.
4. Wir stellen sicher, dass die beiden Hintergrundfarben kontrastierende Farbtemperaturen haben (eine warm, eine kühl), damit sich Abschnitte unterscheiden.

Wenn eine Palette eine Prüfung nicht besteht, wird sie automatisch ersetzt. Keine LLM-Beteiligung in diesem Schritt – das ist reine Mathematik.

Wie Gutenberg-Blöcke zusammengesetzt werden

Sobald das Design-Mandat fertig ist, geht es an Gemini Flash mit einem strengen Prompt, der Folgendes angibt:

• Welche Blöcke erlaubt sind (eine Whitelist von ca. 40 Gutenberg-Blocktypen).
• Erforderliche Attribute für jeden Blocktyp.
• Genaues JSON-Format für die Ausgabe.

Die KI gibt rohes Gutenberg-Block-JSON zurück – kein HTML, kein React, tatsächliche WP-Block-Markup. Dieses JSON durchläuft dann mehrere Validierungsdurchläufe:

1. Schema-Validierung – erforderliche Attribute vorhanden, keine unbekannten Blocktypen.
2. CSS-Klassen-Bereinigung – erfundene Klassennamen werden entfernt und durch unsere Designsystem-Klassen ersetzt.
3. Heiler-Durchläufe – Abstandattribute synchronisiert, Cover-Block-Verläufe normalisiert, Formtrennlinien eingefügt.

Das Ergebnis wird direkt über die WP REST API in WordPress hochgeladen und als Homepage der Website aktiviert.

Was jede Website einzigartig macht

Mehrere Dinge variieren bei jeder Generierung, selbst für dieselbe Branche:

• Palette: 20+ Gruppen, jede mit mehreren Paletten.
• Schriftart-Trio: 6+ Kombinationen pro Archetyp.
• Absatzreihenfolge und -varianten: Hero-Layout, Statistik-Stil, Anordnung von Feature-Karten.
• Formtrennlinien: organisch vs. geometrisch, Amplituden-/Frequenzvariationen.
• Blob-Formen: für organische Branchen werden Bild- und Karten-Blobs aus 12 Varianten randomisiert.

Das Ergebnis ist, dass zwei am selben Tag generierte Pizzerien unterschiedliche Farben, unterschiedliche Schriftarten, unterschiedliche Layouts haben werden – und beide WCAG AA-konform sind.

Was kommt als Nächstes

Wir arbeiten derzeit an:

• Mehrseitengenerierung – Generierung von /about, /services und /contact-Seiten aus demselben Mandat.
• Live-Vorschau – die Website sehen, bevor sie auf WordPress bereitgestellt wird.
• Stilübertragung – Hochladen eines Screenshots einer Website, die Ihnen gefällt, und Extrahieren ihrer Design-DNA.

Wenn Sie das System in Aktion sehen möchten, können Sie den Generator kostenlos ausprobieren – keine Anmeldung für die erste Website erforderlich.