Mobile Xray MCP

Tire capturas de tela e analise aplicativos móveis com assistência de IA diretamente do seu IDE.

GitHub
2

Documentação

Mobile Xray MCP

🔬 Capture telas e analise seus aplicativos móveis com assistência de IA - direto da sua IDE.

License Node.js MCP

Privacidade em Primeiro Lugar • Feito por Desenvolvedores para Desenvolvedores • Funciona Localmente

Sobre

Venho desenvolvendo aplicativos móveis nos últimos 10 anos, e uma coisa que sempre foi um desafio sem um designer de UX dedicado é saber se as telas que crio são realmente fáceis de usar e intuitivas.

Agora, isso ficou muito mais fácil. Com o Mobile Xray MCP, você pode pedir à sua IDE com IA favorita (Claude, Cursor, Windsurf, VS Code) para capturar uma tela do seu aplicativo e receber sugestões instantâneas sobre o que melhorar. Chega de adivinhar decisões de UI/UX - receba feedback diretamente no seu fluxo de desenvolvimento.

Esta ferramenta preenche a lacuna entre desenvolvimento e design, trazendo recursos de análise de aplicativos móveis diretamente para o seu ambiente de codificação, tornando mais fácil do que nunca criar aplicativos móveis polidos e fáceis de usar.

Recursos

  • 🔒 Privacidade em Primeiro Lugar: Toda a automação acontece localmente na sua máquina - suas capturas de tela e dados nunca saem do seu dispositivo
  • ⚡ Rápido: Comunicação direta com simuladores e emuladores locais para feedback instantâneo
  • 📱 Multiplataforma: Suporta simuladores iOS e emuladores Android
  • 🤖 Com IA: Integra-se perfeitamente com assistentes de codificação com IA para análise inteligente
  • 👨‍💻 Focado em Desenvolvedores: Feito por desenvolvedores que entendem o fluxo de trabalho de desenvolvimento móvel

⚡ Início Rápido

Pré-requisitos: Node.js 18+, Simulador iOS ou Emulador Android

Adicione ao arquivo de configuração da sua IDE:

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

Teste: Reinicie a IDE → Inicie o simulador → Pergunte: "Take a screenshot of my iOS simulator"

Detalhes da Configuração

Pré-requisitos

Requisitos do Sistema:

  • Node.js 18+ (verifique com node --version)
  • macOS 10.15+ (para desenvolvimento iOS)
  • macOS/Windows/Linux (para desenvolvimento Android)

Para Desenvolvimento iOS:

  • Xcode Command Line Tools: xcode-select --install
  • Xcode com suporte a Simulador iOS
  • Pelo menos um Simulador iOS instalado

Para Desenvolvimento Android:

  • Android Studio (inclui os comandos adb e emulator)
  • Ferramentas do Android SDK no seu PATH
  • Pelo menos um Dispositivo Virtual Android (AVD) criado

Verifique sua Configuração:

# 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

Instruções de Configuração

Para Cursor: Veja a Documentação MCP do Cursor

Para Claude Desktop: Veja o Guia de Início Rápido MCP do Claude

Para Windsurf: Veja a Documentação MCP do Windsurf

Para VS Code: Veja a Documentação MCP do VS Code

Nota: Este servidor MCP funciona com qualquer assistente de codificação com IA que suporte o Model Context Protocol.

Uso Básico

  1. Inicie seu simulador/emulador móvel
  2. Abra o chat de IA na sua IDE
  3. Peça uma captura de tela: "Você pode capturar uma tela do meu simulador iOS?"
  4. Receba a análise da IA: "O que posso melhorar na experiência do usuário desta tela?"

Exemplos de Prompts

Plataforma e Configuração

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

Acessibilidade

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

Feedback 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

Alterar e Verificar

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

Solução de Problemas e Perguntas Frequentes

Problemas:

  • "Nenhum simulador encontrado": Inicie seu simulador com open -a Simulator (iOS) ou verifique adb devices (Android)
  • MCP não conectando: Reinicie sua IDE após adicionar a configuração, verifique se a sintaxe JSON está correta
  • "Comando não encontrado": Instale o Xcode Command Line Tools (xcode-select --install) ou garanta que o Android SDK esteja no PATH

Perguntas Comuns:

  • Frameworks: Funciona com React Native, Flutter, Xamarin ou qualquer aplicativo no simulador/emulador
  • Dispositivos físicos: Ainda não suportado, apenas simuladores/emuladores
  • Privacidade: O servidor MCP opera localmente e não coleta nem envia nenhum dado. As imagens das capturas de tela são enviadas ao seu serviço de IA pela sua IDE para análise
  • Offline: As capturas de tela funcionam offline, a análise de IA precisa de conexão com a internet

Recursos Atuais

✅ Detecção de Plataforma: Verifica automaticamente quais plataformas móveis estão disponíveis no seu sistema

✅ Privacidade em Primeiro Lugar: Todo o processamento realizado pelo servidor MCP acontece localmente - nenhum dado é enviado a servidores externos. No entanto, as imagens das capturas de tela serão enviadas ao seu serviço de IA (Claude, ChatGPT, etc.) para análise, conforme gerenciado pelo agente de IA da sua IDE

✅ Captura de Tela: Capture telas instantâneas de simuladores iOS e emuladores Android

✅ Suporte Multiplataforma: Funciona com ambientes de desenvolvimento iOS e Android

✅ Integração com IDE: Funciona perfeitamente com IDEs e assistentes de codificação com IA populares

Próximos Recursos

🚧 Navegação Interativa: Permitir que assistentes de IA naveguem pela interface do seu aplicativo

Contribuindo

Aceitamos contribuições! Veja como você pode ajudar:

  1. Faça um fork deste repositório
  2. Crie um branch de recurso (git checkout -b feature/amazing-feature)
  3. Faça commit das suas alterações (git commit -m 'Add amazing feature')
  4. Envie para o branch (git push origin feature/amazing-feature)
  5. Abra um Pull Request

Vou revisar todos os PRs e fornecer feedback. Seja correção de bugs, novos recursos ou melhorias na documentação - todas as contribuições são bem-vindas!

Licença

Este projeto está licenciado sob a Apache License 2.0 - veja o arquivo LICENSE para detalhes.

Suporte

Feito com ❤️ por desenvolvedores, para desenvolvedores