웹 UI 수정할때 원하는 컴포넌트를 특정해주기 귀찮아서 대충 설명으로 컴포넌트를 체크해줬는데요.
직접 마우스로 컴포넌트를 선택해서 Claude code 나 Codex 등 한테 직접 컴포넌트 내용을 전달해줄 수 있는 툴이 나왔습니다.
사용법도 매우 간단합니다.
(아마 Cursor 에서 웹브라우저 기능으로 컴포넌트 선택해보신 분들은 어떤느낌이신지 아실 것 같아요.)
* 설치
프로젝트 루트(vite.config.ts 또는
next.config.ts가 있는 곳)에서:
npx grab@latest init
수동 설치(Vite 기준)면 메인 엔트리 파일에:
if (import.meta.env.DEV) {
import("react-grab");
}
* 사용법
1. npm run dev로 개발 서버 실행
2. 브라우저에서 원하는 UI 요소에 마우스를 올린
뒤
3. ⌘C (Mac) / Ctrl+C (Win·Linux) 누르면 → 그
요소의 파일 경로·React 컴포넌트·HTML이
클립보드에 복사됨
4. Claude Code / Cursor 채팅창에 붙여넣고 수정
요청