問題の発見から
修正まで — わずか数秒
VibeWebHelper は AI が UI 変更を理解するために必要なすべてをキャプチャします — 要素の文脈、セレクター、HTML 構造、そしてあなたの指示。
Shift+クリックでキャプチャ
Shift を押しながら要素をクリックするだけ。CSS セレクター、XPath、HTML スニペット、周辺の文脈を瞬時に取得します。
ページ内ダイアログ
クリックした要素のすぐ横に軽量なダイアログが表示されます。自然な言葉で指示を入力 — コンテキストの切り替えは不要です。
AI 向けプロンプト
URL、フレームワーク情報、セレクター、HTML、指示を含んだ完全な Markdown プロンプトをワンクリックで生成。Claude や ChatGPT にそのまま貼り付けられます。
サイドパネルで管理
キャプチャしたすべての編集は Chrome のサイドパネルに集約。エクスポート前に確認・編集・削除できます。
Markdown & JSON エクスポート
編集ドラフトを人が読める Markdown または構造化 JSON でエクスポート。チーム共有や開発パイプラインへの投入も簡単です。
プライバシー最優先の権限
デフォルトでは localhost のみで動作。外部サイトではサイトごとに許可を付与します。データがブラウザ外へ送信されることは一切ありません。
3ステップで優れた UI プロンプトを生成
キャプチャ
ローカルの開発サイトを普段通り閲覧。修正したい箇所が見つかったら、Shift を押しながらクリック。要素がハイライトされダイアログが開きます。
指示を記述
変更したい内容を自然な言葉で入力。具体的でも大まかでも構いません。ページ全体の複数箇所をキャプチャできます。
エクスポート
生成されたプロンプトをクリップボードにコピー、または Markdown/JSON でダウンロード。AI アシスタントに貼り付けて完成です。
思考のスピードで
UI の改善を届ける
インストールをクリックして GitHub から VibeWebHelper を入手。無料、オープンソース、プライバシー優先。localhost ですぐに使えます。