Skip to main content

SuperchargeInspect · Free

Screenshot One Element: A Note for Your AI Coding Tool

Screenshot one element, lock it, and write your note for an AI coding tool. Copy the annotated screenshot, or the clean PNG crop. Local, no account.

Updated

Supreme Bold · 700

Ag

  • Ink
  • Amber
  • Paper
Aa Bb Cc 012392 / 1.0 / −0.028em
or press AltShiftE

Opens the real panel on this page. You can point at anything here.

You want a picture of one button or card, not the whole screen, and you do not want to crop it by hand. SuperchargeInspect is a browser extension that captures one element and adds your note, so an AI coding tool sees what you mean. Point at the element, lock it with Enter, and copy or save a PNG cropped to that element. The crop comes from the visible part of the tab, ready to paste into an AI coding tool, a chat, or a ticket.

Three Ways to Copy the Element Image

The locked element gives you three actions. Two live in the More ways to copy menu. The third is the Copy reference button itself.

ActionWhere it isWhat you get
Copy image onlyMore ways to copy menuThe clean crop on your clipboard
Save PNGMore ways to copy menuThe clean crop as supercharge-inspect.png
Copy referenceMain button or Ctrl+EnterThe text reference plus the annotated PNG in one clipboard item

Copy image only and Save PNG give you the clean crop, with no footer. Copy reference is the annotated element screenshot: one clipboard item with the text reference and the PNG. If the element is not locked yet, Ctrl+Enter (Cmd+Enter on macOS) locks it and copies in one step.

What the Annotated Element Screenshot Shows

Copy reference renders the visible crop on a white background, scaled to fit 1600 x 1200, and adds a footer of labeled rows under it. The rows are Your note, Source, Element and Styles. Source is the page address. Element is the locator for the element. The Styles line carries the first font-family, the font-size and line-height, the font-weight, the text color on the background in hex, the padding and the border-radius.

That footer is what makes it a screenshot with CSS reference: it carries your note and the key styles, so the image explains itself to an AI coding tool. When you paste it into a chat, a ticket or an AI coding tool, the reader does not need the page open to see what you pointed at.

Picking the Right Element

Start an inspection with Alt+Shift+E. Hover over the page, or move with the arrow keys, until you are on the element you want. To screenshot one element and nothing else, stop on the smallest element that holds what you want to show. To get the whole card instead of one label, press Ctrl+Up (Option+Up on macOS) to move to the parent. Move into a child with Ctrl+Down (Option+Down on macOS). Press Enter to lock it, then copy the image.

Only the part of the element that is on screen ends up in the image, so scroll the element into view before you capture it.

The Screenshot Stays on Your Device

The crop is made on your device, from the visible part of the tab. The extension makes no network calls, has no account, and nothing you inspect is sent to any server. The image leaves your device only when you save it with Save PNG or paste it into another app. That app then handles it.

Send the annotated screenshot to an AI coding tool with a note.

Frequently Asked Questions

How do I screenshot one element on a web page?
Start an inspection with Alt+Shift+E or the toolbar button. Hover over the element, or move to it with the arrow keys, then press Enter to lock it. Choose Copy image only in the More ways to copy menu to copy the clean crop, or choose Save PNG to keep it as `supercharge-inspect.png`. Press Ctrl+Enter, or Cmd+Enter on macOS, to copy the reference with the annotated screenshot.
What is the difference between Copy image only and Copy reference?
Copy image only puts the clean crop on your clipboard, with no footer and no text. Copy reference puts one clipboard item with two parts: the text reference and the annotated PNG, the visible crop with a footer of your note, the source, the element and a short styles line. Use the first when you only need the picture, and the second when the picture needs context.
What is in the annotated PNG footer?
Four labeled rows. Your note is the line you wrote after locking the element. Source is the page address. Element is the locator that finds the element. Styles is a short line with the first font family, the size and line height, the weight, the text color on the background in hex, the padding and the radius.
Can it capture an element that is partly off screen?
It captures only the part of the element that is visible in the tab. It does not scroll the page or stitch parts together, so a card that runs below the bottom of the screen is cut off at the edge. Scroll the element into view first, then lock it, and the crop covers the element as it sits on screen.
Does the screenshot get sent anywhere?
No. The crop is made on your device, and the extension makes no network calls. There is no account and nothing you inspect is sent to a server. The image leaves your device only when you save it as a PNG or paste it into another app, and from then on that app handles it.

Related Features

SuperchargeInspect

Show Your AI Coding Tool the Exact Element to Change

Point at the element, add a note, and copy a reference with an annotated screenshot and observed styles, then paste it into the AI coding tool you use today.

SuperchargeInspect

CSS Inspector for Any Element: View and Copy CSS Values

A CSS inspector that lets you view the CSS of any element on a website. Read the font, colors, spacing and box model, then copy CSS values to your clipboard.

SuperchargeCapture

Full Page Screenshot Chrome Extension: The Whole Page, Free

Full page screenshot Chrome extension: capture a whole scrolling page as one tall image. Four modes, PNG/JPG/WebP or PDF, saved locally. Free, no paid tier.