Claude Code나 Cursor로 프론트엔드 (Frontend)를 다루다 보면 은근히 번거로운 일이 있습니다.

고치고 싶은 내용은 바로 알고 있는데, AI에게 "어떤 UI를 말하는 것인지" 설명하는 것이 귀찮다는 점입니다.

예를 들어 화면을 보고 있는 저로서는,

"이 버튼을 조금 더 눈에 띄게 하고 싶어"

정도로 충분합니다.

하지만 AI 입장에서는 "이 버튼"이 무엇인지 알 수 없습니다. 비슷한 버튼이 여러 개 있거나, 별도의 컴포넌트 (Component)로 나누어져 있으면 엉뚱한 곳을 고치는 경우도 있습니다.

그래서 지금까지는 스크린샷을 찍거나, 빨간 테두리를 그리거나, DevTools를 열어 selector를 복사하거나, 주변 텍스트나 URL을 설명하곤 했습니다.

매번 하기에는 조금 번거롭습니다.

그래서 Prompt Picker라는 Chrome 확장 프로그램을 만들었습니다.

Chrome Web Store:

Bitmap1.png

Prompt Picker는 페이지 위의 요소를 클릭하여, 해당 요소의 정보를 포함한 프롬프트 (Prompt)를 복사하기 위한 확장 프로그램입니다.

사용법은 다음과 같습니다.

• 수정하고 싶은 페이지를 연다
• Alt / Option + Q를 누른다
• 고치고 싶은 버튼, 카드, 폼 (Form) 등을 클릭한다
• "여백을 넓히고 싶어", "색을 조금 더 진하게 하고 싶어"와 같이 메모를 작성한다
• 복사한 프롬프트를 Claude Code / Cursor / Codex 등에 붙여넣는다

복사되는 프롬프트에는 사용자의 메모뿐만 아니라, AI가 대상을 찾기 위한 단서도 포함됩니다.

예를 들어 다음과 같은 정보입니다.

• 선택한 DOM 요소
• selector 같은 단서
• 근처에 있는 텍스트
• 현재 열려 있는 페이지의 URL / path
• 사용자가 작성한 수정 지시 사항

요컨대,

"오른쪽 버튼을 크게 해줘"

와 같은 모호한 설명을, AI가 코드상에서 조금 더 찾기 쉬운 형태로 만들기 위한 것입니다.

AI 코딩 툴은 매우 편리하지만, UI 수정의 경우 "화면상으로는 한눈에 알 수 있는데, 말로 설명하기는 어려운" 경우가 자주 발생합니다.

• 이 버튼
• 여기 카드
• 이 입력란
• 모바일 화면에서 깨져 있는 이 부분

사람끼리라면 화면을 가리키면 끝날 일이지만, AI에게 부탁할 때는 조금 더 정보가 필요합니다.

Prompt Picker는 그 "화면상의 이것"을 AI가 코드베이스 (Codebase) 내에서 찾기 쉬운 정보로 변환해 주는 작은 도구입니다.

저는 다음과 같은 상황에서 사용하고 있습니다.

• UI의 세밀한 조정을 AI에게 맡길 때
• 디자인 리뷰 (Design Review) 지적 사항을 그대로 태스크 (Task)로 만들고 싶을 때
• 한 페이지 내에서 여러 수정 사항을 포착하고 싶을 때
• 스크린샷과 DevTools를 왔다 갔다 하고 싶지 않을 때

특히 버튼이나 카드가 많은 화면에서는 "어떤 것을 말하는 거지?"라는 어긋남이 줄어들어 편리합니다.

Prompt Picker는 아주 거대한 개발 도구라기보다, AI에게 UI 수정을 요청할 때 발생하는 작은 스트레스를 줄이기 위한 Chrome 확장 프로그램입니다.

"이 UI를 고쳐줘"라고 말하고 싶을 뿐인데, 그 설명에 시간을 뺏기는 것이 싫어서 만들었습니다.

Claude Code, Cursor, Codex 등을 사용하여 프론트엔드를 자주 다루시는 분들은 괜찮다면 한번 사용해 보세요.

Chrome Web Store: