Agentation은 AI 코딩 에이전트를 위한 구조화된 피드백을 생성하여 웹페이지 요소를 주석 처리하는 개발 도구이다. 이 도구는 에이전트가 어떤 요소를 참조하는지 정확히 알 때 코드를 훨씬 더 빠르게 찾고 수정할 수 있도록 한다는 핵심 통찰력에서 출발했다.

Agentation은 사용자가 웹페이지의 요소를 클릭하고, 텍스트를 선택하며, 메모를 추가하여 피드백을 생성하는 방식으로 작동한다. 생성된 출력은 Markdown 형식이며, 주석 처리된 요소의 class names, selectors 및 positions 정보를 포함한다. 이는 완전히 agent-agnostic하여 Claude Code, Cursor, 또는 코드베이스에 접근할 수 있는 모든 AI 도구와 호환되며, React 외에 다른 dependencies는 필요하지 않다.

핵심 방법론은 다음과 같다: 사용자가 실행 중인 애플리케이션에서 버그를 발견하거나 변경을 원할 때, Agentation을 사용하여 해당 특정 UI 요소를 피드백과 함께 주석 처리한다. 이 도구는 요소의 시각적 및 구조적 정보를 포착하여, 예를 들어 $.sidebar > .nav-actions > button.primary$와 같은 상세한 selectors를 포함하는 구조화된 데이터를 생성한다. 사용자는 이 출력을 복사하여 AI 에이전트에 붙여넣는다.

에이전트는 이 구조화된 데이터를 활용하여 코드베이스 내에서 관련 컴포넌트나 파일을 grep과 같은 방식으로 직접 검색한다. 이는 에이전트가 "사이드바에 있는 파란색 버튼"과 같은 모호한 설명을 해석하여 추측하는 대신, 정확한 selectors를 기반으로 해당 source files를 정확하게 찾아내어 필요한 수정 작업을 수행할 수 있게 한다. 이러한 정밀한 요소 식별은 에이전트가 코드베이스 내에서 해당 코드를 신속하게 찾아 수정하는 데 필수적이다.

효과적인 사용을 위한 best practices로는 "Button text unclear"와 같이 구체적으로 명시하기, 각 주석당 하나의 문제만 다루기, 예상과 실제를 비교하여 맥락을 포함하기, 오타나 내용 문제의 경우 텍스트 선택 기능을 활용하기, 그리고 특정 애니메이션 프레임을 주석 처리하기 위해 애니메이션을 일시 정지하는 것이 권장된다.