How to Add Numbered Annotations to Screenshots for AI

Why numbered annotations help AI

When you paste a screenshot into Claude, Cursor, or ChatGPT, the AI can see the image—but it cannot read your mind about which specific element you want changed. Try describing “the button in the top right” and you will quickly run into problems: there might be two buttons up there, or the AI might interpret “top right” differently than you intended.

Numbered annotations solve this by creating an unambiguous reference system. Each element gets a unique number, and your prompt can reference those numbers directly. Instead of writing a paragraph describing which element you mean, you write “Fix element #3” and the AI knows exactly what you are pointing at.

The ambiguity problem in practice

Consider a typical dashboard UI with multiple cards, buttons, and navigation elements. Without annotations, you might write a prompt like:

The AI has to guess which card you mean, which button is “below it,” and what you consider “the header area.” This often results in the wrong element being modified, wasting a round-trip.

Three instructions, zero ambiguity, one round-trip. The AI can map each number to the corresponding visual element in the screenshot and generate the correct code changes.

Why this matters for AI coding assistants specifically

AI coding tools like Cursor and Claude operate on code, not pixels. When they see a numbered element in your screenshot, they need to translate that visual reference into a specific component, CSS class, or DOM element in your codebase. The clearer your reference, the more likely they are to find the right target on the first attempt.

Numbered annotations also enable multi-element instructions in a single prompt. You can describe relationships between elements (“Move #1 below #3, and align #2 to the left edge of #4”) without writing an essay about where each element is located.

The manual way: text tool and hand placement

Before dedicated annotation tools existed, the standard approach was to open your screenshot in an image editor and manually place numbers using the text tool. This works, but it has significant friction.

Using macOS Preview

Open your screenshot in Preview, click the Markup toolbar button, select the text tool, type a number, then drag it into position. Repeat for each element. You will need to:

• Manually type each number and position it precisely over the correct element
• Adjust font size so the number is readable but does not obscure the UI
• Add a background shape behind each number so it is visible against varying backgrounds
• Keep track of which number you are on (Preview does not auto-increment)
• Re-do the work if you need to add a number between existing ones

Using Figma or Sketch

Design tools give you more control. You can create a numbered circle component and stamp it around the screenshot. This produces cleaner results, but the overhead is even higher—you need to import the screenshot, create or find the component, and manually place each instance. For a quick question to your AI assistant, this is overkill.

Using browser developer tools

Some developers skip annotations entirely and instead try to describe elements by their CSS selectors or DOM paths. This works when you know the codebase well, but it defeats the purpose of using a screenshot for visual context in the first place.

The common thread

Every manual method involves the same core problem: the time to annotate a screenshot is disproportionate to the time saved by having clear references. If it takes 2 minutes to add numbered markers, you might just write a longer text description instead—and accept the ambiguity that comes with it.

LazyScreenshots numbered annotation tool

LazyScreenshots includes a purpose-built numbered annotation tool designed specifically for AI coding workflows. The idea is simple: click on an element, and a numbered marker appears. Click on another element, and the next number appears. No menus, no font selection, no manual positioning.

Design decisions that matter for AI

The numbered markers in LazyScreenshots are optimized for AI vision models. They use a consistent size, a high-contrast color scheme, and clear typography. This matters because AI models need to reliably read the numbers in the image to map them to your prompt references.

The markers are also positioned with a slight offset so they point to the element without fully obscuring it. This lets the AI see both the marker and the underlying UI element it refers to.

Workflow in practice

A typical numbered annotation workflow with LazyScreenshots looks like this:

1. Press your screenshot shortcut to capture the relevant area
2. The LazyScreenshots editor opens with the capture
3. Select the numbered marker tool from the toolbar
4. Click on each UI element you want to reference—markers 1, 2, 3, etc. appear automatically
5. Press Enter or click Done to copy the annotated screenshot to your clipboard
6. Paste directly into Claude, Cursor, ChatGPT, or any AI tool that accepts images

The entire process takes seconds, not minutes. And because the markers are standardized, AI models learn to recognize and interpret them reliably.

Prompting patterns that work with numbered screenshots

Having numbered elements in your screenshot is only half the equation. The way you write your prompt determines how effectively the AI uses those references. Here are proven patterns that consistently produce good results.

Pattern 1: Direct element reference

This is the simplest pattern. Point at one element, describe one change. It works well for quick fixes and single-property adjustments.

Pattern 2: Relative positioning

Numbered references make spatial relationships trivial to describe. Instead of explaining which element should move where, you just reference the numbers. This pattern is especially useful for layout restructuring.

Pattern 3: Batch changes

This pattern lets you pack multiple instructions into a single prompt. Each instruction maps to a specific numbered element, so the AI can process them independently without confusion.

Pattern 4: Comparison reference

When you want consistency between elements, numbered references let you express “make X look like Y” without describing what either element looks like. The AI can see both elements in the screenshot and infer the target styles.

Pattern 5: Conditional instructions

For interactive behavior, numbers let you reference the trigger element and the target element clearly. This is much harder to communicate with text descriptions alone.

When to use numbers vs arrows vs text

Numbered annotations are powerful, but they are not always the best choice. Different annotation types serve different communication goals.

Use numbered markers when:

• You need to reference multiple specific elements in your prompt
• You are giving batch instructions that affect different parts of the UI
• You want to describe relationships between elements (move #1 next to #3)
• You are working with a complex layout where text descriptions would be ambiguous

Use arrows when:

• You want to draw attention to one area without a reference system
• You are showing direction or flow (data moves from here to there)
• You need to point at something small or easy to miss

Use text annotations when:

• You want to add inline context that the AI should read directly from the image
• You are leaving notes for a human reviewer, not an AI
• The annotation needs to contain specific values (like “should be 24px”)

Combining annotation types

The most effective screenshots often combine multiple annotation types. You might use numbered markers for elements you want to reference in your prompt, an arrow to indicate scroll direction, and a text note to specify an exact color value. LazyScreenshots supports all of these annotation types in a single editing session, so you can mix and match as needed.

The key principle: choose the annotation type that makes your prompt shorter and less ambiguous. If numbered markers let you write “Fix #2” instead of a three-sentence description, use numbers. If a single arrow communicates the same thing, use an arrow.