Прибыльные сайты с ИИ за вечерПРОМПТ 03 / 04

Визуал
и графика

Подберите оформление блоков и подготовьте изображения, даже если у клиента нет фотобанка.

01Передайте прототип

Добавьте фотографии, афиши и референсы. Если фотобанка нет, так и напишите.

02Задайте визуальную задачу

Каждому изображению нужна роль: показать продукт, процесс или понятный результат.

03Проверьте изображения

Оцените правдоподобие сцены, лица, руки и кадрирование на телефоне.

Скопируется весь промпт, включая поля для ваших данных. Отправляйте один промпт за раз.

Полный текст промптаВставьте в чат проекта
Ты — арт-директор и дизайнер сайта. Возьми готовый прототип, оффер и материалы проекта. Подготовь визуальное задание и недостающие изображения за один проход. Не меняй смысл и последовательность прототипа без объяснения необходимости.

ВХОД
Прототип и первый экран: [приложить или взять из чата].
Фотобанк: [приложить материалы / фотобанка нет].
Визуальные референсы: [ссылки/изображения / референсов нет].
Бренд и ограничения: [цвета, логотип, особенности продукта — если есть].

1. РАЗБЕРИСЬ С МАТЕРИАЛАМИ
Отдели реальные фотографии продукта/работ/команды, отзывы, схемы и афиши. Реши, что можно использовать прямо, что требует кадрирования и чего не хватает. Афиша может дать сведения и стилистические ориентиры, но не становится фотографией проведённого мероприятия. Не выдумывай клиентов, отзывы и документы.
Если есть референс, сначала изучи его: композиция, цвета, планы, свет, ритм и декоративные элементы. Не копируй чужие фото или людей. Если референс недоступен, скажи об этом и работай по описанию. Если референса нет, сам выбери направление по продукту и аудитории.

2. ДАЙ ВИЗУАЛЬНОЕ ЗАДАНИЕ ПО БЛОКАМ
Для каждого блока укажи: какую мысль объясняем; главный объект; изображение/схема; план и ракурс; композиция с текстом; цвета и декоративные элементы; мобильная версия. Задача картинки — помочь представить продукт или результат, а не просто заполнить место.
Делай оформление разнообразным: крупная сцена с оффером, деталь или действие, широкое фото, схема состава, короткие карточки, реальные примеры. Не повторяй одинаковую сетку на всех экранах. Учитывай выбранный формат: у одноэкранного квиза все элементы принадлежат одной композиции, у «Пули» несколько блоков, у подробного лендинга больше сцен под реальные материалы.
Первый экран компактный: заголовок с выгодой, CTA и минимум 3 аргумента целиком видны без прокрутки на целевых окнах. Не опускай текст из-за высокой фотографии. На телефоне приоритет у предложения и действия.

3. ЕСЛИ ФОТОБАНКА НЕТ — СОЗДАЙ НЕДОСТАЮЩИЕ СЦЕНЫ
Подготовь столько изображений, сколько нужно структуре: обычно один главный кадр и 2–3 разных дополнительных для «Пули»; для одноэкранного квиза может хватить одного. Не генерируй одинаковые кадры с небольшим изменением позы.
Направление: максимально фотореалистичная живая съёмка на телефон. Естественный или смешанный свет, обычная подходящая обстановка, неидеальная симметрия, спонтанное действие, умеренная зернистость, иногда лёгкое смазывание движущейся руки или фона. Главный продукт, лица и смысл действия остаются хорошо различимы. Без глянцевой рекламной постановки, пластиковой кожи и искусственно идеального интерьера, если это не требуется референсом.
Небольшие несовершенства должны быть правдоподобными, а не фильтром плохого качества поверх всей картинки. Различай общий план, средний план и деталь. Сохраняй единый характер света и цвета. Оставляй свободную область для текста там, где она нужна в макете.
В каждом задании на генерацию явно опиши: предмет и действие; окружение; ракурс и план; освещение; степень естественной неидеальности; композицию/соотношение сторон; что нельзя искажать. Не рисуй случайные надписи, интерфейсы камеры, сертификаты и логотипы. Для реального товара соблюдай его форму, материал и конструкцию; при отсутствии таких данных не выдавай вымышленную конструкцию за точный продукт клиента.
Если доступен инструмент генерации изображений — создай файлы. Если нет — выдай готовые задания для генератора внутри этого же результата. Не утверждай, что файлы созданы, если дал только текст. Эти задания — часть визуальной работы, а не новый обязательный этап курса.
Сгенерированные сцены обозначай как иллюстрации формата; не размещай их как доказательство проведённой работы, отзыв или фотографию реального клиента. Проверяй руки, лица, перспективу, масштаб и соответствие сцен обещанию сайта.

4. ДОБАВЬ ВЫРАЗИТЕЛЬНЫЕ ЭЛЕМЕНТЫ
По уместности — мягкие свечения, размытые фоновые пятна, объёмные фигуры, небольшое парение, полупрозрачные панели. Опиши их конкретно: где стоят, какой цвет, глубина и движение. Сам текст и поля не размываются. Эффекты не перекрывают CTA, не перехватывают клики и не мешают квизу. На телефоне декора меньше; системное уменьшение движения учитывается.
Сочность достигается сочетанием изображений, акцентов и разных композиций. Не делай каждый экран одинаково пёстрым; рядом с важным текстом и формой оставляй спокойное поле.

ВЫХОД — ОДНО «ВИЗУАЛЬНОЕ ЗАДАНИЕ» И ПАПКА ИЗОБРАЖЕНИЙ
В документе: выбранное направление; карта блоков; что использовано из фотобанка; созданные файлы или задания на их генерацию; подписи и alt-тексты; перечень проверок. Названия файлов сделай понятными, например hero.webp, process.webp, detail.webp. Укажи, какая часть изображения должна сохраниться при кадрировании на телефоне. Подготовь всё для передачи в сборку сайта.
Все четыре шага выполняйте в одном чате проекта.

Что должно получиться

  • Визуальная карта блоков и единый стиль сайта.
  • Задания на генерацию или подбор имеющихся изображений.
  • Графика для сборки и рекомендации для мобильного экрана.
Секреты фрилансаПрибыльные сайты с ИИ за вечер
Made on
Tilda