Kako umetna inteligenca ustvari celotno spletno mesto WordPress v 2 minutah

Vsakič, ko nekdo vpiše opis podjetja v PAGEnza in pritisne »ustvari«, se v ozadju zgodi nekaj precej zapletenega – v približno 90 sekundah. Ta objava natančno pojasnjuje, kaj je to.

Težava s predlogami

Večina graditeljev spletnih mest z umetno inteligenco deluje takole: izberejo predlogo, zamenjajo vaše besedilo in to imenujejo »ustvarjeno z umetno inteligenco«. Rezultat je videti kot vsako drugo spletno mesto, zgrajeno na tej platformi.

PAGEnza deluje drugače. Predlog ni. Vsako spletno mesto se začne na praznem platnu Gutenberg in je algoritemsko zgrajeno iz nabora oblikovalskih pravil, ki jih imenujemo Oblikovalske smernice.

Kaj so Oblikovalske smernice?

Oblikovalske smernice so strukturiran poziv – približno 8.000 žetonov –, ki opisuje vsako vizualno in strukturno odločitev za določeno spletno mesto. Zgrajen je v Pythonu, preden se izvede kateri koli klic umetne inteligence, na podlagi vašega vnosa.

Vsebuje šest delov:

Del A — Identiteta blagovne znamke: panoga, ime podjetja, ton (npr. »profesionalen« proti »igriv«), ciljna publika.

Del B — Barvni sistem: 4-barvna paleta (črnilo, ozadje1, ozadje2, poudarek), ki je algoritemsko generirana in preverjena glede na pravila kontrasta WCAG AA. Vsaka paleta je preverjena s pravim izračunom svetilnosti – ne ugibanji.

Del C — Tipografija: pisavski trio (naslov / besedilo / poudarek), izbran iz 80+ pisav Google Fonts, filtriran po arhetipu panoge in preverjen, da vključuje podporo za znake latin-ext.

Del D — Načrt postavitve: struktura strani – kateri razdelki se pojavijo, v kakšnem vrstnem redu in s kakšno različico (npr. uvodni razdelek s sliko polne širine proti uvodnemu razdelku s postavitvijo na polovico).

Del E — Omejitve oblikovanja: slog radija robov (ostri / mehki / zaobljeni), oblike delilnikov razdelkov, obdelava slik, sistem razmikov.

Del F — Pravila vsebine: katero besedilo gre kam, kako so strukturirani naslovi, kateri pozivi k dejanju se pojavijo.

Kako se generirajo barvne palete

Barve so tisto, kjer večina orodij z umetno inteligenco odpove. Če LLM-ju naročite, naj izbere barve, dobite naključne šestnajstiške kode, ki so morda videti v redu samostojno, vendar ne uspejo na testih dostopnosti – ali pa so videti generično.

Mi pristopimo drugače. Naš sistem barvnih palet deluje takole:

1. Na podlagi vaše panoge in arhetipa (npr. »razkošen«, »drzen«, »zemeljski«) izberemo iz 20 predhodno preverjenih skupin palet
2. Znotraj vsake skupine izberemo paleto, kjer ima črnilo ≥4,5:1 kontrast glede na vsa ozadja
3. Preverimo, da ima poudarek ≥3,0:1 kontrast glede na ozadje1 in ozadje2
4. Zagotovimo, da imata obe barvi ozadja kontrastni barvni temperaturi (ena topla, ena hladna), tako da se razdelki čutijo drugače

Če katera koli paleta ne prestane preverjanja, se samodejno zamenja. V tem koraku ni vpletenosti LLM – to je čista matematika.

Kako se sestavljajo bloki Gutenberg

Ko so Oblikovalske smernice pripravljene, gredo v Gemini Flash s strogim pozivom, ki določa:

• Kateri bloki so dovoljeni (dovoljeni seznam približno 40 vrst blokov Gutenberg)
• Zahtevani atributi za vsako vrsto bloka
• Natančna oblika JSON za izhod

Umetna inteligenca vrne surov JSON blokov Gutenberg – ne HTML, ne React, dejansko oznako blokov WP. Ta JSON nato prestane več preverjanj:

1. Preverjanje sheme – prisotni zahtevani atributi, ni neznanih vrst blokov
2. Čiščenje CSS razredov – izmišljena imena razredov se odstranijo, zamenjajo z našimi razredi oblikovalskega sistema
3. Popravki – atributi razmikov usklajeni, prelivi v bloku pokrova normalizirani, vstavljeni delilniki oblik

Rezultat se naloži neposredno v WordPress prek WP REST API in aktivira kot domača stran spletnega mesta.

Kaj naredi vsako spletno mesto edinstveno

Več stvari se razlikuje med vsako generacijo, tudi za isto panogo:

• Paleta: 20+ skupin, vsaka z več paletami
• Pisavski trio: 6+ kombinacij na arhetip
• Vrstni red in različice razdelkov: postavitev uvodnega razdelka, slog statistik, razporeditev kartic s funkcijami
• Delilniki oblik: organski proti geometrijskim, variacije amplitude/frekvence
• Oblike mehurčkov: za organske panoge se mehurčki slik in kartic naključno izberejo iz 12 različic

Rezultat je, da bosta imeli dve restavraciji s pico, ustvarjeni isti dan, različne barve, različne pisave, različne postavitve – in obe bosta skladni s standardom WCAG AA.

Kaj sledi

Trenutno delamo na:

• Generiranje več strani – generiranje strani /about, /services in /contact iz istih smernic
• Predogled v živo – ogled spletnega mesta pred njegovo uvedbo v WordPress
• Prenos sloga – nalaganje posnetka zaslona spletnega mesta, ki vam je všeč, in izluščenje njegove oblikovalske DNK

Če želite videti sistem v akciji, lahko generator preizkusite brezplačno – za prvo spletno mesto ni potrebna prijava.