Curated AI Magazine

PICKLEE

AI Field Notes For Builders

FEATURE ARTICLE

Agentation - AI 코딩 네비게이터

AI 코딩 어시스턴트(Claude Code, Cursor, Windsurf 등)를 위한 UI 요소 주석 도구. 브라우저에서 요소 클릭 시 클래스명, CSS 셀렉터, 위치 정보를 자동 캡처. AI가 정확한 파일/라인으로 직접 점프 가능. '눈먼 장님 코딩' 문제 해결.

2026년 1월 29일수정 2026년 2월 3일원문 링크

Agentation - AI 코딩 네비게이터

핵심 컨셉: AI 코딩 어시스턴트가 '눈먼 장님 코딩'하는 문제 해결. UI 요소의 정확한 코드 위치를 AI에게 전달.

문제 인식:

  • 개발자의 84%가 코딩 외 작업에 시간 소비
  • 하루 평균 1,200번 앱 전환, 집중 회복에 23분 소요
  • AI에게 "이 버튼 색상 바꿔줘"라고 해도 어떤 파일인지 모름

작동 방식:

  1. 브라우저에서 툴바 활성화
  2. 원하는 UI 요소 클릭
  3. 클래스명, CSS 셀렉터, 위치 정보 자동 캡처
  4. 구조화된 Markdown 출력 생성
  5. Claude Code/Cursor/Windsurf에 붙여넣기

기술적 특징:

  • React 최소 의존, 제로 redundancy
  • 애니메이션 일시정지 기능 (순간 캡처용)
  • 도구 중립 설계: 어떤 AI 코딩 도구와도 호환

출시: 2025년 8월

RELATED

관련 글

전체 보기

RE-ENTRY

최신 글 재진입