Hoe AI een Complete WordPress-site genereert in 2 minuten

Elke keer dat iemand een bedrijfsbeschrijving in PAGEnza typt en op genereren klikt, gebeurt er iets behoorlijk complex op de achtergrond — in ongeveer 90 seconden. Deze post legt precies uit wat dat is.

Het probleem met sjablonen

De meeste AI-websitebouwers werken zo: ze kiezen een sjabloon, vervangen je tekst en noemen het "AI-gegenereerd". Het resultaat lijkt op elke andere site die op dat platform is gebouwd.

PAGEnza werkt anders. Er zijn geen sjablonen. Elke site begint vanaf een leeg Gutenberg-canvas en wordt algoritmisch opgebouwd uit een reeks ontwerpregels die we het Design Mandate noemen.

Wat is het Design Mandate?

Het Design Mandate is een gestructureerde prompt — ongeveer 8.000 tokens — die elke visuele en structurele beslissing voor een specifieke site beschrijft. Het wordt in Python gebouwd voordat er een AI-oproep wordt gedaan, op basis van uw invoer.

Het bevat zes delen:

Deel A — Merkidentiteit: branche, bedrijfsnaam, toon (bijv. "professioneel" versus "speels"), doelgroep.

Deel B — Kleursysteem: een kleurenpalet van 4 kleuren (ink, bg1, bg2, accent) dat algoritmisch wordt gegenereerd en gevalideerd tegen WCAG AA-contrastregels. Elk palet wordt gecontroleerd met echte luminantiemathematica — geen gissingen.

Deel C — Typografie: een lettertype-trio (kop / body / accent) gekozen uit meer dan 80 Google Fonts, gefilterd op branche-archetype en geverifieerd om latin-ext tekenondersteuning te bevatten.

Deel D — Lay-out Blauwdruk: de paginastructuur — welke secties verschijnen, in welke volgorde en met welke variant (bijv. hero met volledig schermafbeelding versus hero met gesplitste lay-out).

Deel E — Ontwerpbeperkingen: randradiusstijl (scherp / zacht / afgerond), vormen van sectiescheiders, afbeeldingsbehandeling, afstandssysteem.

Deel F — Inhoudsregels: welke tekst waar komt, hoe koppen zijn gestructureerd, welke CTA's verschijnen.

Hoe paletten worden gegenereerd

Kleur is waar de meeste AI-tools falen. Een LLM vragen om kleuren te kiezen, geeft je willekeurige hex-codes die er geïsoleerd prima uitzien, maar falen bij toegankelijkheidstests — of er gewoon generiek uitzien.

Wij hanteren een andere aanpak. Ons paletsysteem werkt als volgt:

1. Op basis van uw branche en archetype (bijv. "luxe", "gedurfd", "aardachtig"), selecteren we uit 20 vooraf gecontroleerde paletgroepen
2. Binnen elke groep kiezen we een palet waarbij ink een contrast heeft van ≥4,5:1 tegen alle achtergronden
3. We verifiëren dat accent een contrast heeft van ≥3,0:1 tegen bg1 en bg2
4. We zorgen ervoor dat de twee achtergrondkleuren contrasterende kleurentemperaturen hebben (één warm, één koel) zodat secties onderscheidend aanvoelen

Als een palet een controle niet doorstaat, wordt het automatisch vervangen. Geen LLM-betrokkenheid bij deze stap — het is pure wiskunde.

Hoe Gutenberg-blokken worden samengesteld

Zodra het Design Mandate klaar is, gaat het naar Gemini Flash met een strikte prompt die specificeert:

• Welke blokken zijn toegestaan (een whitelist van ~40 Gutenberg-bloktypen)
• Vereiste attributen voor elk bloktype
• Exact JSON-formaat voor de uitvoer

De AI retourneert ruwe Gutenberg-blok-JSON — geen HTML, geen React, daadwerkelijke WP-blok-markup. Die JSON doorloopt vervolgens verschillende validatiepassen:

1. Schema validatie — vereiste attributen aanwezig, geen onbekende bloktypen
2. CSS-klasse opschoning — verzonnen klassenamen worden verwijderd, vervangen door onze designsystem-klassen
3. Healer passes — afstandattributen gesynchroniseerd, cover block-gradiënten genormaliseerd, vormscheiders ingevoegd

Het resultaat wordt rechtstreeks naar WordPress geüpload via de WP REST API en geactiveerd als de homepage van de site.

Wat maakt elke site uniek

Verschillende dingen variëren tussen elke generatie, zelfs voor dezelfde branche:

• Palet: 20+ groepen, elk met meerdere paletten
• Lettertype-trio: 6+ combinaties per archetype
• Sectievolgorde en varianten: hero-lay-out, statistiekenstijl, rangschikking van functiekaarten
• Vormscheiders: organisch versus geometrisch, amplitude/frequentievariaties
• Blobvormen: voor organische branches worden afbeeldings- en kaartblobs gerandomiseerd uit 12 varianten

Het resultaat is dat twee pizzarestaurants die op dezelfde dag worden gegenereerd, verschillende kleuren, verschillende lettertypen, verschillende lay-outs zullen hebben — en beide zullen WCAG AA-compatibel zijn.

Wat is de volgende stap

We werken momenteel aan:

• Multi-pagina generatie — het genereren van /about, /services en /contact pagina's vanuit hetzelfde mandaat
• Live preview — de site bekijken voordat deze naar WordPress wordt geïmplementeerd
• Stijltransfer — een screenshot van een site die je leuk vindt uploaden en de design-DNA ervan extraheren

Als je het systeem in actie wilt zien, is de generator gratis te proberen — geen account vereist voor de eerste site.