Agentation – 面向AI编程代理的可视化UI注释工具

Agentation 是一款创新的可视化UI注释工具，专为AI编程代理设计。它通过在网页上激活工具栏，让用户能够直接点击界面元素并添加注释。每次注释都会自动捕获元素的CSS选择器、源文件路径、React组件树层级以及当前计算样式，并附带用户的反馈文本。这些信息以结构化的Markdown格式输出，可轻松粘贴到AI代理（如Claude Code或Cursor）中。

使用Agentation，用户无需再模糊描述“侧边栏中的蓝色按钮”，而是直接提供“.sidebar > button.primary”这样的精确选择器，让AI代理能通过代码搜索直接定位。此外，Agentation还提供了实时预览和动画暂停功能，方便对特定状态的元素进行注释。

更强大的是，通过MCP（模型上下文协议）集成，AI代理不仅能读取注释，还能主动与用户交互。例如，代理可以列出所有待处理的注释、询问澄清（“应该是24px还是16px？”）、在修复后标记为已解决，甚至一键清除所有注释。这使得反馈过程从一个单向提交通道变成了一个协作对话。

最佳实践方面，Agentation建议用户对每个注释只提一个问题，并明确预期与现状的差异。对于文字错误，建议直接选中文本进行注释。目前，Agentation对个人和公司内部使用免费，但若要将它作为产品的一部分进行再分发，则需要联系获取商业许可。此外，它还提供实时同步、推送至外部服务以及API集成等高级功能，适合团队协作和自动化工作流。