Создание рекламных креативов и баннеров для соцсетей, рекламы и маркетплейсов — с точными размерами, safe-zone'ами и маркировкой. Гибридный метод: фон через генерацию + текст/CTA/логотип поверх в HTML/SVG → рендер в PNG.

Рекламные креативы и баннеры

Готовый рекламный креатив нужного размера — для поста, сторис, рекламы, карточки маркетплейса. Пользователь получает не совет, а файл (и исходник для правок).

Главный принцип: компонуем, а не генерируем

Текущая image-модель (generate_image → glm-image) плохо пишет текст: искажает буквы, путает слова, не держит точную геометрию зон. Поэтому финальный креатив никогда не генерируется целиком как одна картинка с текстом. Вместо этого:

фон/иллюстрация (generate_image, БЕЗ текста)
        +
текст / CTA / логотип / «Реклама» + erid  →  HTML/SVG-шаблон
        ↓
рендер в PNG точного размера (design-renderer)

Исключение — чисто визуальный креатив без текста (атмосферная обложка, фото продукта): там generate_image сразу даёт результат.

Когда использовать

• «сделай креатив / баннер / постер / обложку / промо-материал»
• реклама под площадку: Instagram, VK, Telegram, TikTok, YouTube, X, LinkedIn
• карточка товара или rich-content для Wildberries / Ozon
• баннер для лендинга, рассылки, партнёрской сетки
• карусель / серия креативов одного оффера в разных размерах

Когда НЕ использовать

• Чистая картинка без текста (иконка, иллюстрация, аватар) → навык image-studio.
• Целая веб-страница (лендинг, UI, макет сайта) → навык web-design.
• Логотип, палитра, фирстиль, мокапы → навык brand-identity.
• Видео / «оживить» креатив → навык video-gen.

Что на выходе

1. PNG нужного размера (один или серия под разные площадки).
2. Исходный HTML/SVG-шаблон — чтобы пользователь мог править текст/цвет без перегенерации.
3. Промпт фоновой генерации — для повтора или вариаций.

Инструменты

Node вшит в десктоп (Electron) — работает на Windows. Без bash/curl/python.

Размеры (основные)

Полная таблица — в references/ad-formats.md. Здесь часто нужное:

generate_image принимает только фиксированные размеры из своего enum. Для произвольного размера — генерируй ближайший доступный, компонуй в HTML и рендерь через design-renderer в точный размер (он делает скриншот строго в W×H).

Safe-zone'ы (критично для 9:16)

Площадки накладывают UI-элементы поверх креатива. Текст и логотип — только в безопасной зоне:

• Stories (орг.): безопасная зона ~1080×1610 по центру.
• Reels (орг.): ~996×1400; верх ~108px, низ ~310–320px, бока ~60px — без текста.
• Meta-реклама (консервативно): верх 14%, низ 20% (Stories) / 35% (Reels), бока 6% — чисто.
• Общее правило: держи значимый контент и CTA в центральной ~70% площади.

Рабочий процесс (гибридный)

Шаг 1. Бриф (одним вопросом-блоком)

Оффер (что и выгода), CTA, площадка(и), бренд-цвета и шрифт (или «подбери»), есть ли erid для маркировки рекламы. Если пользователь не дал размер — возьми дефолт для площадки из таблицы.

Шаг 2. Фон

Сгенерируй фон через generate_image по формуле (ниже), обязательно с --no text-ограничениями. Размер — ближайший доступный к нужному соотношению.

Шаг 3. Композиция (HTML/SVG)

Собери шаблон: фоновая картинка + текстовые зоны (заголовок, подзаголовок, CTA, «Реклама» + erid, логотип). Соблюдай:

• Safe-zone — значимое внутри центральной зоны.
• Контраст текста ≥ 4.5:1 (WCAG AA). На пёстром фоне — подложка/затемнение под текст.
• Текст ≤ 20% площади для VK (строго — модерация отклоняет) и < 50% для X — иначе режут охваты.
• Один фокус: взгляд первым делом падает на оффер/CTA, не на декор.
• 60-30-10: доминирующий фон 60%, вторичный 30%, акцент (CTA) 10%.

Скелет шаблона — в references/ad-formats.md (секция «HTML-скелет»).

Шаг 4. Рендер

node <design-renderer>/scripts/render.js --html creative.html --out creative.png --width 1080 --height 1080

<design-renderer> — путь к навыку design-renderer в рабочей директории.

Шаг 5. Мульти-формат (опционально)

Один оффер → несколько размеров: 1:1, 4:5, 9:16, 16:9. Переиспользуй фон и текст, меняй только раскладку под формат. Собери серию в галерею через image-studio/scripts/build-gallery.js.

Шаг 6. Маркировка (РФ)

Если креатив — реклама в РФ, добавь «Реклама. <рекламодатель>» и поле под erid. Детали и правила размещения — references/erir-marking.md. Не выдумывай erid — это регистрируемый токен; оставь плейсхолдер, пусть пользователь подставит свой.

Шаг 7. Доставка

Отдай PNG(и), путь к HTML-исходнику, и промпт фона. Предложи вариации (другая палитра/настроение/композиция).

Промпт для фона (формула)

объект + стиль + композиция + освещение + палитра + настроение + --no text

Пример (товарный hero, без текста):

Премиальная товарная съёмка, [продукт], [материал/цвет], по центру на мягком градиентном фоне, студийный свет три точки, мягкий боке, палитра: тёплые нейтральные

• один акцент, настроение: чисто и дорого, leaving negative space top-left for copy, --no text, no logos, no words, no watermark, no people

Для lifestyle-фона добавь «generous negative space on [сторона] for copy».

Если рендер недоступен

render.js требует Playwright или Puppeteer + Chromium. Если их нет — не падай молча и не ври, что «готово»:

1. С согласия пользователя установи ОДНО: npm i -D playwright && npx playwright install chromium ИЛИ npm i puppeteer.
2. Если не вышло или пользователь отказался — HTML остаётся основным артефактом (открывается в любом браузере, выглядит идентично). Предложи:
   • открыть HTML в браузере и сохранить как изображение, либо
   • сгенерировать обложку через generate_image (но предупреди: текст в ней искажается, поэтому вариант — только для чисто визуальной части).

Антипаттерны

• Генерировать текст в картинке («надпись SALE 50%» в промпте) — буквы поползут.
• Проигнорировать safe-zone — площадка перекроет CTA своим UI.
• Забыть «Реклама»/erid для рекламы в РФ — штраф ФАС.
• Текст > 50% площади для VK/X — режут охваты.
• Мелкий нечитаемый текст — заголовки крупно, контраст ≥ 4.5:1.
• Молчать про стоимость — каждый generate_image ~0,015 $; для серии предупреди.
• Не отдать HTML-исходник — без него пользователь не сможет быстро поправить текст.