Refero — библиотека реальных экранов и UX-паттернов для design research

Куратор-сайт refero.design — библиотека реальных экранов веба и iOS для design research. 130 000+ скриншотов, 10 000+ пользовательских флоу, поиск по тегам, по тексту, по картинке и по URL сайта. Работает как для людей, так и для агентов — через Refero MCP.

Что это такое

refero.design — кураторская библиотека UI/UX-референсов: реальные экраны веб-приложений и iOS, размеченные по типам страниц, флоу, UX-паттернам, UI-элементам и индустриям. Каждую неделю в каталог добавляются свежие референсы с действующих продуктов — Notion, Linear, Cursor, Airbnb и сотен других.

В отличие от вдохновенческих галерей (Awwwards, Dribbble, Behance), Refero показывает не «красивые концепты», а то, что реально живёт в продакшне. Это критично, когда вы делаете не маркетинговый сайт-витрину, а рабочий продукт со своими onboarding, paywall и внутренними дашбордами.

Основные возможности

Поиск по тегам

В каталоге пять основных осей разметки:

Теги можно комбинировать: «Product Page» + «Illustration» — все продуктовые страницы с иллюстрациями. «Onboarding» + «AI Tool» — как делают онбординг ИИ-сервисы. Это и есть основная сила инструмента.

Поиск по тексту и по сайту

• Текст на экране — например, airbnb login найдёт скриншот логина Airbnb по подписи на нём.
• По имени сайта — введите notion, и получите подборку его экранов.
• По URL сайта — вставьте полный адрес и увидите все индексированные экраны.

Search by Image

Можно загрузить картинку (свой эскиз, скриншот, чужой референс) — Refero найдёт визуально похожие экраны. Полезно, когда дизайн-направление есть в голове, но сформулировать словами не получается.

Web ↔ iOS toggle

Один тумблер переключает каталог между веб-экранами и iOS-скринами. Большинство тегов работают на обеих платформах, поэтому легко сравнить, как один и тот же паттерн (например, paywall или onboarding) реализован в вебе и в мобильном приложении.

Refero для Figma

Отдельный плагин в Figma Community даёт доступ к библиотеке прямо из дизайн-файла — без переключения вкладок, поиск и копирование внутри инструмента.

Refero MCP — для AI-агентов

Самая интересная для нас часть. Refero MCP подключает агента (Cursor, Claude Desktop, Windsurf и любые MCP-совместимые среды) к каталогу из 130 000+ экранов и 10 000+ флоу. Агент перед тем, как начать строить, изучает реальные референсы.

Это закрывает главный разрыв всех AI-сгенерированных интерфейсов: модель отлично пишет код и логику, но не знает, какие лейауты работают, какие паттерны конвертируют и как реальные приложения собраны. Refero MCP даёт ей «насмотренность».

Про сам протокол — в справочнике MCP.

Тарифы и доступ

• Регистрация — через Google.
• Free trial — 7 дней полного доступа. Требуется привязать карту. На 5-й день приходит напоминание; если отменить до конца триала, списания не будет.
• Refero Pro — единая платная подписка, отменяется одной кнопкой в Billing & Subscription. Точные цены меняются — смотрите на refero.design/pricing.
• На рынке ходят промо-коды и скидки до 60% — стоит проверить перед оплатой.

В сравнении с соседями: Mobbin даёт больше глубины и командные функции (комментарии, шеринг, расширенный Figma-плагин), Refero — дешевле и легче для индивидуальной работы и связки с AI-агентом через MCP.

Сравнение с соседями

Refero и Refero Styles — это два слоя одного контура. Refero даёт «смотрите на чужие экраны», Styles — «возьмите чужой стиль как файл». Отдельный разбор Styles — в материале Refero Styles — библиотека DESIGN.md из реальных продуктов.

Практические сценарии применения

1. Research перед стартом проекта

Перед тем, как открывать Figma, потратьте час в Refero. Соберите 15–20 экранов из вашей категории (например, «AI Tool» + «Dashboard» + «Onboarding»). Это сильно дешевле, чем переделывать прототип после первого показа клиенту.

2. Решение конкретного UX-вопроса

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

3. Поиск референса по чужому скриншоту

Клиент прислал картинку «хочу как тут, но не так». Загружаете её в Search by Image, получаете 15 родственных экранов. Дальше предметно обсуждаете, что именно нравится: палитра, лейаут или паттерн.

4. Проверка собственного интерфейса

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

5. AI-агент с design research

Подключаете Refero MCP к Cursor / Claude Desktop / Windsurf и просите: «Перед тем как сверстать paywall, посмотри 10 примеров в Refero, выбери паттерн, объясни выбор и только потом пиши код». Получаете на выходе интерфейс, который выглядит спроектированным, а не сгенерированным.

6. Дизайн-сессия с командой

В команде часто застревают в обсуждении абстракций. Открыть Refero на большом экране, прокликать 20 живых примеров за 30 минут — и появляется общий язык: «нам как у Notion на /pricing, но без верхнего блока».

7. Подбор типографики

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

Как искать эффективно

• Начинайте с Page Type или Flow, потом сужайте через UX Pattern или Industry.
• Не бойтесь комбинировать 2–3 тега — иначе получаете 2000 экранов и теряетесь.
• Переключайтесь Web ↔ iOS даже для веб-проекта: мобильные дизайнеры часто решают сложные UX-задачи раньше веба.
• Сохраняйте подборки. На команду подойдёт даже скрин-доска в Notion или Figma — сам Refero для глубокой коллаборации не заточен.
• Для AI-агента ставьте Refero MCP, а не копируйте картинки руками — экраны попадают в контекст модели через структурированную разметку, а не через сжатый JPEG.

Ограничения и грабли

• Не для командной работы в первую очередь. Совместные коллекции и комментарии в Refero лёгкие — для активной командной работы лучше Mobbin или внешняя доска.
• Группировка флоу местами рваная. Сами пользователи признают, что хочется более полных, связных пользовательских флоу — не всегда экраны собраны в единую цепочку.
• Платный тарифный фильтр. Бесплатный триал требует карты. Если плана платить нет — ставьте напоминание на 6-й день.
• Не заменяет собственное исследование. Refero показывает, как делают другие. Что нужно вашему пользователю — придётся узнавать у пользователя, а не у каталога.

Чеклист «как встроить в работу»

Ссылки

• Главная: refero.design
• Тарифы: refero.design/pricing
• Refero MCP: refero.design/mcp
• Live-демо MCP: demo.refero.design
• Figma-плагин: figma.com/community/plugin/1583968086662940972
• Product Hunt: Refero
• Twitter/X: @referodesign

По теме

• Статья: Как мы переделывали главную pimenov.ai: от оценки Comet до нового визуального языка
• Блог: Google Stitch обновился — и теперь это полноценный «vibe design» для интерфейсов
• База знаний: Shadcn Studio — расширенная библиотека компонентов и блоков shadcn/ui

Если вы запускаете новый продуктовый интерфейс или собираетесь подключить к проекту AI-агента, который пишет фронтенд, Refero даёт самый дешёвый способ дать команде и модели общую насмотренность без лишних разговоров о вкусе.

Если хотите обсудить, как встроить такой подход в собственный продуктовый или редакционный контур, напишите в Telegram.