Mobile Xray MCP

Toma capturas de pantalla y analiza aplicaciones móviles con asistencia de IA directamente desde tu IDE.

GitHub
2
Prueba este MCPPatrocinado

Documentación

Mobile Xray MCP

🔬 Toma capturas de pantalla y analiza tus aplicaciones móviles con asistencia de IA, directamente desde tu IDE.

License Node.js MCP

Privacidad Primero • Creado por Desarrolladores para Desarrolladores • Funciona Localmente

Acerca de

He estado creando aplicaciones móviles durante los últimos 10 años, y una cosa que siempre ha sido un desafío constante sin un diseñador de UX dedicado es saber si las pantallas que creo son realmente fáciles de usar e intuitivas.

Ahora, esto se ha vuelto mucho más fácil. Con Mobile Xray MCP, puedes pedirle a tu IDE con IA favorito (Claude, Cursor, Windsurf, VS Code) que tome una captura de pantalla de tu aplicación y te dé sugerencias instantáneas sobre qué mejorar. No más adivinanzas sobre decisiones de UI/UX: obtén comentarios directamente en tu flujo de trabajo de desarrollo.

Esta herramienta une la brecha entre desarrollo y diseño al llevar capacidades de análisis de aplicaciones móviles directamente a tu entorno de codificación, haciendo más fácil que nunca crear aplicaciones móviles pulidas y fáciles de usar.

Características

  • 🔒 Privacidad Primero: Toda la automatización ocurre localmente en tu máquina: tus capturas de pantalla y datos nunca salen de tu dispositivo
  • ⚡ Rápido: Comunicación directa con simuladores y emuladores locales para retroalimentación instantánea
  • 📱 Multiplataforma: Compatible con simuladores de iOS y emuladores de Android
  • 🤖 Impulsado por IA: Se integra perfectamente con asistentes de codificación con IA para análisis inteligente
  • 👨‍💻 Enfocado en Desarrolladores: Creado por desarrolladores que entienden el flujo de trabajo de desarrollo móvil

⚡ Inicio Rápido

Requisitos previos: Node.js 18+, Simulador de iOS o Emulador de Android

Agrega a tu archivo de configuración del IDE:

{
  "mcpServers": {
    "mobile-xray": {
      "command": "npx",
      "args": ["-y", "@cultivx/mobile-xray-mcp"]
    }
  }
}

Prueba: Reinicia el IDE → Inicia el simulador → Pregunta: "Take a screenshot of my iOS simulator"

Detalles de Configuración

Requisitos Previos

Requisitos del Sistema:

  • Node.js 18+ (verifica con node --version)
  • macOS 10.15+ (para desarrollo de iOS)
  • macOS/Windows/Linux (para desarrollo de Android)

Para Desarrollo de iOS:

  • Herramientas de línea de comandos de Xcode: xcode-select --install
  • Xcode con soporte para simulador de iOS
  • Al menos un simulador de iOS instalado

Para Desarrollo de Android:

  • Android Studio (incluye los comandos adb y emulator)
  • Herramientas del SDK de Android en tu PATH
  • Al menos un Dispositivo Virtual de Android (AVD) creado

Verifica tu Configuración:

# Test Node.js version
node --version  # Should show v18.0.0 or higher

# Test iOS tools (macOS only)
xcrun simctl list devices | head -5

# Test Android tools
adb version

Instrucciones de Configuración

Para Cursor: Consulta la Documentación de MCP de Cursor

Para Claude Desktop: Consulta el Inicio Rápido de MCP de Claude

Para Windsurf: Consulta la Documentación de MCP de Windsurf

Para VS Code: Consulta la Documentación de MCP de VS Code

Nota: Este servidor MCP funciona con cualquier asistente de codificación con IA que admita el Protocolo de Contexto de Modelo.

Uso Básico

  1. Inicia tu simulador/emulador móvil
  2. Abre tu chat de IA en tu IDE
  3. Pide una captura de pantalla: "¿Puedes tomar una captura de pantalla de mi simulador de iOS?"
  4. Obtén análisis de IA: "¿Qué puedo mejorar sobre la UX de esta pantalla?"

Ejemplos de Prompts

Plataforma y Configuración

Check which platforms are currently supported by the mobile-xray-mcp on my machine

Accesibilidad

Take a screenshot of my iOS simulator and tell me what accessibility features I should add

Screenshot my current screen and check if the color contrast meets accessibility standards

Comentarios de UI/UX

Take a screenshot of the current iOS simulator, and find the code that is related to it, then propose some improvements without making any changes

Take a screenshot of my app and suggest improvements for mobile-first design principles

Analyze the current screen layout and suggest improvements for better user flow

Cambiar y Verificar

Make changes and verify your changes work well by taking a screenshot

Solución de Problemas y Preguntas Frecuentes

Problemas:

  • "No se encontraron simuladores": Inicia tu simulador con open -a Simulator (iOS) o verifica adb devices (Android)
  • MCP no se conecta: Reinicia tu IDE después de agregar la configuración, verifica que la sintaxis JSON sea correcta
  • "Comando no encontrado": Instala las Herramientas de línea de comandos de Xcode (xcode-select --install) o asegúrate de que el SDK de Android esté en PATH

Preguntas Comunes:

  • Frameworks: Funciona con React Native, Flutter, Xamarin o cualquier aplicación en simulador/emulador
  • Dispositivos físicos: Aún no compatibles, solo simuladores/emuladores
  • Privacidad: El servidor MCP opera localmente y no recopila ni envía ningún dato. Las imágenes de capturas de pantalla se envían a tu servicio de IA por tu IDE para su análisis
  • Sin conexión: Las capturas de pantalla funcionan sin conexión, el análisis de IA necesita conexión a internet

Características Actuales

✅ Detección de Plataforma: Verifica automáticamente qué plataformas móviles están disponibles en tu sistema

✅ Privacidad Primero: Todo el procesamiento realizado por el servidor MCP ocurre localmente: no se envían datos a servidores externos. Sin embargo, las imágenes de capturas de pantalla se enviarán a tu servicio de IA (Claude, ChatGPT, etc.) para su análisis, según lo maneje el agente de IA de tu IDE

✅ Captura de Pantalla: Toma capturas de pantalla instantáneas de simuladores de iOS y emuladores de Android

✅ Soporte Multiplataforma: Funciona con entornos de desarrollo de iOS y Android

✅ Integración con IDE: Se integra perfectamente con IDEs y asistentes de codificación populares con IA

Próximas Características

🚧 Navegación Interactiva: Permitir que los asistentes de IA naveguen a través de la interfaz de tu aplicación

Contribuciones

¡Damos la bienvenida a las contribuciones! Así es como puedes ayudar:

  1. Haz un fork de este repositorio
  2. Crea una rama de características (git checkout -b feature/amazing-feature)
  3. Haz commit de tus cambios (git commit -m 'Add amazing feature')
  4. Haz push a la rama (git push origin feature/amazing-feature)
  5. Abre una Solicitud de Extracción (Pull Request)

Revisaré todas las PRs y proporcionaré comentarios. Ya sea corrección de errores, nuevas características o mejoras de documentación, ¡todas las contribuciones son apreciadas!

Licencia

Este proyecto está licenciado bajo la Licencia Apache 2.0: consulta el archivo LICENSE para más detalles.

Soporte

Hecho con ❤️ por desarrolladores, para desarrolladores