AI Fix Prompt Helper

• Free text: describe the change in your own words
• Text change: replace all, or a partial before/after edit
• Color change: enter a hex code, pick a color from the screen with the eyedropper, or choose from the colors already used on the page
• Image swap: specify the replacement file name

3. See your changes highlighted Registered elements get an orange outline and a numbered badge, so you can see at a glance what is being changed. Jump to an element from the list, edit it, or delete it individually.

4. Work at phone and tablet widths Without resizing your window, the page is embedded as a 375px (SP) or 768px (Tablet) preview. You can select elements inside the preview exactly as you would on the full page, so responsive issues are easy to catch.

• Device simulation with real iPhone and iPad dimensions
• "Reproduce mobile browser" mode that includes the Safari or Chrome UI bars in the visible area
• A list of breakpoints detected from the page's own CSS - click one to preview at that width

5. Copy the prompt in one click All registered changes are turned into a fix-instruction prompt an AI can act on directly, and copied to your clipboard. Paste it into your AI tool of choice. Each location is pinned down by its path (domain stripped) and CSS selector, along with the viewport width it was captured at.

6. Site-wide instructions Add rules that apply to the whole site (for example, "only change HTML and CSS, leave JavaScript alone") and they are inserted at the top of the prompt. For shared elements like headers, footers, and CTAs, tick "Make this a global instruction" on an individual change and it is output as "Scope: all pages on the site". These are saved per domain and shared across pages of the same site.

◆ Nice touches

• Japanese and English interface, with the prompt output following the language you pick (existing changes are re-translated correctly when you switch)
• Copy image file names: click any image to copy just the file name (for example, hero.png), with support for img tags, CSS backgrounds, SVG, and object/embed
• Display options: hide the WordPress admin bar, or hide images to check layout. Both are view-only and never affect the prompt
• Changes are saved per URL inside your browser and restored when you reload or come back later
• Works on file:// pages and local servers (127.0.0.1 and friends), so you can use it while developing locally
• A reset button clears every change on the page, with a two-step confirmation to prevent accidents
• CSS selector, XPath, and element tag can each be copied on their own
• Drag the panel anywhere you like; press Esc to cancel selection mode or close a dialog

◆ Privacy

• Nothing about your browsing or your notes is ever sent anywhere. Everything stays in your browser.
• No account required.

◆ How to use 1. Open the page you want to change and click the toolbar icon 2. Click "Select an element to add a change", then click the element you want to change 3. Choose a change type, fill it in, and save 4. Click "Copy prompt" and paste it into your AI tool

Note: to use it on local file:// pages, open chrome://extensions, go to this extension's details, and turn on "Allow access to file URLs". Note: some sites block embedding (X-Frame-Options / CSP), so the SP and Tablet preview may not be available there. Selection on the normal desktop view still works. Note: the eyedropper requires Chrome 95 or later.