Agentation — Annotate UI, Brief Your Coding Agent

Annotate your UI, then brief your coding agent. Works best with AI tools that have access to your codebase (Claude Code, Cursor, etc.).

How you use it

1. Click the icon in the bottom-right corner to activate.
2. Hover over elements to see their names highlighted.
3. Click any element to add an annotation.
4. Write your feedback and click Add.
5. Click to copy formatted markdown.
6. Paste into your agent.

With MCP, you can skip the copy-paste step entirely — your agent already sees what you're pointing at. Just say "address my feedback" or "fix annotation 3."

How agents use it

When you paste the output, agents get:

• CSS selectors to grep your codebase
• Source file paths to jump directly to the right line
• React component tree to understand the hierarchy
• Computed styles to understand current appearance
• Your feedback with intent and priority

Without Agentation, you'd describe the element ("the blue button in the sidebar") and hope the agent guesses right. With Agentation, you give it .sidebar > button.primary and it can grep for that directly.

Agents talk back

With MCP integration and the Annotation Format Schema, agents can:

• List all feedback across pages
• Ask for clarification ("Should this be 24px or 16px?")
• Resolve with a summary ("Fixed the padding")
• Clear all annotations at once

Best practices

• Be specific — "Button text unclear" beats "fix this."
• One issue per annotation.
• Include context — expected vs. what you see.
• Use text selection for typos/content issues.
• Pause animations to annotate a specific frame.

Shortcuts

Pause animations: P · Layout mode: L · Hide markers: H · Copy feedback: C · Send Annotations: S · Clear all: X · Exit: Esc

Licensing

Free for individuals and companies for internal use. Contact for a commercial license if redistributing as part of a product you sell.