Markagent: turn any UI click into a perfect prompt for Claude Code, Cursor, and Codex

개요

Markagent는 웹 UI 클릭을 Claude Code, Cursor, Codex와 같은 AI 코딩 에이전트에게 완벽한 프롬프트로 변환하는 Chrome 확장 프로그램입니다.

주요 내용

* 기존 AI 코딩 방식의 문제점: UI의 미세한 오류나 비정렬을 설명하기 위해 AI 코딩 에이전트에게 장황하게 텍스트를 입력하는 과정에서 발생하는 비효율성을 지적합니다.
* Markagent의 기능: 사용자가 UI 요소를 클릭하고 간단한 노트를 남기면, 해당 요소의 React 컴포넌트 이름, 소스 파일 경로 (개발 모드), DOM 컨텍스트, CSS 선택자, URL, 뷰포트 크기, 스크린샷, 사용자 노트가 포함된 구조화된 마크다운 프롬프트를 생성합니다.
* Journey Mode: 여러 단계에 걸친 복잡한 UI 상호작용 버그를 기록하기 위한 기능으로, 사용자의 클릭 순서를 스크린샷과 함께 기록하여 AI 에이전트가 그대로 재현할 수 있도록 합니다.
* 다양한 사용자층: 코드 개발자뿐만 아니라 디자이너, PM, QA 테스터, 비개발자 등 다양한 직군에서 UI 피드백 및 버그 재현을 위해 활용될 수 있으며, 생성된 마크다운은 개발자가 AI 에이전트에 직접 붙여넣기 할 수 있습니다.
* 폭넓은 호환성: Claude Code, Cursor, Codex, OpenCode, Antigravity와 같은 코딩 에이전트뿐만 아니라 ChatGPT, Gemini, Copilot과 같은 대화형 AI, v0, Bolt, Lovable과 같은 비주얼 생성 AI, Ollama 또는 LM Studio를 통해 실행되는 로컬 LLM 등 텍스트 입력을 받는 거의 모든 AI 도구와 호환됩니다.
* 로컬 및 프라이버시 중심: 모든 스크린샷, 노트, 내보내기 데이터는 브라우저를 벗어나지 않으며, 아웃바운드 요청, 원격 분석, 추적, 계정, 클라우드 동기화가 전혀 없습니다.
* 무료 및 오픈: 유료 티어 없이 영구적으로 무료로 제공되며, 모든 Chromium 기반 브라우저에서 작동하고 Firefox 지원도 로드맵에 있습니다.
* 사용 방법: Chrome 웹 스토어에서 Markagent를 설치하고, Cmd+Shift+. (Mac) 또는 Ctrl+Shift+. (Windows/Linux) 단축키를 눌러 툴바를 활성화한 후, Cmd 또는 Ctrl 키를 누른 상태로 UI 요소를 클릭하고 노트를 남기면 됩니다.

시사점

Markagent는 AI 코딩 에이전트와의 상호작용에서 발생하는 불필요한 텍스트 입력 과정을 최소화하고, UI 관련 피드백의 정확성과 효율성을 극대화하여 개발 및 협업 프로세스를 개선할 수 있는 잠재력을 지닙니다.