Содержание ↓
Зачем лендинг из брифа
У кампании уже есть бриф, аудитория, сегменты с их задачами (JTBD) и тон. Лендинг под неё при этом часто заказывают отдельно — подрядчику или в конструкторе, с новым брифом на словах. Тексты страницы расходятся с баннерами, цифры на макете вписаны для красоты, а правка заголовка превращается в переписку. Я хотел, чтобы страница собиралась из того же контекста, что баннеры и письма, и оставалась в дизайн-системе при любом ответе модели.
Как устроен лендинг
Страница — массив типизированных блоков. У каждого есть тип и поля: заголовок, подзаголовок, карточки, кнопки, картинка. Типов 21. Базовых 17: первый экран, карточки с цифрами, шаги, тарифы, сравнение, цитата, FAQ, финальный призыв и другие. Ещё 4 блока пришли из новой дизайн-системы, собранной по гайду в Figma: обложка, секция, сплит и финал. Внутри секций и сплитов живут модули — карточки в ряд, колонка, медиа, карта, форма, FAQ.
Генерация берёт из кампании название, цель, основную аудиторию, KPI, тон, продукт и ограничения. Из брифа — последнюю версию по W-I-S-E-R, из матрицы — выбранный сегмент. Модель выбирает блоки из каталога и заполняет поля. HTML собирает наш рендер: он экранирует весь текст и проверяет адреса, картинки и цвета.
Обложка берёт главный кадр сегмента, из которого нарезаются и баннеры кампании. Страница и реклама выглядят роднёй, а сборка лендинга из сегмента обходится без единой новой генерации картинки. Кадрирование идёт по точке фокуса. Маркетолог двигает её мышью или стрелками и сразу видит, что станет с обложкой, баннером 1200×628 и квадратом.
При публикации блоки превращаются в самодостаточный HTML-документ со встроенными шрифтами. Он отдаётся по короткому адресу с политикой безопасности, которая запрещает скрипты. Поэтому анимации написаны на чистом CSS, а картинки принимаются только растровые: SVG исключён, через него можно протащить скрипт.
Два способа править
Блочный редактор — для точной работы. Список блоков с перетаскиванием, инспектор полей, перегенерация одного блока, превью на десктопе, планшете и телефоне. Есть отмена и повтор. Правки текста, идущие подряд с паузой меньше 800 мс, склеиваются в один шаг отмены, иначе откат одного слова шёл бы по буквам.
Чат — для правок словами, по мотивам Lovable. Команды вроде «удали пятый блок», «подними этот блок выше», «добавь FAQ» разбирает код, модель в них не участвует. Остальное уходит модели вместе с каталогом и текущей страницей, в ответ приходит новый массив блоков. Модель выбирается в интерфейсе: GPT, DeepSeek или Gemini. На одном и том же запросе сборка страницы заняла у них от 12 до 25 секунд.
Если человек выделил блок, код откатывает любые изменения за его пределами. Промту в этом я не доверяю. В боевом прогоне такая защита вернула на место пять блоков, которые модель тронула по собственной инициативе.
В чате каждая правка пишет версию, у лендинга хранятся последние 30. Отмена возвращает на шаг назад, история — на любую версию, и возврат тоже пишется новой версией. Оба режима работают с одной таблицей, лендинг можно начать в чате и довести руками.
Цифры, правила и аудит без модели
Цифры модели я не доверяю. Промт требует ставить заглушки вида «XXX ₽», «+NN%» или «0000», а чеклист публикации блокирует страницу, пока они стоят. Как и везде в кабинете, числа на страницу приносит человек или код.
После каждого ответа модели код сам расставляет «ёлочки», тире, «ё» и регистр заголовков. Проверка редполитики и машинных оборотов выводит предупреждения в тот же чеклист. Правила дизайн-системы тоже записаны в коде: обложка первой, иначе публикация заблокирована; финал последним; карточки в ряд — только внутри секции, колонка — только в сплите; старых блоков на странице не больше двух.
Аудит конверсии считает код, без модели. Модуль работает и в браузере, и на сервере, поэтому балл в редакторе пересчитывается на каждой правке и не тратит лимит генераций. Тот же лендинг всегда даёт тот же балл. Семь измерений, веса в сумме — 100:
| Измерение | Вес |
|---|---|
| Ценностное предложение | 22 |
| Призыв к действию и путь к нему | 22 |
| Доверие и доказательства | 18 |
| Работа с возражениями | 14 |
| Заголовок | 12 |
| Структура | 6 |
| SEO | 6 |
Эвристики нарочно простые, каждую проверяет код. Заголовок первого экрана должен уложиться в 4–12 слов, лучше с цифрой. Призыв к действию нужен на первом экране и ещё раз в финале, на странице должны быть отзыв, цифры и FAQ. Блоков от 4 до 12, description — от 50 до 160 знаков. Оценка — буква от A до D, ниже 55 баллов чеклист предупреждает. Рекомендации разложены по трудоёмкости: быстрые правки, новые или переставленные блоки, гипотезы для A/B-теста. Идею я взял из открытого скилла page-cro в репозитории claude-skills и переписал под свои блоки.
Что получает маркетолог
На выходе опубликованная страница по короткому адресу со счётчиком просмотров и HTML-файл для выгрузки. Панель «SEO и публикация» задаёт title, адрес, description со счётчиком знаков, картинку для соцсетей, canonical и noindex. Разметку schema.org можно выбрать из списка — WebPage с FAQPage из блока вопросов, Service, Product, Organization — или вставить свою в JSON-LD. Рядом превью: как страница выглядит в поиске и в ленте соцсети.
Грабли
Старый генератор глотал ошибки модели и молча отдавал шаблонную страницу. Человек был уверен, что модель написала текст по брифу. Теперь сборка возвращает признак, работала ли модель, а отказ виден в интерфейсе.
Правки опубликованного лендинга не доезжали до публичного адреса: HTML-снимок пересобирался только при публикации. Сейчас сохранение опубликованной страницы пересобирает снимок сразу. Превью на каждую паузу в наборе гоняло около 88 КБ шрифтов в base64. Теперь превью берёт шрифты с отдельного адреса с кэшем, а в опубликованном HTML и выгрузке они по-прежнему встроены.
Самое обидное: при сборке «из визуала» обложке ставился вариант оформления, которого в рендере не существовало. Блок был на месте, поля заполнены. Не было только картинки — ни разу, пока это не поймал аудит движка. Чинилось это парой полей в генераторе.
Что отложить
Чат, версии и конструктор я бы отложил до момента, когда лендингов станет много. Первым делом нужны каталог блоков и рендер в коде: модель заполняет поля по брифу, числа остаются заглушками, аудит считают правила.
Каталог под вашу дизайн-систему можно прикинуть на консультации. Бриф и сегменты страница берёт из кампании, тот же главный кадр уходит в студию баннеров, а о том, как встроить всё это в работу отдела, — страница о внедрении ИИ в маркетинг.
- Next.js 15
- TypeScript
- Supabase
- OpenAI
- DeepSeek
- Gemini
- Claude Code
