Ako AI vygeneruje kompletnú WordPress stránku za 2 minúty

Zakaždým, keď niekto zadá popis podnikania do PAGEnza a klikne na generovať, v pozadí sa deje niečo celkom zložité – asi za 90 sekúnd. Tento príspevok presne vysvetľuje, čo to je.

Problém so šablónami

Väčšina nástrojov na tvorbu webových stránok pomocou AI funguje takto: vyberú šablónu, nahradia váš text a nazvú to „vygenerované AI“. Výsledok vyzerá rovnako ako každá iná stránka vytvorená na tejto platforme.

PAGEnza funguje inak. Neexistujú žiadne šablóny. Každá stránka začína na prázdnom plátne Gutenberg a je algoritmicky zostavená zo sady dizajnových pravidiel, ktoré nazývame Dizajnový mandát.

Čo je Dizajnový mandát?

Dizajnový mandát je štruktúrovaný prompt – približne 8 000 tokenov –, ktorý opisuje každé vizuálne a štrukturálne rozhodnutie pre konkrétnu stránku. Pred akýmkoľvek volaním AI sa zostavuje v Pythone na základe vášho vstupu.

Obsahuje šesť častí:

Časť A – Identita značky: odvetvie, názov firmy, tón (napr. „profesionálny“ vs „hravý“), cieľová skupina.

Časť B – Farebný systém: 4-farebná paleta (ink, bg1, bg2, accent) generovaná algoritmicky a overená podľa pravidiel kontrastu WCAG AA. Každá paleta je skontrolovaná pomocou skutočnej matematiky jasu – nie odhadov.

Časť C – Typografia: trojica fontov (nadpis / telo / akcent) vybraná z viac ako 80 fontov Google Fonts, filtrovaná podľa archetypu odvetvia a overená, či obsahuje podporu znakov latin-ext.

Časť D – Dizajnový návrh: štruktúra stránky – ktoré sekcie sa zobrazia, v akom poradí a s akou variantou (napr. hrdina s plnoformátovým obrázkom vs hrdina s rozdeleným rozložením).

Časť E – Dizajnové obmedzenia: štýl polomeru hrán (ostré / mäkké / zaoblené), tvary deličov sekcií, úprava obrázkov, systém rozostupov.

Časť F – Pravidlá obsahu: aký text kam umiestniť, ako sú štruktúrované nadpisy, aké výzvy na akciu sa zobrazia.

Ako sa generujú palety

Farba je oblasť, kde väčšina nástrojov AI zlyháva. Požiadanie LLM o výber farieb vám dá náhodné hex kódy, ktoré môžu vyzerať dobre samostatne, ale neprejdú testami prístupnosti – alebo jednoducho vyzerajú genericky.

My pristupujeme inak. Náš systém paliet funguje takto:

1. Na základe vášho odvetvia a archetypu (napr. „luxusný“, „odvážny“, „zemitý“) vyberáme z 20 predbežne overených skupín paliet
2. V rámci každej skupiny vyberieme paletu, kde ink má kontrast ≥4,5:1 voči všetkým pozadiam
3. Overujeme, že accent má kontrast ≥3,0:1 voči bg1 a bg2
4. Zabezpečujeme, aby dve farby pozadia mali kontrastné teploty farieb (jedna teplá, jedna studená), aby sekcie pôsobili odlišne

Ak paleta zlyhá v akejkoľvek kontrole, automaticky sa nahradí. V tomto kroku nie je zapojená žiadna LLM – je to čistá matematika.

Ako sa zostavujú bloky Gutenberg

Keď je Dizajnový mandát pripravený, odosiela sa do Gemini Flash so striktným promptom, ktorý špecifikuje:

• Ktoré bloky sú povolené (whitelist približne 40 typov blokov Gutenberg)
• Požadované atribúty pre každý typ bloku
• Presný formát JSON pre výstup

AI vráti surový JSON blokov Gutenberg – nie HTML, nie React, skutočný značkovací kód WP bloku. Tento JSON potom prechádza niekoľkými fázami validácie:

1. Validácia schémy – prítomné požadované atribúty, žiadne neznáme typy blokov
2. Sanitácia CSS tried – vymyslené názvy tried sa odstránia a nahradia triedami nášho dizajnového systému
3. Opravné fázy – synchronizované atribúty rozostupov, normalizované prechody blokov obálky, vložené deliče tvarov

Výsledok sa nahrá priamo do WordPressu cez WP REST API a aktivuje sa ako domovská stránka webu.

Čo robí každú stránku jedinečnou

Pri každej generácii sa líši niekoľko vecí, dokonca aj pre rovnaké odvetvie:

• Paleta: 20+ skupín, každá s viacerými paletami
• Trojica fontov: 6+ kombinácií na archetyp
• Poradie a varianty sekcií: rozloženie hrdinu, štýl štatistík, usporiadanie kariet funkcií
• Deliče tvarov: organické vs geometrické, variácie amplitúdy/frekvencie
• Tvary blobov: pre organické odvetvia sa bloby obrázkov a kariet náhodne generujú z 12 variantov

Výsledkom je, že dve pizzerie vygenerované v ten istý deň budú mať rôzne farby, rôzne fonty, rôzne rozloženia – a obe budú vyhovovať WCAG AA.

Čo ďalej

Momentálne pracujeme na:

• Generovanie viacerých stránok – generovanie stránok /about, /services a /contact z toho istého mandátu
• Živý náhľad – zobrazenie stránky pred jej nasadením do WordPressu
• Prenos štýlu – nahranie snímky obrazovky stránky, ktorá sa vám páči, a extrahovanie jej dizajnového DNA

Ak chcete vidieť systém v akcii, generátor je zadarmo na vyskúšanie – na prvú stránku nie je potrebný žiadny účet.