Како вештачка интелигенција генерише комплетан WordPress сајт за 2 минута

Сваки пут када неко унесе опис предузећа у PAGEnza и притисне генериши, нешто прилично компликовано се дешава у позадини — за око 90 секунди. Овај пост објашњава тачно шта је то.

Проблем са шаблонима

Већина градитеља сајтова заснованих на вештачкој интелигенцији ради овако: бирају шаблон, замењују ваш текст и називају га „генерисаним од стране вештачке интелигенције“. Резултат изгледа као сваки други сајт изграђен на тој платформи.

PAGEnza ради другачије. Нема шаблона. Сваки сајт почиње од празног Gutenberg платна и алгоритмички се гради из скупа правила дизајна које називамо Мандат дизајна.

Шта је Мандат дизајна?

Мандат дизајна је структурирани упит — отприлике 8.000 токена — који описује сваку визуелну и структурну одлуку за одређени сајт. Гради се у Python-у пре било каквог позива вештачкој интелигенцији, на основу вашег уноса.

Садржи шест делова:

Део А — Идентитет бренда: индустрија, назив предузећа, тон (нпр. „професионални“ наспрам „играни“), циљна публика.

Део Б — Систем боја: палета од 4 боје (мастило, позадина1, позадина2, акценат) генерисана алгоритмички и валидирана према WCAG AA правилима контраста. Свака палета се проверава стварном математиком осветљености — не нагађањима.

Део Ц — Типографија: трио фонтова (наслов / тело / акценат) изабраних из 80+ Google фонтова, филтрираних по архетипу индустрије и верификованих да укључују подршку за latin-ext карактере.

Део Д — План распореда: структура странице — који се одељци појављују, којим редоследом и са којом варијантом (нпр. херој са пуном ширином слике наспрам хероја са подељеним распоредом).

Део Е — Ограничења дизајна: стил радијуса ивичњака (оштар / мекан / заобљен), облици раздељивача одељака, третман слика, систем размака.

Део Ф — Правила садржаја: који текст иде где, како су структурирани наслови, који се позиви на акцију појављују.

Како се генеришу палете

Боја је место где већина алата за вештачку интелигенцију греши. Ако затражите од LLM-а да изабере боје, добићете случајне хексадецималне кодове који могу изгледати добро изоловано, али не пролазе тестове приступачности — или просто изгледају генерички.

Ми приступамо другачије. Наш систем палета ради овако:

1. На основу ваше индустрије и архетипа (нпр. „луксуз“, „смео“, „земаљски“), бирамо из 20 претходно ревидираних група палета
2. Унутар сваке групе, бирамо палету где мастило има ≥4.5:1 контраст у односу на све позадине
3. Проверавамо да акценат има ≥3.0:1 контраст у односу на позадина1 и позадина2
4. Осигуравамо да две боје позадине имају контрасне температуре боја (једна топла, једна хладна) како би се одељци осећали различито

Ако палета не прође ниједну проверу, аутоматски се замењује. Нема укључености LLM-а у овај корак — то је чиста математика.

Како се састављају Gutenberg блокови

Када је Мандат дизајна спреман, он иде Gemini Flash-у са строгим упитом који специфицира:

• Који блокови су дозвољени (бела листа од ~40 типова Gutenberg блокова)
• Обавезни атрибути за сваки тип блока
• Тачан JSON формат за излаз

Вештачка интелигенција враћа сирови Gutenberg блок JSON — не HTML, не React, прави WP блок маркап. Тај JSON затим пролази кроз неколико пролаза валидације:

1. Валидација шеме — присутни обавезни атрибути, нема непознатих типова блокова
2. Чишћење CSS класа — измишљена имена класа се уклањају, замењују нашим класама дизајн система
3. Пролази исправљања — синхронизовани атрибути размака, нормализовани градијенти покривних блокова, убачени раздељивачи облика

Резултат се директно отпрема на WordPress преко WP REST API-ја и активира као почетна страница сајта.

Шта чини сваки сајт јединственим

Неколико ствари варира између сваке генерације, чак и за исту индустрију:

• Палета: 20+ група, свака са више палета
• Трио фонтова: 6+ комбинација по архетипу
• Редослед и варијанте одељака: распоред хероја, стил статистике, аранжман картица са функцијама
• Раздељивачи облика: органски наспрам геометријских, варијације амплитуде/фреквенције
• Облици блобова: за органске индустрије, блобови слика и картица се насумично бирају из 12 варијанти

Резултат је да ће два ресторана за пицу генерисана истог дана имати различите боје, различите фонтове, различите распореде — и оба ће бити у складу са WCAG AA.

Шта је следеће

Тренутно радимо на:

• Генерисање више страница — генерисање /about, /services и /contact страница из истог мандата
• Преглед уживо — виђење сајта пре него што се примени на WordPress
• Пренос стила — отпремање снимка екрана сајта који вам се свиђа и издвајање његовог ДНК дизајна

Ако желите да видите систем на делу, генератор је бесплатан за испробавање — није потребан налог за први сајт.