Kako AI generira potpunu WordPress stranicu za 2 minute

Svaki put kad netko unese opis poslovanja u PAGEnzu i pritisne generiraj, nešto prilično složeno događa se u pozadini — za otprilike 90 sekundi. Ovaj post objašnjava točno što je to.

Problem s predlošcima

Većina AI alata za izradu web stranica radi ovako: odaberu predložak, zamijene vaš tekst i nazovu ga "AI generiranim". Rezultat izgleda kao svaka druga stranica izgrađena na toj platformi.

PAGEnza radi drugačije. Nema predložaka. Svaka stranica počinje od praznog Gutenberg platna i algoritamski se gradi iz skupa dizajnerskih pravila koja nazivamo Dizajnerski Mandat.

Što je Dizajnerski Mandat?

Dizajnerski Mandat je strukturirani upit — otprilike 8.000 tokena — koji opisuje svaku vizualnu i strukturnu odluku za određenu stranicu. Izgrađen je u Pythonu prije bilo kojeg AI poziva, na temelju vašeg unosa.

Sadrži šest dijelova:

Dio A — Identitet marke: industrija, naziv tvrtke, ton (npr. "profesionalan" naspram "zaigran"), ciljana publika.

Dio B — Sustav boja: 4-bojna paleta (ink, bg1, bg2, accent) generirana algoritamski i provjerena prema WCAG AA pravilima kontrasta. Svaka paleta provjerava se stvarnom matematikom svjetline — ne nagađanjima.

Dio C — Tipografija: font trojac (naslov / tijelo / naglasak) odabran iz 80+ Google fontova, filtriran prema arhetipu industrije i provjeren da uključuje podršku za latin-ext znakove.

Dio D — Nacrt rasporeda: struktura stranice — koji se odjeljci pojavljuju, kojim redoslijedom i s kojom varijantom (npr. heroj s punom slikom naspram heroja s podijeljenim rasporedom).

Dio E — Ograničenja dizajna: stil radijusa obruba (oštro / meko / zaobljeno), oblici razdjelnika odjeljaka, obrada slike, sustav razmaka.

Dio F — Pravila sadržaja: koji tekst ide gdje, kako su strukturirani naslovi, koji se CTA pojavljuju.

Kako se generiraju palete

Boja je mjesto gdje većina AI alata zakaže. Traženje od LLM-a da odabere boje daje vam nasumične heksadecimalne kodove koji mogu izgledati dobro sami za sebe, ali ne prolaze testove pristupačnosti — ili jednostavno izgledaju generički.

Mi pristupamo drugačije. Naš sustav paleta radi ovako:

1. Na temelju vaše industrije i arhetipa (npr. "luksuz", "odvažno", "zemljano"), biramo iz 20 prethodno provjerenih grupa paleta
2. Unutar svake grupe, biramo paletu gdje ink ima ≥4.5:1 kontrast u odnosu na sve pozadine
3. Provjeravamo da accent ima ≥3.0:1 kontrast u odnosu na bg1 i bg2
4. Osiguravamo da dvije pozadinske boje imaju kontrastne temperature boja (jedna topla, jedna hladna) kako bi se odjeljci osjećali drugačije

Ako paleta ne prođe bilo koju provjeru, automatski se zamjenjuje. Nema LLM uključenosti u ovom koraku — to je čista matematika.

Kako se sastavljaju Gutenberg blokovi

Kada je Dizajnerski Mandat spreman, odlazi u Gemini Flash sa strogim upitom koji specificira:

• Koji su blokovi dopušteni (bijeli popis od ~40 tipova Gutenberg blokova)
• Potrebni atributi za svaki tip bloka
• Točan JSON format za izlaz

AI vraća sirovi Gutenberg blok JSON — ne HTML, ne React, stvarni WP blok kod. Taj JSON zatim prolazi kroz nekoliko prolaza validacije:

1. Validacija sheme — prisutni potrebni atributi, nema nepoznatih tipova blokova
2. Sanitizacija CSS klasa — izmišljena imena klasa se uklanjaju, zamjenjuju našim klasama dizajnerskog sustava
3. Procesi liječenja — sinkronizirani atributi razmaka, normalizirani gradijenti blokova naslovnice, umetnuti razdjelnici oblika

Rezultat se učitava izravno u WordPress putem WP REST API-ja i aktivira kao početna stranica web mjesta.

Što čini svaku stranicu jedinstvenom

Nekoliko stvari varira između svake generacije, čak i za istu industriju:

• Paleta: 20+ grupa, svaka s više paleta
• Font trojac: 6+ kombinacija po arhetipu
• Redoslijed i varijante odjeljaka: raspored heroja, stil statistika, aranžman kartica značajki
• Razdjelnici oblika: organski naspram geometrijskih, varijacije amplitude/frekvencije
• Blob oblici: za organske industrije, blobovi slika i kartica nasumično se generiraju iz 12 varijanti

Rezultat je da će dvije pizzerije generirane istog dana imati različite boje, različite fontove, različite rasporede — i obje će biti WCAG AA usklađene.

Što slijedi

Trenutno radimo na:

• Generiranje više stranica — generiranje /about, /services i /contact stranica iz istog mandata
• Pregled uživo — pregledavanje stranice prije nego što se implementira na WordPress
• Prijenos stila — učitavanje snimke zaslona stranice koja vam se sviđa i izdvajanje njezine dizajnerske DNK

Ako želite vidjeti sustav na djelu, generator je besplatan za isprobavanje — nije potreban račun za prvu stranicu.