3.3: Визуалы для продукта

Ключевое: У тебя есть продукт и бренд — теперь нужны картинки, которые покажут это миру. Мокапы интерфейса, hero-изображения для лендинга, маркетинговые баннеры. Всё это можно сделать с AI и Claude, не открывая Figma, Photoshop или любой другой дизайн-инструмент. Дизайнером быть не нужно — нужно уметь описать, что хочешь.

Обзор

Вот ситуация: ты построил MVP, создал бренд, готов показать продукт миру. Открываешь лендинг — а там пусто. Нет скриншотов, нет красивых картинок, нет баннеров. Просто текст и кнопка. Конверсия у такого лендинга будет близка к нулю.

Почему визуалы так важны? Потому что люди мыслят образами. Когда пользователь видит мокап интерфейса, он сразу понимает, что это за продукт. Когда видит красивый hero-image — он чувствует профессионализм. Когда видит баннер в соцсетях — он замечает тебя среди сотен других постов.

Раньше для создания продуктовых визуалов нужна была команда: UX-дизайнер делал мокапы в Figma, графический дизайнер — баннеры в Photoshop, иллюстратор — hero-изображения. Для стартапа на ранней стадии это и дорого, и долго.

Сейчас всё это можно сделать двумя способами, и оба доступны прямо в Claude Code:

1. HTML-мокапы — Claude создаёт реалистичный интерфейс в HTML/CSS, ты делаешь скриншот. Результат выглядит как настоящее приложение, потому что это и есть настоящий код
2. AI-генерация — промпты для создания hero-изображений, иллюстраций и баннеров в AI-генераторах

Комбинация этих двух подходов закрывает 90% визуальных потребностей стартапа на ранней стадии. И всё — за 20 минут.

Чему научишься

Как делать мокапы интерфейса из HTML

Звучит технически — но на практике Claude делает всю работу. Ты описываешь: «Дашборд с графиками активности пользователей, боковое меню, тёмная тема, стиль как у Notion». Claude создаёт HTML-файл. Ты открываешь его в браузере — и видишь реалистичный интерфейс. Скриншот этого интерфейса — и есть твой мокап. Преимущество перед AI-генерацией: мокап выглядит на 100% реалистично, потому что это реальный код с реальными шрифтами и пикселями. Никаких «почти как настоящий, но что-то не так».

Как генерировать hero-изображения для лендинга

Hero-image — это большая картинка в верхней части лендинга, которая задаёт настроение. Она не обязательно должна показывать продукт — иногда это абстрактная иллюстрация, иногда фото с наложением, иногда градиент с элементами. Ты научишься писать промпты для разных стилей hero-изображений и выбирать тот, который подходит твоему бренду.

Как создавать маркетинговые баннеры

Баннеры нужны для соцсетей, для рекламы, для партнёрских интеграций. У каждой платформы свои размеры и требования. Ты узнаешь стандартные форматы и научишься быстро создавать баннеры, адаптированные под каждую платформу.

Как делать варианты для A/B тестов

Одна картинка — это гипотеза. Чтобы узнать, что работает лучше, нужно несколько вариантов. Ты научишься быстро создавать A/B варианты: разные цвета CTA-кнопок, разные формулировки заголовков, разные стили изображений. Claude поможет сгенерировать варианты и объяснит, какие гипотезы стоит тестировать.

Как собрать всё в организованный набор

Когда у тебя 15-20 визуальных файлов — важно не потеряться. Ты создашь структурированный набор маркетинговых ассетов с понятными названиями, размерами и описаниями.

Типы визуалов для стартапа

Размеры баннеров по платформам

Пошаговый процесс создания мокапа

Шаг 1: Опиши интерфейс

Ты не пишешь код — ты описываешь, как должно выглядеть приложение. Пример:

«Создай HTML-мокап дашборда SupportAI. Слева — боковое меню с иконками (Дашборд, Тикеты, Аналитика, Настройки). В центре — карточки с метриками (Открытых тикетов: 24, Среднее время ответа: 2.3 мин, Удовлетворённость: 94%). Ниже — график активности за неделю. Тёмная тема, стиль как у Linear или Notion. Используй цвета из brand guidelines: #1E3A5F, #4A7C32.»

Шаг 2: Claude создаёт HTML

Claude генерирует полноценный HTML-файл с CSS-стилями. Это не скетч и не wireframe — это реалистичный интерфейс с правильной типографикой, тенями, скруглениями и данными.

Шаг 3: Открой и сделай скриншот

Открываешь файл в браузере, делаешь скриншот. Готово — у тебя профессиональный мокап, который можно поставить на лендинг или в презентацию.

Шаг 4: Итерируй

Не нравится расположение элементов? Хочешь другой цвет кнопки? Просто скажи Claude: «Перемести график выше, сделай кнопку оранжевой, добавь аватар пользователя в правом верхнем углу.» Claude обновит HTML.

A/B тестирование визуалов

Создавать один вариант — значит полагаться на интуицию. Создавать несколько — значит тестировать гипотезы. С AI создание вариантов почти ничего не стоит.

Что стоит тестировать

Как организовать варианты

Называй файлы по системе: hero-v1-light.png, hero-v2-dark.png, cta-green.html, cta-orange.html. Записывай гипотезу для каждого варианта — какой результат ожидаешь и почему. Это поможет анализировать результаты позже.

Как проходит урок

Claude проведёт тебя через полный процесс создания визуалов:

1. HTML-мокап — ты описываешь интерфейс, Claude создаёт реалистичный HTML-файл. Ты просто открываешь его в браузере и делаешь скриншот
2. Hero-image — вместе составляете промпты для AI-генерации, обсуждаете стиль и настроение
3. Маркетинговые баннеры — Claude создаёт набор промптов для баннеров под разные платформы
4. A/B варианты — создаёте 2-3 варианта ключевых визуалов для тестирования
5. Организация — всё собирается в маркетинговый набор с описанием каждого ассета

Что создашь

• Мокап интерфейса — реалистичный HTML-скриншот продукта, готовый для лендинга и презентации

• marketing-asset-kit.md — полный набор: список всех визуалов, промпты для их генерации, размеры для каждой платформы, описание каждого ассета. Документ, к которому ты будешь возвращаться каждый раз, когда нужен новый визуал

Лучшие практики

• Мокап важнее hero-image. Если нужно выбрать одну картинку для лендинга — пусть это будет мокап интерфейса. Люди хотят видеть продукт, а не абстрактную иллюстрацию
• Не перегружай мокап данными. Фейковые данные должны выглядеть реалистично. «Открытых тикетов: 24» — хорошо. «Открытых тикетов: 1,847,293» — подозрительно для нового продукта
• Используй реальные размеры. Баннер для Twitter — 1200x675, не «примерно такой». Неправильный размер = обрезанная картинка = непрофессиональный вид
• Создавай мобильную версию мокапа. Больше половины пользователей смотрят с телефона. Один десктопный мокап — недостаточно
• Показывай процесс, не только результат. Мокап «до и после» часто конвертирует лучше, чем просто скриншот интерфейса
• Сохраняй HTML-файлы. Не удаляй исходники. Когда тебе нужно будет обновить мокап — проще изменить HTML, чем создавать с нуля

Частые вопросы

HTML-мокапы — это реальный код или просто картинка? Это реальный HTML/CSS код, но он предназначен для визуализации, а не для работы. Кнопки не кликаются, формы не отправляют данные. Это «красивая обёртка», задача которой — показать, как будет выглядеть интерфейс. Скриншот такого мокапа неотличим от скриншота работающего приложения.

Мне нужен Figma для создания мокапов? Нет. HTML-мокапы через Claude дают результат, сравнимый с Figma — для целей маркетинга и презентаций. Figma нужна, когда ты дизайнишь сложный UX с десятками экранов. Для лендинга и питч-дека — HTML-мокапов более чем достаточно.

Как делать скриншот HTML-мокапа? На Mac: Cmd+Shift+4, затем выделяешь область. На Windows: Win+Shift+S. Для полноэкранного скриншота: Cmd+Shift+3 (Mac) или Print Screen (Windows). Если нужен скриншот определённого размера — открой DevTools в браузере (F12), там можно задать точный размер окна.

Сколько визуалов нужно для лендинга? Минимум: 1 hero-image + 1 мокап интерфейса + favicon. Хорошо: hero + 2-3 мокапа (разные экраны) + иконки фич + OG-image. Идеально: всё вышеперечисленное + мобильная версия + видео-демо.

Можно ли анимировать HTML-мокап? Да. Claude может добавить CSS-анимации — появление элементов, плавные переходы, мигающий курсор. Анимированный мокап в виде GIF или видео выглядит эффектнее статичного скриншота.

Что дальше

У тебя теперь есть и бренд, и визуалы. Но есть проблема: если каждый новый визуал делать с нуля, стиль начнёт «плыть». В следующем уроке ты создашь систему единого стиля — мастер-промпт и шаблоны, которые обеспечат консистентность всех материалов.

Запуск

/start-3-3

Следующий урок: Единый стиль →