AI Fix Prompt Helper

Explaining "change this wording, fix that color" to an AI is harder than it sounds. This extension lets you build a fix-instruction prompt for an AI-generated web page (landing page, prototype, and so on) just by clicking around the page itself. ◆ Who it's for - Anyone building or revising web pages with an AI assistant, whether chat-based or editor-based - Anyone who struggles to put "which element, changed how" into words - Anyone with a long list of fixes who wants nothing to slip through the cracks - Anyone fixing mobile and tablet layouts alongside the desktop view - Anyone who wants to confirm the AI actually applied the changes ◆ Main features 1. Click an element to register a change Click the toolbar icon to open the panel. In element-selection mode, click the spot you want to change and the extension works out its location (CSS selector and XPath) for you. Click again to re-target while the dialog is open, or Shift-click to bundle several elements into a single change. 2. Pick a change type - Free text: describe the change in your own words - Text change: replace all, or a partial before/after edit - with an optional font-size change - Color change: enter HEX or RGB, pick a color from the screen with the eyedropper, or choose from the colors already used on the page - Spacing: type margin, padding, and gap values straight into a box-model diagram - Image swap: specify the replacement file name Font size, color, and spacing are live-previewed on the real page while you type (closing the dialog reverts everything - the page itself is never modified). 3. See your changes highlighted Registered elements get a red outline and a numbered badge, so you can see at a glance what is being changed. Click a row in the list to scroll to the element and edit it, or delete it individually. Highlights are drawn as an overlay, so the element's own styles are never touched. 4. One instruction for repeated elements For list items, cards, and other repeated elements, choose "All similar elements (N)" to highlight every match in orange and request the same change across all of them at once. 5. Work at phone, tablet, and laptop widths Without resizing your window, the page is embedded as a device-width 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 the real screen dimensions of popular phones and tablets - Device bezels, including notch and Dynamic Island shapes - "Reproduce mobile browser" mode that includes the Safari or Chrome UI bars in the visible area - Laptop screen sizes (13.3 / 14 / 15.6 inch equivalents) - A list of breakpoints detected from the page's own CSS - click one to preview at that width 6. 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 - or marked "all screen sizes" when the fix is not width-specific. 7. Check whether the fix landed A snapshot of the element (text, key styles, image, structure) is saved when you register a change. Reopen the page after the AI has edited it and each row shows a "Fixed" or "Unchanged" badge. Click the badge for a before/after diff list, or press "Use the current state as the baseline" to start the next round of changes from here. Where Chrome's built-in AI (Gemini Nano) is available, the instruction and the diff are compared to judge whether the change matches what you asked for: fixed as instructed, changed but different from the instruction, or unchanged (dynamic-content noise). This runs entirely on your device - nothing is sent anywhere. 8. 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 (shown when "Expert mode" is on in the settings menu). ◆ Nice touches - Japanese and English interface, with the prompt output following the language you pick (existing changes are re-translated correctly when you switch) - Deleted changes go to a history list and can be restored at any time (up to the 300 most recent, across all sites) - 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 - Copy ID/XPath: click an element to copy the best identifier for it - id, then a unique CSS selector, then XPath - Display options: hide the WordPress admin bar, hide images to check layout, or hide the highlights. All 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, or minimize it; press Esc to cancel selection mode or close a dialog - Site info: the ⓘ icon in the panel lists the CMS, JavaScript libraries and CSS frameworks used on the page, with versions where available, and can copy the list as text to paste into your prompt - SEO check: the "SEO check" tab in the same ⓘ menu shows the number of pages Google has indexed (site: search count), the server (hosting provider estimate / IP address), meta description, favicon, OGP image and whether Google Analytics is installed — missin…