Media
2 items
Description
Click elements on a page to note what to change, then copy a ready-to-paste fix prompt for your AI tool. 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 Claude, ChatGPT, Cursor, or similar AI tools - 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 ◆ 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. 2. Pick a change type - 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.