Поиск референсов для типовых экранов — авторизации, корзины, перевода — обычно не проблема: открыл галерею, набрал ключевые слова, сравнил. Сложности начинаются, когда проектируешь сценарий, который редко встречается в других продуктах, а решения прямых конкурентов не подходят. В таких случаях на помощь приходят инструменты вроде ChatGPT Deep Research и Mobbin через MCP. Но чтобы они дали результат, а не просто список красивых картинок, нужен процесс.

В этой статье — практический подход к поиску референсов для нетипичных интерфейсов. Без обещаний «найти идеальное решение за 5 минут» и без волшебных промптов. Только шаги, критерии и ошибки, которые стоит учесть.

Почему обычный поиск референсов не работает

Когда сценарий редкий, стандартные галереи (Dribbble, Behance, Mobbin) выдают либо слишком общие паттерны, либо решения из смежных областей, которые не учитывают контекст. Например, при редизайне каталога событий с высокой долей отказов на этапе загрузки нужно было понять, как упростить взаимодействие. Прямые конкуренты использовали громоздкие формы, и копировать их было ошибкой. Требовался более глубокий анализ: какие вообще подходы существуют к загрузке данных в похожих сценариях, как устроены фильтры, как организован выбор дат и категорий.

Здесь и помогает комбинация Deep Research (для сбора и структурирования информации) и Mobbin через MCP (для доступа к базе реальных интерфейсов и их элементам).

Как работает связка Deep Research + Mobbin через MCP

MCP (Model Context Protocol) — это протокол, который позволяет подключать внешние источники данных к языковой модели. В случае с Mobbin вы получаете доступ к библиотеке скриншотов и паттернов напрямую из диалога с ChatGPT. Deep Research, в свою очередь, умеет проводить многошаговые исследования: искать информацию в открытых источниках, анализировать статьи, собирать факты и формировать структурированный отчёт.

Вместе они дают следующее:

  • Deep Research помогает сформулировать гипотезы, собрать теоретическую базу, найти примеры из смежных областей и понять, какие вопросы задать к базе референсов.
  • Mobbin через MCP позволяет быстро находить конкретные экраны и элементы по запросу, не переключаясь между вкладками, и сразу получать визуальные примеры.

Важно: это не замена анализу пользовательских путей и тестированию. Инструменты лишь ускоряют сбор материала, но решения всё равно нужно проверять на своих пользователях.

Пошаговый процесс поиска референсов

Ниже — последовательность, которую можно адаптировать под свой проект.

  • Шаг 1. Сформулируйте проблему в терминах пользовательского поведения. Не «нужен референс для загрузки событий», а «пользователи бросают загрузку на этапе выбора категории, потому что не понимают, какие поля обязательны». Это поможет и в Deep Research, и в запросах к Mobbin.
  • Шаг 2. Запустите Deep Research с конкретным вопросом. Например: «Какие подходы существуют к упрощению форм с большим количеством фильтров в мобильных приложениях? Приведи примеры из e-commerce, бронирования, образовательных платформ». Deep Research соберёт статьи, кейсы, исследования и структурирует их.
  • Шаг 3. На основе отчёта составьте список паттернов и ключевых слов для поиска в Mobbin. Например: «прогрессивное раскрытие фильтров», «чипы категорий», «умные дефолты», «загрузка по шагам».
  • Шаг 4. Через MCP запросите у Mobbin конкретные экраны по этим паттернам. Формулируйте запросы узко: не «фильтры», а «фильтры с чипами и счётчиком выбранных категорий в мобильном приложении». Сохраняйте найденные экраны в отдельную папку или документ.
  • Шаг 5. Проанализируйте собранные референсы. Для каждого ответьте на вопросы: какую проблему решает этот паттерн? В каком контексте он работает? Какие ограничения? Подходит ли он для вашего сценария и почему?
  • Шаг 6. Сформулируйте гипотезы решения и проверьте их. Например: «Если заменить длинную форму на пошаговый мастер с прогресс-баром, доля отказов снизится». Дальше — прототип и тест.

Критерии отбора референсов

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

  • Релевантность контексту. Паттерн должен решать похожую проблему, а не просто выглядеть современно.
  • Проверенность. Отдавайте предпочтение решениям из продуктов с известной аудиторией и понятными метриками (если они есть в открытом доступе).
  • Простота реализации. Оцените, насколько сложно адаптировать паттерн под вашу платформу и технические ограничения.
  • Соответствие бренду и гайдлайнам. Даже удачный паттерн может конфликтовать с дизайн-системой.
  • Потенциал для улучшения. Иногда референс подсказывает не готовое решение, а направление: что можно упростить или убрать.

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

Типичные ошибки

Даже с продвинутыми инструментами легко свернуть не туда. Вот что встречается чаще всего:

  • Слишком общие запросы. «Покажи красивые формы» — бесполезно. Чем конкретнее проблема, тем полезнее результат.
  • Копирование без анализа. Референс — это источник идей, а не готовый шаблон. Слепое копирование без учёта контекста почти всегда ведёт к ухудшению UX.
  • Игнорирование данных. Deep Research и Mobbin не заменяют аналитику и интервью с пользователями. Если есть метрики отказов, начинайте с них.
  • Перегрузка референсами. 50 экранов не помогут принять решение. Лучше 5–7 тщательно разобранных примеров.
  • Отсутствие фиксации выводов. Если не записывать, какие паттерны и почему вы выбрали, через неделю придётся начинать заново.

Инструменты вроде Deep Research и MCP Mobbin действительно ускоряют поиск референсов, но только при условии, что вы чётко понимаете проблему и умеете отсеивать лишнее. Начните с малого: сформулируйте один конкретный вопрос, прогоните его через Deep Research, затем найдите 3–5 примеров в Mobbin и проанализируйте их по критериям выше. Такой подход экономит время и даёт более осмысленные решения, чем бесконечный скроллинг галерей.