AI 코딩 에이전트한테 “사이드바에 있는 버튼 수정해줘”라고 하면, AI는 추측을 해야 한다. 코드베이스에서 설명에 맞을 것 같은 컴포넌트를 찾고, 후보를 고르고, 맞기를 기대하는 거다. 틀리면 다시 설명하고. 이 루프가 꽤 답답하다.
Agentation은 이 과정을 끊는다. 개발 환경에 React 컴포넌트를 추가하면 브라우저에 플로팅 툴바가 생기는데, 페이지에서 요소를 클릭하면 CSS selector, 클래스명, ID, DOM 계층, React fiber tree에서 추출한 컴포넌트 이름이 자동으로 캡처된다. “패딩 20px로 늘려줘” 같은 메모를 추가하고 생성된 Markdown을 복사해서 Claude Code나 Cursor에 붙여넣으면 끝이다.
AI는 .sidebar > button.primary와 React 컴포넌트 경로를 받는 거다. 코드베이스를 grep하고, 파일을 찾고, 수정한다. 추측 없이.
npm install agentation -D
Claude Code에서는 스킬로 연동할 수 있다.
npx skills add benjitaylor/agentation
세션에서 /agentation으로 호출.
출력 포맷은 Compact부터 Forensic까지 4단계인데, Forensic 모드는 computed style과 bounding box까지 포함해서 레이아웃 제약까지 AI가 정확히 파악해야 할 때 쓸 수 있다.
MCP 서버 옵션도 있다(npx agentation-mcp init). 어노테이션을 페이지와 세션을 넘어서 유지할 수 있어서 여러 뷰에 걸쳐 작업할 때 유용하더라고.
알려진 한계 두 가지: iframe과 shadow DOM은 브라우저 보안 제약으로 지원 안 된다. 그 외에는 순수 프론트엔드다. 백엔드 없음, DOM 수정 없음, 이벤트 리스너와 SVG 오버레이만.
핵심은 단순한 거다. 스크린샷은 코드와의 연결이 끊긴다. Selector는 끊기지 않는다.
GitHub: benjitaylor/agentation