Mobbin MCP Server

Неофициальный MCP-сервер, который подключается к Mobbin — платформе для поиска дизайнерского вдохновения, содержащей более 600 тыс. экранов из более чем 1100 приложений. Ищите приложения, просматривайте скриншоты, изучайте пользовательские сценарии и получайте доступ к своим сохраненным коллекциям прямо из Claude.

У Mobbin нет публичного API. Этот сервер был создан путем обратной разработки их внутренних эндпоинтов.

Инструменты

Детальное изучение конкретного приложения

Инструменты mobbin_search_screens и mobbin_search_flows индексируют Mobbin глобально — они не принимают фильтр app_id (внешний API игнорирует фильтры по приложениям). Для запросов типа «покажи онбординг Notion» используйте двухэтапный путь: mobbin_quick_search для поиска id приложения, затем mobbin_get_app_screens или mobbin_get_app_flows с этим app_id. Инструменты получения деталей считывают данные со страницы деталей приложения Mobbin, поэтому они возвращают всё, что есть в Mobbin для этого приложения.

Миграция: mobbin_get_filters

Вызов без аргументов был удален. Полная таксономия в одном ответе превышала лимит токенов MCP на результат инструмента и заставляла агента считывать результат из временного файла. Передайте kind, чтобы ограничить ответ одним аспектом:

mobbin_get_filters({ kind: "patterns" })                               // newline list of names
mobbin_get_filters({ kind: "patterns", include_definitions: true })    // bullets with descriptions
mobbin_get_filters({ kind: "patterns", include_counts: true })         // bullets with content counts

Related MCP server: figma-mcp-server

Установка

Предварительные требования

• Node.js 18+

• Аккаунт Mobbin (бесплатный или платный)

1. Аутентификация

Вариант А: CLI-команда (рекомендуется)

npx -y mobbin-mcp@latest auth

Она поможет вам скопировать сессионный cookie из браузера:

1. Откройте mobbin.com и войдите в систему

2. Откройте консоль браузера (Cmd+Option+J)

3. Выполните copy(document.cookie), чтобы скопировать cookies в буфер обмена

4. Вставьте их в приглашение CLI

Ваша сессия сохраняется в ~/.mobbin-mcp/auth.json и автоматически обновляется.

Что делает copy(document.cookie)? Она копирует cookies вашего браузера для текущего сайта (mobbin.com) в буфер обмена. Это включает токены сессии Supabase, которые нужны MCP-серверу для выполнения API-запросов от вашего имени. Cookies хранятся локально на вашем компьютере в ~/.mobbin-mcp/auth.json и никогда не отправляются никуда, кроме API Mobbin.

Вариант Б: Переменная окружения (вручную)

1. Откройте mobbin.com в Chrome и войдите в систему

2. Откройте DevTools (Cmd+Option+I) → вкладка Application → Cookies → https://mobbin.com

3. Найдите cookies с именами sb-ujasntkfphywizsdaapi-auth-token.0 и sb-ujasntkfphywizsdaapi-auth-token.1

4. Скопируйте полное значение каждого cookie

5. Объедините их в одну строку:

sb-ujasntkfphywizsdaapi-auth-token.0=<value0>; sb-ujasntkfphywizsdaapi-auth-token.1=<value1>

6. Установите MOBBIN_AUTH_COOKIE в это значение (см. шаг 2 ниже)

2. Добавление в Claude Code

claude mcp add mobbin -- npx -y mobbin-mcp

Если вы использовали CLI-команду аутентификации (Вариант А), дополнительная настройка не требуется — сервер автоматически считывает данные из ~/.mobbin-mcp/auth.json.

Если вы используете переменную окружения (Вариант Б), передайте её при добавлении:

claude mcp add mobbin -e MOBBIN_AUTH_COOKIE="sb-ujasntkfphywizsdaapi-auth-token.0=...; sb-ujasntkfphywizsdaapi-auth-token.1=..." -- npx -y mobbin-mcp

Альтернатива: Claude Desktop

Добавьте в конфигурацию Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "mobbin": {
      "command": "npx",
      "args": ["-y", "mobbin-mcp"]
    }
  }
}

Примеры запросов

• «Я проектирую сценарий оформления заказа для приложения доставки еды — покажи, как это реализовано в топовых приложениях, таких как DoorDash и Uber Eats»

• «Открой онбординг Duolingo и разбери со мной дизайнерские решения каждого экрана»

• «Найди экраны входа, использующие нижние шторки (bottom sheets), и извлеки цветовую палитру — мне нужно вдохновение для редизайна авторизации»

• «Сравни, как финтех-приложения обрабатывают экраны настроек — покажи примеры из Robinhood, Cash App и Venmo»

• «Найди экраны с карточной версткой в приложениях для путешествий, а затем покажи лучший из них в деталях»

• «Какие UI-паттерны сейчас в тренде на iOS? Покажи лучшие экраны»

Как это работает

Mobbin — это приложение на Next.js, работающее на базе Supabase. Этот сервер вызывает внутренние API-маршруты Mobbin (/api/content/search-apps, /api/content/search-screens и т.д.), используя ваш сессионный cookie для аутентификации. Токены автоматически обновляются через эндпоинт Supabase /auth/v1/token до истечения срока их действия и сохраняются обратно в ~/.mobbin-mcp/auth.json при использовании метода аутентификации через CLI.

Изображения экранов передаются через CDN Bytescale, используемый Mobbin. Инструмент mobbin_get_screen_detail автоматически преобразует URL хранилища Supabase из результатов поиска в URL CDN, загружает изображение и возвращает его в формате base64, который модель может видеть и анализировать. Опциональное извлечение цветов использует sharp для возврата доминирующих hex-цветов со скриншота.

Структура проекта

src/
  index.ts              # MCP server entry point, CLI routing, and tool registration
  constants.ts          # API URLs, keys, and config
  types.ts              # TypeScript interfaces for all Mobbin data models
  cli/
    auth.ts             # Interactive CLI authentication flow
  services/
    auth.ts             # Token parsing, expiry checks, and auto-refresh
    api-client.ts       # HTTP client for all Mobbin API endpoints
  utils/
    auth-store.ts       # Persistent session storage (~/.mobbin-mcp/auth.json)
    formatting.ts       # Markdown formatters for tool responses

Лицензия

ISC