UIAnnotator — Annotate any website for AI agents

About

UIAnnotator gives your AI agent eyes on your UI. Instead of describing issues vaguely, capture everything the agent needs in one click — then paste and get an instant fix.

HOW IT WORKS

1. Click the pencil icon in the floating toolbar to enter annotation mode
2. Hover over any element — a precise selector label appears
3. Click to annotate — CSS selector, computed styles, and full context captured automatically
4. Type your feedback note, set intent (Fix / Change / Question) and severity
5. Toggle screenshot capture to capture the live page state
6. Click Copy — a fully structured report lands in your clipboard
7. Paste into Claude, Cursor, or ChatGPT — the agent fixes the issue immediately

WHAT GETS CAPTURED

• Precise CSS selector (unique, nth-child accurate)
• Full computed CSS styles (all properties from the browser's rendering engine)
• HTML tag with attributes
• Element dimensions and exact page position
• React / Vue component tree (via DevTools fibre data)
• Source file path (when React DevTools is installed)
• Screenshots — auto-download as numbered JPG files on Copy

OUTPUT FORMATS

• Compact — selector + note only (quick fixes)
• Standard — + computed CSS, page context, viewport
• Detailed — + layout, position, framework tree, source file
• Forensic — + ARIA accessibility, typography, user agent, full reproduction environment

Your chosen format is saved across sessions.

WORKS WITH

Any LLM assistant or agent that accepts text input.

BROWSER SUPPORT

Works on Chrome, Microsoft Edge, Brave, Opera, and Arc (any Chromium-based browser).
Does not support Firefox or Safari.

100% FREE — No account required. No API keys. No setup. No data sent anywhere.

PRIVACY

UIAnnotator runs entirely in your browser. No data is ever transmitted to any server. All annotation data is stored locally using chrome.storage.local. There are no analytics, no telemetry, and no third-party integrations.