Как ИИ создает полноценный сайт 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.
• Перенос стиля — загрузка скриншота понравившегося сайта и извлечение его «ДНК» дизайна.

Если вы хотите увидеть систему в действии, генератор можно попробовать бесплатно — первая генерация сайта не требует учетной записи.