Blogg
Hvordan AI genererer et komplett WordPress-nettsted på 2 minutter
Et dypt dykk inn i designmandatsystemet, fargepalettgenerering og Gutenberg-blokksammenstilling som driver PAGEnzas nettstedsbygger.
Hver gang noen skriver inn en forretningsbeskrivelse i PAGEnza og trykker generer, skjer det noe ganske komplekst i bakgrunnen – på omtrent 90 sekunder. Dette innlegget forklarer nøyaktig hva det er.
Problemet med maler
De fleste AI-nettstedsbyggere fungerer slik: de velger en mal, bytter ut teksten din, og kaller det "AI-generert". Resultatet ser ut som alle andre nettsteder bygget på den plattformen.
PAGEnza fungerer annerledes. Det finnes ingen maler. Hvert nettsted starter fra et blankt Gutenberg-lerret og bygges algoritmisk fra et sett med designregler vi kaller Designmandatet.
Hva er Designmandatet?
Designmandatet er en strukturert ledetekst – omtrent 8000 tokens – som beskriver alle visuelle og strukturelle beslutninger for et spesifikt nettsted. Det bygges i Python før noen AI-kall gjøres, basert på inputen din.
Det inneholder seks deler:
Del A – Brandidentitet: bransje, firmanavn, tone (f.eks. "profesjonell" vs "lekfull"), målgruppe.
Del B – Fargesystem: en 4-fargepalett (blekk, bakgrunn1, bakgrunn2, aksent) generert algoritmisk og validert mot WCAG AA-kontrastregler. Hver palett sjekkes med ekte luminansmatematikk – ikke gjetninger.
Del C – Typografi: en font-trio (overskrift / brødtekst / aksent) valgt fra over 80 Google-fonter, filtrert etter bransjearketype og verifisert for å inkludere latin-ext-karakterstøtte.
Del D – Layoutplan: sidestrukturen – hvilke seksjoner som vises, i hvilken rekkefølge, og med hvilken variant (f.eks. helt med fullbredde-bilde vs helt med delt layout).
Del E – Designbegrensninger: hjørneradiusstil (skarp / myk / avrundet), seksjonsdelereformer, bildebehandling, avstandssystem.
Del F – Innholdsregler: hvilken tekst som går hvor, hvordan overskrifter struktureres, hvilke CTA-er som vises.
Hvordan paletter genereres
Farge er der de fleste AI-verktøy feiler. Å be en LLM om å velge farger gir deg tilfeldige heksadesimalkoder som kan se fine ut isolert sett, men som feiler tilgjengelighetstester – eller bare ser generiske ut.
Vi tar en annen tilnærming. Vårt palettsystem fungerer slik:
- Basert på din bransje og arketype (f.eks. "luksus", "dristig", "jordnær"), velger vi fra 20 forhåndsgodkjente palettgrupper
- Innenfor hver gruppe velger vi en palett der
blekkhar ≥4,5:1 kontrast mot alle bakgrunner - Vi verifiserer at
aksenthar ≥3,0:1 kontrast motbakgrunn1ogbakgrunn2 - Vi sikrer at de to bakgrunnsfargene har kontrasterende fargetemperaturer (en varm, en kald) slik at seksjoner føles distinkte
Hvis en palett feiler en sjekk, erstattes den automatisk. Ingen LLM-involvering i dette trinnet – det er ren matematikk.
Hvordan Gutenberg-blokker settes sammen
Når Designmandatet er klart, går det til Gemini Flash med en streng ledetekst som spesifiserer:
- Hvilke blokker som er tillatt (en hvitliste med ~40 Gutenberg-blokktyper)
- Nødvendige attributter for hver blokktype
- Nøyaktig JSON-format for utdata
AI-en returnerer rå Gutenberg-blokk-JSON – ikke HTML, ikke React, faktisk WP-blokk-markup. Den JSON-en går deretter gjennom flere valideringsrunder:
- Skjemavalidering – nødvendige attributter til stede, ingen ukjente blokktyper
- CSS-klasse-sanering – oppdiktede klassenavn fjernes, erstattes med våre designsystemklasser
- Healer-runder – avstandsattributter synkroniseres, bakgrunnsbilde-gradienter normaliseres, formdelere injiseres
Resultatet lastes opp direkte til WordPress via WP REST API og aktiveres som nettstedets hjemmeside.
Hva gjør hvert nettsted unikt
Flere ting varierer mellom hver generasjon, selv for samme bransje:
- Palett: 20+ grupper, hver med flere paletter
- Font-trio: 6+ kombinasjoner per arketype
- Seksjonsrekkefølge og varianter: helt-layout, statistikkstil, funksjonskort-arrangement
- Formdelere: organisk vs geometrisk, amplitude/frekvensvariasjoner
- Blob-former: for organiske bransjer, bilde- og kort-blober randomiseres fra 12 varianter
Resultatet er at to pizzarestauranter generert på samme dag vil ha forskjellige farger, forskjellige fonter, forskjellige layouter – og begge vil være WCAG AA-kompatible.
Hva er neste
Vi jobber for tiden med:
- Generering av flere sider – generering av
/om,/tjenesterog/kontakt-sider fra samme mandat - Forhåndsvisning i sanntid – se nettstedet før det distribueres til WordPress
- Stiloverføring – laste opp et skjermbilde av et nettsted du liker og trekke ut dets design-DNA
Hvis du vil se systemet i aksjon, er generatoren gratis å prøve – ingen konto kreves for det første nettstedet.