September 11, 2026
APPENDIX: SCREENSHOTS ARE CONTEXT

Sometimes the problem is visible but hard to describe. A button is in the wrong place. A page is blank. A command fails with an error you do not understand. A browser looks different from what the agent expected.
Do not spend ten minutes trying to translate a visual problem into vague words. Take a screenshot. Modern AI models can read interface layouts, visible error messages, code, logs, charts, and the difference between what is on screen and what you expected to see. A well-chosen screenshot gives the model evidence.
This is not a replacement for files, logs, or a clear task. It is the missing visual layer of context.
The screenshot-to-fix loop
The screenshot says what you saw. Your short note says what you expected. The project files and terminal output later in this course say why it may be happening. Together, those are much more useful than “it is broken.”
What to send an AI
Before you attach a screenshot, capture only what helps answer the question. A full desktop filled with unrelated windows gives the model more noise and may reveal information you did not mean to share.
Use this pattern:
Goal: the pricing cards should remain in three columns on a wide desktop screen.
What I see: the third card drops to a second row at 1440px wide.
What I expected: three equal-width cards in one row.
Attached: one browser screenshot with the third card circled.
Please: inspect the relevant layout files, explain the likely cause, and propose the smallest fix. Do not edit yet.
For an error, include the smallest useful set:
1. A screenshot of the error or wrong behavior. 2. The exact action that caused it. 3. What should have happened instead. 4. The visible error text copied as text when possible. 5. The relevant terminal or browser-console output, if you have it.
That last point matters: an image helps the AI see the issue; copied text lets it search, compare, and reason precisely.
Annotate the screenshot, do not narrate every pixel
One arrow, circle, highlight, or short label can save a long explanation. Mark the broken button, the unexpected spacing, the error panel, or the part of the chart that looks wrong. Do not cover the thing the AI needs to inspect.
| Good annotation | Weak annotation |
|---|---|
| Circle the button that does nothing | “The button near the middle is wrong” |
| Arrow from expected location to actual location | “The layout feels off” |
| Highlight the exact error line | “There is a terminal problem” |
| Label the viewport size or device | “It is bad on my laptop” |
Keep the original screenshot when the issue is important. Use an annotated copy for communication. That way you can return to the untouched evidence if an annotation hid something useful.
Screenshot tools: the simple recommendation
| Platform | Best default | Free alternative | Paid recommendation |
|---|---|---|---|
| Mac | Built-in Screenshot (⌘ + Shift + 4 or 5) | Snapzy or Shottr | CleanShot X |
| Windows | Snipping Tool (Windows + Shift + S) | ShareX or Greenshot | Snagit |
The built-in tools are enough for a quick capture. Dedicated tools are worth it when screenshots become part of how you build, explain, document, or debug work every day.
Mac: CleanShot X if screenshots are part of your job
CleanShot X is the paid Mac recommendation. It is excellent for fast capture, clear annotations, scrolling screenshots, screen recording, OCR, and sharing a capture without leaving your flow. It is a one-time purchase with an optional update renewal—not a required subscription. CleanShot’s feature list is worth a look if you routinely explain problems with screenshots.
Choose CleanShot X if you regularly need to:
- capture a whole scrolling page or long chat
- blur or pixelate sensitive details before sharing
- add arrows, step numbers, and callouts quickly
- record a short walkthrough instead of writing a long explanation
- keep a history of recent captures
Free Mac options
Snapzy is the strongest fully free, open-source alternative. It supports screen capture, recording, annotation, scrolling capture, OCR, and a capture history on Intel and Apple Silicon Macs.
Shottr is a fast, lightweight alternative with annotation, scrolling screenshots, OCR, and a free long-term version. It periodically asks you to consider buying a license; that is a fair trade if it becomes part of your daily workflow.
Snapper is another small native Mac option with local processing and scroll capture. It currently requires macOS 14 or newer and is ad-hoc signed, so macOS may show a security warning. Do not bypass a security warning casually: use the official download, understand the permission request, and choose Snapzy or Shottr if you want the simpler default.
For a new Mac user, the answer is simple: use the built-in tool today; choose Snapzy if you want free and open source; buy CleanShot X if screenshots become a serious part of your workflow.
Windows: start with Snipping Tool, then choose your level
Snipping Tool comes with modern Windows. Press Windows + Shift + S to capture a region, window, or full screen. It supports drawing, highlighting, shapes, cropping, text extraction, and screen recording. For most people, this is the right first tool because it is already on the computer.
Free Windows recommendation: ShareX
ShareX is the free recommendation for people who want more power. It is open source and includes region and scrolling capture, screen recording, annotations, OCR, custom hotkeys, and automated after-capture actions. It has more options than most beginners need, so start with one workflow: capture a region, annotate it, copy it, and attach it to the AI.
Greenshot is the simpler free Windows alternative. It is useful when you mainly want a lightweight capture tool with basic annotation, highlighting, and obfuscation rather than ShareX’s automation features.
Paid Windows recommendation: Snagit
Snagit is the paid Windows recommendation for people who create documentation, tutorials, product feedback, or repeatable operating guides. Its strengths are a polished annotation workflow, scrolling capture, screen recording, a searchable library, and step-by-step capture. It is the closest Windows equivalent to the “capture it, explain it, share it” experience that makes CleanShot X so useful on Mac.
Protect information before you attach it
Screenshots can contain more than you notice: API keys, account numbers, private messages, customer data, browser tabs, addresses, and email. Crop first. If you need to hide information, use a tool that changes the exported image—not a movable black box inside an editable document.
Before attaching an image to an AI or sharing it with a collaborator, check:
- browser tabs and bookmarks
- passwords, tokens, API keys, QR codes, and recovery codes
- account balances, personal addresses, phone numbers, and customer details
- private chat messages and notifications
- internal URLs, dashboards, or documents you are not authorized to share
If the issue depends on sensitive information, make a small reproduced example or describe the secret as a placeholder. The AI usually does not need the actual token or a full customer record to help diagnose a layout or code problem.
Your practical screenshot habit
When an AI cannot understand what you mean, do this:
1. Capture the smallest useful area. 2. Make an annotated copy with one or two clear marks. 3. Say what you did, what happened, and what you expected. 4. Add the exact visible error text and relevant logs when available. 5. Ask for a diagnosis and plan before asking the AI to change anything.
ARTICLE DISCUSSION
JOIN THE
CONVERSATION.
Got a question, a take, or a better way to do this? Log in and leave a comment.
