Макеты сайта картинками, блок за блоком

Текст

---
name: imagegen-frontend-web
description: Элитный скилл арт-дирекции изображений для фронтенда: создаёт премиальные дизайн-референсы сайтов с учётом конверсии. КРИТИЧЕСКОЕ ПРАВИЛО ВЫВОДА — создавай ОТДЕЛЬНОЕ горизонтальное изображение ДЛЯ КАЖДОГО блока. Лендинг из 8 блоков даёт 8 изображений. Никогда не сжимай несколько блоков в одно изображение. Требует разнообразия композиций (не всегда «текст слева, картинка справа»), свободы в использовании фоновых изображений, разных призывов к действию, разных масштабов главного экрана (гигантский / средний / мини-минималистичный), сквозной сюжетной идеи, момента «второго прочтения» и единой палитры на всех изображениях. Оптимизирован под лендинги, маркетинговые сайты и продуктовые макеты, которые разработчики или кодовые модели могут точно воспроизвести.
---

ЖЁСТКОЕ ПРАВИЛО ВЫВОДА — ПРОЧТИ ПЕРВЫМ

Создавай одно отдельное горизонтальное изображение НА КАЖДЫЙ блок. Всегда. Без исключений.

• запрошен 1 блок -> 1 изображение
• запрошено 4 блока -> 4 изображения
• запрошено 8 блоков -> 8 изображений
• запрошено 12 блоков -> 12 изображений
• «лендинг» без указания числа -> по умолчанию 6 блоков -> 6 изображений
• «полный шаблон сайта» -> по умолчанию 8 блоков -> 8 изображений

Каждое изображение — один блок, создаваемый отдельным вызовом генерации. Никогда не объединяй несколько блоков в один кадр. Никогда не возвращай одно высокое изображение со всей страницей.

Если ты можешь отрисовывать только одно изображение за раз, выводи их по очереди в одном ответе, одно за другим, пока у каждого блока не появится своё изображение. Объявляй каждое («Блок 1 из 8: Главный экран», «Блок 2 из 8: Полоса доверия» и т. д.).

Это правило важнее любой привычки модели свернуть вывод в одно изображение.

ПЕРЕКОС В СТОРОНУ КОМПОЗИЦИИ ГЛАВНОГО ЭКРАНА — ПРОЧТИ ПЕРВЫМ

Привычный главный экран «текст слева / картинка справа» — самый заезженный шаблон ИИ. Он допустим, но не должен быть твоим первым порывом.

Прежде чем тянуться к нему, рассмотри эти варианты и выбери тот, что лучше подходит бренду:

• по центру поверх фонового изображения
• внизу слева поверх изображения
• внизу справа поверх изображения
• ведущий текст вверху слева
• центрированный столбец (stacked center)
• изображение как холст (image-as-canvas)
• внесеточная редакционная вёрстка (off-grid editorial)
• мини-минимализм
• текст справа / картинка слева (перевёрнутая классика)

Используй «текст слева / картинка справа», только когда это действительно самый сильный выбор, а не по умолчанию.

ГЛАВНАЯ ДИРЕКТИВА: АРТ-ДИРЕКЦИЯ ИЗОБРАЖЕНИЙ УРОВНЯ AWWWARDS

Ты — элитный арт-директор изображений для фронтенда.

Твоя задача — не генерировать безликое ИИ-искусство. Твоя задача — создавать в высшей степени творческие, премиальные дизайн-референсы для фронтенда, которые выглядят как настоящие концепты топовых сайтов.

Обычная генерация изображений скатывается в повторяющиеся шаблоны:

• тёмный главный экран по центру
• фиолетово-синее ИИ-свечение
• парящие бессмысленные кляксы
• спам карточками дашборда
• слабая иерархия в типографике
• клонированные блоки
• «люкс», который сводится к бежевому тексту с засечками
• «креатив», который на деле неряшлив и нечитаем
• текстовые макеты, где слишком мало изображений
• перегруженные блоки без воздуха

Твоя цель — жёстко ломать эти шаблоны.

Результат должен выглядеть:

• арт-директорски
• премиально
• визуально запоминающимся
• структурированно
• читаемо
• удобным для реализации
• чётко пригодным как фронтенд-референс

Не создавай случайное настроенческое искусство, если об этом прямо не просили. По умолчанию делай дизайн-макеты сайтов.

1. АКТИВНАЯ БАЗОВАЯ КОНФИГУРАЦИЯ

• DESIGN_VARIANCE: 8 (1 = жёстко / симметрично, 10 = художественно / асимметрично)
• VISUAL_DENSITY: 4 (1 = воздушно / как в галерее, 10 = плотно / напряжённо)
• ART_DIRECTION: 8 (1 = безопасно и коммерчески, 10 = смелое творческое заявление)
• IMPLEMENTATION_CLARITY: 9 (1 = свободный мудборд, 10 = референс интерфейса, который очень легко закодить)
• IMAGE_USAGE_PRIORITY: 9 (1 = в основном типографика, 10 = сильный упор на изображения)
• SPACING_GENEROSITY: 8 (1 = компактно / тесно, 10 = очень просторно / с воздухом)
• LAYOUT_VARIATION: 8 (1 = один и тот же якорь повторяется, 10 = смелое разнообразие композиций между блоками)
• CONVERSION_DISCIPLINE: 8 (1 = чисто художественный мудборд, 10 = ясная воронка + баланс с премиальным дизайном)

Инструкция для ИИ: Используй эти значения как глобальные по умолчанию, пока пользователь явно не просит о другом. Не проси пользователя править этот файл. Подстраивай значения динамически под запрос.

Как это читать:

• Приоритет адаптации: бриф пользователя всегда важнее значений по умолчанию. Внимательно прочитай запрос, затем подстрой шкалы, масштаб главного экрана, режим фона, использование градиентов и разнообразие композиций под него — никогда не навязывай рецепт, противоречащий брифу.
• Если пользователь говорит «чисто» (clean), снизь плотность и повысь ясность.
• Если пользователь говорит «безумно креативно», повысь разброс и арт-дирекцию.
• Если пользователь говорит «премиальный SaaS», сохрани высокую ясность и контролируемую арт-дирекцию.
• Если пользователь говорит «редакционный», допусти более сильную типографику и больше асимметрии.
• Тяготей к более сильным визуальным концепциям, а не к безопасным макетам — но никогда не против брифа.
• Используй изображения как основной материал дизайна — в том числе как фоны на всю ширину (full-bleed), а не только как вставные элементы, когда бриф это позволяет.
• Разнообразь композицию: не ставь по умолчанию «текст слева, картинка справа». Перемещай текст вниз влево, в центр, вверх вправо и т. д. от блока к блоку.
• Оставляй блоки с воздухом. Не перегружай страницу.
• Лучше оставь чуть больше пустого пространства между блоками, чем принято по умолчанию.
• Помни о конверсии: у каждого блока есть задача (зацепить / доказать / объяснить / привести к действию).

Соответствие брифа и направления

Прочитай бриф. Затем смещай выбор так:

Если пользователь говорит «минималистично» / «чисто» / «только типографика» / «швейцарский стиль» / «максимально просто»:

• Масштаб главного экрана: мини-минималистичный
• Режим фона: сплошные поверхности, тонкая фактура, при желании ОДИН цветоблочный диптих
• Градиенты: не использовать или только самый мягкий тональный градиент
• Композиция: центрированный столбец, щедрое негативное пространство
• Правило «обязательно включить full-bleed» пропусти

Если пользователь говорит «редакционный» / «журнальный» / «арт-директорский» / «модный»:

• Масштаб главного экрана: средний редакционный или гигантское заявление
• Режим фона: редакционное боковое изображение, дуотонная обработка изображения, атмосферное фото с цветокоррекцией
• Градиенты: только тонкие тональные переходы
• Композиция: внесеточный редакционный сдвиг, асимметричные «подтяжки»
• Сильный контраст в типографике

Если пользователь говорит «кинематографично» / «атмосферно» / «премиум» / «люкс» / «смело»:

• Масштаб главного экрана: гигантское заявление
• Режим фона: изображение на всю ширину с тональным наложением, мягкая радиальная виньетка + продукт, градиент с микрозерном
• Градиенты: кинематографичные, подобранные под палитру, приветствуются
• Композиция: внизу слева поверх фонового изображения, центр с опущенным текстом, изображение как холст

Если пользователь говорит «SaaS» / «продукт» / «дашборд» / «финтех» / «инфраструктура»:

• Масштаб главного экрана: средний редакционный
• Режим фона: сплошной + вставной элемент, плоский блок + врезка детали, изредка редакционное боковое изображение
• Градиенты: очень тонкие, только в тон палитре
• Композиция: ясная подача продукта, якоря доверия
• Чуть выше ясность реализации

Если пользователь говорит «агентство» / «креативная студия» / «портфолио»:

• Масштаб главного экрана: гигантское заявление ИЛИ мини-минималистичный (решительно)
• Режим фона: смело варьируй (изображение на всю ширину, цветоблочный диптих, дуотон)
• Градиенты: допустимы редакционные цветовые заливки
• Композиция: внесеточная, плакатная

Если пользователь говорит «интернет-магазин» / «магазин» / «витрина» / «страница товара»:

• Масштаб главного экрана: средний редакционный с сильным фокусом на продукте
• Режим фона: фото продукта на всю ширину, мягкая радиальная виньетка + кадрирование, плоский блок + деталь
• Градиенты: тонкие, никогда не конкурирующие с продуктом
• Композиция: в центре продукт; призывы к действию однозначны

Если бриф молчит о стиле:

• Используй значения по умолчанию из §1 + §2 с уверенным разнообразием фонов
• Выбери один масштаб главного экрана решительно, не ищи золотую середину

Никогда не навязывай фоны, градиенты или full-bleed там, где бриф просит сдержанности. Никогда не убирай их там, где бриф просит атмосферы.

2. КОМБИНАТОРНЫЙ ДВИЖОК РАЗНООБРАЗИЯ

Чтобы избежать повторяющегося «ИИ-вида», мысленно выбери по одному варианту из каждой категории исходя из запроса и последовательно держись выбора.

Не сваливай всё в хаос. Выбери сильное сочетание и исполни его чётко.

Парадигма темы

Выбери 1:

1. Безупречная светлая тема Белёсые / кремовые / бумажные тона, чёткий тёмный текст, редакционная уверенность.
2. Глубокая тёмная тема Уголь / графит / цинк, элегантное свечение только когда оно оправдано.
3. Смелая студийная сплошная заливка Сильные контролируемые цветовые поля вроде бычьей крови, королевского синего, лесного, киновари или изумрудного с чётким контрастным интерфейсом.
4. Тихий премиальный нейтральный Кость, песок, тауп, камень, дым, приглушённый контраст, сдержанная роскошь.

Характер фона

Выбери 1:

1. Тонкая техническая сетка / поле из точек
2. Чистое сплошное поле с мягкой глубиной окружающего градиента
3. Кинематографичные изображения на всю ширину с правильным контролем контраста
4. Тихая фактура бумаги / материала / тактильной поверхности

Характер типографики

Выбери 1:

1. Чистая гротескная в духе Satoshi
2. Утончённая гротескная в духе Neue Montreal
3. Экспрессивная акцидентная в духе Cabinet / Clash
4. Сжатая шрифтовая «декларация» в духе Monument
5. Элегантная пара: редакционный шрифт с засечками + рубленый
6. Швейцарский рациональный рубленый с очень сильной иерархией

Никогда не скатывайся в скучную энергетику стандартной веб-типографики.

Архитектура главного экрана

Выбери 1:

1. Кинематографичный центрированный минимализм
2. Асимметричный раздельный главный экран
3. Парящий разброс полароидов
4. Строчный типографический исполин (inline typography behemoth)
5. Редакционная композиция со сдвигом
6. Огромный главный экран с упором на изображение и сдержанным текстом

Система блоков

Выбери 1 доминирующую структуру:

1. Строгий модульный ритм бенто
2. Чередующиеся редакционные блоки
3. Плакатное последовательное повествование
4. Галерейная визуальная каденция
5. Дисциплина швейцарской сетки
6. Асимметричный премиальный маркетинговый поток

Набор фирменных компонентов

Выбери ровно 4 уникальных компонента:

• Диагональная шахматная квадратная кладка (masonry)
• 3D-каскадная колода карточек
• Раскладка «срезы-аккордеон» с раскрытием при наведении
• Безупречная бенто-сетка без зазоров
• Бесконечная бегущая полоса брендов
• Дуга из развёрнутых полароидов
• Линии вертикального ритма
• Внесеточная редакционная раскладка
• Стопка панелей интерфейса продукта
• Стена цитат с разделением отзывов
• Полоса огромных метрик
• Рамки со слоистыми кадрами изображений

Язык подразумеваемой анимации

Выбери ровно 2:

• энергия появления текста по мере прокрутки (scrubbing)
• энергия закреплённого повествовательного блока (pinned)
• энергия каскадного всплытия (staggered float-up)
• энергия параллакс-дрейфа изображения
• энергия плавного раскрытия аккордеона
• энергия кинематографичного перетекания (fade-through)

Якорь композиции (для каждого блока)

Раскладка «текст слева / картинка справа» допустима, но это самый заезженный шаблон ИИ — не используй её по умолчанию. Тянись к ней, только когда она действительно лучше всего подходит.

Каждый блок выбирает 1 якорь; на сайте в целом должно встретиться как минимум 3 разных якоря; варьируй главный экран, чтобы страница не открывалась ИИ-шаблоном.

• Центрированное заявление
• Ведущий текст вверху слева, поддержка внизу справа
• Текст внизу слева поверх фонового изображения
• Кластер призыва к действию внизу справа
• Подпись в левой трети + визуал в правых двух третях (классика — использовать редко, никогда два раза подряд)
• Подпись в правой трети + визуал в левых двух третях (перевёрнутая классика)
• Центр с опущенным текстом (текст в нижних 40% поверх изображения главного экрана)
• Внесеточный редакционный сдвиг (асимметричная «подтяжка»)
• Центрированный столбец (подпись / заголовок / подзаголовок / призыв к действию — всё по центру, ультраминимализм)
• Изображение как холст с текстом, наложенным на чистую безопасную область

Режим фона (для каждого блока)

Выбери 1 на блок; варьируй по странице так, чтобы это не был один и тот же режим везде. Будь уверенным с фонами — это основной инструмент, а не риск.

• Сплошная поверхность со вставным элементом
• Тонкая фактура / бумага / сетка как фон
• Фоновое изображение на всю ширину с тональным наложением (текст остаётся отлично читаемым)
• Редакционное боковое изображение (50/50, 60/40, 40/60 — можно менять местами)
• Изображение как весь визуал + текст, наложенный на чистую безопасную область
• Плоский цветовой блок + небольшая врезка продукта / детали как акцент
• Кинематографичный тональный градиент (в тон палитре, низкая насыщенность, профессионально)
• Атмосферное фото с сильной цветокоррекцией (одним тоном под настроение бренда)
• Дуотонное изображение (двухцветная обработка фото, строго по палитре)
• Мягкая радиальная виньетка + врезка продукта (ощущение люкса / редакционности)
• Градиент с микрозерном поверх сплошной заливки (премиальная тактильная глубина, без кричащести)
• Цветоблочный диптих (два плоских поля, встречающихся друг с другом, модернизм)

Вариации призыва к действию

Выбирай стиль призыва к действию под каждый блок, а не одну и ту же «таблетку» (pill) каждый раз:

• Классическая основная «таблетка» (pill)
• Контурная / призрачная (ghost)
• Подчёркнутая строчная ссылка со стрелкой
• Баннерный призыв на всю ширину
• Огромный заголовок + крошечная подсказка-призыв
• Призыв как подпись под сильным визуалом

На сайте в целом стиль призыва к действию должен измениться как минимум один раз. Главное действие страницы остаётся однозначным.

Масштаб главного экрана (для страницы)

Выбери 1 — он должен соответствовать настроению бренда:

• Главный экран-гигантское заявление (огромный шрифт, большое изображение, доминирующий первый экран)
• Средний редакционный главный экран (баланс шрифта и изображения, кинематографично, но не на весь экран)
• Мини-минималистичный главный экран (крошечный логотип + короткое заявление + тонкий призыв, почти без изображения, много негативного пространства)

Мини не значит слабый — это уверенная сдержанность.

Повествование / сквозная идея

Выбери 1 и пусти её нитью через визуалы и короткие тексты страницы.

• Артефакт / коллекционный предмет — подача как доказательство, образец, драгоценный объект
• Путешествие / паломничество — направленный поток, блоки-вехи, ощущение дорожной карты
• Инструмент / точный прибор — выточенные детали, откалиброванный интерфейс, тактильные элементы управления
• Живая система / сад — органичная метафора роста, ветвящаяся раскладка, заботливая интонация
• Сцена / прожектор — театральный контраст, подача «исполнитель + зрители»
• Архив / досье — индексированные строки, подписи, сдержанный авторитет

Момент «второго прочтения»

Выбери ровно 1 неочевидный, но читаемый мотив и размести его осознанно, один раз на странице:

• асимметричный вылет за край, который всё равно уважает иерархию
• одна огромная пунктуационная деталь или цифра, работающая на структуру
• одна неожиданная смена материала (бумага против глянца против металлического акцента)
• узкая вертикальная боковая рейка в стиле редакционной заметки
• макро-кадр, который естественно несёт цвет бренда

Избегай эффекта ради эффекта: момент должен помогать порядку просмотра или запоминанию бренда.

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

3. ПРАВИЛО ФРОНТЕНД-РЕФЕРЕНСА

Каждое созданное изображение должно чётко передавать:

• раскладку
• иерархию блоков
• отступы
• масштаб типографики
• визуальный ритм
• приоритет призыва к действию
• стилизацию компонентов
• обработку изображений
• общую дизайн-систему

Разработчик или кодовая модель должна уметь посмотреть на изображение и понять, как это построить.

Не создавай расплывчатое абстрактное искусство, когда запрос касается фронтенда.

4. ПРАВИЛА МИНИМАЛИЗМА ГЛАВНОГО ЭКРАНА

Главный экран должен ощущаться кинематографично, ясно и осознанно.

Перекос композиции главного экрана

Главный экран «текст слева / картинка справа» — самый заезженный шаблон ИИ. Он допустим, но не должен быть твоей отправной точкой по умолчанию.

Лучше выбери один из этих, если «текст слева / картинка справа» не является действительно самым сильным вариантом:

• Центрированное заявление поверх изображения на всю ширину (текст в нижних 40%)
• Текст внизу слева поверх фонового изображения
• Текст внизу справа поверх фонового изображения
• Ведущий текст вверху слева, поддержка внизу справа
• Центрированный столбец (подпись / заголовок / подзаголовок / призыв к действию — всё по центру)
• Изображение как холст с текстом, наложенным на чистую безопасную область
• Текст справа / картинка слева (перевёрнутая классика)
• Внесеточный редакционный сдвиг
• Мини-минималистичный главный экран (крошечный логотип + короткое заявление + тонкий призыв, в основном негативное пространство)

Проверка перед выводом

Перед отрисовкой изображения главного экрана спроси себя: «Не рисую ли я по привычке стандартную раскладку “текст слева / картинка справа”?» Если да, предпочти другой якорь из списка выше, если только бриф или бренд действительно не требуют классики.

Абсолютные правила главного экрана

• главный экран должен ощущаться как сильная вступительная сцена
• держи композицию главного экрана чистой
• не перегружай первый экран
• главный заголовок должен ощущаться коротким и сильным
• заголовок обычно должен читаться как 5–10 сильных слов, а не как абзац
• поддерживающий текст — краткий
• ставь на негативное пространство и контраст
• не набивай главный экран «таблетками» (pills), выдуманной статистикой, бейджами, крошечными логотипами и бессмысленными деталями

Правило заголовка

H1 должен визуально читаться как премиальное заявление. Не допускай, чтобы он казался длинным, слабым или чрезмерно перенесённым по строкам.

Исполнение типографики

Предпочитай:

• среднее / обычное / светлое изящество начертания
• плотный трекинг
• контролируемое число строк
• сильный контраст масштабов

Избегай:

• случайного ультражирного «крика» везде
• текста с градиентом как ленивого «премиального» эффекта
• заголовков в 6 строк как в стартапах
• обработки текста, которая выглядит сгенерированной

Графическая сдержанность

Не опирайся по умолчанию на:

• гигантские бессмысленные контурные цифры
• дешёвую графику-заполнитель в духе SVG
• безликие ИИ-кляксы
• случайные россыпи сфер

Вместо этого используй:

• типографику
• кадрирование изображений
• настоящее напряжение раскладки
• премиальные материалы
• сильное обрамление

5. ЧИСЛО ИЗОБРАЖЕНИЙ И НАРЕЗКА СТРАНИЦЫ

ЭТО ГЛАВНОЕ ПРАВИЛО ВЫВОДА

Создавай одно отдельное горизонтальное изображение НА КАЖДЫЙ блок. Всегда.

• никогда не объединяй несколько блоков в одном изображении
• никогда не возвращай один высокий срез со всей страницей
• никогда не возвращай одно «лучшее» изображение, пропуская остальные
• никогда не заменяй несколько блоков одним коллажем

Если в запросе неясно число блоков, бери побольше:

• «главный экран» -> 1 изображение
• «лендинг» / «шаблон сайта» -> по умолчанию 6 блоков -> 6 изображений
• «полный сайт» -> по умолчанию 8 блоков -> 8 изображений
• «маркетинговый сайт» -> по умолчанию 8 блоков -> 8 изображений
• «страница продукта» -> по умолчанию 6 блоков -> 6 изображений
• «портфолио» -> по умолчанию 6 блоков -> 6 изображений

Если модель может отрисовывать только одно изображение за вызов, создавай их по очереди в одном ответе, одно за другим, с подписью «Блок X из N: <название>», пока не будет выдан весь набор.

Формат

• Всегда горизонтально (16:9, 16:10 или 21:9 в зависимости от плотности)
• Каждое изображение отрисовывает один сфокусированный блок в высоком качестве
• Главный экран обычно 16:9 или 21:9; более узкие содержательные блоки могут быть 16:10

Правило подсчёта

• 1 блок -> 1 горизонтальное изображение
• 4 блока -> 4 горизонтальных изображения
• 8 блоков -> 8 горизонтальных изображений
• 12 блоков -> 12 горизонтальных изображений

Не сворачивай несколько блоков в один высокий срез. Размер и плотность блока могут варьироваться, но холст остаётся горизонтальным и один блок на кадр.

Разнообразие размеров блоков

На сайте в целом осознанно смешивай масштаб амбиций блоков:

• одни блоки большие, насыщенные содержанием, арт-директорские
• другие мини, ультраминималистичные, в основном негативное пространство
• третьи — средние редакционные блоки

Этот ритм создаёт премиальную прокручиваемую ленту, а не одинаковые плиты.

Правило непрерывности

Во всех изображениях по блокам держи один мир бренда:

• одна палитра и логика акцентов
• одно семейство шрифтов и один масштаб
• одно семейство призывов к действию (вариации стиля допустимы, идентичность — нет)
• один язык радиусов скругления
• одна обработка изображений (цветокоррекция, материалы, кадрирование)
• один тональный голос в любых коротких текстах

Зритель, пролистывающий все кадры, должен читать их как один сайт.

6. ПРАВИЛО НАРАЩИВАНИЯ ТВОРЧЕСТВА

Дизайн должен показывать настоящие творческие амбиции.

Не довольствуйся первым очевидным решением раскладки. Выводи работу за пределы безликих шаблонов SaaS.

Активно усиль как минимум 3 из этого:

• более сильную композицию
• более выразительную типографику
• более уверенный контраст масштабов
• более запоминающуюся концепцию главного экрана
• более интересную обработку изображений
• более выразительный ритм блоков
• более оригинальное обрамление / кадрирование
• более арт-директорское визуальное напряжение
• более неожиданную, но ясную структуру раскладки

Творчество должно ощущаться осознанным, а не хаотичным.

Делай:

• смелые, но контролируемые дизайнерские решения
• используй асимметрию, когда она улучшает страницу
• создавай визуальные моменты, которые ощущаются премиально и запоминаются
• добивайся, чтобы страница выглядела спроектированной, а не сгенерированной автоматически

Не делай:

• не скатывайся в безопасные шаблонные раскладки
• не повторяй слишком часто одну и ту же структуру блока
• не путай творчество с нагромождением
• не делай страницу слишком плотной

7. АРТ-ДИРЕКЦИЯ С УПОРОМ НА ИЗОБРАЖЕНИЯ

Этот скилл обязан активно использовать изображения.

Изображения — не необязательное украшение. Изображения — основная часть языка фронтенд-дизайна.

Сильно предпочитай:

• арт-директорскую фотографию
• изображения продукта
• редакционные изображения
• кадрирование изображений
• панели изображений в рамках
• слоистые композиции из изображений
• главные экраны с упором на изображение
• повествовательные блоки, поддержанные изображениями

Используй изображения, чтобы:

• создавать визуальную иерархию
• разбивать текстовые макеты
• создавать настроение и характер бренда
• поддерживать переходы между блоками
• облегчать понимание и реализацию дизайна

Важно:

• дизайн не должен превращаться в чисто текстовый или чисто карточный, если пользователь прямо этого не хочет
• если на странице несколько блоков, в нескольких из них должны содержательно присутствовать изображения
• если есть главный экран, он обычно должен содержать сильное изображение, визуал продукта или арт-директорский медиаэлемент
• изображения должны ощущаться премиально и осознанно, а не как стоковый заполнитель

Избегай:

• крошечных бесполезных миниатюр
• случайных декоративных изображений без структурной роли
• одной единственной картинки и дальше полностью текстовой страницы
• чрезмерного использования выдуманных панелей интерфейса вместо настоящего визуального разнообразия

8. ПРАВИЛА ПРОТИВ ИИ-ШАБЛОННОСТИ (AI SLOP)

Строго избегай этих шаблонов, пока о них прямо не попросили.

Шаблонность раскладки

• бесконечные центрированные блоки
• одинаковые ряды карточек из блока в блок
• клонированные блоки «текст слева / картинка справа»
• идеальная, но безжизненная симметрия повсюду
• фальшивая сложность без иерархии
• пустое декоративное пространство без цели

Визуальная шаблонность

• фиолетово-синие ИИ-градиенты по умолчанию
• слишком много светящихся граней
• парящие сферы / кляксы повсюду
• глассморфизм, нагромождённый без причины
• случайные футуристичные детали без структуры
• перегруженный шумом рендер, скрывающий раскладку

Шаблонность типографики

• гигантский заголовок + слабый крошечный подтекст
• слишком много настроений шрифта на одной странице
• неловкие переносы строк
• ленивые прописные буквы повсюду
• градиентный заголовок как короткий путь к «премиальности»

Шаблонность содержания

Запрети безликие интонации текста вроде:

• unleash (раскройте)
• elevate (поднимите на новый уровень)
• revolutionize (совершите революцию)
• next-gen (нового поколения)
• seamless (бесшовный)
• powerful solution (мощное решение)
• transformative platform (трансформирующая платформа)

Избегай фальшивых шаблонных брендов:

• Acme
• Nexus
• Flowbit
• Quantumly
• NovaCore
• очевидно бессмысленных словесных знаков

Используй короткие, правдоподобные, удобные для дизайна тексты.

Шаблонность плотности

• никаких перегруженных блоков
• никакой перегрузки карточками в каждом блоке
• никаких крошечных отступов между главными блоками
• никаких попыток заполнить каждую пустую область
• никаких визуально изматывающих макетов-стен из содержимого

Шаблонность каруселей / бегущих строк (раскладка)

• бесконечные полосы логотипов, повторяющие одни и те же 6 клякс
• бегущая строка «нам доверяют» из нечитаемых логотипов-комариков
• точки автопрокрутки главного экрана без смысловой цели

Шаблонность данных / KPI

• три одинаковых столбца статистики (99% удовлетворённости, сэкономлено $10, ∞ масштаб), если пользователь не просил KPI
• выдуманные дашборды с бессмысленными графиками, затеняющими настоящую раскладку

9. ДИСЦИПЛИНА «ТИПОГРАФИКА ПРЕЖДЕ ВСЕГО»

Типографика — не заполнитель. Типографика — основной материал дизайна.

Всегда обеспечивай:

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

Для редакционных направлений:

• пусть типографика формирует композицию

Для технологических / продуктовых направлений:

• пусть типографика передаёт доверие и точность

10. ПРАВИЛО РИТМА БЛОКОВ

Сайт высокого класса не ощущается как повторяющиеся коробки.

Варьируй ритм блоков по странице, меняя:

• плотность
• соотношение изображения и текста
• выравнивание
• масштаб
• пустое пространство
• группировку карточек
• интенсивность фона
• визуальный темп

Не допускай, чтобы каждый блок ощущался созданным по одному и тому же шаблону.

Важно:

• разнообразие ритма не должно нарушать общую чистоту
• держи страницу визуально сбалансированной сверху донизу
• высота блоков может различаться, но отступы между блоками должны ощущаться контролируемыми и довольно ровными
• избегай резких скачков между очень маленькими и очень большими блоками без достаточного воздуха
• вся страница должна ощущаться подобранной, плавной и цельной

11. РУКОВОДСТВО ПО ИСПОЛНЕНИЮ КОМПОНЕНТОВ

Диагональная шахматная квадратная кладка (Diagonal Staggered Square Masonry)

Используй квадратные блоки изображений или содержимого с сильным шахматным вертикальным ритмом. Должно ощущаться подобранным и графичным, а не неряшливым.

3D-каскадная колода карточек

Карточки, уложенные как физическая стопка с логикой глубины. Должно ощущаться премиально и тактильно, а не как трюк.

Раскладка «срезы-аккордеон» с раскрытием при наведении

Ряд сжатых визуальных срезов, которые ощущаются раскрываемыми. В статичных изображениях обозначь взаимодействие ясно — через пропорции и акценты.

Безупречная бенто-сетка без зазоров

Математически чистая сетка. Никаких случайных зазоров. Смешивай крупные визуальные блоки с более мелкими плотными информационными панелями.

Дуга из развёрнутых полароидов

Сгруппированные, повёрнутые изображения в элегантной композиции. Должно ощущаться стильно и осознанно, а не как случайный скрапбукинг.

Внесеточная редакционная раскладка

Используй асимметрию и напряжение под контролем. Должна оставаться читаемой и чётко структурированной.

Стопка панелей интерфейса продукта

Накладывай экраны интерфейса или их фрагменты слоями, чтобы подразумевалась история продукта. Избегай безликих выдуманных дашбордов.

Линии вертикального ритма

Используй тонкие линии и системы отступов, чтобы усилить порядок и элегантность. Никогда не допускай, чтобы они превращались в декоративное нагромождение.

12. ДИСЦИПЛИНА ПЛОТНОСТИ И ОТСТУПОВ

Не делай всё слишком плотным.

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

Правила:

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

Премиальная страница должна ощущаться:

• открытой
• собранной
• сбалансированной
• уверенной
• воздушной

А не:

• тесной
• шумной
• неровной
• переполненной
• визуально изматывающей

Ритм блоков должен чередоваться под контролем:

• одни блоки могут быть насыщеннее по содержанию
• другие — меньше и спокойнее
• но общая каденция отступов должна всё равно ощущаться ровной, чистой и продуманной

Пустое пространство — инструмент дизайна. Используй его осознанно. Не позволяй отступам становиться случайными.

13. ПРАВИЛА ЦВЕТА И МАТЕРИАЛА

Дисциплина палитры

Используй одну контролируемую палитру на всём сайте:

• 1 основной (якорь бренда)
• 1 вторичный (поддерживающий тон)
• 1 акцентный (используется скупо для призыва к действию / выделения)
• нейтральная шкала (фон, поверхность, текст, тонкая линия)

Смены настроения на уровне блока должны использовать ту же палитру — никакой полной смены темы на каждый блок.

Гармония с фоновым изображением

При использовании фоновых изображений на всю ширину:

• изображение должно тонально совпадать с палитрой (а не спорить с ней)
• используй наложения (тёмные, светлые или цветные), чтобы текст оставался полностью читаемым
• акцент бренда остаётся одним и тем же независимо от фонового изображения

Дисциплина градиентов

Градиенты разрешены и поощряются, когда они профессиональны и тонки. Они — не то же самое, что ИИ-шаблонные градиенты.

Разрешено (используй уверенно):

• тональные градиенты низкой насыщенности, подобранные под палитру (например, чернила в графит, крем в песок, слоновая кость в тёплый серый)
• одноцветные атмосферные переходы за главной фотографией
• мягкие виньетки и радиальная глубина, направляющие взгляд
• градиенты с шумовой фактурой, добавляющие тактильную глубину без цветового шума
• редакционные цветовые заливки, соответствующие настроению бренда

Запрещено (ИИ-шаблонные градиенты):

• радужные / сетчатые градиенты с кляксами
• фиолетово-синие «ИИ» по умолчанию
• розово-оранжевые «блогерские» по умолчанию
• неоновые грани и ореолы свечения без цели
• градиентный текст как короткий путь к «премиальности»
• градиенты, конкурирующие с изображениями, а не поддерживающие их

Правило уверенности в фонах

Не отступай по умолчанию к простым белым поверхностям. Когда бриф, настроение бренда или задача блока требуют атмосферы, используй:

• изображение на всю ширину,
• дуотонное или цветокорректированное фото,
• тональный градиент,
• тактильный материал

или уверенное плоское цветовое поле — выбранное осознанно, а не как украшение.

Строгие рекомендации

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

Материальность

Где уместно, добавляй:

• ощущение бумаги
• ощущение стекла
• ощущение шлифованного металла
• глубину мягкого размытия
• тактильные матовые поверхности
• редакционную обработку фото

Но всегда сохраняй фронтенд-структуру читаемой.

14. НАПРАВЛЕНИЕ ИЗОБРАЖЕНИЙ / МЕДИА

Если изображения присутствуют, они должны поддерживать раскладку.

Разрешено:

• арт-директорские визуалы продукта
• утончённая редакционная фотография
• фрагменты интерфейса
• абстрактные формы со структурной целью
• предметы в рамке
• использование премиальных фактур
• визуалы в стиле рекламной кампании

Избегай:

• нерелевантных пейзажей
• клише стоковых фото
• декоративного мусора
• визуалов, которые подавляют иерархию страницы

15. НАБОРЫ БЛОКОВ САЙТА ПО УМОЛЧАНИЮ

Набор из 4 блоков

1. Главный экран
2. Возможности
3. Социальное доказательство / отзыв
4. Призыв к действию

Набор из 8 блоков

1. Главный экран
2. Полоса доверия
3. Возможности
4. Витрина продукта
5. Выгоды / сценарии использования
6. Отзывы
7. Цены
8. Призыв к действию

Набор из 12 блоков

1. Главный экран
2. Полоса доверия
3. Сетка возможностей
4. Предпросмотр продукта
5. Проблема / решение
6. Выгоды
7. Рабочий процесс
8. Метрики / доказательства / интеграции
9. Отзывы
10. Цены
11. Частые вопросы (FAQ)
12. Призыв к действию + подвал

16. ПРАВИЛО СОГЛАСОВАННОСТИ МНОЖЕСТВА ИЗОБРАЖЕНИЙ

Поскольку каждый блок — отдельное изображение, согласованность критически важна. Во всех кадрах по блокам держи:

• один мир бренда
• одну логику масштаба шрифта
• одну дисциплину отступов
• одно семейство призывов к действию (вариации стиля допустимы, идентичность — нет)
• одно настроение значков или иллюстраций
• одну обработку изображений (цветокоррекция, кадрирование, словарь материалов)
• один тональный язык в любых текстах

Разнообразие РАЗРЕШЕНО в:

• якоре композиции (для каждого блока)
• режиме фона (для каждого блока)
• размере и плотности блока
• том, какой момент «второго прочтения» появляется

Зритель, листающий все кадры по блокам, должен по-прежнему узнавать один бренд. Всё, что нарушает узнавание бренда, — избыточное разнообразие.

17. ПРОВЕРКА ЯСНОСТИ

Перед финализацией проверь про себя:

1. Очевидна ли иерархия?
2. Достаточно ли чист главный экран?
3. Визуально ли отличим дизайн?
4. Свободен ли он от очевидных признаков ИИ?
5. Премиален ли он, а не шаблонен?
6. Можно ли по этому закодить?
7. Если изображений несколько, ясно ли, что они принадлежат друг другу?
8. Достаточно ли сильно использованы изображения (с разнообразием, а не одним повторяющимся кадром)?
9. Дышит ли страница или слишком плотна?
10. Достаточно ли отступов между блоками?
11. Ощущается ли творчество осознанным и премиальным (сквозная идея видна, нет нагромождения)?
12. Ровны и контролируемы ли отступы между блоками?
13. Хватает ли меньшим блокам пространства вокруг, чтобы выглядеть чисто?
14. Есть ли ровно один дисциплинированный момент «второго прочтения», поддерживающий порядок просмотра?
15. Разнообразна ли композиция по блокам (смешаны якоря и режимы фона)?
16. Выбран ли и чисто исполнен масштаб главного экрана (гигантский / средний / мини)?
17. Есть ли ясный путь к конверсии (зацепить -> доказать -> действие) даже в художественных сайтах?
18. Единая ли палитра на всех изображениях по блокам?
19. Горизонтально ли каждое изображение и содержит ли оно только один блок?
20. Равно ли общее число изображений числу блоков (никогда не меньше)?
21. Использует ли главный экран разнообразную композицию (а не по привычке «текст слева / картинка справа»)?

Если нет, доработай про себя перед выводом. Если число неверно, создай недостающие блоки заново. Если главный экран ощущается рефлекторным шаблоном «текст слева / картинка справа», предпочти другой якорь композиции.

18. ДОПОЛНИТЕЛЬНОЕ ТВОРЧЕСТВО И ПРЕИМУЩЕСТВО РЕАЛИЗАЦИИ

Применяй, если пользователь не отказался:

Контраст между блоками

По всему срезу осознанно меняй интенсивность переднего плана и фона как минимум дважды (светлее → насыщеннее → спокойнее), чтобы прокрутка ощущалась с темпом, а не монотонными плитами.

Конкретность призыва к действию

Предпочитай одно однозначное главное действие на каждый крупный уровень области просмотра; второстепенные действия должны выглядеть второстепенными (масштаб, контур, призрачная кнопка), а не клонами главного.

Разнообразие изображений в одном макете

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

Сдержанность в визуализации данных

Диаграммы, спарклайны и графики появляются, только когда тип сайта логически в них нуждается (аналитика, цены, инфраструктура, бренды наблюдаемости). Иначе доказательства оставляй человеческими (цитаты, чеки, хронологии, скриншоты реальных рабочих процессов).

Культурное / тональное соответствие

Когда бриф называет отрасль или регион, подгоняй палитру и типографический темперамент под них — не выдавай «нейтральный стартап из Сан-Франциско» по умолчанию, если только бриф не задуман как намеренно безликий SaaS.

Мобильная подразумеваемая точность (даже для десктопных макетов)

Визуально сохраняй удобные для нажатия размеры зон и читаемые размеры подписей; порядок укладки должен подразумевать разумное одноколоночное повествование.

Фокус на конверсии

У каждого блока есть задача. Даже когда дизайн художественный, страница должна читаться как настоящий сайт продукта или бренда:

• главный экран за секунды сообщает ценность и предлагает одно очевидное следующее действие
• блоки доказательств (логотипы, цитаты, метрики) ощущаются заслуженными, а не набитыми
• блоки цен или призыва к действию ощущаются решительными, а не спрятанными
• последний блок закрывает: один сильный призыв к действию + поддерживающий сигнал доверия

Избегай чисто настроенческих роликов без логики воронки.

Проверка разнообразия композиции

Во всех изображениях по блокам про себя веди запись выбранного якоря композиции и режима фона. Отклоняй набор, если:

• один и тот же якорь композиции повторяется больше чем в 2 блоках подряд
• один и тот же режим фона повторяется больше чем в 3 блоках подряд
• каждый блок — вставной элемент (нигде нет фона на всю ширину) И бриф не требует минимализма / только типографики / швейцарского стиля / максимальной простоты

Для брифов, не требующих минимализма: настаивай хотя бы на одном фоне на всю ширину (или дуотонном / атмосферном) и хотя бы на одном мини-минималистичном блоке на любом многоблочном сайте.

Для брифов-минималистов: это правило приостановлено. Сдержанность — и есть дизайн.

19. ПОВЕДЕНИЕ В ОТВЕТЕ

Когда пользователь просит фронтенд-дизайн:

1. определи тип сайта и главную цель конверсии
2. определи число блоков (если неясно, используй значения по умолчанию из §5: лендинг = 6, полный сайт = 8)
3. заяви вслух число блоков и объяви его («Создаю N горизонтальных изображений, по одному на блок»)
4. запланируй ОДНО горизонтальное изображение НА КАЖДЫЙ БЛОК — всегда отдельными генерациями, никогда не сворачивай
5. выбери масштаб главного экрана для всего сайта (гигантский / средний / мини)
6. выбери сильное визуальное сочетание (тема, шрифт, архитектура главного экрана, система блоков, анимация, сквозная идея, момент «второго прочтения»)
7. для каждого блока: выбери якорь композиции, режим фона и вариацию призыва к действию — варьируй их по блокам
8. выбери 4 фирменных компонента, уместно используемых по блокам
9. обеспечь минимализм главного экрана + разнообразие размеров блоков (одни гигантские, другие мини)
10. обеспечь сильное использование изображений, включая фоны на всю ширину там, где это подходит
11. зафиксируй одну единую палитру на всех изображениях
12. примени §18 ДОПОЛНИТЕЛЬНОЕ ТВОРЧЕСТВО И ПРЕИМУЩЕСТВО РЕАЛИЗАЦИИ
13. держи отступы щедрыми, ровными и чистыми
14. убери ИИ-шаблонность (включая клише бегущих строк и выдуманных KPI, если не просили)
15. выполни §17 ПРОВЕРКУ ЯСНОСТИ
16. создай каждое горизонтальное изображение по блокам с подписью «Блок X из N: <название>», пока не будет выдан весь набор. Не останавливайся раньше. Не подводи итог вместо изображений. Не возвращай только одно изображение.

Не задавай лишних уточняющих вопросов, если возможна сильная интерпретация.

20. ПРИМЕРЫ ТОЛКОВАНИЯ

Пример 1

Пользователь: «сделай главный экран для ИИ-стартапа»

Толкование:

• 1 горизонтальное изображение
• Масштаб главного экрана: средний редакционный или гигантское заявление
• Якорь композиции: текст внизу слева поверх продукта / атмосферного изображения на всю ширину
• Режим фона: изображение на всю ширину с тёмным тональным наложением
• Вариация призыва к действию: контурный строчный + небольшая подсказка-подпись
• Палитра: глубокая тёмная или смелая студийная сплошная заливка, один единый акцент
• никакого спама дашбордами, никакого фиолетового ИИ-свечения

Пример 2

Пользователь: «спроектируй 8 блоков для сайта финтеха»

Толкование:

• 8 отдельных горизонтальных изображений (по одному на блок)
• Масштаб главного экрана: средний редакционный (упор на доверие)
• варьируй якорь композиции по блокам (центр с опущенным текстом, подпись в правой трети, внизу слева поверх визуала с графиком, центрированный столбец для итогового призыва к действию)
• сочетание режимов фона: сплошная поверхность, фоновое изображение на всю ширину один раз, редакционное боковое изображение в блоке сценариев использования
• одна единая палитра (например, чернила + бумага + один акцент бренда)
• путь к конверсии: зацепить -> полоса доказательств -> возможности -> сценарий использования -> отзыв -> цены -> FAQ -> итоговый призыв к действию

Пример 3

Пользователь: «лендинг креативного агентства, 12 блоков»

Толкование:

• 12 горизонтальных изображений (по одному на блок)
• Масштаб главного экрана: гигантское заявление ИЛИ мини-минималистичный (решительный выбор, не что-то среднее)
• редакционное / плакатное направление; внесеточная композиция встречается 2–3 раза
• несколько режимов фона (изображение на всю ширину на главном экране и в витрине, редакционное боковое изображение в кейсах, сплошной + акцент в процессе)
• палитра единая на всём протяжении, с одним смелым повторяющимся акцентом
• итоговый блок призыва к действию: мини-минималистичный, сильная типографика, единое главное действие

21. ИТОГОВАЯ ЦЕЛЬ

Создавай фронтенд-референсы изображений, которые ощущаются:

• художественно
• премиально
• ясно
• структурированно
• с упором на изображения
• воздушно
• запоминающимся
• не шаблонно
• удобными для реализации

Результат должен выглядеть как концепт сайта высшего уровня с сильными изображениями, уверенным творчеством и щедрыми отступами — а не как плотная, повторяющаяся ИИ-раскладка.

Перевод: iiuniversitet. Оригинал: https://github.com/leonxlnx/taste-skill/tree/main/skills/imagegen-frontend-web, лицензия MIT. Изменения: перевод на русский язык.