uisight

Ваш ИИ не видит экран. Вы не можете описать баг. uisight решает обе проблемы.

uisight даёт вашему ИИ-ассистенту (Claude Code, Cursor, Antigravity — любому, кто поддерживает MCP) настоящие глаза на ваше веб-приложение: живые мобильные + десктопные сессии, работающие бок о бок, движок измерений, который сообщает числа, а не ощущения, и общую панель, где вы и ИИ смотрите на один и тот же экран.

Создано соло-разработчиком, который устал делать скриншоты телефона, вставлять их в чат и писать: «кнопка выглядит сломанной, ты видишь?»

Что делает его особенным

Движок измерений — это сердце: вместо того чтобы ваш ИИ тратил токены, вглядываясь в скриншоты, inspect возвращает результаты типа

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

Текстовые результаты дёшевы, точны и сразу готовы к действию — ваш ИИ исправляет точный селектор, а не угадывает.

Related MCP server: PixelCheck

Быстрый старт

# 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

Подключите к своему ИИ (MCP)

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

Для Cursor / Antigravity / других MCP-хостов добавьте в свою конфигурацию MCP:

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

Затем просто скажите агенту: «посмотри мое приложение с uisight». Панельный сервер запускается автоматически, когда это необходимо.

MCP-инструменты

Турецкие названия инструментов доступны с UISIGHT_LANG=tr (ekrani_gor, denetle, ...).

Панель (со стороны человека)

npx uisight-panel <url> открывает в браузере страницу на localhost:5055:

• Мобильный + десктоп бок о бок, оба живые, синхронизированные по URL

• Клик = нажатие на этом устройстве · колесо = прокрутка · ввод текста после клика

• Переключатель устройств для каждой панели, общий переключатель светлой/тёмной темы

• Кнопка Inspect запускает движок измерений на каждом экране

• 📌 Pin: напишите заметку, закрепите её — ваш ИИ читает заметку и скриншот через marks. Больше никаких «дай я опишу, что вижу».

Работает внутри VS Code / Antigravity через Simple Browser: Show → http://localhost:5055.

Что проверяется

• Невидимый текст (контрастность < 1.6:1) и нарушения контрастности WCAG AA — обрабатываются фоны с альфа-композитом, градиентный текст, цвета oklab()/oklch()

• Сенсорные цели ниже 44px (только для мобильных профилей; строчные текстовые ссылки освобождены от ширины, согласно WCAG)

• Горизонтальное переполнение с указанием проблемных элементов

• Текст ниже 12px, изображения без alt

• Дрейф темы: элементы, одинаковые в светлой и тёмной теме = вероятно, жёстко заданные цвета

• Ошибки консоли/JS и неудачные сетевые запросы на каждое устройство

И честное ограничение: автоматические проверки не могут увидеть дизайнерские ошибки — столкнувшийся верхний колонтитул может проходить проверку. Именно поэтому существует see_screen и отчёт говорит «посмотрите на PNG своими глазами».

Примечания и ограничения

• Профили iPhone работают на реальном WebKit (движок Safari) — близко к iOS, но не симулятор iOS.

• Браузеры загружаются один раз Playwright при первом запуске (npx playwright install chromium webkit, если хотите прогреть заранее).

• Всё работает локально — никакого облака, никаких аккаунтов, ваши экраны никогда не покидают ваш компьютер.

• v0.1 поставляется с английским интерфейсом поверх внутренней кодовой базы, изначально написанной на турецком (миграция в процессе). Принимаются вклады; имена переменных могут вас удивлять до v0.2.

Лицензия

MIT © SoloLabs