Як ШІ генерує повний сайт WordPress за 2 хвилини

Щоразу, коли хтось вводить опис бізнесу в PAGEnza і натискає «Згенерувати», у фоновому режимі відбувається щось досить складне — приблизно за 90 секунд. Ця публікація пояснює, що саме це таке.

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

Більшість конструкторів сайтів на основі ШІ працюють так: вони вибирають шаблон, замінюють ваш текст і називають це «згенерованим ШІ». Результат виглядає як будь-який інший сайт, створений на цій платформі.

PAGEnza працює інакше. Шаблонів немає. Кожен сайт починається з чистого полотна Gutenberg і будується алгоритмічно за набором правил дизайну, які ми називаємо Мандатом Дизайну.

Що таке Мандат Дизайну?

Мандат Дизайну — це структурований запит — приблизно 8000 токенів — який описує кожне візуальне та структурне рішення для конкретного сайту. Він створюється на Python перед будь-яким викликом ШІ, на основі ваших вхідних даних.

Він складається з шести частин:

Частина A — Ідентичність Бренду: галузь, назва бізнесу, тон (наприклад, «професійний» проти «грайливий»), цільова аудиторія.

Частина B — Колірна Система: 4-колірна палітра (ink, bg1, bg2, accent), згенерована алгоритмічно та перевірена на відповідність правилам контрастності WCAG AA. Кожна палітра перевіряється за допомогою реальної математики яскравості — а не припущень.

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

Частина D — Схема Розташування: структура сторінки — які розділи з'являються, в якому порядку та з яким варіантом (наприклад, герой з повноекранним зображенням проти героя з розділеним макетом).

Частина E — Обмеження Дизайну: стиль радіуса кутів (sharp / soft / rounded), форми роздільників розділів, обробка зображень, система відступів.

Частина F — Правила Контенту: який текст куди йде, як структуровані заголовки, які заклики до дії з'являються.

Як генеруються палітри

Колір — це те, де більшість інструментів ШІ зазнають невдачі. Прохання до LLM вибрати кольори дає вам випадкові шістнадцяткові коди, які можуть виглядати добре окремо, але не проходять тести доступності — або просто виглядають шаблонно.

Ми застосовуємо інший підхід. Наша система палітр працює так:

1. На основі вашої галузі та архетипу (наприклад, «розкішний», «сміливий», «землистий») ми вибираємо з 20 попередньо перевірених груп палітр
2. У межах кожної групи ми вибираємо палітру, де ink має контрастність ≥4,5:1 проти всіх фонів
3. Ми перевіряємо, що accent має контрастність ≥3,0:1 проти bg1 та bg2
4. Ми гарантуємо, що два фонових кольори мають контрастні колірні температури (один теплий, один холодний), щоб розділи відчувалися відмінними

Якщо палітра не проходить будь-яку перевірку, вона автоматично замінюється. Жодної участі LLM на цьому етапі — це чиста математика.

Як збираються блоки Gutenberg

Коли Мандат Дизайну готовий, він надходить до Gemini Flash із суворим запитом, який визначає:

• Які блоки дозволені (білий список із ~40 типів блоків Gutenberg)
• Необхідні атрибути для кожного типу блоку
• Точний формат JSON для виведення

ШІ повертає необроблений JSON блоків Gutenberg — не HTML, не React, а справжню розмітку блоків WP. Цей JSON потім проходить кілька етапів валідації:

1. Валідація схеми — наявність необхідних атрибутів, відсутність невідомих типів блоків
2. Санітизація CSS-класів — вигадані назви класів видаляються, замінюються нашими класами системи дизайну
3. Проходи виправлення — синхронізовані атрибути відступів, нормалізовані градієнти блоку обкладинки, вставлені роздільники форм

Результат завантажується безпосередньо до WordPress через WP REST API та активується як головна сторінка сайту.

Що робить кожен сайт унікальним

Кілька речей варіюються між кожною генерацією, навіть для однієї галузі:

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

Результатом є те, що два ресторани піци, згенеровані в один день, матимуть різні кольори, різні шрифти, різні макети — і обидва будуть відповідати стандартам WCAG AA.

Що далі

Зараз ми працюємо над:

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

Якщо ви хочете побачити систему в дії, генератор безкоштовний для спроби — обліковий запис не потрібен для першого сайту.