by Screenshot Annotator (LX AI)
Screenshot Annotator turns a UI description and annotation goal into a clear markup brief — arrows, blurs, and callouts planned so PMs and support writers can annotate without clutter.
Decision-support only — confirm before you publish or act.
I start by taking two short strings from you: a plain‑language description of the UI you see and a single sentence that states what you want to highlight, hide, or explain. The description might be “A modal window with a primary button labeled Save and a secondary link Cancel”. The goal might be “Draw an arrow to the Save button and blur everything behind the modal”. I then run a rule‑based parser that extracts UI elements (buttons, links, fields, containers) and maps each to a coordinate box in a virtual canvas.
Next I translate the annotation goal into a set of primitive drawing commands. An arrow command gets a start point (center of the source element) and an end point (center of the target element) plus a style (stroke width, color, head size). A blur command receives a target box and a radius in pixels. A callout command receives a box, a short text string, and a placement preference (top, bottom, left, right). I store these commands in a JSON‑like brief that is deliberately terse: no styling fluff, just the numbers and types needed to render the markup.
The brief is returned as plain text that you can copy into your design file, your documentation generator, or your support ticket template. Because the output is only a set of coordinates and styles, you retain full control over the final look — you can adjust colors, swap arrowheads, or change blur intensity before you publish.
I open the screen I am reviewing, write down what I see in one or two sentences, focusing on interactive elements and their labels. I avoid vague phrasing like “the form” and instead note “the email input field with placeholder ‘you@example.com’ and the submit button labeled ‘Send invitation’”. This precision helps the parser locate the right boxes.
I state what the reader should notice. For a release note I might say “Highlight the new ‘Export CSV’ button and add a callout that explains the file format”. For an onboarding tour I might say “Blur the background behind the tooltip and point an arrow to the ‘Next’ tip”. I keep the goal to a single actionable sentence.
The tool returns a brief such as:
{
"arrows": [
{"from": {"x": 120, "y": 80}, "to": {"x": 250, "y": 80}, "style": {"width": 2, "color": "#ff6600", "head": 8}}
],
"blurs": [
{"box": {"x": 30, "y": 30, "width": 340, "height": 200}, "radius": 12}
],
"callouts": [
{"box": {"x": 250, "y": 80, "width": 100, "height": 30}, "text": "Export CSV", "placement": "top"}
]
}
I verify that the coordinates match the elements I care about. If a box is off by a few pixels I edit the brief directly — no need to re‑run the tool.
I copy the brief into my design tool’s markup panel (Figma, Sketch, or a custom HTML preview). The tool reads the JSON and renders the arrow, blur, and callout exactly as specified. I then adjust visual details like stroke color or blur strength to match the product’s style guide before exporting the final asset.
When drafting a knowledge‑base article I look at the screen the user will see. I write a concise description that includes every clickable area I will reference. Example: “The settings pane shows a toggle labeled ‘Enable notifications’, a dropdown for ‘Frequency’ with options Daily, Weekly, Monthly, and a ‘Save changes’ button at the bottom.”
I decide what the reader needs to see to follow the steps. For a troubleshooting guide I might say “Blur everything except the toggle and add a callout that reads ‘Turn this on to receive alerts’”. For a feature overview I might say “Place an arrow from the dropdown to the label ‘Frequency’ and add a callout that explains the impact of each option.”
The brief appears as a compact JSON block. I check that each arrow points from the correct label to the correct control, that each blur covers exactly the area I want to de‑emphasize, and that each callout box does not overlap unrelated text. If any element is mis‑aligned I edit the numbers directly in the brief.
I paste the brief into the article’s markdown file where I have a custom shortcode that converts the JSON into SVG overlays. The rendered article shows the user exactly where to click, with irrelevant parts dimmed or hidden. I preview the article, confirm that the annotations aid comprehension, and then publish.
The tool is designed to sit between your raw UI notes and the final markup you embed in designs, docs, or tickets. It accepts plain text input and emits a JSON‑like brief that can be consumed by any system that can draw basic shapes. Below is a table of the formats I currently support for input and output.
| Input format | Output format | Typical consumer |
|---|---|---|
| Plain‑language description + goal (two lines) | JSON brief (as shown above) | Custom scripts, design‑tool plugins, markdown preprocessors |
| Markdown front‑matter block (description: …, goal: …) | JSON brief | Static site generators, documentation portals |
| CSV with two columns (description, goal) | JSON brief (one object per row) | Batch processing pipelines, QA spreadsheets |
Because the brief is pure data, you can pipe it into a rendering library that outputs SVG, Canvas, or even CSS‑based overlays. I have seen teams attach the brief to their design system’s token file so that annotations stay in sync when component coordinates change.
I want to be clear about the limits of the tool so you do not rely on it for things it cannot do.
In short, the tool is a decision‑support aid that turns your words into a starting point for markup. You remain responsible for the final check before you publish or act.
When you feed UI descriptions into any automated system you should think about data privacy and model safety. I do not train or call any external language model; the processing is entirely rule‑based and runs in your own environment. Nevertheless, the annotations you create could be used in contexts where misleading visuals pose a risk. For that reason I recommend reviewing the output against established guidelines.
The OWASP Top 10 for Large Language Model Applications (https://owasp.org/www-project-top-10-for-large-language-model-applications) highlights issues such as prompt injection and output misuse. Even though I do not use an LLM, the same principles apply: never trust blindly generated markup, and always confirm that the visual emphasis matches the intended message.
The NIST AI Risk Management Framework (https://www.nist.gov/itl/ai-risk-management-framework) suggests steps like defining the system’s purpose, identifying potential harms, and establishing monitoring practices. I treat the brief as a low‑risk artifact because it contains only geometry and text, but I still advise you to:
Following these simple checks helps you avoid unintentionally misleading users or exposing confidential layout information.
Screenshot Annotator turns a UI description and annotation goal into a clear markup brief — arrows, blurs, and callouts planned so PMs and support writers can annotate without clutter.
Decision-support only — confirm before you publish or act.
Want to try the product? Screenshot Annotator
Generated 2026-09-17 · primary sources only · no fabricated traffic metrics