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

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

Содержание

1. Что входит в Refero — четыре составляющие каталога и их назначение.
2. Поиск в веб-интерфейсе — способы находить подходящие референсы.
3. Подключение Refero MCP — требования, адрес сервера и авторизация.
4. Как агент работает с каталогом — доступные инструменты и порядок исследования.
5. Полезные сценарии — практические задачи для дизайнера и команды.
6. Проверка результата — как убедиться, что подключение работает.
7. Тарифы и ограничения — подтверждённые условия доступа.
8. Ограничения метода — что Refero не решает.

Что входит в Refero

Актуальная документация описывает Refero как каталог с четырьмя составляющими: Sites и Apps, Styles, Screens и Flows.

Styles лучше использовать для выбора общего визуального направления. Screens подходят для конкретных интерфейсных решений, а Flows — для задач с последовательностью шагов и состояниями до и после действия.

Поиск в веб-интерфейсе

Каталог позволяет искать референсы по типу страницы, интерфейсному элементу, UX-паттерну, состоянию, названию продукта и тексту на экране. Фильтры можно комбинировать; отдельно выбирается веб- или iOS-платформа.

Практичный порядок поиска:

1. Начните с задачи: например, onboarding, pricing page или dashboard empty state.
2. Уточните платформу и отрасль.
3. Добавьте конкретный элемент или состояние: переключатель тарифа, таблицу сравнения, форму оплаты или ошибку.
4. Откройте несколько подходящих результатов и сравните структуру, текст, состояния и действия пользователя.
5. Сохраните выводы на рабочей доске вместе с пояснением, какую задачу решает каждый референс.

Официальный интерфейс Refero также предлагает поиск по изображению: загруженный скриншот используется для поиска визуально похожих экранов. В MCP похожие экраны ищутся по уже найденному идентификатору экрана.

Документация Refero также содержит раздел о Figma Plugin. Если исследование удобнее вести внутри дизайн-файла, проверьте там актуальные требования к установке.

Подключение Refero MCP

Refero MCP — удалённый сервер, совместимый с Model Context Protocol (MCP), протоколом, через который AI-клиент обращается к внешним инструментам. Он возвращает агенту результаты поиска по продуктам, стилям, экранам и пользовательским сценариям.

Согласно официальной документации, для доступа нужен платный план Pro, Team или Lifetime и клиент с поддержкой удалённых MCP-серверов.

Документация перечисляет Claude Code, Cursor, Antigravity, Lovable, Codex и Manus. Другие клиенты подойдут, если поддерживают удалённые MCP-серверы по HTTP.

Адрес сервера:

https://api.refero.design/mcp

Адрес сервера, названия инструментов и лимит доступа в этом материале сверены с официальной документацией на 2 сентября 2026 года.

Авторизация выполняется через OAuth, то есть через штатный процесс входа клиента, или через Bearer-токен Refero. При использовании Bearer-токена клиент передаёт его в заголовке Authorization; способ зависит от клиента и настроек аккаунта.

Пример конфигурации Codex:

# Адрес удалённого MCP-сервера
[mcp_servers.refero]
enabled = true
url = "https://api.refero.design/mcp"

# Подставьте локально токен из Refero и не публикуйте его в репозитории
[mcp_servers.refero.http_headers]
Authorization = "Bearer <REFERO_TOKEN>"

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

Как агент работает с каталогом

Актуальный Refero MCP предоставляет отдельные инструменты для разных этапов исследования:

Поиск экранов и флоу требует явного параметра платформы: web или ios. Для refero_get_style, refero_get_screen и refero_get_flow можно передать до десяти идентификаторов за запрос. Экран идентифицируется UUID, а флоу — числовым ID. refero_get_similar_screens принимает один UUID и limit от 1 до 20; refero_get_screen_image принимает один UUID.

Рабочая последовательность для агента:

1. Найти несколько подходящих сайтов или приложений.
2. Исследовать несколько визуальных направлений через Styles.
3. Найти экраны для конкретных интерфейсных решений.
4. Если задача многошаговая, изучить полные Flows.
5. Сопоставить несколько примеров и сформулировать общие закономерности.
6. Только после исследования переходить к макету или коду.

Полезные сценарии

Исследование перед стартом интерфейса

Задача: определить направление для нового продукта или раздела.

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

Сценарий не заменяет интервью, аналитику и проверку прототипа на собственных пользователях.

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

Задача: спроектировать оплату, фильтры, пустое состояние или отмену подписки.

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

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

Поиск вариантов от удачного экрана

Задача: расширить слишком узкую подборку референсов.

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

Похожесть экрана не гарантирует совпадения пользовательской задачи; если функция исходного экрана отличается, сначала уточните критерий поиска.

Исследование перед генерацией интерфейса агентом

Задача: дать AI-агенту конкретную основу для макета или фронтенда.

Попросите агента сначала найти несколько стилей, экранов и при необходимости флоу, затем объяснить выбор. В ответе должны быть ссылки Refero, сопоставление вариантов и список применённых принципов. После этого агент может переходить к реализации.

Если задача касается поведения и последовательности действий, добавьте Flows. Одних Styles и Screens для такого решения недостаточно.

Проверка результата

После подключения попросите агента выполнить простой запрос:

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

Подключение работает, если агент:

• вызывает refero_search_screens с платформой web;
• возвращает записи с UUID и ссылками Refero;
• показывает метаданные экранов, включая типы страниц, UX-паттерны или элементы интерфейса;
• может получить подробности выбранного экрана по его UUID.

Если сервер не отвечает, проверьте URL, способ авторизации, наличие подходящего платного плана и поддержку удалённых MCP-серверов в клиенте.

Тарифы и ограничения

По состоянию на 2 сентября 2026 года стандартный доступ к MCP включён в планы Pro, Team и Lifetime. Для каждого лицензированного пользователя действует лимит 8 000 вызовов MCP-инструментов за месячный период. Неиспользованные вызовы не переносятся.

Для повышенных лимитов, собственных интеграций и оплаты по использованию документация направляет в раздел Integrate Refero. Точные цены и состав планов могут меняться, поэтому перед оплатой сверяйтесь со страницей Refero Plans и документацией MCP.

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

Ограничения метода

• Интерфейс продукта мог измениться после попадания экрана в каталог. Критичные детали проверяйте на действующем сайте или в приложении.
• Чужой паттерн создавался под другую аудиторию, бизнес-модель и технические ограничения.
• Один удачный экран не доказывает эффективность решения. Сравнивайте несколько продуктов и проверяйте гипотезу на собственных пользователях.
• Референсы помогают сформулировать направление, но не заменяют пользовательские исследования, аналитику и тестирование.
• Styles ориентированы прежде всего на веб-маркетинг и продуктовые страницы, включая лендинги, страницы тарифов и сайты SaaS. Для поведения продуктового интерфейса используйте Screens и Flows.

Ссылки

• Refero
• Документация Refero MCP
• Справочник инструментов MCP
• Поиск приложений
• Страница Refero MCP

Следующий шаг

Refero Styles — библиотека DESIGN.md из реальных продуктов для AI-агентов

Связанные материалы

• Как мы переделывали главную pimenov.ai: от оценки Comet до нового визуального языка
• Google Stitch обновился — и теперь это полноценный «vibe design» для интерфейсов
• DESIGN.md — дизайн-система в одном файле для AI-кодинга

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

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov