Blip MCP 서버: Claude 코드에 대한 UI 변경사항을 설명하는 대신 그리기

Blip이 해결하는 문제

개발자는 AI 코딩 어시스턴트와 작업할 때 발생하는 특정 커뮤니케이션 문제를 해결하기 위해 Blip을 만들었습니다: 구두로 UI 변경 사항을 설명하는 번거로운 과정입니다. 출처의 예시로는 "버튼을 왼쪽으로 20px 이동해주세요", "아니요, 다른 버튼이요", "두 번째와 세 번째 섹션 사이의 패딩이요" 등이 있습니다. 이 과정은 실제 수정을 구현하는 것보다 더 많은 시간을 낭비하는 경우가 많습니다.

작동 방식

Blip은 실행 중인 애플리케이션 위에 그리기 도구를 겹쳐서 엽니다. 다음을 할 수 있습니다:

• 버튼에 동그라미 그리기
• 화살표 그리기
• "여기에 패딩을 더 추가해주세요"와 같은 텍스트 쓰기

스크린샷에 주석을 달고 나면 전송 버튼을 누릅니다. Claude Code는 주석이 달린 이미지를 받아서, 지시한 변경 사항을 구현하는 해당 코드를 작성합니다.

기술적 세부 사항

Blip은 Claude Code를 위해 특별히 제작된 MCP(Model Context Protocol) 서버입니다. 전체 프로젝트는 주말 동안 Claude Code를 사용하여 구축되었습니다. 무료이며 MIT 라이선스 하에 오픈 소스이고, 데이터 수집 없이 완전히 로컬에서 실행됩니다.

설치 방법

설치하려면:

claude mcp add blip -- npx blip-mcp

프로젝트 링크

• 랜딩 페이지: https://blip-chi.vercel.app
• GitHub 저장소: https://github.com/nebenzu/Blip
• 예시 스크린샷: https://preview.redd.it/lo07xfhfr7qg1.png?width=2878&format=png&auto=webp&s=c8bad2090f27ec4701375aaf671a49369ce416

개발자는 이것이 자신의 첫 오픈 소스 프로젝트이며 피드백을 기쁘게 받는다고 언급했습니다.