AIに「ここ直して」を言葉で説明して往復するの、もう終わりにしませんか？ このツールは、Webページ上で狙った要素（＝狙ったCSSの対象）をクリックで選択し、変更したい内容をメモするだけで、CSS修正用のプロンプト（指示文）を自動生成できる“Debug Map”です。スクショ・長文説明・「どのpadding？」問題を減らして、修正依頼が一気に正確＆爆速になります。 【できること】 ・要素をクリックで選択（複数選択OK） ・変更内容をメモして管理 ・selector付きプロンプトを自動生成→コピー ・必要ならcomputed style（現状値）も一緒に出力 ・メモやパネル位置をページごとに自動保存（localStorage） 【こんな人におすすめ】 ・AIにCSS修正を頼む時、伝わらなくて何往復もしてしまう ・自分で直したいけど、どの要素のCSSか特定が面倒 ・ChatGPT等に修正依頼する時、プロンプトを毎回整えるのがダルい ・チーム制作・受託で、修正指示の精度とスピードを上げたい 【使い方（3ステップ）】 1）HTMLにdebug-loader.jsを1行追加（普段は動きません） 2）URL末尾に?debug=1（または?debug）で起動 3）選ぶ→書く→Copy Promptで完成（そのままAI/制作者へ送信） 【出力されるプロンプト例（イメージ）】 page: /about.html changes: * selector: ... * note: 文字サイズを小さく、行間を少し詰める * current: fontSize: 16px; lineHeight: 28px; … 【納品物】 ・ツール一式（JS/CSS）＋かんたん導入ガイド 【購入後の流れ】 1. ツール一式をお渡し 2. あなたのサイトに設置（手順通りにコピペ） 3. すぐ使えます（不明点はメッセージでサポート） 【注意】 ・静的HTML/一般的なWebサイトで使用可（外部ライブラリ不要） ・?debugが付いた時だけ起動 ・SPA等はURL仕様により保存単位が変わる場合があります