Visual Feedback for AI Coding Agents: 4 Ways to Show What Is Wrong

Coding agents such as Claude Code and Codex can change code, but they cannot see your screen unless you show them. "The spacing is off" is vague. A screenshot with a box around the spot is clear. This guide compares four ways to give visual feedback, and says when each one fits.

We make Quibble, a Mac screen recorder. It is one of the four options.

What the agent needs

For a fix, an agent needs three things:

1. What you see. The screen, as an image.
2. Where. The exact spot, as a box on the image, a selected page element, or x and y numbers.
3. What you want. A sentence: "Make Cancel a light gray secondary button."

Every method below gives some of these. They differ in how much you must do by hand.

Way 1: Paste a screenshot

The simplest way. Both tools take images. Anthropic's Claude Code docs list dragging an image into the window, pasting with Ctrl+V, or giving a file path. OpenAI's Codex CLI page says you can pass an image with codex --image with the first prompt, or paste an image into the interactive composer.

• Good for: one or two problems.
• Weak at: many problems. You take, name and explain each screenshot yourself.

Steps are in how to show Claude Code a bug with a screenshot or recording.

Way 2: Annotate the live page in your browser

Some tools let you click on a running web page and leave a note on an element. One example is Vibe Annotations. Its own site describes it as a free, source-available Chrome extension and local MCP server. You click an element on a local page, add a note, a design edit or a screenshot, and hand the queue to your agent. The site says each annotation captures the DOM selector, the React or Vue component and the source file. Setup has two parts: the browser extension and a local server whose configuration you add to your coding agent. The site lists Claude Code, Cursor, Windsurf and GitHub Copilot, and shows Codex in its examples.

• Good for: web apps running locally in a Chromium browser, where element and source details help the agent find the code.
• Weak at: things that are not a web page in the browser, such as a native Mac app, a video or a design file.

We have not tested Vibe Annotations ourselves. These facts come from its website.

Way 3: Record a video, and let a tool turn it into a prompt

You record your screen and talk. Then a tool changes the recording into text for an agent.

• Loom Record for agent. Atlassian's support page says it turns a recording into a structured prompt, with a transcript, keyframes, clicks and visited URLs, and in the Chrome extension, console and network logs. It is in open beta for Business + AI and Enterprise plans, with a five-minute limit. See Loom for Claude Code.
• Quibble. See Way 4.

• Good for: a long review where speaking is faster than typing.
• Weak at: you need to check that the notes say what you meant.

Way 4: Record on a Mac and copy the notes

Quibble records your Mac screen and microphone. While you record, you hold Command and draw over something and say what is wrong. Each remark becomes a note with a time and a thumbnail, and the highlight keeps the spot. Then Copy for AI agent (Shift-Command-C) copies one block of text: an instruction, each note, the x and y spot for highlighted notes, and the screenshot file paths.

1. Press Option-Command-R to start recording.
2. At each problem, hold Command and move the mouse to draw a yellow highlight, and say what is wrong.
3. Press Option-Command-R to stop. The editor opens with your notes.
4. Click Copy for AI agent.
5. Paste into Claude Code or Codex in your project folder to ask it to fix the items.

Quibble only copies the text. It does not send it anywhere and does not change your code. In our short test, two notes on a small login page, both Claude Code and Codex changed the misspelled label and restyled the Cancel button. That is one small page, so treat it as an example, not a promise.

• Good for: many small notes in a Mac app, a web app or a design on screen, with the files kept on your Mac.
• Weak at: Mac only (Apple silicon, macOS 15 or later). No element or source-file details like a browser tool. No share links or cloud.

Recording and editing are free. Copy for AI agent works without a license. Saving the finished video as MP4 needs a license ($7.99 per month, $79 per year or $129 once).

Compare the four

Which should you use?

• One quick problem: paste a screenshot.
• A web app you run locally, and you want the agent to get element and file details: a browser annotation tool.
• A team that already uses Loom Business + AI: Record for agent.
• A Mac developer or designer with ten notes on a Mac app, and you like to talk: Quibble.

You can mix them. For sending a video to a person, see how to record a bug report video on Mac.

Frequently asked questions

How do I give visual feedback to Codex?

Attach a screenshot. The Codex CLI page says to use codex --image with the first prompt, or paste an image into the interactive composer. For many notes, you can paste text copied from Quibble that lists screenshot file paths.

Can I give Claude Code visual feedback?

Yes. Anthropic's docs list dragging an image in, pasting with Ctrl+V, or giving a file path.

Do I need an MCP server?

Not for screenshots or for Quibble. A browser tool such as Vibe Annotations uses a local MCP server, per its site.

Does Quibble run inside my coding agent?

No. Copy for AI agent copies text to your clipboard. You paste it. Nothing is uploaded.

Will the agent always get it right?

No. An agent can misread a note. Review its changes before you commit.

Sources

• Anthropic: Claude Code common workflows, "Work with images"
• OpenAI: Codex CLI
• Vibe Annotations: vibe-annotations.com
• Atlassian: Record for AI agents (Loom)
• Quibble: getquibble.app

---