Содержание ↓
Одна идея — двадцать файлов
Рекламная идея живёт сразу в десятке мест: шапка письма 1200×560, квадрат 1080×1080 для соцсетей, вертикаль 1080×1350, баннеры сетей от 300×250 до мобильной полоски 320×50. Дизайнер перевёрстывает каждый размер руками. Поменяли слово в заголовке — всё по новой, и к вечеру в папке лежат два почти одинаковых файла с разными версиями текста.
Студию я строю для своей команды. Работают в ней с креативом целиком: главный макет плюс все его размеры. В каталоге 21 готовый формат в пяти группах — почта, баннерные сети, ВКонтакте, соцсети и полноэкранный 1920×1080. Нужные маркетолог отмечает при создании, раскладку берёт на себя движок.
Как устроен набор
Хранение устроено в пять уровней: набор, в нём варианты, у варианта мастер и размеры, у всего этого версии. Мастер — главный макет. Размеры от него наследуют содержание, но живут отдельно: правка в 300×250 не трогает 728×90. Вариант — независимая копия мастера для второй идеи в том же наборе.
Раскладку под новый формат движок пробует в четыре захода:
- Пропорционально масштабировать.
- Разложить заново по ролям: заголовок, подзаголовок, кнопка, логотип, картинка.
- Кадрировать и сдвинуть.
- Сдаться и пометить размер «требует внимания».
Второй заход появился после замера. Простое масштабирование уменьшает шрифт по меньшему коэффициенту, и на 300×250 от заголовка в 48 px с шапки 1200×560 оставалось 12 px. Из 24 тестовых сочетаний шаблона и размера 14 уходили в «требует внимания». Движок, который отказывает в 58% случаев, работу не экономит. Генерации картинки в этой цепочке нет. «Сделать восемь размеров» не должно тихо означать «оплатить восемь генераций», и это правило закреплено тестом.
Наследование держится на идентификаторе элемента. Если поправить заголовок в размере руками, правка переживёт обновление мастера. Когда мастер меняется, кабинет показывает отставшие размеры и число локальных правок в каждом, а применить изменения можно по галочкам. Каждое сохранение пишет версию. Возврат к старой создаёт новую версию, поэтому откатить откат тоже можно.
Четыре задачи для модели
Модели в студии достаются четыре узкие задачи, и каждую ограничивает код:
- фото для зоны изображения;
- тексты под лимит символов конкретного шаблона и формата;
- команды ассистента в редакторе. У него семь инструментов: править текст, менять стиль, двигать, масштабировать, выравнивать, скрывать и пересобирать раскладку. Модель выбирает инструмент и параметры, документ меняет код. Цвет принимается только в формате #RRGGBB, сдвиг — в долях холста, так что один кривой ответ баннер не ломает;
- бренд-аудит загруженной картинки: модель со зрением сверяет её с бренд-правилами и редполитикой по видимому тексту и ставит балл от 0 до 100 со списком замечаний.
Для фото ограничение такое. У сегмента кампании один главный кадр, и обложка лендинга и баннеры сегмента — его кадрирования. После съёмки вторая модель проверяет, нет ли в кадре текста и попадает ли герой в горизонтальный формат хотя бы на 90%. Не прошёл — повтор, не больше двух раз.
Тексты держат лимиты. Для каждого сочетания шаблона и формата их сняли замером в браузере. Раньше в промте стояли общие лимиты, и в 55 сочетаниях из 70 текст не влезал. Теперь лимит назван потолком, ответ обрезается по границе слова.
Остальное решают правила в коде. Шаблоны заданы долями холста, поэтому любой из них одинаково работает в шапке письма 1200×560 и в вертикали 300×600. Фирменные цвета, шрифт и охранное поле логотипа зашиты в шаблоны, модель их не выбирает. Растр для выгрузки рисует серверный Chromium. Если растеризация упала, пользователь получает HTML-файл вместо ошибки сервера.
Видео: сначала кадры, потом деньги
Видео-студия моложе баннерной. Она устроена как машина состояний, и перед каждым переходом к дорогому шагу решает человек. Координатор пишет сценарий и раскадровку — маркетолог их утверждает. Затем по каждому шоту генерируется опорный кадр, и человек бракует или принимает его. Клип в Veo запускается только по принятому кадру. Финал собирает ffmpeg: титульная карточка, клипы с логотипом и нижней плашкой, финальная карточка. Перед сборкой — ещё одно утверждение.
Шот длится от 4 до 6 секунд, поэтому клип обходится в полтора-два раза дороже кадра, а каждая переделка клипа — ещё столько же. Над этим стоят дневной потолок трат и лимит в 10 видео-генераций в сутки. Бренд-контроль кадра обходится без модели: стоп-фразы в титрах плюс доминирующий цвет кадра против списка запрещённых цветов. Весь поток можно прогнать на заглушках за 0 $: вместо генерации кадра — тестовая картинка, вместо Veo — медленный наезд камеры на статичный кадр.
Грабли, на которые я наступил
«Проверка чистая» и «выглядит нормально» у меня разошлись дважды. Движок и его проверка оценивают ширину символа одной и той же формулой, так что пустой список замечаний говорит лишь о том, что ничего не сломано. На рендере в натуральную величину я увидел то, мимо чего прошли все тесты: кнопка разрасталась в плашку размером с треть баннера. На высоких форматах весь текст прилипал к верхней кромке. Помогли потолок высоты кнопки в 18% и центрирование группы блоков.
Полоска 1000×120, разложенная колонкой, проходила все структурные проверки и при этом сжимала баннер в левую треть. Теперь полоски раскладываются в строку: логотип слева, кнопка справа. Подзаголовок при высоте баннера меньше 60 px не выводится, в реальных 320×50 места под него нет.
Ещё случай: набранный текст вдруг становился строчным. Сначала грешили на копирайт. Виноват был один флаг в пресетах шаблонов, который рендер превращал в правило CSS и применял даже к тому, что человек напечатал сам. Флаг убрали из всех пресетов.
В видео боевая генерация падала каждый раз. Координатор всегда отправлял параметр «чего избегать в кадре», а новые модели Veo его не принимают и отвечают ошибкой 400 ещё на проверке запроса. Искать такое можно бесплатно: кладёшь заведомо неверный следующий по порядку параметр. Если сервис ругается уже на него, к предыдущим претензий нет. До генерации дело не доходит, платить не за что.
Начал бы без модели
Первыми — шаблоны в долях холста и таблица лимитов символов по форматам. Генерацию картинки я подключал бы последней, а до неё завёл бы способ посмотреть рендер глазами: зелёные тесты про внешний вид молчат.
Студию под свои форматы и бренд можно спроектировать вместе на консультации, и начинать я бы стал с размеров, которые съедают у дизайнеров больше всего часов. Сегмент и тексты баннер получает из кампании от брифа до материалов, а про то, как встроить такие инструменты в работу отдела, написано на странице про внедрение ИИ в маркетинг.
- Next.js 15
- TypeScript
- Supabase
- OpenAI (изображения)
- Google Veo
- Chromium
- ffmpeg
- Claude Code
