uisight

Tu IA no puede ver la pantalla. Tú no puedes describir el error. uisight soluciona ambos.

uisight le da a tu agente de codificación IA (Claude Code, Cursor, Antigravity — cualquier cosa que hable MCP) ojos reales en tu aplicación web: sesiones móviles y de escritorio en vivo que se ejecutan lado a lado, un motor de medición que reporta números en lugar de sensaciones, y un panel compartido donde tú y la IA miran la misma pantalla exacta.

Creado por un fundador solitario que se cansó de tomar capturas de pantalla del teléfono, pegarlas en el chat y escribir "el botón se ve roto, ¿puedes verlo?"

Qué lo hace diferente

El motor de medición es el corazón: en lugar de que tu IA queme tokens mirando capturas de pantalla, inspect devuelve hallazgos como

[mobile · Pixel 7 · light] https://yourapp.com/
  INVISIBLE TEXT 1.04:1 — span.bg-gradient-to-r "your headline" (text rgba(255,255,255,.5) / bg rgb(247,247,248))
  BUTTON a.text-white "Get Started" → text/background contrast 3.35:1
  touch target below 44px 180x23 — "read the guide"

Los hallazgos de texto son baratos, precisos y directamente accionables — tu IA corrige el selector exacto en lugar de adivinar.

Related MCP server: PixelCheck

Inicio rápido

# one-shot audit: PNGs + gallery + report for iPhone/Pixel/desktop, light+dark
npx uisight https://yourapp.com --theme both

# live panel: mobile + desktop side by side, you browse, AI watches (and vice versa)
npx uisight-panel http://localhost:3000

Conéctalo a tu IA (MCP)

# Claude Code
claude mcp add --scope user uisight -- npx -y uisight-mcp

Para Cursor / Antigravity / otros hosts MCP, añade a tu configuración MCP:

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

Luego solo dile a tu agente: "mira mi aplicación con uisight". El servidor del panel se inicia automáticamente cuando se necesita.

Herramientas MCP

Nombres de herramientas en turco disponibles con UISIGHT_LANG=tr (ekrani_gor, denetle, ...).

El panel (lado humano)

npx uisight-panel <url> abre una página del navegador en localhost:5055:

• Móvil + escritorio lado a lado, ambos en vivo, sincronizados por URL

• Clic = tocar en ese dispositivo · rueda = desplazar · escribir después de hacer clic

• Selector de dispositivo por panel, conmutador compartido de claro/oscuro

• El botón Inspeccionar ejecuta el motor de medición en cada pantalla

• 📌 Marcar: escribe una nota, márcala — tu IA lee la nota + captura de pantalla mediante marks. No más "déjame describir lo que estoy viendo."

Funciona dentro de VS Code / Antigravity mediante Simple Browser: Show → http://localhost:5055.

Qué comprueba

• Texto invisible (contraste < 1.6:1) y fallos de contraste WCAG AA — fondos con composición alfa, texto degradado, colores oklab()/oklch() todos manejados

• Objetivos táctiles por debajo de 44px (solo perfiles móviles; enlaces de texto en línea exentos por ancho, según WCAG)

• Desbordamiento horizontal con los elementos infractores

• Texto por debajo de 12px, imágenes sin atributo alt

• Deriva de tema: elementos idénticos en claro y oscuro = probablemente colores fijos

• Errores de consola/JS y solicitudes de red fallidas por dispositivo

Y el límite honesto: las comprobaciones automatizadas no pueden ver errores de diseño — un encabezado colisionado mide bien. Por eso existe see_screen y por qué el informe dice "échele un ojo a los PNG."

Notas y limitaciones

• Los perfiles de iPhone se ejecutan en WebKit real (el motor de Safari) — cercano a iOS, pero no es un simulador de iOS.

• Los navegadores se descargan una vez por Playwright en la primera ejecución (npx playwright install chromium webkit si quieres precalentar).

• Todo se ejecuta localmente — sin nube, sin cuenta, tus pantallas nunca salen de tu máquina.

• v0.1 envía superficies en inglés sobre un código base interno originalmente escrito en turco (en migración). Contribuciones bienvenidas; los nombres de variables pueden sorprenderte hasta v0.2.

Licencia

MIT © SoloLabs