TL;DR

  • EditUI는 실행 중인 앱을 Chrome에서 검토하며 요소를 클릭해 변경 요청을 수집하고, 이를 Claude Code, Cursor 등 코딩 에이전트에 한꺼번에 전달하는 도구임.
  • 사용자는 저장소 설정 없이 Chrome에서 UI를 검토하고 원하는 변경 사항을 각 요소에 남길 수 있음.
  • EditUI는 선택한 요소의 텍스트, DOM(문서 객체 모델), 클래스, 부모 요소, 주변 요소, URL, 뷰포트, 계산된 스타일 정보를 수집함.
  • 여러 UI 수정 요청을 모아 하나의 검토 묶음으로 복사하고 코딩 에이전트에 붙여 넣을 수 있음.
  • Claude Code, Cursor, Codex, Windsurf와 호환되며 Chrome용 확장 프로그램으로 무료 제공됨.

사용 방법

  • 실행 중인 앱을 Chrome에서 열고 페이지의 요소를 클릭한 뒤 원하는 변경 사항을 설명함.
  • 검토를 이어가며 수정 요청을 원하는 만큼 모은 다음, 전체 내용을 복사해 코딩 에이전트에 붙여 넣음.
  • 흐름은 요소 지정 → 요청 작성 → 수집 → 전달의 네 단계임.

에이전트에 전달하는 맥락

  • EditUI는 사용자가 가리키는 요소를 코딩 에이전트가 파악하는 데 필요한 맥락을 함께 수집함.
  • 수집 정보에는 요소 텍스트, DOM, 클래스, 부모 요소, 주변 요소, URL, 뷰포트, 계산된 스타일이 포함됨.
  • 스크린샷에 주석을 달거나 선택자를 복사하거나 소스 파일을 찾아다닐 필요가 없음.

여러 수정 사항을 한 번에 검토

  • UI 검토에서 발견한 여러 문제를 한꺼번에 모아 코딩 에이전트에 전달할 수 있음.
  • 예시 항목은 히어로 영역 높이 줄이기, 카드 정렬, 주요 행동 버튼을 보조 버튼으로 바꾸기, 간격 좁히기, 모바일에서 세로로 쌓기임.

지원 에이전트와 이용 방식

  • 지원 대상은 Claude Code, Cursor, Codex, Windsurf임.
  • 검토 내용을 복사해 사용하는 코딩 에이전트에 붙여 넣는 방식이며, Cursor Design Mode와 Cursor Visual Editor도 함께 소개됨.
  • Chrome 확장 프로그램으로 제공되며 무료이고 저장소 설정이 필요하지 않음.