Пятнадцать галерей, которые заменяют техзадание на дизайн

Самая дорогая фраза в работе над сайтом — «сделайте посовременнее». Она не значит ничего. Заказчик произносит её, имея в голове конкретную картинку, дизайнер слышит её и достаёт из головы свою, и дальше две недели уходят на то, чтобы выяснить: картинки были разные.

С нейросетью то же самое, только быстрее и дешевле. Вы пишете «современный премиальный лендинг», получаете усреднённое нечто — потому что модель усредняет всё, что видела. Она не читает мысли, она читает описание.

Спор заканчивается там, где появляется картинка. Не «динамичная шапка», а вот эта шапка с вот этим поведением при прокрутке. Проблема всегда была в том, где картинку взять: Pinterest выдаёт мудборды десятилетней давности вперемешку со свадебной флористикой, Dribbble — красивые макеты, которые никогда не были сайтами.

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

Когда нужен один конкретный элемент

Самый частый случай: страница в целом устраивает, а спор идёт про один блок. Под это есть галереи, где собран ровно он.

Navbar Gallery — только шапки. Выпадающие меню, поведение при прокрутке, мобильные бургеры. Шапка — первое, что видит человек, и первое, о чём спорят.

Footer.design — только футеры, с самоиронией в заголовке: «единственная галерея футеров на Земле». Футер обычно собирают в последний день по остаточному принципу, хотя у него есть работа: удержать того, кто долистал до конца.

CTA.gallery — призывы к действию. Тот блок, ради которого страница существует, и тот, который чаще всего выглядит как серая кнопка «Отправить».

404s.design — страницы ошибок. Кажется мелочью, пока не посчитаешь, сколько людей на неё попадает с устаревших ссылок.

Unsection — секции лендингов по отдельности: блоки цен, отзывов, преимуществ, FAQ. Удобно, когда страница собирается по частям.

Bento Grids — сетки в стиле бенто: плитки разного размера, которыми Apple показывает возможности продукта. Формат, в который хорошо ложится «что умеет наш сервис».

Deck.gallery — не сайты, а презентации. Полезно, когда нужен питч-дек или коммерческое предложение, а не лендинг.

Когда спор идёт про движение

Отдельная категория, и самая сложная для описания словами. Анимацию нельзя показать скриншотом — её нужно видеть.

Motionsites — сайты с анимациями, плюс готовые промпты под Cursor, Lovable, Bolt и Claude. Можно не описывать увиденное, а взять описание готовым.

60fps.design — коллекция интерфейсных анимаций и микровзаимодействий, мобильных и веб. Название отражает суть: здесь про плавность, а не про эффектность.

Scrolltide — сайты, где анимация привязана к прокрутке: кадр разворачивается по мере того, как человек листает. Тоже с промптами.

Animos — готовые шаблоны анимации для показа своих работ. Скорее для портфолио и соцсетей, чем для сайта клиента.

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

Когда нужен общий тон

Godly — общая витрина хорошего веб-дизайна без разбивки по элементам. Отсюда удобно доставать не «вот такую шапку», а «вот такое ощущение в целом».

Backgrounds Supply — фоны, градиенты, текстуры. Мелочь, которая задаёт половину впечатления от первого экрана.

Галерея, которая разговаривает с агентом

Refero Styles стоит особняком, и на нём стоит остановиться.

Это библиотека из двух с лишним тысяч дизайн-систем, снятых с реальных продуктовых сайтов — Figma, Vercel, Raycast, Wise, Perplexity. Но отдаёт она не скриншоты, а файл DESIGN.md: цвета, типографика, отступы, компоненты — в виде, который понимает Claude Code, Cursor или Codex.

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

Я проверил это на своей странице буквально на днях. Брендбук существовал в виде JSON: цвета, шрифты, правила для кнопок и карточек, список запретов. Применение заняло не вечер споров о оттенках, а одну правку: акцент, фоны, поверхности и шрифт поменялись разом, потому что все они были заведены переменными в одном месте. Компоненты при этом не трогались вообще.

Тот же принцип и у transitions.dev — там есть готовый навык для агентов, а не только код для копирования.

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

Как этим пользоваться, чтобы был толк

Референс работает не сам по себе. Три вещи, которые отличают полезное использование от коллекционирования красивых ссылок.

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

Говорите, что именно понравилось. «Нравится эта шапка» — плохо. «Нравится, что она сжимается при прокрутке и логотип остаётся на месте» — хорошо. Вторая формулировка воспроизводима, первая нет.

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

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

Что с этим делать дальше

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

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

Хотите разобрать, что на вашем сайте мешает человеку дойти до заявки? Напишите «разбор» в Telegram — посмотрим за 15 минут.

👁 Посмотреть на сайт глазами клиентаБесплатно, в Telegram-боте @uspeshnyybot