Jak AI vygeneruje kompletní web WordPress za 2 minuty

Pokaždé, když někdo zadá popis firmy do PAGEnza a klikne na generovat, v pozadí se děje něco poměrně složitého – asi za 90 sekund. Tento příspěvek vysvětluje, co přesně to je.

Problém s šablonami

Většina nástrojů pro tvorbu webů pomocí AI funguje takto: vyberou šablonu, nahradí váš text a nazvou to „vygenerováno AI“. Výsledek vypadá stejně jako jakýkoli jiný web postavený na této platformě.

PAGEnza funguje jinak. Neexistují žádné šablony. Každý web začíná na prázdném plátně Gutenberg a je algoritmicky postaven na základě sady designových pravidel, které nazýváme Design Mandát.

Co je Design Mandát?

Design Mandát je strukturovaný prompt – zhruba 8 000 tokenů – který popisuje každé vizuální a strukturální rozhodnutí pro konkrétní web. Je postaven v Pythonu před jakýmkoli voláním AI, na základě vašeho vstupu.

Obsahuje šest částí:

Část A – Identita značky: odvětví, název firmy, tón (např. „profesionální“ vs „hravý“), cílové publikum.

Část B – Barevný systém: 4barevná paleta (ink, bg1, bg2, accent) generovaná algoritmicky a ověřená proti pravidlům kontrastu WCAG AA. Každá paleta je kontrolována pomocí skutečné matematiky jasu – ne odhadů.

Část C – Typografie: trojice fontů (nadpis / tělo / akcent) vybraná z více než 80 fontů Google Fonts, filtrovaná podle archetypu odvětví a ověřená, zda obsahuje podporu znaků latin-ext.

Část D – Návrh rozvržení: struktura stránky – které sekce se objeví, v jakém pořadí a s jakou variantou (např. úvodní sekce s celostránkovým obrázkem vs. úvodní sekce s rozděleným rozvržením).

Část E – Designová omezení: styl zaoblení rohů (sharp / soft / rounded), tvary oddělovačů sekcí, úprava obrázků, systém mezer.

Část F – Pravidla obsahu: jaký text kam přijde, jak jsou strukturovány nadpisy, jaké CTA se objeví.

Jak se generují palety

Barva je oblast, kde většina nástrojů AI selhává. Požádáte-li LLM o výběr barev, dostanete náhodné hex kódy, které mohou vypadat dobře izolovaně, ale nesplňují testy přístupnosti – nebo prostě vypadají genericky.

My k tomu přistupujeme jinak. Náš systém palet funguje takto:

1. Na základě vašeho odvětví a archetypu (např. „luxusní“, „odvážný“, „zemitý“) vybíráme z 20 předem auditovaných skupin palet
2. V rámci každé skupiny vybereme paletu, kde ink má kontrast ≥4,5:1 proti všem pozadím
3. Ověřujeme, že accent má kontrast ≥3,0:1 proti bg1 a bg2
4. Zajišťujeme, že dvě barvy pozadí mají kontrastní teploty barev (jedna teplá, jedna studená), aby sekce působily odlišně

Pokud paleta nesplní jakoukoli kontrolu, je automaticky nahrazena. V tomto kroku se nepodílí žádný LLM – je to čistá matematika.

Jak se sestavují bloky Gutenberg

Jakmile je Design Mandát připraven, jde do Gemini Flash s přísným promptem, který specifikuje:

• Které bloky jsou povoleny (whitelist z ~40 typů bloků Gutenberg)
• Požadované atributy pro každý typ bloku
• Přesný JSON formát pro výstup

AI vrací surový JSON bloků Gutenberg – ne HTML, ne React, skutečné značky bloků WP. Tento JSON pak prochází několika kontrolami:

1. Validace schématu – přítomny požadované atributy, žádné neznámé typy bloků
2. Sanitizace CSS tříd – vynalezené názvy tříd jsou odstraněny, nahrazeny našimi třídami designového systému
3. Opravné průchody – synchronizované atributy mezer, normalizované gradienty krycích bloků, vložené oddělovače tvarů

Výsledek je nahrán přímo do WordPressu přes WP REST API a aktivován jako domovská stránka webu.

Co dělá každý web jedinečným

Mezi jednotlivými generacemi se liší několik věcí, dokonce i pro stejné odvětví:

• Paleta: 20+ skupin, každá s několika paletami
• Trojice fontů: 6+ kombinací na archetyp
• Pořadí a varianty sekcí: rozvržení úvodní sekce, styl statistik, uspořádání karet funkcí
• Oddělovače tvarů: organické vs. geometrické, variace amplitudy/frekvence
• Tvary blobů: pro organická odvětví jsou blobové obrázky a karty randomizovány z 12 variant

Výsledkem je, že dvě pizzerie vygenerované ve stejný den budou mít různé barvy, různé fonty, různá rozvržení – a obě budou vyhovovat WCAG AA.

Co dál

Aktuálně pracujeme na:

• Generování více stránek – generování stránek /about, /services a /contact ze stejného mandátu
• Živý náhled – zobrazení webu před jeho nasazením do WordPressu
• Přenos stylu – nahrání snímku obrazovky webu, který se vám líbí, a extrakce jeho designové DNA

Pokud chcete systém vidět v akci, generátor je zdarma k vyzkoušení – pro první web není vyžadován žádný účet.