Словами самого skill
Создаёт баннеры для обложек в социальных сетях, рекламных кампаний, hero-блоков сайтов и печати, генерируя несколько вариантов арт-дирекшна в HTML/CSS. Собирает требования через структурированные вопросы (платформа, контент, бренд, стиль, количество), опирается на встроенные рекомендации по размерам и безопасным зонам и экспортирует пиксель-точные PNG в точных размерах платформы.
Поддерживает 22 стиля арт-дирекшна, включая минимализм, градиенты, крупную типографику, фотографические, геометрические, глассморфизм и неон. Работает с Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display и произвольными форматами. По умолчанию предлагает 3 варианта на запрос. Использует материалы, предоставленные пользователем, визуалы, построенные на CSS, или опционально сгенерированные фоны — никогда не придумывает правила бренда самостоятельно. Не занимается видеомонтажом, полноценным дизайном сайта или печатным производством.
Что он выдаёт
- Файлы изображений PNG в точных размерах платформы, экспортируемые в assets/banners/{campaign}/ с именами в kebab-case
- Исходный код HTML/CSS для каждого варианта баннера, если захват изображения недоступен
Как это работает
- 01Сбор требований через структурированные вопросы
Собирает цель (обложка для соцсетей, реклама, hero-блок, печать), платформу или произвольные размеры, контент (заголовок, подзаголовок, CTA, логотип), брендбук и требования к стилю, а также количество вариантов (по умолчанию 3).
- 02Изучение арт-дирекшна и безопасных зон
Читает встроенный справочник banner-sizes-and-styles.md для целевого формата, безопасных зон и подходящих стилей.
- 03Дизайн каждого варианта в HTML/CSS
Создаёт баннеры в точных размерах платформы с учётом правил безопасной зоны (ключевой контент в центральных 70–80%), используя не более 2 гарнитур, один CTA и контраст текста 4.5:1.
- 04Выбор визуального источника для каждого варианта
Предпочитает материалы, предоставленные пользователем, использует визуалы, построенные на CSS (градиенты, геометрические формы) для результатов без зависимостей, либо опционально генерирует фоны в целевом соотношении сторон, если среда выполнения это поддерживает.
- 05Экспорт баннеров в виде изображений PNG
Предпросматривает каждый баннер в браузере в точном вьюпорте, захватывает его как PNG с помощью стандартной функции скриншотов и проверяет пиксельные размеры, обрезку безопасной зоны, загрузку шрифтов и качество изображения.
- 06Представление вариантов с обоснованием
Показывает все экспортированные изображения рядом друг с другом с указанием названия стиля арт-дирекшна, предпросмотра, ключевого обоснования дизайна, пути к файлу и размеров.