Как AI генерира цял WordPress сайт за 2 минути

Всеки път, когато някой въведе описание на бизнес в PAGEnza и натисне генериране, нещо доста сложно се случва във фонов режим — за около 90 секунди. Тази публикация обяснява точно какво е това.

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

Повечето AI конструктори на уебсайтове работят по този начин: избират шаблон, заменят текста ви и го наричат „генериран от AI“. Резултатът изглежда като всеки друг сайт, създаден на тази платформа.

PAGEnza работи по различен начин. Няма шаблони. Всеки сайт започва от празно Gutenberg платно и се изгражда алгоритмично от набор от дизайнерски правила, които наричаме Дизайн мандат.

Какво е Дизайн мандат?

Дизайн мандатът е структуриран промпт — приблизително 8000 токена — който описва всяко визуално и структурно решение за конкретен сайт. Той се изгражда в Python, преди да бъде направена каквато и да е AI заявка, въз основа на вашите входни данни.

Той съдържа шест части:

Част А — Идентичност на марката: индустрия, име на бизнеса, тон (напр. „професионален“ срещу „игрив“), целева аудитория.

Част Б — Цветова система: 4-цветна палитра (ink, bg1, bg2, accent), генерирана алгоритмично и валидирана спрямо правилата за контраст WCAG AA. Всяка палитра се проверява с реална математика на яркостта — не с предположения.

Част В — Типография: шрифтово трио (заглавие / текст / акцент), избрано от над 80 Google шрифта, филтрирано по архетип на индустрията и проверено за поддръжка на latin-ext символи.

Част Г — Структурна схема: структурата на страницата — кои секции се появяват, в какъв ред и с какъв вариант (напр. герой с цял екран изображение срещу герой с разделен изглед).

Част Д — Дизайнерски ограничения: стил на радиуса на границите (sharp / soft / rounded), форми на разделителите на секциите, обработка на изображения, система за разстояния.

Част Е — Правила за съдържание: какво съдържание къде отива, как са структурирани заглавията, какви призиви за действие се появяват.

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

Цветът е мястото, където повечето AI инструменти се провалят. Искането на LLM да избира цветове ви дава случайни шестнадесетични кодове, които може да изглеждат добре поотделно, но се провалят на тестовете за достъпност — или просто изглеждат генерично.

Ние подхождаме различно. Нашата система за палитри работи по следния начин:

1. Въз основа на вашата индустрия и архетип (напр. „луксозен“, „смел“, „земен“), ние избираме от 20 предварително одитирани групи палитри
2. В рамките на всяка група избираме палитра, където ink има ≥4.5:1 контраст спрямо всички фонове
3. Проверяваме, че accent има ≥3.0:1 контраст спрямо bg1 и bg2
4. Уверяваме се, че двата фонови цвята имат контрастни цветови температури (една топла, една студена), така че секциите да се усещат различни

Ако палитра се провали на някаква проверка, тя се заменя автоматично. Няма LLM участие в тази стъпка — това е чиста математика.

Как се сглобяват Gutenberg блокове

След като Дизайн мандатът е готов, той отива при Gemini Flash със стриктен промпт, който специфицира:

• Кои блокове са разрешени (бял списък от ~40 типа Gutenberg блокове)
• Задължителни атрибути за всеки тип блок
• Точен JSON формат за изхода

AI връща суров Gutenberg блок JSON — не HTML, не React, действителен WP блок маркъп. Този JSON след това преминава през няколко валидационни стъпки:

1. Валидация на схема — задължителните атрибути присъстват, няма непознати типове блокове
2. Санитизация на CSS класове — измислените имена на класове се премахват, заменят се с нашите класове от дизайнерската система
3. Процедури за „лекуване“ — синхронизирани атрибути за разстояния, нормализирани градиенти на покриващи блокове, инжектирани разделители на форми

Резултатът се качва директно в WordPress чрез WP REST API и се активира като началната страница на сайта.

Какво прави всеки сайт уникален

Няколко неща варират между всяка генерация, дори за една и съща индустрия:

• Палитра: 20+ групи, всяка с множество палитри
• Шрифтово трио: 6+ комбинации на архетип
• Ред и варианти на секциите: оформление на героя, стил на статистиките, подредба на картите с функции
• Разделители на форми: органични срещу геометрични, вариации на амплитуда/честота
• Форми на блобове: за органични индустрии, блобовете на изображения и карти се рандомизират от 12 варианта

Резултатът е, че два пица ресторанта, генерирани в един и същи ден, ще имат различни цветове, различни шрифтове, различни оформления — и и двата ще бъдат WCAG AA съвместими.

Какво следва

В момента работим по:

• Генериране на множество страници — генериране на страници /about, /services и /contact от същия мандат
• Преглед на живо — виждане на сайта, преди да бъде разгърнат в WordPress
• Пренос на стил — качване на екранна снимка на сайт, който ви харесва, и извличане на неговата дизайнерска ДНК

Ако искате да видите системата в действие, генераторът е безплатен за проба — не се изисква акаунт за първия сайт.