Hur AI genererar en komplett WordPress-webbplats på 2 minuter

Varje gång någon skriver en företagsbeskrivning i PAGEnza och klickar på generera, händer något ganska komplext i bakgrunden – på cirka 90 sekunder. Det här inlägget förklarar exakt vad det är.

Problemet med mallar

De flesta AI-webbplatsbyggare fungerar så här: de väljer en mall, byter ut din text och kallar det "AI-genererat". Resultatet ser ut som alla andra webbplatser som byggts på den plattformen.

PAGEnza fungerar annorlunda. Det finns inga mallar. Varje webbplats börjar från en tom Gutenberg-yta och byggs algoritmiskt från en uppsättning designregler som vi kallar Design Mandate.

Vad är Design Mandate?

Design Mandate är en strukturerad prompt – cirka 8 000 tokens – som beskriver varje visuell och strukturellt beslut för en specifik webbplats. Den byggs i Python innan något AI-anrop görs, baserat på din input.

Den innehåller sex delar:

Del A – Varumärkesidentitet: bransch, företagsnamn, ton (t.ex. "professionell" vs "lekfull"), målgrupp.

Del B – Färgsystem: en 4-färgs palett (ink, bg1, bg2, accent) genererad algoritmiskt och validerad mot WCAG AA-kontrastregler. Varje palett kontrolleras med verklig luminansmatematik – inte gissningar.

Del C – Typografi: en font-trio (rubrik / brödtext / accent) vald från över 80 Google Fonts, filtrerad efter branscharchetyp och verifierad för att inkludera latin-ext teckensupport.

Del D – Layoutplan: sidans struktur – vilka sektioner som visas, i vilken ordning och med vilken variant (t.ex. hjälte med helsidesbild vs hjälte med delad layout).

Del E – Designbegränsningar: kantradie-stil (sharp / soft / rounded), sektionsdelar, bildbehandling, avståndssystem.

Del F – Innehållsregler: vilken text som hamnar var, hur rubriker struktureras, vilka CTA:er som visas.

Hur paletter genereras

Färg är där de flesta AI-verktyg misslyckas. Att be en LLM att välja färger ger dig slumpmässiga hexkoder som kan se bra ut isolerat men misslyckas med tillgänglighetstester – eller bara ser generiska ut.

Vi tar ett annat grepp. Vårt palettsystem fungerar så här:

1. Baserat på din bransch och arketyp (t.ex. "lyxig", "djärv", "jordnära"), väljer vi från 20 förhandsgranskade palettgrupper
2. Inom varje grupp väljer vi en palett där ink har ≥4,5:1 kontrast mot alla bakgrunder
3. Vi verifierar att accent har ≥3,0:1 kontrast mot bg1 och bg2
4. Vi säkerställer att de två bakgrundsfärgerna har kontrasterande färgtemperaturer (en varm, en kall) så att sektionerna känns distinkta

Om en palett misslyckas med någon kontroll, ersätts den automatiskt. Ingen LLM-inblandning i detta steg – det är ren matematik.

Hur Gutenberg-block monteras

När Design Mandate är klar, går den till Gemini Flash med en strikt prompt som specificerar:

• Vilka block som är tillåtna (en vitlista med ~40 Gutenberg-blocktyper)
• Nödvändiga attribut för varje blocktyp
• Exakt JSON-format för utdata

AI:n returnerar rå Gutenberg-block JSON – inte HTML, inte React, faktiskt WP-blockmarkup. Den JSON:en går sedan igenom flera valideringssteg:

1. Schema-validering – nödvändiga attribut finns, inga okända blocktyper
2. CSS-klass-sanering – uppfunna klassnamn tas bort, ersätts med våra designsystemklasser
3. Hjälp-steg – avståndsattribut synkroniseras, gradienter i täckblocks normaliseras, formdelare injiceras

Resultatet laddas upp direkt till WordPress via WP REST API och aktiveras som webbplatsens startsida.

Vad som gör varje webbplats unik

Flera saker varierar mellan varje generering, även för samma bransch:

• Palett: 20+ grupper, var och en med flera paletter
• Font-trio: 6+ kombinationer per arketyp
• Sektionsordning och varianter: hjälte-layout, statistikstil, arrangemang av funktionskort
• Formdelare: organiska vs geometriska, variationsamplitud/frekvens
• Blob-former: för organiska branscher, bild- och kortblobbar randomiseras från 12 varianter

Resultatet är att två pizzerior som genereras samma dag kommer att ha olika färger, olika typsnitt, olika layouter – och båda kommer att vara WCAG AA-kompatibla.

Vad som kommer härnäst

Vi arbetar för närvarande med:

• Generering av flera sidor – generera /about, /services och /contact sidor från samma mandat
• Live-förhandsgranskning – se webbplatsen innan den driftsätts till WordPress
• Stilöverföring – ladda upp en skärmdump av en webbplats du gillar och extrahera dess design-DNA

Om du vill se systemet i aktion är generatorn gratis att prova – ingen registrering krävs för den första webbplatsen.