Kako AI generiše potpunu WordPress stranicu za 2 minuta

Svaki put kada neko unese opis poslovanja u PAGEnza i pritisne generiraj, nešto prilično složeno se dešava u pozadini — za oko 90 sekundi. Ovaj post objašnjava tačno šta je to.

Problem sa predlošcima

Većina AI alata za izradu web stranica radi ovako: biraju predložak, zamjenjuju vaš tekst i nazivaju to "generisano od strane AI". Rezultat izgleda kao svaka druga stranica napravljena 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 koje nazivamo Dizajnerski Mandat.

Šta je Dizajnerski Mandat?

Dizajnerski Mandat je strukturirani upit — otprilike 8.000 tokena — koji opisuje svaku vizuelnu i strukturalnu odluku za specifičnu stranicu. Izgrađen je u Pythonu prije bilo kojeg AI poziva, na osnovu vašeg unosa.

Sadrži šest dijelova:

Dio A — Identitet brenda: industrija, naziv poslovanja, ton (npr. "profesionalan" naspram "razigran"), ciljna publika.

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

Dio C — Tipografija: trojka fontova (naslov / tijelo / akcent) odabrana iz 80+ Google fontova, filtrirana prema arhetipu industrije i provjerena da uključuje podršku za latin-ext znakove.

Dio D — Nacrt rasporeda: struktura stranice — koji se odjeljci pojavljuju, kojim redoslijedom i sa kojom varijantom (npr. hero sa punom širinom slike naspram hero sa podijeljenim rasporedom).

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

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

Kako se generišu palete

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

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

1. Na osnovu vaše industrije i arhetipa (npr. "luksuz", "hrabro", "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 boje pozadine imaju kontrastne temperature boja (jedna topla, jedna hladna) kako bi se odjeljci osjećali drugačije

Ako paleta ne prođe nijednu 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, ide Gemini Flash-u sa strogim upitom koji specificira:

• Koji su blokovi dozvoljeni (bijela lista od ~40 tipova Gutenberg blokova)
• Potrebni atributi za svaki tip bloka
• Tač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 šeme — prisutni potrebni atributi, nema nepoznatih tipova blokova
2. Sanitizacija CSS klasa — izmišljena imena klasa se uklanjaju, zamjenjuju našim klasama dizajnerskog sistema
3. Procesi ispravljanja — sinhronizovani atributi razmaka, normalizovani gradijenti cover bloka, umetnuti razdjelnici oblika

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

Šta čini svaku stranicu jedinstvenom

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

• Paleta: 20+ grupa, svaka sa više paleta
• Trojka fontova: 6+ kombinacija po arhetipu
• Redoslijed i varijante odjeljaka: raspored hero sekcije, stil statistika, aranžman kartica sa funkcijama
• Razdjelnici oblika: organski naspram geometrijskih, varijacije amplitude/frekvencije
• Blob oblici: za organske industrije, blobovi slika i kartica se nasumično generišu iz 12 varijanti

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

Šta je sljedeće

Trenutno radimo na:

• Generisanje više stranica — generisanje /about, /services i /contact stranica iz istog mandata
• Pregled uživo — pregledanje stranice prije nego što se postavi na WordPress
• Prijenos stila — učitavanje snimka ekrana stranice koja vam se sviđa i ekstrakcija njene dizajnerske DNK

Ako želite vidjeti sistem na djelu, generator je besplatan za isprobavanje — nije potreban nalog za prvu stranicu.