UIAnnotator captures precise UI context — CSS selectors, computed styles, screenshots, element hierarchy — and formats everything your AI needs to fix issues without back-and-forth.
No account required · Chrome, Edge, Brave, Opera, Arc · Chrome 102+
When you ask Claude, Cursor, or any AI agent to fix a UI issue, you typically paste a vague description — "the button looks off" — and spend the next ten minutes answering follow-up questions about selectors, styles, and context the agent could never have known.
UIAnnotator closes that gap. It runs directly in your browser as a Chrome extension, letting you click any element on any page to capture everything the agent needs: the precise CSS selector, the full computed style block, the element's position and dimensions, its React or Vue component tree, and a clean screenshot.
One click. One copy. Everything in one structured message your agent can act on immediately — without asking a single clarifying question.
annotation-1.jpg, annotation-2.jpg etc.Watch the full workflow — install, annotate, copy, paste.
Click the pencil button in the toolbar below, then click any element in the mock dashboard to annotate it.
Choose the right level of detail for your task. All formats paste cleanly into any LLM or agent interface.
The default format for everyday annotations. Includes element identity, selector, HTML tag, inner text, full computed CSS, and page context. Enough for most UI fixes.
## Annotation 1: Button colour is wrong 🟡 IMPORTANT · 🔧 FIX **User feedback:** > The primary CTA button is using the wrong brand colour. > Should be #0052CC, currently rendering as #0066FF. **Element:** `button.btn-primary` **CSS Selector:** `.hero > div.cta > button.btn-primary:nth-child(1)` **HTML Tag:** `<button class="btn-primary" type="button">` **Inner text:** "Get started" **Computed styles:** - `background-color`: rgb(0, 102, 255) - `color`: rgb(255, 255, 255) - `font-size`: 14px - `font-weight`: 600 - `padding`: 12px 28px - `border-radius`: 4px **Page:** https://example.com/ **Viewport:** 1440×900px
Minimal output for quick, targeted fixes where the element and issue are obvious. Just the essentials — name, selector, feedback, and page.
## Annotation 1: Button colour is wrong 🟡 IMPORTANT · 🔧 FIX **User feedback:** > The primary CTA button is using the wrong brand colour. **Element:** `button.btn-primary` **CSS Selector:** `.hero > div.cta > button.btn-primary:nth-child(1)` **Page:** https://example.com/
Adds layout and position data on top of Standard. Best for issues involving spacing, alignment, overlap, or anything where the element's position in the page matters.
## Annotation 1: Button is misaligned 🔴 BLOCKING · 🔧 FIX **Element:** `button.btn-primary` **CSS Selector:** `.hero > div.cta > button.btn-primary:nth-child(1)` **HTML Tag:** `<button class="btn-primary" type="button">` **Size:** 140×44px **Page position:** x:620 y:480 **Viewport position:** x:620 y:320 **Scroll:** scrollX:0 scrollY:160 **React tree:** <App> › <HeroSection> › <CTAGroup> › <PrimaryButton> **Source file:** src/components/Hero/CTAGroup.tsx **Computed styles:** - `position`: relative - `margin-left`: 24px ← likely the culprit - `align-self`: flex-start
Maximum context for complex issues. Includes everything in Detailed plus live-queried accessibility data, full typography, and the exact reproduction environment.
**Accessibility:** - ARIA role: button - Tab index: 0 - Disabled: false - Parent path: div .cta-group ← section .hero ← main **Typography:** - Font: Inter - Size: 14px / Weight: 600 - Color: rgb(255, 255, 255) - Line height: 20px **Reproduction environment:** - URL: https://example.com/landing - Viewport: 1440×900px, DPR: 2 - User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 Chrome/124.0.0.0 - OS: MacIntel
UIAnnotator works on Chrome, Microsoft Edge, Brave, Opera, and Arc — any Chromium-based browser that supports Chrome extensions. It does not work on Firefox or Safari, as those browsers use a different extension system and do not support Chrome extensions.
Yes. UIAnnotator is a content script that runs on any webpage you visit in Chrome. It works on public sites, localhost, internal tools, staging environments — anywhere you can open Chrome.
Any LLM or agent that accepts text input: Claude, ChatGPT, Gemini, Cursor, GitHub Copilot, Perplexity, and any chat interface. The output is plain structured text — universally compatible.
No. UIAnnotator runs entirely in your browser. No data is sent to any server. There are no accounts, no API calls, no telemetry. Everything stays local on your machine.
Enable the camera toggle before annotating. When you submit an annotation, the extension briefly hides its own UI and captures the visible tab. When you click Copy, screenshots auto-download to your Downloads folder as annotation-1.jpg, annotation-2.jpg etc. — one file per annotated element. After pasting the text report into Claude, drag those files from your Downloads folder directly into the same message. Claude will see both the structured text and the visual screenshots together.
React and Vue are natively supported — UIAnnotator reads the component fibre tree and includes it in the output. Angular and other frameworks get full CSS/DOM data even without component-level detail.
Completely free, with no premium tier. UIAnnotator is a side project built to solve a real problem. There are no plans to charge for it.
Yes. Annotate as many elements as you like in one session. Use the checkboxes to select a subset for copying, or copy all at once. Each annotation is numbered and self-contained in the output.
Forensic mode is designed for complex accessibility audits, cross-browser bugs, and situations where the agent needs to reproduce the exact environment. It captures your user agent, OS, device pixel ratio, ARIA attributes, and full typography data in addition to everything in Detailed mode.
No data collection. UIAnnotator does not collect, transmit, store, or share any personal data or usage information of any kind.
Local only. All annotation data is stored in your browser's local storage on your own machine. It never leaves your device through UIAnnotator.
No accounts. UIAnnotator requires no account, email address, or any form of registration.
No third parties. UIAnnotator does not integrate with analytics services, advertising networks, crash reporters, or any third-party data processor.
Screenshots. Screenshots are captured using Chrome's captureVisibleTab API and stored temporarily in memory. They are deleted when the session is cleared. They are never transmitted anywhere.
Chrome permissions. UIAnnotator requests: activeTab (read current page), scripting (inject annotation tool), storage (persist annotations locally), clipboardWrite (copy output), downloads (save screenshots), and tabs (capture screenshots).
Questions or concerns about this privacy policy: bagati.monty@gmail.com
Free to use. UIAnnotator is provided free of charge, as-is, without warranty of any kind, express or implied.
Acceptable use. You may use UIAnnotator on any website you are authorised to access. You must not use it to capture or transmit information from pages you do not have permission to access.
No liability. The author accepts no liability for any damages, direct or indirect, arising from use of this extension. Use it at your own risk.
Your content. Annotations, notes, and screenshots you create are entirely yours. The author has no rights to any content you create using UIAnnotator.
Modifications. These terms may be updated at any time. Continued use of the extension constitutes acceptance of any updated terms.
Open source. UIAnnotator's source code is available for review. You may inspect it, fork it for personal use, but may not redistribute it as a competing product without permission.
Questions or concerns about these terms: bagati.monty@gmail.com
Building tools at the intersection of design and AI. UIAnnotator started as a personal solution to a recurring problem.
Every time I annotated a UI issue to send to an AI agent, I realised I was manually writing out things the browser already knew — the exact selector, the computed styles, the component name. The agent would ask follow-up questions I could have answered upfront if I'd had a structured way to capture the context.
UIAnnotator is the tool I wished existed. It takes ten seconds to annotate an issue and produces output the agent can act on immediately, without back-and-forth. It's completely free because the value is in saving your time, not in charging for it.
Browser compatibility: UIAnnotator works on Chrome and all Chromium-based browsers — Edge, Brave, Opera, and Arc. It does not work on Firefox or Safari, as Chrome extensions are not supported on those browsers.
Have feedback? Whether it's a bug, a suggested enhancement, a missing feature, or just a comment — reach out at bagati.monty@gmail.com. Every piece of feedback is read and genuinely considered. This tool improves because of the people using it.
No accounts, no API keys, no setup. Install and start annotating in under a minute.
Works on Chrome, Edge, Brave, Opera & Arc · Chrome 102+ · Firefox & Safari not supported