Sådan genererer AI en komplet WordPress-side på 2 minutter

Hver gang nogen indtaster en forretningsbeskrivelse i PAGEnza og trykker på generer, sker der noget ret komplekst i baggrunden – på cirka 90 sekunder. Dette indlæg forklarer præcis, hvad det er.

Problemet med skabeloner

De fleste AI-sidebyggere fungerer sådan her: de vælger en skabelon, udskifter din tekst og kalder det "AI-genereret". Resultatet ligner alle andre sider bygget på den platform.

PAGEnza fungerer anderledes. Der er ingen skabeloner. Hver side starter fra et tomt Gutenberg-lærred og bygges algoritmisk ud fra et sæt designregler, vi kalder Design Mandate.

Hvad er Design Mandate?

Design Mandate er en struktureret prompt – cirka 8.000 tokens – der beskriver alle visuelle og strukturelle beslutninger for en specifik side. Den bygges i Python, før der foretages AI-kald, baseret på dine input.

Den indeholder seks dele:

Del A — Brandidentitet: branche, firmanavn, tone (f.eks. "professionel" vs "legende"), målgruppe.

Del B — Farvesystem: en 4-farvepalet (ink, bg1, bg2, accent) genereret algoritmisk og valideret mod WCAG AA-kontrastregler. Hver palet kontrolleres med reel luminansmatematik – ikke gæt.

Del C — Typografi: en skrifttypetrippel (overskrift / brødtekst / accent) valgt fra 80+ Google Fonts, filtreret efter branchearketype og verificeret til at inkludere latin-ext tegnsæt.

Del D — Layout Blueprint: sidens struktur – hvilke sektioner der vises, i hvilken rækkefølge, og med hvilken variant (f.eks. hero med fuld bredde billede vs hero med delt layout).

Del E — Designbegrænsninger: kantradiusstil (skarp / blød / afrundet), sektionsdelereformer, billedbehandling, afstands­system.

Del F — Indholdsregler: hvilken tekst der skal hvor, hvordan overskrifter er struktureret, hvilke CTA'er der vises.

Sådan genereres paletter

Farve er, hvor de fleste AI-værktøjer fejler. At bede en LLM om at vælge farver giver dig tilfældige hex-koder, der måske ser fine ud isoleret, men fejler tilgængelighedstests – eller bare ser generiske ud.

Vi griber det anderledes an. Vores paletsystem fungerer sådan her:

1. Baseret på din branche og arketype (f.eks. "luksus", "fed", "jordnær"), vælger vi fra 20 forhåndsgodkendte paletgrupper
2. Inden for hver gruppe vælger vi en palet, hvor ink har ≥4,5:1 kontrast mod alle baggrunde
3. Vi verificerer, at accent har ≥3,0:1 kontrast mod bg1 og bg2
4. Vi sikrer, at de to baggrundsfarver har kontrasterende farvetemperaturer (en varm, en kold), så sektioner føles distinkte

Hvis en palet fejler et tjek, erstattes den automatisk. Ingen LLM-involvering i dette trin – det er ren matematik.

Sådan samles Gutenberg-blokke

Når Design Mandate er klar, sendes den til Gemini Flash med en streng prompt, der specificerer:

• Hvilke blokke der er tilladt (en hvidliste med ~40 Gutenberg-bloktyper)
• Påkrævede attributter for hver bloktype
• Præcis JSON-format for outputtet

AI'en returnerer rå Gutenberg-blok-JSON – ikke HTML, ikke React, faktisk WP-blok-markup. Den JSON gennemgår derefter flere valideringstrin:

1. Skema­validering – påkrævede attributter til stede, ingen ukendte bloktyper
2. CSS-klasse­sanering – opfundne klassenavne fjernes, erstattes med vores design­system­klasser
3. Healer-pas – afstands­attributter synkroniseres, cover-blok­gradienter normaliseres, form­delere injiceres

Resultatet uploades direkte til WordPress via WP REST API og aktiveres som sidens startside.

Hvad gør hver side unik

Flere ting varierer mellem hver generering, selv for den samme branche:

• Palet: 20+ grupper, hver med flere paletter
• Skrifttypetrippel: 6+ kombinationer pr. arketype
• Sektions­rækkefølge og varianter: hero-layout, statistik­stil, feature­kort­arrangement
• Form­delere: organisk vs. geometrisk, amplitude/frekvens­variationer
• Blob-former: for organiske brancher, billede- og kort­blober randomiseres fra 12 varianter

Resultatet er, at to pizzarestauranter genereret på samme dag vil have forskellige farver, forskellige skrifttyper, forskellige layouts – og begge vil være WCAG AA-kompatible.

Hvad er næste skridt

Vi arbejder i øjeblikket på:

• Generering af flere sider – generering af /about, /services og /contact sider fra samme mandat
• Live­visning – se siden, før den implementeres på WordPress
• Stil­overførsel – upload et skærmbillede af en side, du kan lide, og udtræk dens design-DNA

Hvis du vil se systemet i aktion, er generatoren gratis at prøve – ingen konto kræves til den første side.