Hogyan generál az AI egy teljes WordPress webhelyet 2 perc alatt

Minden alkalommal, amikor valaki beír egy üzleti leírást a PAGEnza-ba, és megnyomja az "generálás" gombot, valami meglehetősen bonyolult történik a háttérben – körülbelül 90 másodperc alatt. Ez a bejegyzés pontosan elmagyarázza, mi ez.

A sablonok problémája

A legtöbb AI webhelyépítő így működik: kiválasztanak egy sablont, kicserélik benne a szöveget, és „AI-generáltnak” nevezik. Az eredmény úgy néz ki, mint minden más, az adott platformon épült webhely.

A PAGEnza másképp működik. Nincsenek sablonok. Minden webhely egy üres Gutenberg vászonnal kezdődik, és egy algoritmus alapján épül fel egy sor tervezési szabályból, amelyet Design Mandátumnak nevezünk.

Mi az a Design Mandátum?

A Design Mandátum egy strukturált prompt – körülbelül 8000 token –, amely egy adott webhely minden vizuális és szerkezeti döntését leírja. A Pythonban épül fel, mielőtt bármilyen AI-hívás megtörténne, az Ön bemenete alapján.

Hat részből áll:

A rész – Márkaidentitás: iparág, üzleti név, hangnem (pl. „professzionális” vs. „játékos”), célközönség.

B rész – Színrendszer: egy 4 színű paletta (ink, bg1, bg2, accent), amelyet algoritmikusan generálnak és validálnak a WCAG AA kontraszt szabályai szerint. Minden palettát valós luminancia-matematikával ellenőriznek – nem találgatásokkal.

C rész – Tipográfia: egy betűtrió (címsor / törzs / kiemelés) a 80+ Google Font közül kiválasztva, iparági archetípus szerint szűrve, és ellenőrizve, hogy tartalmazza a latin-ext karaktertámogatást.

D rész – Elrendezési vázlat: az oldal szerkezete – mely szakaszok jelennek meg, milyen sorrendben, és milyen változattal (pl. hős teljes szélességű képpel vs. hős osztott elrendezéssel).

E rész – Tervezési korlátozások: sarok lekerekítési stílus (éles / puha / lekerekített), szakasz elválasztó alakzatok, képkezelés, térközrendszer.

F rész – Tartalmi szabályok: milyen szöveg hova kerül, hogyan épülnek fel a címsorok, milyen CTA-k jelennek meg.

Hogyan generálódnak a színpaletták

A színek azok, ahol a legtöbb AI eszköz elbukik. Ha megkér egy LLM-et, hogy válasszon színeket, véletlenszerű hex kódokat kap, amelyek önmagukban jól nézhetnek ki, de megbuknak az akadálymentességi teszteken – vagy egyszerűen csak általánosnak tűnnek.

Más megközelítést alkalmazunk. A színpaletta rendszerünk így működik:

1. Az Ön iparágán és archetípusán (pl. „luxus”, „merész”, „földies”) alapulva 20 előzetesen auditált színpaletta csoport közül választunk.
2. Minden csoporton belül kiválasztunk egy olyan palettát, ahol az ink ≥4,5:1 kontrasztot mutat minden háttérhez képest.
3. Ellenőrizzük, hogy az accent ≥3,0:1 kontrasztot biztosítson a bg1 és bg2 ellenében.
4. Biztosítjuk, hogy a két háttérszín kontrasztos színhőmérsékletű legyen (egy meleg, egy hideg), így a szakaszok megkülönböztethetőnek érződnek.

Ha egy paletta bármelyik ellenőrzésen megbukik, automatikusan kicserélődik. Ebben a lépésben nincs LLM bevonás – ez tiszta matematika.

Hogyan állnak össze a Gutenberg blokkok

Miután a Design Mandátum elkészült, a Gemini Flash-hez kerül egy szigorú prompttal, amely meghatározza:

• Mely blokkok engedélyezettek (körülbelül 40 Gutenberg blokktípus fehérlistája).
• Az egyes blokktípusokhoz szükséges attribútumok.
• A kimenet pontos JSON formátuma.

Az AI nyers Gutenberg blokk JSON-t ad vissza – nem HTML-t, nem React-ot, hanem valódi WP blokk jelölést. Ez a JSON ezután több érvényesítési fázison megy keresztül:

1. Séma érvényesítés – a szükséges attribútumok jelen vannak, nincsenek ismeretlen blokktípusok.
2. CSS osztály tisztítás – az újonnan kitalált osztálynevek eltávolításra kerülnek, és a mi dizájnrendszerünk osztályaival helyettesítjük őket.
3. Javító lépések – a térköz attribútumok szinkronizálva vannak, a borítókép blokk színátmenetei normalizálva vannak, az alakzat elválasztók beillesztésre kerülnek.

Az eredményt közvetlenül a WordPress-be töltjük a WP REST API-n keresztül, és a webhely kezdőlapjaként aktiváljuk.

Mi teszi egyedivé az egyes webhelyeket?

Számos dolog változik minden generálás között, még azonos iparág esetén is:

• Színpaletta: 20+ csoport, mindegyik több palettával.
• Betűtrió: 6+ kombináció archetípusonként.
• Szakasz sorrendje és változatai: hős elrendezés, statisztika stílus, szolgáltatás kártya elrendezés.
• Alakzat elválasztók: organikus vs. geometrikus, amplitúdó/frekvencia variációk.
• Blob alakzatok: organikus iparágak esetén a kép- és kártya blobok 12 változatból véletlenszerűen kerülnek kiválasztásra.

Az eredmény az, hogy két, ugyanazon a napon generált pizzéria webhelye eltérő színekkel, eltérő betűtípusokkal, eltérő elrendezéssel fog rendelkezni – és mindkettő WCAG AA kompatibilis lesz.

Mi következik ezután?

Jelenleg dolgozunk a következőkön:

• Többoldalas generálás – /about, /services és /contact oldalak generálása ugyanabból a mandátumból.
• Élő előnézet – a webhely megtekintése a WordPress-be történő telepítés előtt.
• Stílus átvitel – egy tetsző webhely képernyőképének feltöltése és annak dizájn DNS-ének kinyerése.

Ha látni szeretné a rendszert működés közben, a generátor ingyenesen kipróbálható – az első webhelyhez nincs szükség fiókra.