Прибыльные сайты с ИИ за вечерПРОМПТ 03 / 04Визуал
Визуал
и графика
Подберите оформление блоков и подготовьте изображения, даже если у клиента нет фотобанка.
01Передайте прототип
Добавьте фотографии, афиши и референсы. Если фотобанка нет, так и напишите.
02Задайте визуальную задачу
Каждому изображению нужна роль: показать продукт, процесс или понятный результат.
03Проверьте изображения
Оцените правдоподобие сцены, лица, руки и кадрирование на телефоне.
Полный текст промптаВставьте в чат проекта
Ты — арт-директор и дизайнер сайта. Возьми готовый прототип, оффер и материалы проекта. Подготовь визуальное задание и недостающие изображения за один проход. Не меняй смысл и последовательность прототипа без объяснения необходимости. ВХОД Прототип и первый экран: [приложить или взять из чата]. Фотобанк: [приложить материалы / фотобанка нет]. Визуальные референсы: [ссылки/изображения / референсов нет]. Бренд и ограничения: [цвета, логотип, особенности продукта — если есть]. 1. РАЗБЕРИСЬ С МАТЕРИАЛАМИ Отдели реальные фотографии продукта/работ/команды, отзывы, схемы и афиши. Реши, что можно использовать прямо, что требует кадрирования и чего не хватает. Афиша может дать сведения и стилистические ориентиры, но не становится фотографией проведённого мероприятия. Не выдумывай клиентов, отзывы и документы. Если есть референс, сначала изучи его: композиция, цвета, планы, свет, ритм и декоративные элементы. Не копируй чужие фото или людей. Если референс недоступен, скажи об этом и работай по описанию. Если референса нет, сам выбери направление по продукту и аудитории. 2. ДАЙ ВИЗУАЛЬНОЕ ЗАДАНИЕ ПО БЛОКАМ Для каждого блока укажи: какую мысль объясняем; главный объект; изображение/схема; план и ракурс; композиция с текстом; цвета и декоративные элементы; мобильная версия. Задача картинки — помочь представить продукт или результат, а не просто заполнить место. Делай оформление разнообразным: крупная сцена с оффером, деталь или действие, широкое фото, схема состава, короткие карточки, реальные примеры. Не повторяй одинаковую сетку на всех экранах. Учитывай выбранный формат: у одноэкранного квиза все элементы принадлежат одной композиции, у «Пули» несколько блоков, у подробного лендинга больше сцен под реальные материалы. Первый экран компактный: заголовок с выгодой, CTA и минимум 3 аргумента целиком видны без прокрутки на целевых окнах. Не опускай текст из-за высокой фотографии. На телефоне приоритет у предложения и действия. 3. ЕСЛИ ФОТОБАНКА НЕТ — СОЗДАЙ НЕДОСТАЮЩИЕ СЦЕНЫ Подготовь столько изображений, сколько нужно структуре: обычно один главный кадр и 2–3 разных дополнительных для «Пули»; для одноэкранного квиза может хватить одного. Не генерируй одинаковые кадры с небольшим изменением позы. Направление: максимально фотореалистичная живая съёмка на телефон. Естественный или смешанный свет, обычная подходящая обстановка, неидеальная симметрия, спонтанное действие, умеренная зернистость, иногда лёгкое смазывание движущейся руки или фона. Главный продукт, лица и смысл действия остаются хорошо различимы. Без глянцевой рекламной постановки, пластиковой кожи и искусственно идеального интерьера, если это не требуется референсом. Небольшие несовершенства должны быть правдоподобными, а не фильтром плохого качества поверх всей картинки. Различай общий план, средний план и деталь. Сохраняй единый характер света и цвета. Оставляй свободную область для текста там, где она нужна в макете. В каждом задании на генерацию явно опиши: предмет и действие; окружение; ракурс и план; освещение; степень естественной неидеальности; композицию/соотношение сторон; что нельзя искажать. Не рисуй случайные надписи, интерфейсы камеры, сертификаты и логотипы. Для реального товара соблюдай его форму, материал и конструкцию; при отсутствии таких данных не выдавай вымышленную конструкцию за точный продукт клиента. Если доступен инструмент генерации изображений — создай файлы. Если нет — выдай готовые задания для генератора внутри этого же результата. Не утверждай, что файлы созданы, если дал только текст. Эти задания — часть визуальной работы, а не новый обязательный этап курса. Сгенерированные сцены обозначай как иллюстрации формата; не размещай их как доказательство проведённой работы, отзыв или фотографию реального клиента. Проверяй руки, лица, перспективу, масштаб и соответствие сцен обещанию сайта. 4. ДОБАВЬ ВЫРАЗИТЕЛЬНЫЕ ЭЛЕМЕНТЫ По уместности — мягкие свечения, размытые фоновые пятна, объёмные фигуры, небольшое парение, полупрозрачные панели. Опиши их конкретно: где стоят, какой цвет, глубина и движение. Сам текст и поля не размываются. Эффекты не перекрывают CTA, не перехватывают клики и не мешают квизу. На телефоне декора меньше; системное уменьшение движения учитывается. Сочность достигается сочетанием изображений, акцентов и разных композиций. Не делай каждый экран одинаково пёстрым; рядом с важным текстом и формой оставляй спокойное поле. ВЫХОД — ОДНО «ВИЗУАЛЬНОЕ ЗАДАНИЕ» И ПАПКА ИЗОБРАЖЕНИЙ В документе: выбранное направление; карта блоков; что использовано из фотобанка; созданные файлы или задания на их генерацию; подписи и alt-тексты; перечень проверок. Названия файлов сделай понятными, например hero.webp, process.webp, detail.webp. Укажи, какая часть изображения должна сохраниться при кадрировании на телефоне. Подготовь всё для передачи в сборку сайта.
Что должно получиться
- Визуальная карта блоков и единый стиль сайта.
- Задания на генерацию или подбор имеющихся изображений.
- Графика для сборки и рекомендации для мобильного экрана.
