Claude Code를 위한 웹 컨텍스트 캡처 도구 Pincushion 공개

커뮤니티 반응

도구의 실용성과 MCP 활용 방식에 대해 관심을 보이며, 실제 프로젝트 적용을 통한 피드백을 기다리는 분위기이다.

실용적 조언

웹 개발 에이전트 워크플로 구축 시 스크린샷 외에 DOM 선택자, URL, 뷰포트 정보를 함께 제공하여 에이전트의 문맥 이해도를 높일 것.

섹션별 상세

시각적 피드백의 한계: 스크린샷만으로는 코딩 에이전트가 웹 페이지의 문제 위치를 정확히 파악하기 어렵다. URL, 선택자, 뷰포트 정보가 결합되지 않으면 에이전트가 문맥을 이해하지 못해 수정이 부정확해진다.

Pincushion의 해결책: Pincushion은 크롬 확장 프로그램과 MCP 서버를 결합하여 웹 페이지의 DOM 선택자, XPath, URL, 뷰포트, 스크린샷, 스레드 정보를 캡처한다. 이 데이터는 MCP를 통해 Claude Code에 전달되어 에이전트가 구체적인 수정 작업을 수행할 수 있게 한다.

MCP 도구 설계: 구현된 MCP 도구들은 CRUD 방식이 아닌 get_actionable_pins, implement_approved_pins와 같이 실제 개발 워크플로에 맞춰 설계되었다. 이는 에이전트가 핀을 확인하고, 승인된 핀에 대해 구현을 진행하는 단계적 접근을 가능하게 한다.

피드백 요청: 개발자는 Claude Code 사용자를 대상으로 도구의 MCP 도구 구성이 적절한지, 선택자와 스레드 문맥이 유용한 첫 번째 diff를 생성하는 데 충분한지 확인하고자 한다.

언급된 도구

Claude Code추천

웹 개발 작업을 수행하는 코딩 에이전트

Pincushion추천

웹 페이지의 컨텍스트를 캡처하여 코딩 에이전트에 전달하는 도구

MCP추천

AI 에이전트와 외부 도구를 연결하는 프로토콜

언급된 리소스

DemoPincushion