Servidor MCP de Mobbin

Un servidor MCP no oficial que se conecta a Mobbin, la plataforma de inspiración de diseño con más de 600.000 pantallas de más de 1.100 aplicaciones. Busca aplicaciones, explora capturas de pantalla, analiza flujos de usuario y accede a tus colecciones guardadas directamente desde Claude.

Mobbin no tiene una API pública. Este servidor fue creado mediante ingeniería inversa de sus endpoints internos.

Herramientas

Profundizar en una aplicación específica

mobbin_search_screens y mobbin_search_flows indexan Mobbin globalmente; no aceptan un filtro app_id (la API ascendente ignora silenciosamente los filtros por aplicación). Para consultas del tipo "muéstrame el onboarding de Notion", utiliza el camino de dos pasos: mobbin_quick_search para buscar el id de la aplicación, y luego mobbin_get_app_screens o mobbin_get_app_flows con ese app_id. Las herramientas de detalle leen desde la página de detalle de la aplicación renderizada en el servidor (SSR) de Mobbin, por lo que devuelven todo lo que Mobbin tiene para esa aplicación.

Migración: mobbin_get_filters

Se eliminó la forma sin argumentos. La taxonomía completa en una sola respuesta excedía el límite de tokens por resultado de herramienta de MCP y obligaba al agente a leer el resultado desde un archivo temporal. Pasa un kind para limitar la respuesta a una faceta:

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

Configuración

Requisitos previos

• Node.js 18+

• Una cuenta de Mobbin (gratuita o de pago)

1. Autenticación

Opción A: Comando CLI (recomendado)

npx -y mobbin-mcp@latest auth

Esto te guiará para copiar tu cookie de sesión desde el navegador:

1. Abre mobbin.com e inicia sesión

2. Abre la consola del navegador (Cmd+Option+J)

3. Ejecuta copy(document.cookie) para copiar tus cookies al portapapeles

4. Pégalo en el prompt de la CLI

Tu sesión se guarda en ~/.mobbin-mcp/auth.json y se actualiza automáticamente.

¿Qué hace copy(document.cookie)? Copia las cookies de tu navegador para el sitio actual (mobbin.com) a tu portapapeles. Esto incluye tus tokens de sesión de Supabase, que el servidor MCP necesita para realizar solicitudes a la API en tu nombre. Las cookies se almacenan localmente en tu máquina en ~/.mobbin-mcp/auth.json y nunca se envían a ningún lugar excepto a la API de Mobbin.

Opción B: Variable de entorno (manual)

1. Abre mobbin.com en Chrome e inicia sesión

2. Abre las herramientas de desarrollador (Cmd+Option+I) → pestaña Application → Cookies → https://mobbin.com

3. Busca las cookies llamadas sb-ujasntkfphywizsdaapi-auth-token.0 y sb-ujasntkfphywizsdaapi-auth-token.1

4. Copia el valor completo de cada cookie

5. Combínalos en una sola cadena:

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

6. Establece MOBBIN_AUTH_COOKIE con ese valor (consulta el paso 2 a continuación)

2. Añadir a Claude Code

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

Si utilizaste el comando de autenticación CLI (Opción A), no se necesita configuración adicional: el servidor lee desde ~/.mobbin-mcp/auth.json automáticamente.

Si utilizas la variable de entorno (Opción B), pásala al añadir:

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

Alternativa: Claude Desktop

Añádelo a tu configuración de Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json):

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

Ejemplos de prompts

• "Estoy diseñando un flujo de pago para una aplicación de entrega de comida; muéstrame cómo lo manejan las mejores aplicaciones como DoorDash y Uber Eats"

• "Abre el flujo de onboarding de Duolingo y guíame a través de las decisiones de diseño de cada pantalla"

• "Busca pantallas de inicio de sesión que usen hojas inferiores (bottom sheets) y extrae la paleta de colores; necesito inspiración para nuestro rediseño de autenticación"

• "Compara cómo las aplicaciones de tecnología financiera manejan las pantallas de configuración; muéstrame ejemplos de Robinhood, Cash App y Venmo"

• "Busca pantallas con diseños basados en tarjetas en aplicaciones de viajes, luego muéstrame la mejor en detalle"

• "¿Qué patrones de interfaz son tendencia ahora mismo en iOS? Muéstrame las mejores pantallas"

Cómo funciona

Mobbin es una aplicación Next.js respaldada por Supabase. Este servidor llama a las rutas de la API interna de Mobbin (/api/content/search-apps, /api/content/search-screens, etc.) usando tu cookie de sesión para la autenticación. Los tokens se actualizan automáticamente a través del endpoint /auth/v1/token de Supabase antes de que caduquen, y se guardan de nuevo en ~/.mobbin-mcp/auth.json cuando se utiliza el método de autenticación CLI.

Las imágenes de pantalla se sirven a través de la CDN Bytescale de Mobbin. La herramienta mobbin_get_screen_detail convierte automáticamente las URLs de almacenamiento de Supabase de los resultados de búsqueda en URLs de CDN, obtiene la imagen y la devuelve como contenido base64 que el modelo puede ver y analizar. La extracción de color opcional utiliza sharp para devolver los colores hexadecimales dominantes de la captura de pantalla.

Estructura del proyecto

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

Licencia

ISC