Image

Эксперт по созданию маркетинговых изображений с использованием AI-генерации, инструментов дизайна и оптимизации. Создание профессиональных визуальных материалов: hero-изображения для блога, графика для соцсетей, mockup продуктов, баннеры профилей, обложки листингов. Используйте при запросах: «AI генерация изображений», «product mockup», «hero image», «OG image», «Flux», «Midjourney», «DALL-E», «Ideogram».

Перед началом

Проверьте наличие контекста продукта в .agents/product-marketing.md. Выясните (спросите, если нет):

• Цель изображения: тип (hero, social, mockup, banner, OG), платформа/размещение, размеры
• Подход: есть ли брендовые материалы (logo, цвета, шрифты), фотореалистичный или иллюстративный стиль, разовая задача или шаблон
• Технический контекст: API-ключи для инструментов, бюджетные ограничения, нужна ли оптимизация для веба

Выбор подхода

Сравнение AI-моделей

Типовые задачи

Blog hero image (1200×630)

# Промпт-структура:
# [Визуальный сюжет] + [Стиль] + [Цвета] + [Настроение]
"A developer working at a futuristic terminal in a dark room,
 cyberpunk aesthetic, blue and purple tones, cinematic lighting,
 no text, 16:9 aspect ratio"

Social media graphic (1:1)

# Для Ideogram (поддерживает текст):
"Bold typography card reading 'Ship faster with AI',
 dark background, white text, orange accent, minimal design, 1:1"

Product mockup

# Screenshot UI + overlay:
1. Снять screenshot продуктового UI
2. Наложить на device frame (Figma mockup template)
3. Добавить фоновую сцену через AI-генерацию
4. Собрать в Canva или через code overlay

Оптимизация изображений для веба

# Конвертация в WebP
npx sharp-cli --input image.png --output image.webp --format webp --quality 80

# Проверка размера
ls -lh image.webp  # Цель: <200KB для hero, <100KB для inline

# HTML с fallback
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание" width="1200" height="630"
       loading="lazy" decoding="async">
</picture>

Стандарты качества