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

> Подрядчик и нейросеть одинаково плохо понимают «сделайте посовременнее». Подборка галерей, где под каждый элемент страницы — шапку, футер, CTA, анимации — есть сотни готовых примеров.

Источник: https://blog.uspeshnyy.ru/blog/galerei-referensov-vmesto-tz/
Автор: Александр Успешный · blog.uspeshnyy.ru
Опубликовано: 2026-09-23
Теги: инструменты, лендинг, промпты

---

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

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

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

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

![Заказчик говорит «сделайте посовременнее», а у него и у дизайнера в голове разные картинки](/images/posts/galerei-referensov-vmesto-tz-1.webp)

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

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

![Страница, разобранная на части: шапка, первый экран, секции, призыв к действию, футер — под каждую есть своя галерея](/images/posts/galerei-referensov-vmesto-tz-2.webp)

[Navbar Gallery](https://www.navbar.gallery/) — только шапки. Выпадающие меню, поведение при прокрутке, мобильные бургеры. Шапка — первое, что видит человек, и первое, о чём спорят.

![Navbar Gallery — галерея шапок сайтов](/images/posts/galerei/navbar-gallery.webp)

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

![Footer.design — галерея футеров](/images/posts/galerei/footer-design.webp)

[CTA.gallery](https://www.cta.gallery/) — призывы к действию. Тот блок, ради которого страница существует, и тот, который чаще всего выглядит как серая кнопка «Отправить».

![CTA.gallery — галерея призывов к действию](/images/posts/galerei/cta-gallery.webp)

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

![404s.design — галерея страниц ошибок](/images/posts/galerei/404s-design.webp)

[Unsection](https://www.unsection.com/) — секции лендингов по отдельности: блоки цен, отзывов, преимуществ, FAQ. Удобно, когда страница собирается по частям.

![Unsection — галерея секций лендингов](/images/posts/galerei/unsection.webp)

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

![Bento Grids — галерея бенто-сеток](/images/posts/galerei/bentogrids.webp)

[Deck.gallery](https://www.deck.gallery/) — не сайты, а презентации. Полезно, когда нужен питч-дек или коммерческое предложение, а не лендинг.

![Deck.gallery — галерея презентаций](/images/posts/galerei/deck-gallery.webp)

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

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

[Motionsites](https://motionsites.ai/) — сайты с анимациями, плюс готовые промпты под Cursor, Lovable, Bolt и Claude. Можно не описывать увиденное, а взять описание готовым.

![Motionsites — сайты с анимациями и промпты к ним](/images/posts/galerei/motionsites.webp)

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

![60fps.design — коллекция интерфейсных анимаций](/images/posts/galerei/60fps-design.webp)

[Scrolltide](https://www.scrolltide.co/) — сайты, где анимация привязана к прокрутке: кадр разворачивается по мере того, как человек листает. Тоже с промптами.

![Scrolltide — сайты с анимацией по прокрутке](/images/posts/galerei/scrolltide.webp)

[Animos](https://animos.app/) — готовые шаблоны анимации для показа своих работ. Скорее для портфолио и соцсетей, чем для сайта клиента.

![Animos — шаблоны анимации для показа работ](/images/posts/galerei/animos.webp)

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

![Transitions.dev — переходы между состояниями интерфейса](/images/posts/galerei/transitions-dev.webp)

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

[Godly](https://godly.design/) — общая витрина хорошего веб-дизайна без разбивки по элементам. Отсюда удобно доставать не «вот такую шапку», а «вот такое ощущение в целом».

![Godly — витрина хорошего веб-дизайна](/images/posts/galerei/godly-design.webp)

[Backgrounds Supply](https://www.backgrounds.supply/) — фоны, градиенты, текстуры. Мелочь, которая задаёт половину впечатления от первого экрана.

![Backgrounds Supply — фоны, градиенты и текстуры](/images/posts/galerei/backgrounds-supply.webp)

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

[Refero Styles](https://styles.refero.design/) стоит особняком, и на нём стоит остановиться.

![Refero Styles — библиотека дизайн-систем в виде файлов DESIGN.md](/images/posts/galerei/refero-styles.webp)

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

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

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

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

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

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

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

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

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

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

![Слева куча несвязанных примеров, справа три разобранных: отсюда шапка, отсюда прокрутка, так не надо](/images/posts/galerei-referensov-vmesto-tz-3.webp)

С нейросетью всё то же самое, только строже. [Конкретика в промпте](/blog/kak-promptit-fable-5-5-shagov/) даёт результат, размытость даёт усреднённое. Когда в плейбуке по [премиум-сайтам на Fable 5](/blog/claude-fable-5-premium-sayty/) первым шагом идёт «наберите референсов» — речь ровно об этом, и эти пятнадцать адресов точнее, чем поиск по Pinterest.

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

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

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

> Хотите разобрать, что на вашем сайте мешает человеку дойти до заявки? Напишите «разбор» в [Telegram](https://t.me/uspeshnyy) — посмотрим за 15 минут.