# How to Add Numbered Annotations to Screenshots for AI www.lazyscreenshots.com publishes a public search API over its indexed pages; the guide is at https://www.lazyscreenshots.com/agent-access. Source: https://www.lazyscreenshots.com/guides/how-to-add-numbered-annotations-to-screenshots/ Source observed: 2026-09-19T03:00:35.688Z Last checked: 2026-09-21T09:23:18.58+00:00 Indexed: 2026-09-19T03:03:22.268+00:00 --- # How to Add Numbered Annotations to Screenshots for AI We show how to add numbered markers to screenshots so AI coding assistants can identify the exact interface elements you want to change. Numbered references reduce ambiguity when you work with Claude, Cursor, ChatGPT, or another AI tool that accepts images. ## Why numbered annotations help AI AI can see a screenshot but cannot know which element you mean by descriptions such as “the button in the top right.” A numbered annotation gives every referenced element a unique identifier, allowing prompts such as “Fix element #3.” Without numbers, a prompt might say: > “The card on the right side has too much padding, and the button below it should be wider. Also, the text in the header area needs to be darker.” The AI must guess which card, button, and header area you mean. With numbers, the same work can be expressed precisely: > “Reduce padding on #2 by 8px. Make #4 full-width. Change #1 text color to neutral-800.” Numbered references also support relationships and multi-element instructions, such as: > “Move #1 below #3, and align #2 to the left edge of #4.” AI coding tools operate on code rather than pixels. A clear visual reference helps them map an annotated element to the appropriate component, CSS class, or DOM element. ## The manual way: text tool and hand placement Before a dedicated annotation tool, we placed numbers manually in an image editor. ### Using macOS Preview Open the screenshot in Preview, select the Markup toolbar, choose the text tool, type a number, and drag it into position. For each element, you must: - ✗ Type and position every number manually. - ✗ Adjust the font size so the number remains readable without obscuring the interface. - ✗ Add a background shape so the number remains visible on different backgrounds. - ✗ Track the sequence yourself because Preview does not auto-increment numbers. - ✗ Repeat the work if you need to insert a number between existing markers. ### Using Figma or Sketch Figma and Sketch provide more control. You can create a numbered circle component and stamp it across the screenshot, but you must import the screenshot, create or find the component, and place every instance manually. For a quick AI question, this adds unnecessary overhead. ### Using browser developer tools You can describe elements with CSS selectors or DOM paths instead of annotating the screenshot. That can work when you know the codebase well, but it removes much of the visual context that makes screenshots useful. ### The common thread Manual annotation can take disproportionate time. If adding numbered markers takes 2 minutes, you may choose a longer text description instead and accept the ambiguity. ## LazyScreenshots numbered annotation tool We built a numbered annotation tool for AI coding workflows. Click an element and a numbered marker appears. Click another element and the next number appears—without menus, font selection, or manual positioning. ### How it works After capturing a screenshot with LazyScreenshots, select the numbered marker tool. Each click adds a circular, auto-incrementing marker. Markers use a solid background and high contrast so they remain readable on light and dark interfaces. ### Design decisions that matter for AI The markers use a consistent size, high-contrast colors, and clear typography to help AI vision models read the numbers and connect them with your prompt. A slight offset points each marker at its target without fully covering the underlying interface. ### Workflow in practice 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 each interface element you want to reference; markers 1, 2, 3, and so on appear automatically. 5. Press **Enter** or click **Done** to copy the annotated screenshot to your clipboard. 6. Paste it into Claude, Cursor, ChatGPT, or another AI tool that accepts images. ## Prompting patterns that work with numbered screenshots Numbered markers work best when your prompt directly connects each instruction to a marker. ### Pattern 1: Direct element reference **Single element change** > “Fix the font size on #2. It should be 16px, not 14px.” Use this for a quick fix or a single-property adjustment. ### Pattern 2: Relative positioning **Layout changes** > “Move #1 below #3. Keep the same horizontal alignment.” Numbered references make spatial relationships concise and are useful for layout restructuring. ### Pattern 3: Batch changes **Multiple elements, one prompt** > “Make these changes: #1 needs 24px bottom margin. #2 and #3 should have the same width. Remove #4 entirely. Change #5 background to gray-100.” Each instruction maps to a specific element, allowing several changes in one prompt. ### Pattern 4: Comparison reference **Style matching** > “Make #3 look like #1. Same font size, weight, and color.” This lets the AI compare both visible elements without requiring you to describe their styles. ### Pattern 5: Conditional instructions **State-dependent changes** > “When #1 is hovered, show #2 with a fade-in animation. When #1 is clicked, replace #2 content with a loading spinner.” Use numbers to identify both the trigger and target for interactive behavior. ## When to use numbers vs arrows vs text Different annotation types serve different purposes. ### Use numbered markers when: - You need to reference multiple specific elements. - You are giving batch instructions across different parts of the interface. - You need to describe relationships between elements, such as moving #1 next to #3. - The layout is complex and an ordinary text description could be ambiguous. ### Use arrows when: - You want to draw attention to one area without creating a reference system. - You want to show direction or flow. - You need to point at something small or easy to miss. ### Use text annotations when: - You want the AI to read inline context directly from the image. - You are leaving a note for a human reviewer. - The annotation must contain a specific value, such as “should be 24px.” ### Combining annotation types We support numbered markers, arrows, shapes, and text annotations in one editing session. For example, use numbered markers for elements referenced in your prompt, an arrow for scroll direction, and a text note for an exact color value. Choose the annotation type that makes the prompt shorter and less ambiguous. ## Annotate screenshots for AI in seconds We provide numbered markers, arrows, shapes, and text annotations for AI coding workflows: - ✓ Click-to-place numbered markers with auto-increment. - ✓ High-contrast markers readable by AI vision models. - ✓ Arrows, rectangles, and text annotations in the same editor. - ✓ One-keystroke paste into Claude, Cursor, or ChatGPT. [Try LazyScreenshots — $29 one-time](https://www.lazyscreenshots.com/) ## Related guides - [How to Paste a Screenshot into ChatGPT, Claude & Cursor](https://www.lazyscreenshots.com/guides/how-to-paste-screenshot-into-chatgpt/) - [How to Annotate Screenshots on Mac](https://www.lazyscreenshots.com/guides/how-to-annotate-screenshots-on-mac/) - [How to Add Arrows & Shapes to Screenshots on Mac](https://www.lazyscreenshots.com/guides/how-to-add-arrows-and-shapes-to-screenshots/) ## More LazyScreenshots links - [Features](https://www.lazyscreenshots.com/#demos) - [vs CleanShot X](https://www.lazyscreenshots.com/vs-cleanshot/) - [vs Shottr](https://www.lazyscreenshots.com/vs-shottr/) - [vs Snagit](https://www.lazyscreenshots.com/vs-snagit/) - [vs Xnapper](https://www.lazyscreenshots.com/vs-xnapper/) - [vs Monosnap](https://www.lazyscreenshots.com/vs-monosnap/) - [vs macOS Built-in](https://www.lazyscreenshots.com/vs-macos/) - [All comparisons](https://www.lazyscreenshots.com/compare/) - [Guides](https://www.lazyscreenshots.com/guides/) - [Blog](https://www.lazyscreenshots.com/blog/) - [Reddit Reviews](https://www.lazyscreenshots.com/reddit/) - [Buy ($29)](https://buy.stripe.com/fZu00k3Lc7I87ip7CNawo05) - [Contact](mailto:ali@lazyweb.com) - [Privacy](https://www.lazyscreenshots.com/privacy/) - [Terms](https://www.lazyscreenshots.com/terms/) --- [Read this page’s summary](https://www.lazyscreenshots.com/api/public/v1/page-tldr?url=https%3A%2F%2Fwww.lazyscreenshots.com%2Fguides%2Fhow-to-add-numbered-annotations-to-screenshots%2F&trace=t_8b965f9c5bc6) ## Ask a follow-up about this page Need a more specific answer? Ask the exact question you have. It returns a fresh, cited answer from www.lazyscreenshots.com’s knowledge base. No account or API key required. Open this URL with your own question, URL-encoded. Only q is required. No account or setup. `GET https://www.lazyscreenshots.com/agent/faq?q={question}&trace=t_8b965f9c5bc6` [Tool guide and examples](https://www.lazyscreenshots.com/agent-access) · [OpenAPI](https://www.lazyscreenshots.com/api/public/v1/openapi.json) · [Page TLDR form](https://www.lazyscreenshots.com/agent-tools/page-tldr?url=https%3A%2F%2Fwww.lazyscreenshots.com%2Fguides%2Fhow-to-add-numbered-annotations-to-screenshots%2F). Opening a form does not execute a tool.