Claude Code や Cursor でフロントエンドを触っていると、地味に面倒なことがあります。
直したい内容はすぐ分かっているのに、AI に「どの UI のことか」を説明するのが面倒、というやつです。
例えば画面を見ている自分としては、
このボタン、もう少し目立たせたい
くらいで十分です。
でも AI からすると「このボタン」がどれなのか分かりません。似たボタンがいくつもあったり、別コンポーネントに分かれていたりすると、普通に違うところを直されることもあります。
なので今までは、スクショを撮ったり、赤枠を付けたり、DevTools を開いて selector をコピーしたり、周辺のテキストや URL を説明したりしていました。
毎回やるにはちょっと面倒です。
そこで Prompt Picker という Chrome 拡張を作りました。
Chrome Web Store:
https://chromewebstore.google.com/detail/prompt-picker/lgcmgmlbomeodhmikhiphmonogmfdeeg
できること
Prompt Picker は、ページ上の要素をクリックして、その要素の情報を含んだプロンプトをコピーするための拡張です。
使い方はこんな感じです。
- 修正したいページを開く
-
Alt / Option + Qを押す - 直したいボタン、カード、フォームなどをクリックする
- 「余白を広げたい」「色をもう少し強くしたい」みたいにメモを書く
- コピーしたプロンプトを Claude Code / Cursor / Codex などに貼る
コピーされるプロンプトには、自分のメモだけでなく、AI が対象を探すための手がかりも入ります。
例えばこんな情報です。
- 選択した DOM 要素
- selector っぽい手がかり
- 近くにあるテキスト
- 今開いているページの URL / path
- 自分が書いた修正指示
要するに、
右側のボタンを大きくして
みたいな曖昧な説明を、もう少し AI がコード上で探しやすい形にするためのものです。
作った理由
AI コーディングツールはかなり便利ですが、UI 修正だと「画面上では一目で分かるのに、言葉にすると伝えにくい」ことがよくあります。
- このボタン
- ここのカード
- この入力欄
- スマホ表示で崩れているこの部分
人間同士なら画面を指させば終わる話ですが、AI に頼む場合はもう少し情報が必要です。
Prompt Picker は、その「画面上のこれ」を、AI がコードベース内で探しやすい情報に変えるための小さいツールです。
使っている場面
自分では、こんなときに使っています。
- UI の細かい調整を AI に投げるとき
- デザインレビューの指摘をそのままタスクにしたいとき
- 1 ページ内で複数の修正点を拾いたいとき
- スクショや DevTools を行ったり来たりしたくないとき
特に、ボタンやカードが多い画面だと「どれのこと？」というズレが減るので楽です。
まとめ
Prompt Picker は、すごく大きな開発ツールというより、AI に UI 修正を頼むときの小さいストレスを減らすための Chrome 拡張です。
「この UI を直して」と言いたいだけなのに、その説明に時間を取られるのが嫌で作りました。
Claude Code、Cursor、Codex などでフロントエンドを触ることが多い方は、よければ試してみてください。
Chrome Web Store:
https://chromewebstore.google.com/detail/prompt-picker/lgcmgmlbomeodhmikhiphmonogmfdeeg