OnUI: Claude Code에 정확한 UI 피드백을 제공하는 브라우저 확장 프로그램

OnUI는 Claude Code로 작업할 때 UI 수정을 위한 시각적 컨텍스트를 제공하는 브라우저 확장 프로그램입니다. 웹페이지에 직접 주석을 달 수 있게 함으로써 어떤 UI 요소에 주의가 필요한지 설명해야 하는 일반적인 문제를 해결합니다.

OnUI의 기능

어떤 웹페이지에서든 요소를 클릭하거나 영역을 그려서 문제점에 대한 메모를 추가하고 구조화된 보고서를 내보낼 수 있습니다. Claude Code는 로컬 MCP(Model Context Protocol)를 통해 이 보고서를 읽어 DOM 요소, 경로, 의도, 심각도 수준에 대한 정확한 정보를 얻습니다. 이로 인해 '오른쪽에 있는 버튼, 아니 다른 거'와 같은 모호한 설명이 사라집니다.

기술적 구현

개발자는 몇 주에 걸쳐 Claude Code를 사용하여 OnUI를 구축했습니다. Claude Code는 브라우저 확장 프로그램과 로컬 MCP 서버를 포함한 대부분의 TypeScript 코드베이스를 작성했습니다. 개발 중 해결된 구체적인 기술적 과제는 다음과 같습니다:

• 호스트 페이지와의 CSS 충돌을 피하기 위한 Shadow DOM 격리 반복
• 주석 대화 상자 UI 및 내보내기 포맷터 구축
• 확장 프로그램과 로컬 MCP 간 네이티브 메시징 브리지 디버깅

사용 가능성 및 라이선스

OnUI는 유료 등급 없이 무료로 사용할 수 있습니다. Chrome 웹 스토어에서 원클릭 설치가 가능하며 Edge와 Firefox에서도 작동합니다. 이 프로젝트는 GPL-3.0 라이선스로 제공되며, 클라우드 종속성, 원격 측정이 전혀 없고 완전히 무료입니다.

개발 워크플로우

개발자는 Claude Code를 위해 Claude Code 자체를 사용하여 도구를 구축한 아이러니를 언급합니다. 현재 UI 반복 워크플로우는 다음과 같습니다: 주석 달기 → Claude 수정 → 확인 → 반복.