Agentation은 시각적 UI 피드백과 AI 코딩 에이전트 간의 간극을 메워주는 개발자 도구입니다. 웹페이지의 어떤 요소든 클릭하고 주석을 추가하여 Claude Code와 같은 에이전트가 변경 사항을 이해하고 구현하는 데 직접 사용할 수 있는 구조화된 컨텍스트(예: CSS 선택자 및 파일 경로)를 생성합니다. 이를 통해 모호한 설명을 제거합니다.
Free
사용 방법 Agentation?
Agentation 패키지를 설치하고 로컬 개발 서버에서 툴바를 활성화하세요. 피드백을 제공하고 싶은 UI 요소 위에 마우스를 올리고 클릭한 후 메모를 작성하고 생성된 구조화된 출력을 복사하세요. 이 출력을 코드베이스에 접근 가능한 AI 코딩 에이전트(예: Claude Code, Cursor)에 붙여넣으세요. 에이전트는 정확한 선택자와 컨텍스트를 받아 정밀한 코드 변경을 수행하며, 시각적 피드백을 실행 가능한 개발 작업으로 전환합니다.
Agentation 의 주요 기능
시각적 주석 도구 모음: 간단한 브라우저 기반 툴바를 사용하여 라이브 애플리케이션에서 직접 UI 요소를 클릭하고 피드백 메모를 생성할 수 있어 과정이 직관적이고 시각적입니다.
구조화된 컨텍스트 생성: CSS 선택자, 소스 파일 경로, React 컴포넌트 트리, 계산된 스타일 등을 포함하여 AI 에이전트를 위한 정밀한 데이터를 자동 생성하여 정확한 코드 위치를 제공합니다.
MCP 통합: 주석과 AI 에이전트 간의 실시간 양방향 소통을 가능하게 합니다. 에이전트는 설명을 요청하고, 수정 사항을 확인하며, 모든 활성 피드백을 나열하여 대화형 워크플로를 생성할 수 있습니다.
애니메이션 일시 정지: 웹페이지의 CSS 또는 JavaScript 애니메이션을 멈출 수 있는 독특한 기능으로, 캡처하기 어려운 특정 프레임에 주석을 달 수 있게 합니다.
유연한 출력 형식: 수동 붙여넣기를 위한 서식 있는 마크다운으로 피드백을 복사하거나 MCP/서버 연결을 통해 자동 동기화를 지원하여 다양한 개발 파이프라인에 원활하게 통합할 수 있습니다.
주석 관리: 페이지 간 모든 주석을 나열, 삭제 및 관리할 수 있는 도구를 제공합니다. 에이전트는 번호를 참조하여 특정 주석을 지정할 수 있어(예: '주석 3 수정') 목표 지향적인 조치가 가능합니다.
Agentation 의 사용 사례
프론트엔드 개발자: 코드 리뷰나 디버깅 세션 중 AI 보조자에게 정밀한 UI/UX 피드백을 신속하게 제공하며, 스타일링이나 기능 변경이 필요한 버튼이나 모달과 같은 정확한 요소를 지정할 수 있습니다.
제품 관리자 및 디자이너: AI 에이전트를 통해 엔지니어링 팀에 디자인 조정이나 버그 리포트를 전달하며, 모호한 설명('더 눈에 띄게 만들어줘')에서 실행 가능한 코드 수준의 지시로 전환할 수 있습니다.
QA 테스터: 애플리케이션 인터페이스에서 직접 시각적 버그나 불일치를 보고합니다. 생성된 선택자는 개발자나 AI 에이전트가 코드베이스에서 문제를 즉시 찾아 수정하는 데 도움을 줍니다.
개발 팀: 내부 피드백 루프를 간소화합니다. 팀원들은 스테이징 또는 프로덕션 사이트에 주석을 달 수 있으며, 구조화된 출력은 담당 개발자나 AI 도구가 정확한 컨텍스트를 이해하도록 보장합니다.
솔로 개발자 및 인디 해커: 개인적인 디버깅 및 리팩토링 보조 도구로 사용합니다. 자신의 작업에 주석을 달아 AI 페어 프로그래머를 위한 할 일 목록을 생성함으로써 반복적인 개발을 더 효율적으로 만듭니다.
