Skip to content

Marking up what you send

“Make this bigger and the blue one darker” is a sentence an agent cannot act on. So you write a paragraph describing where things are, or you send a screenshot and hope the agent finds what you meant.

Offsite puts a small editor in front of every image you send. Draw a shape, Offsite numbers it, you write one line per number. The agent gets the marked picture and the notes as text (“1: make this bigger, 2: dark blue”), with the numbers on the image matching the numbers in the list.

The editor sits in front of the upload, on every path that sends an image:

You do this On
Drop images onto an agent card macOS
Upload Files from the card’s action pill macOS
Upload from the command bar — photo library, camera, files iPhone, iPad
Mark an area in a Browser or Agent Browser card macOS, iPhone, iPad

Non-images skip it entirely and upload as before.

Pick a tool (circle, rectangle, arrow or freehand) and drag it over the part you mean. A click without dragging drops the shape at default size. Every shape gets a numbered dot at its top-left corner, in the order you drew them; delete one and the rest renumber, so the agent never reads a list with gaps.

Tap a dot to open the comments panel and write the line that belongs to it. A dot with a comment turns black, so you can see at a glance what you have already described.

The top row of the panel is marker 0: the whole image. Use it for the sentence that applies to everything, like “home screen after login, dark mode”, with or without any shapes at all.

Sending several images at once puts a strip along the bottom. Each image keeps its own shapes and its own comments; switching between them saves as you go. Then Upload sends the batch.

On macOS: V for select, 14 for the tools, ⌘Z / ⇧⌘Z, to delete the selected shape, / to walk through them.

The shapes are burned into the image at full resolution, and the comments travel as a plain block of text that is pasted into the session next to the file paths:

----- Attached images -----
A detail from a page in my browser, plus the page around it.
2 images; the numbered markers in each picture match the notes below it.
## Image 1: browser-mark-….png
/…/uploads/ab12-browser-mark-….png
- Overall: home screen after login, dark mode
- Marker 1: make this bigger
- Marker 2: dark blue
- Marker 3: (marked - see the picture)
## Where this comes from
- Page: Offsite — http://localhost:3000/
- Selector: main.site > div.page > section.bento
- To see it yourself: web_open http://localhost:3000/ in your Agent Browser.
----- end of attached images -----

The block is fenced so an agent reads it as an attachment rather than as a truncated prompt. And when the image came from a browser card, it carries the page it came from plus a line telling the agent how to open that page in its own browser.

Nothing is submitted. The text lands in the session’s prompt, and you press Enter, as with every other upload.

If you add no comment anywhere in the batch, no text block is generated at all: you get the plain paths, the way an upload has always worked. Your drawings are still burned into the image.

Settings → Annotate images before sending, on macOS and on iPhone. Off, every entry point uploads directly again. The editor is also on the upload dialog itself, so you can switch it off in the moment it gets in your way.

  • Images are PNG, JPEG, HEIC, WebP or TIFF. Anything else never sees the editor.
  • The marked image is the one that travels: what you see in the editor is the file the agent gets.
  • Images larger than 2048 px on the long edge are scaled down after the shapes are burned in, so the numbers stay sharp while a 10 MB retina screenshot does not have to travel.
  • Shapes are stored in normalized coordinates and rendered by the same code that draws the preview and the final file, so what you see is what the agent gets.
  • Marker numbers are white dots with a black border, black once commented. The colors are fixed so they stay readable on any screenshot.