Jak AI generuje kompletny WordPress w 2 minuty

Za każdym razem, gdy ktoś wpisze opis firmy w PAGEnza i kliknie „generuj”, w tle dzieje się coś bardzo złożonego – w około 90 sekund. Ten post wyjaśnia dokładnie, co to jest.

Problem z szablonami

Większość kreatorów stron AI działa w ten sposób: wybierają szablon, zamieniają tekst i nazywają to „wygenerowanym przez AI”. Wynik wygląda jak każda inna strona zbudowana na tej platformie.

PAGEnza działa inaczej. Nie ma szablonów. Każda strona zaczyna od pustego płótna Gutenberga i jest budowana algorytmicznie na podstawie zestawu zasad projektowania, które nazywamy Mandatem Projektowym.

Czym jest Mandat Projektowy?

Mandat Projektowy to ustrukturyzowany prompt – około 8000 tokenów – który opisuje każdą wizualną i strukturalną decyzję dla konkretnej strony. Jest budowany w Pythonie przed jakimkolwiek wywołaniem AI, na podstawie Twoich danych wejściowych.

Zawiera sześć części:

Część A — Tożsamość Marki: branża, nazwa firmy, ton (np. „profesjonalny” vs „zabawny”), grupa docelowa.

Część B — System Kolorów: 4-kolorowa paleta (ink, bg1, bg2, accent) generowana algorytmicznie i walidowana pod kątem zasad kontrastu WCAG AA. Każda paleta jest sprawdzana za pomocą rzeczywistej matematyki luminancji – nie zgadywania.

Część C — Typografia: trio czcionek (nagłówek / treść / akcent) wybranych spośród ponad 80 czcionek Google, filtrowanych według archetypu branży i zweryfikowanych pod kątem obsługi znaków latin-ext.

Część D — Schemat Układu: struktura strony – które sekcje się pojawiają, w jakiej kolejności i z jakim wariantem (np. sekcja główna z pełnoekranowym obrazem vs sekcja główna z układem podzielonym).

Część E — Ograniczenia Projektowe: styl promienia narożnika (ostry / miękki / zaokrąglony), kształty separatorów sekcji, obróbka obrazu, system odstępów.

Część F — Zasady Treści: jaki tekst gdzie trafia, jak są strukturyzowane nagłówki, jakie pojawiają się CTA.

Jak generowane są palety

Kolor to obszar, w którym większość narzędzi AI zawodzi. Poproszenie LLM o wybranie kolorów daje losowe kody szesnastkowe, które mogą wyglądać dobrze w izolacji, ale nie przechodzą testów dostępności – lub po prostu wyglądają generycznie.

Podchodzimy inaczej. Nasz system palet działa w ten sposób:

1. Na podstawie Twojej branży i archetypu (np. „luksusowy”, „odważny”, „ziemski”), wybieramy spośród 20 wstępnie zatwierdzonych grup palet
2. W każdej grupie wybieramy paletę, w której ink ma kontrast ≥4,5:1 w stosunku do wszystkich tła
3. Weryfikujemy, czy accent ma kontrast ≥3,0:1 w stosunku do bg1 i bg2
4. Zapewniamy, że dwa kolory tła mają kontrastujące temperatury barwowe (jeden ciepły, jeden zimny), dzięki czemu sekcje wydają się odrębne

Jeśli paleta nie przejdzie żadnego sprawdzenia, jest automatycznie zastępowana. Brak zaangażowania LLM w tym kroku – to czysta matematyka.

Jak składane są bloki Gutenberga

Gdy Mandat Projektowy jest gotowy, trafia do Gemini Flash z rygorystycznym promptem, który określa:

• Dozwolone bloki (biała lista około 40 typów bloków Gutenberga)
• Wymagane atrybuty dla każdego typu bloku
• Dokładny format JSON dla wyjścia

AI zwraca surowy JSON bloków Gutenberga – nie HTML, nie React, rzeczywisty znacznik bloku WP. Ten JSON przechodzi następnie kilka etapów walidacji:

1. Walidacja schematu – obecność wymaganych atrybutów, brak nieznanych typów bloków
2. Sanityzacja klas CSS – wymyślone nazwy klas są usuwane, zastępowane naszymi klasami systemu projektowania
3. Przejścia naprawcze – zsynchronizowane atrybuty odstępów, znormalizowane gradienty bloków okładki, wstrzyknięte separatory kształtów

Wynik jest przesyłany bezpośrednio do WordPressa za pośrednictwem WP REST API i aktywowany jako strona główna witryny.

Co sprawia, że każda strona jest unikalna

Kilka rzeczy różni się w każdej generacji, nawet dla tej samej branży:

• Paleta: 20+ grup, każda z wieloma paletami
• Trio czcionek: 6+ kombinacji na archetyp
• Kolejność i warianty sekcji: układ sekcji głównej, styl statystyk, układ kart funkcji
• Separatory kształtów: organiczne vs geometryczne, wariacje amplitudy/częstotliwości
• Kształty blobów: dla branż organicznych, blobów obrazów i kart są losowane z 12 wariantów

Wynik jest taki, że dwie restauracje z pizzą wygenerowane tego samego dnia będą miały różne kolory, różne czcionki, różne układy – i obie będą zgodne z WCAG AA.

Co dalej

Obecnie pracujemy nad:

• Generowanie wielu stron – generowanie stron /about, /services i /contact z tego samego mandatu
• Podgląd na żywo – zobaczenie strony przed jej wdrożeniem do WordPressa
• Transfer stylu – przesłanie zrzutu ekranu strony, która Ci się podoba, i wyodrębnienie jej DNA projektowego

Jeśli chcesz zobaczyć system w akcji, generator jest darmowy do wypróbowania – nie wymaga konta dla pierwszej strony.