uisight

あなたのAIは画面を見ることができません。あなたはバグを説明できません。uisightが両方を解決します。

uisightは、あなたのAIコーディングエージェント（Claude Code、Cursor、Antigravity — MCP を話すあらゆるもの）に、Webアプリの本当の目を与えます：ライブのモバイル + デスクトップセッションを並べて実行し、数字を「雰囲気」の代わりに報告する測定エンジン、そしてあなたとAIがまったく同じ画面を見る共有パネル。

スマホのスクリーンショットを撮って、それをチャットに貼り付けて、「ボタンが壊れてるみたいだけど、見える？」と入力するのにうんざりした個人開発者によって作られました。

何が違うのか

測定エンジンが核心です：あなたのAIがスクリーンショットを凝視してトークンを消費する代わりに、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"

テキストによる結果は安価で、正確で、直接的に実行可能です — あなたのAIは推測する代わりに正確なセレクタを修正します。

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

AI（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：メモを入力してピン留め — AIはmarksを介してメモとスクリーンショットを読み取ります。「今見ているものを説明させて」はもう必要ありません。

VS Code / Antigravity 内で Simple Browser: Show → http://localhost:5055 で動作します。

チェックする内容

• 非表示テキスト（コントラスト < 1.6:1）およびWCAG AAコントラスト違反 — アルファ合成背景、グラデーションテキスト、oklab()/oklch()色もすべて処理

• 44px未満のタッチターゲット（モバイルプロファイルのみ。インラインテキストリンクは幅により除外、WCAG準拠）

• 問題のある要素を含む水平オーバーフロー

• 12px未満のテキスト、代替テキストのない画像

• テーマのずれ：ライト および ダークで同一の要素 = ハードコードされた色の可能性が高い

• デバイスごとのコンソール/JSエラーおよび失敗したネットワークリクエスト

そして正直な限界：自動チェックはデザインのミスを見ることができません — 衝突したヘッダーは問題なく測定されます。だからこそ see_screen が存在し、レポートに「PNGを目視確認してください」と書かれているのです。

注意事項と制限

• iPhoneプロファイルは実際のWebKit（Safariのエンジン）で実行されます — iOSに近いですが、iOSシミュレータではありません。

• ブラウザは最初の実行時にPlaywrightによって一度ダウンロードされます（プリウォームしたい場合はnpx playwright install chromium webkit）。

• すべてはローカルで実行されます — クラウドは不要、アカウントも不要、あなたの画面があなたのマシンを離れることはありません。

• v0.1では、もともとトルコ語で書かれた内部コードベースの上に英語のインターフェースを提供しています（移行中）。貢献を歓迎します。v0.2までは変数名に驚くかもしれません。

ライセンス

MIT © SoloLabs