Annotator: annotation prompts for AI coding

Annotate web elements, capture a screenshot, and copy a structured prompt for AI coding assistant — all in one click.

Annotator helps you capture precise annotations on any web page and turn them into ready-to-use prompts for AI coding assistants (e.g. Codex / Claude). Features - Hover to highlight any element; click to drop a numbered bubble annotation - Each annotation records the element's CSS selector, DOM path, visible text, and click position - Annotations follow page scroll/resize and reposition automatically - A single annotation auto-ends and refreshes the popup - Three copy modes: prompt + screenshot / prompt text only / screenshot only - Two views: Annotations (edit / delete inline) and Prompt (structured preview) - Settings: theme (system / light / dark), language (中文 / English), screenshot max-edge scaling - Global hotkey Ctrl+. toggles annotation on/off; rebind in the browser's shortcut settings - Bilingual UI (中文 / English) How it works The generated prompt clearly separates trusted instructions (TRUST RULES / EXECUTION RULES) from page-locating data (selector / domPath / text / pos), so the AI agent applies your edits to the right element. A fallback NOTE tells the agent to locate by selector / path / text when the screenshot is unavailable. Privacy All annotations and settings are stored locally in your browser (chrome.storage.local). No data is uploaded to any server. The extension only injects a content script into the pages you choose to annotate.