Есть категория инструментов, которую обычно пропускают в обзорах дизайн-инструментов. Она не рисует, не верстает и не генерирует. Она показывает, как другие уже нарисовали и сверстали. И от этого зависит, будет ваш следующий экран работать или нет.
Refero — кураторская библиотека реальных продуктовых интерфейсов: 130 000+ скриншотов с действующих сайтов и iOS-приложений, размеченных по типам страниц, пользовательским флоу, UX-паттернам, UI-элементам и индустриям. Не концепты с Dribbble, не лондинги с Awwwards — продакшн-экраны Notion, Linear, Cursor, Airbnb и сотен других продуктов.
Инструмент умеет искать по тегам, по тексту на экране, по имени сайта, по URL и по картинке. Есть Figma-плагин и MCP-сервер для AI-агентов. Бесплатный триал семь дней, потом платная подписка. На фоне Mobbin — дешевле, легче и ближе к индивидуальной работе.
Разберём, как устроен каталог, какие оси разметки работают, как подключить Refero к AI-агенту через MCP и где инструмент ломается.
Что это
Refero — каталог скриншотов реальных веб- и iOS-интерфейсов. Еженедельно каталог пополняется свежими экранами с живых продуктов — среди них Notion, Linear, Cursor, Airbnb и сотни других сервисов. Скриншоты не просто складываются в общую ленту: каждый экран размечен по нескольким осям, чтобы можно было искать паттерн, а не картинку.
Принципиальное отличие от вдохновенческих галерей вроде Awwwards, Dribbble и Behance — Refero показывает не концепты и не маркетинговые лендинги, а то, что реально живёт в продакшне. Онбординг, paywall, внутренние дашборды, фильтры каталога, сброс пароля — рабочие экраны, которые пользователи видят каждый день.
Это критично, когда вы делаете не сайт-витрину, а продукт со своими сценариями. Каталог помогает ответить на вопрос «как устроен paywall у ИИ-сервисов» или «как делают онбординг fintech-приложения» — не выдумывая с нуля и не рискуя изобрести неудачное колесо.
Зачем нужно
- Снять страх пустого холста — вместо чистого мокапа открываете три десятка примеров онбординга в вашей индустрии и выбираете подходящий паттерн.
- Сэкономить часы на дискуссиях — вместо споров о фильтрах на каталоге открываете пару десятков реальных примеров и переходите от абстрактного к конкретному.
- Дать AI-агенту насмотренность — через Refero MCP модель перед написанием кода изучает реальные референсы и выбирает паттерн, а не генерирует интерфейс из обучающих данных.
- Проверить собственный интерфейс — загружаете скриншот своего экрана в визуальный поиск и видите, на что он похож. Если выдача ведёт к пяти разным живым продуктам — ваш интерфейс имеет узнаваемый почерк. Если ведёт к типовым AI-лендингам — стоит пересмотреть подход.
- Найти референс по чужому скриншоту — клиент присылает изображение со словами «хочу примерно так», вы загружаете его в визуальный поиск и получаете группу похожих экранов для конкретного разбора.
Как устроено
Каталог построен на пяти осях разметки. Каждый экран относится к одной или нескольким категориям на каждой оси. Теги можно комбинировать, сужая выдачу от 2000 экранов до 20 релевантных.
| Ось | Что внутри | Объём |
|---|---|---|
| Page Types | Dashboard, Landing, Paywall, 404, Catalog, Blog, About, Careers, Developers, Media Kit и др. | ~45 типов |
| Flows | Onboarding, Login, Subscribing, Adding to Cart, Editing, Booking, Money Transferring, Resetting Password и др. | ~44 флоу |
| UX Patterns | Testimonials, Filter & Sorting, Reviews, Search, Billing, Dark Mode, Trial, Notification Feed и др. | ~87 паттернов |
| UI Elements | Modal, Cards, Color Picker, Map, Table, Tabs, Skeleton, Charts, Sidebar и др. | ~69 элементов |
| Sites / Industries | AI Tool, Books, Business, Collaboration, Communication, Design Editing, Dev Tools, Education, Finance, Fitness и др. | ~40 индустрий |
Поиск
Поверх разметки работают пять поисковых механизмов. Поиск по тегам — основной, комбинируете 2–3 тега и получаете нужную выборку. Поиск по тексту — вводите «airbnb login» и находите скриншот логина Airbnb по подписи на нём. Поиск по имени сайта — вводите «notion» и получаете подборку экранов этого продукта. Поиск по URL — вставляете полный адрес сайта и видите все индексированные экраны с него.
Search by Image — отдельный механизм. Загружаете картинку (свой эскиз, скриншот, чужой референс), и Refero находит визуально похожие экраны. Удобно, когда визуальное направление понятно, но словами описать его пока не выходит.
Платформы
Тумблер Web ↔ iOS переключает каталог между браузерными экранами и мобильными скриншотами. Теги сквозные для обеих платформ — легко сравнить реализацию paywall или онбординга в браузере и в нативном приложении. Для веб-проекта переключение на iOS тоже полезно: мобильные команды часто находят решение UX-задач раньше веб-команд.
Интеграции
Figma-плагин даёт доступ к библиотеке прямо из дизайн-файла — поиск и копирование экранов без переключения вкладок. Плагин доступен в Figma Community, и по описанию на странице плагина коллекция превышает 120 000 экранов.
Refero MCP подключает каталог из 130 000+ экранов и 10 000+ флоу к AI-агенту — Cursor, Claude Desktop, Windsurf и любым MCP-совместимым средам. Боль, которую это решает: генеративные модели хорошо пишут код, но не имеют насмотренности. Они не знают, какие раскладки работают у живых продуктов, какие паттерны приносят конверсию и как устроен онбординг в реальных приложениях. Refero MCP даёт агенту эту насмотренность — до того, как он начнёт генерировать разметку.
MCP (Model Context Protocol) — открытый протокол, который связывает AI-агента с внешними источниками данных. Через MCP агент может обращаться к каталогу Refero, получать структурированные данные об экранах и флоу, и использовать их как контекст перед написанием кода.
Тарифы и доступ
Регистрация — через Google-аккаунт. Бесплатный триал даёт семь дней полного доступа, но требует привязать карту. На пятый день приходит письмо-напоминание: отмените до конца триала, и карта не списывается. Платная подписка называется Refero Pro, отписаться можно в один клик в личном кабинете. Актуальные цены смотрите на сайте — они меняются. В сети встречаются промо-коды со скидкой до 60%, стоит проверить перед оплатой.
Когда использовать
Семь сценариев, в которых Refero даёт практическую пользу. Не все обязательны — выбирайте под свою задачу.
1. Research перед стартом проекта
Прежде чем открыть Figma, потратьте час на сбор референсов. Комбинируете теги «AI Tool» + «Dashboard» + «Onboarding» — и получаете 15–20 экранов из вашей категории. Час на research на старте дешевле, чем переделывать прототип после первого ревью с клиентом.
2. Решение конкретного UX-вопроса
Когда перед вами конкретная UX-задача — как оформить paywall, спроектировать фильтры или реализовать сброс пароля — не нужно придумывать с нуля. Выбираете нужный тег, изучаете три десятка примеров, и выбираете тот, что лучше ложится на ваш контекст. Это экономит часы работы и снижает риск принять неудачное решение.
3. Поиск референса по чужому скриншоту
Клиент прислал скриншот с пометкой «хочу примерно так, но не точно так». Загружаете изображение в Search by Image — получаете 15 визуально близких экранов. Теперь можно предметно разобрать, что именно зацепило: цветовую палитру, раскладку или конкретный UX-паттерн.
4. Проверка собственного интерфейса
Загружаете собственный скриншот в поиск по картинке — и видите, на что он похож визуально. Если выдача состоит из одного-двух десятков разных продуктов, значит, ваш интерфейс уже не повторяет тренд и имеет узнаваемый почерк. Если же результат напоминает галерею типовых AI-лендингов, это сигнал: экран слишком шаблонный, нужен другой подход.
5. AI-агент с design research
Через Refero MCP агент получает доступ к каталогу до написания кода. Запрос выглядит так: изучи 10 примеров paywall-экранов с тегом «AI Tool», выбери паттерн под контекст продукта, объясни выбор — и только потом генерируй разметку. Разница между «сгенерированным» и «спроектированным» интерфейсом — именно в этом шаге. Модель видит, как устроен paywall у живых продуктов, и выбирает осознанно, а не из обучающих данных.
6. Дизайн-сессия с командой
Командные обсуждения часто вязнут в абстракциях — каждый представляет «простой и понятный» по-своему. Тридцать минут за большим экраном с Refero решают это: прокручиваете 20 экранов из нужной категории, и команда находит общий язык через конкретные примеры. Не «давайте сделаем элегантно», а «как у Notion на странице тарифов, но без верхнего блока».
7. Подбор типографики
В разделе Fonts можно увидеть шрифты не на странице-каталоге типографики, а в живых продуктах — где и как они работают в реальном интерфейсе. Это помогает подбирать гарнитуры под настроение продукта, а не под эстетику шрифтового образца.
Пример
Запрос к Refero MCP для AI-агента перед генерацией paywall-экрана:
Перед тем как сверстать paywall для нашего SaaS-продукта,
посмотри в Refero 10 примеров по тегам "Paywall" + "AI Tool",
выбери паттерн, который лучше всего ложится на наш контекст
(B2B, monthly subscription, триал-период),
объясни выбор и только потом пиши код.Агент получает структурированные данные об экранах через MCP — не сжатые JPEG, а размеченные паттерны. Это даёт модели насмотренность, которой нет в обучающих данных.
Сравнение с соседями
Refero — не единственный инструмент в категории. Разница в фокусе и аудитории.
| Инструмент | Сильная сторона | Когда выбирать |
|---|---|---|
| Refero | Кураторский каталог + Search by Image + MCP для AI-агентов | Индивидуальный design research, связка с AI-агентом |
| Mobbin | Большая мобильная библиотека, командные коллекции, расширенный Figma-плагин | Командная продуктовая работа, глубокие mobile-флоу |
| Refero Styles | DESIGN.md-артефакты для AI-агентов | Если нужен стиль как формальный файл для агента, а не галерея скриншотов |
| Awwwards / Dribbble | Концепты, креатив, эстетика | Вдохновение и эстетический поиск, не продакшн-паттерны |
Refero и Refero Styles — родственные продукты с разным форматом. Refero — это каталог скриншотов для визуального research. Styles — библиотека формализованных DESIGN.md-файлов, которые AI-агент загружает как описание стиля. Один продукт даёт экраны для глаз, другой — стиль как файл для модели.
Инсайт: Инструмент снимает страх пустого холста и ускоряет старт, но выбора не делает. Бесконтрольный просмотр чужих интерфейсов без задачи ведёт к «фотороботу» — склейке разрозненных кусков без логики. Каталог работает как справочник под конкретный вопрос, не как лента для листания.
Как искать эффективно
- Первый шаг — Page Type или Flow, затем уточнение через UX Pattern или Industry. Так выдача сужается до 20–50 экранов вместо двух тысяч.
- Комбинируйте два-три тега — это сужает выдачу до рабочих 20–50 экранов вместо двух тысяч, в которых невозможно ориентироваться.
- Включайте iOS-режим даже в веб-проекте — мобильные команды нередко решают сложные UX-задачи быстрее веба.
- Подборки храните вне Refero — для команды хватит обычной доски в Notion или Figma. Сам каталог не рассчитан на совместную работу с комментариями.
- Для AI-агента подключайте Refero MCP, а не копируйте изображения вручную: агент получает экраны как структурированные данные с разметкой, а не как сжатые картинки. Разница — в качестве контекста, который модель использует для генерации.
Ограничения
Ограничения
Свежесть библиотеки — Каталог отстаёт от живых продуктов: SaaS-сервисы обновляют интерфейсы быстрее, чем Refero переиндексирует скриншоты.
Часть экранов отражает версию, которая уже неактуальна. Перед тем как взять паттерн за основу, откройте сайт продукта и сверьтесь — особенно если экрану больше года. Есть шанс, что блок, который вы собираетесь скопировать, автор уже переработал.
Не для командной работы — Совместные коллекции и комментарии в Refero есть, но лёгкие.
Для активной командной работы лучше Mobbin, который заточен под шеринг и обсуждение экранов, или внешняя доска. Refero рассчитан на индивидуального дизайнера, не на продуктовую команду из 5–10 человек.
Группировка флоу местами рваная — Пользователи инструмента отмечают, что флоу собраны фрагментарно: экраны по одному тегу не всегда выстраиваются в связную цепочку от первого шага до результата.
Пятнадцать скриншотов по тегу «Onboarding» — это набор кадров, а не готовый сценарий. Для анализа полного пути пользователя от входа до цели этого не хватает.
Платный тарифный фильтр — Бесплатный триал длится семь дней и требует привязки карты.
Без планов на оплату — поставьте напоминание на шестой день триала, чтобы не забыть отменить подписку. Полный доступ к каталогу без подписки невозможен. На рынке встречаются промо-коды и скидки до 60%, но базовый доступ — платный.
Не заменяет собственное исследование — Каталог отвечает на вопрос «как делают другие», но не отвечает на вопрос «что нужно вашему пользователю».
Refero даёт насмотренность и набор паттернов, но выбор подходящего — задача дизайнера, и проверяется она на собственных пользователях, не на чужих скриншотах.
Антипаттерны
Антипаттерны
Листать без задачи — Просмотр чужих экранов ради насмотренности — без конкретного вопроса — рано или поздно приводит к «фотороботу»: куски разных интерфейсов, склеенные без единой логики.
Каталог работает под задачу: «как оформить paywall для B2B SaaS с триалом». Без вопроса Refero даёт насмотренность, но не даёт решения.
Копировать один экран целиком — Взять один экран из каталога и воспроизвести его один к одному — не значит получить рабочий интерфейс.
Контекст продукта, аудитории и сценария у вас другой. Refero показывает, как сделано у других, чтобы вы могли выбрать паттерн и адаптировать под свой контекст, а не клонировать.
Игнорировать свежесть — Если экрану больше года-двух, продукт мог полностью переработать этот блок.
Копировать устаревший паттерн — значит повторять чужую ошибку, которую сам автор уже исправил. Сверяйтесь с живым сайтом продукта перед тем, как брать паттерн за основу.
Полагаться только на Refero MCP — AI-агент, который получает референсы через MCP, всё равно не знает вашего контекста.
Он видит чужие paywall-экраны, но не знает вашего тарифа, аудитории и ограничений. Используйте MCP как инструмент для насмотренности модели, а не как замену дизайн-решений. Агент выбирает паттерн, человек проверяет.
Чеклист
Чеклист
Зарегистрироваться и активировать триал — Регистрация через Google-аккаунт.
Бесплатный триал — семь дней полного доступа, требуется привязка карты. Поставьте напоминание на шестой день, если плана платить нет — отменить до конца триала, чтобы не было списания.
Установить Figma-плагин — Если работаете в Figma — поставьте плагин Refero из Figma Community.
Библиотека доступна внутри Figma — поиск и вставка референсов без ухода в браузер.
Подключить Refero MCP — При наличии AI-агента — подключите Refero MCP к Cursor, Claude Desktop или Windsurf.
Это даёт агенту доступ к 130 000+ экранов и 10 000+ флоу через структурированную разметку, а не через сжатые картинки.
Договориться об осях запроса — Команда договаривается о 3–5 осях для поиска — Page Type, Flow, UX Pattern, Industry, Site.
Это создаёт общий словарь и сужает выдачу с двух тысяч до двух десятков релевантных экранов.
Завести внешнюю доску — Refero не заточен под глубокую коллаборацию.
Заведите свою доску референсов вне инструмента — Notion, Figma, Miro — для сохранения подборок, комментариев команды и контекста каждого экрана.
Закрепить ритуал research-сессии — Перед каждой новой страницей или флоу — полчаса на research в каталоге.
Это даёт 15–20 примеров из вашей категории на старте и экономит время на переделках после первого ревью с клиентом.
Ссылки
Ссылки
- Сайт: refero.design
- Сайт: Refero Research — demo.refero.design
- Сайт: Refero в Figma Community