uisight

Ihre KI kann den Bildschirm nicht sehen. Sie können den Fehler nicht beschreiben. uisight behebt beides.

uisight gibt Ihrem KI-Coding-Agenten (Claude Code, Cursor, Antigravity – alles, was MCP spricht) echte Augen auf Ihre Web-App: Live-Mobil- und Desktop-Sitzungen nebeneinander, eine Messmaschine, die Zahlen statt Eindrücke meldet, und ein gemeinsames Panel, in dem Sie und die KI auf denselben Bildschirm schauen.

Entwickelt von einem Solo-Gründer, der es leid war, Handy-Screenshots zu machen, sie in den Chat einzufügen und zu tippen: „Der Button sieht kaputt aus, kannst du ihn sehen?“

Was es anders macht

Die Messmaschine ist das Herzstück: Statt dass Ihre KI Tokens verschwendet, um Screenshots zu beäugen, liefert inspect Ergebnisse wie

[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"

Textuelle Ergebnisse sind günstig, präzise und direkt umsetzbar – Ihre KI repariert den genauen Selektor statt zu raten.

Related MCP server: PixelCheck

Schnellstart

# 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

An Ihre KI anbinden (MCP)

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

Für Cursor / Antigravity / andere MCP-Hosts fügen Sie in Ihre MCP-Konfiguration ein:

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

Dann sagen Sie einfach zu Ihrem Agenten: „Schau dir meine App mit uisight an“. Der Panel-Server startet automatisch, wenn nötig.

MCP-Tools

Türkische Toolnamen verfügbar mit UISIGHT_LANG=tr (ekrani_gor, denetle, …).

Das Panel (menschliche Seite)

npx uisight-panel <url> öffnet eine Browserseite unter localhost:5055:

• Mobil + Desktop nebeneinander, beide live, URL-synchronisiert

• Klicken = Tap auf dem Gerät · Rad = Scrollen · Tippen nach Klick

• Geräteumschalter pro Fenster, gemeinsamer Hell/Dunkel-Umschalter

• Inspect-Button führt die Messmaschine auf jedem Bildschirm aus

• 📌 Pin: Notiz eingeben, pinnen – Ihre KI liest Notiz + Screenshot via marks. Kein „Lass mich beschreiben, was ich sehe“ mehr.

Funktioniert in VS Code / Antigravity via Einfacher Browser: Anzeigen → http://localhost:5055.

Was es prüft

• Unsichtbaren Text (Kontrast < 1,6:1) und WCAG-AA-Kontrastfehler – alpha-komponierte Hintergründe, Gradienten-Text, oklab()/oklch()-Farben werden alle verarbeitet

• Touch-Ziele unter 44px (nur Mobilprofile; Inline-Textlinks nach Breite ausgenommen, gemäß WCAG)

• Horizontalen Überlauf mit den verursachenden Elementen

• Text unter 12px, Bilder ohne Alt

• Theme-Drift: Elemente, die in Hell und Dunkel identisch sind = wahrscheinlich hartcodierte Farben

• Konsolen-/JS-Fehler und fehlgeschlagene Netzwerkanfragen pro Gerät

Und die ehrliche Grenze: Automatisierte Prüfungen können Design-Fehler nicht sehen – ein kollidierter Header misst einwandfrei. Deshalb gibt es see_screen und warum der Bericht sagt: „Begutachten Sie die PNGs mit eigenen Augen.“

Hinweise & Einschränkungen

• iPhone-Profile laufen auf echtem WebKit (Safari-Engine) – nah an iOS, aber kein iOS-Simulator.

• Browser werden einmalig von Playwright heruntergeladen beim ersten Start (npx playwright install chromium webkit zum Vorwärmen).

• Alles läuft lokal – keine Cloud, kein Konto, Ihre Bildschirme verlassen nie Ihren Rechner.

• v0.1 liefert englische Oberflächen über eine interne Codebasis, die ursprünglich auf Türkisch geschrieben wurde (wird migriert). Beiträge willkommen; Variablennamen könnten Sie bis v0.2 überraschen.

Lizenz

MIT © SoloLabs