uisight

당신의 AI는 화면을 볼 수 없습니다. 버그를 설명할 수도 없습니다. uisight가 둘 다 해결합니다.

uisight는 AI 코딩 에이전트(Claude Code, Cursor, Antigravity — MCP를 지원하는 모든 것)에게 웹 앱에 대한 실제 시각을 제공합니다: 실시간 모바일 + 데스크톱 세션이 나란히 실행되고, 숫자로 보고하는 측정 엔진(느낌이 아닌), 그리고 당신과 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 버튼으로 모든 화면에서 측정 엔진 실행

• 📌 고정: 노트를 입력하고 고정 — AI가 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