nicobailon/pi-annotate

해결하는 문제

Pi Annotate는 AI 에이전트에게 UI 버그와 디자인 변경 사항을 시각적으로 전달할 수 있는 방법을 제공합니다. 레이아웃 문제를 수동으로 설명하거나 CSS를 복사하는 대신 사용자는 웹페이지의 요소를 클릭하여 AI 에이전트가 코드를 수정하는 데 필요한 정확한 기술적 맥락(선택자, 박스 모델, 접근성 역할)과 스크린샷을 캡처할 수 있습니다.

작동 방식

Chrome/Chromium용 브라우저 확장 프로그램으로, 네이티브 호스트와 Pi 확장 프로그램과 함께 작동합니다. 사용자가 /annotate 명령을 실행하면 도구가 브라우저에 아노테이션 UI를 삽입합니다. 사용자는 요소를 선택하고 주석을 추가할 수 있으며, "Etch" 모드를 사용해 실시간 DevTools 편집을 기록할 수도 있습니다. 이 데이터(HTML 속성, CSS 스타일, 시각적 자르기)는 구조화된 Markdown 보고서로 패키징되어 AI 에이전트로 전송됩니다.

대상 사용자

UI/UX 구현 및 버그 수정에 AI 에이전트를 사용하는 프론트엔드 개발자 및 디자이너입니다.

주요 기능

• 깊은 맥락 캡처: 선택된 요소에 대해 박스 모델 데이터, 접근성 정보, 핵심 CSS 스타일을 자동으로 수집합니다.
• 편집 캡처(Etch): MutationObserver를 통해 브라우저 DevTools에서 이루어진 실시간 변경 사항을 추적하고, 전후 스크린샷 및 속성 차이를 제공합니다.
• 시각적 메모 카드: 드래그 가능한 부유형 메모와 SVG 연결선을 사용해 주석을 요소와 연결하는 Figma 유사한 경험을 제공합니다.
• 원격 및 WSL 지원: 네이티브 메시징 브리지를 통해 원격 SSH 호스트 또는 WSL 환경 내 페이지를 아노테이션할 수 있습니다.