Agentation 是一款连接可视化UI反馈与AI编程助手的开发者工具。它允许您点击网页上的任何元素、添加注释，并生成结构化上下文（如CSS选择器和文件路径），供Claude Code等AI助手直接使用以理解和实施更改，从而消除模糊的描述。
如何使用 Agentation?
安装Agentation包，并在本地开发服务器上激活其工具栏。悬停并点击您想提供反馈的任何UI元素，写下您的注释，然后复制生成的结构化输出。将此输出粘贴到能访问代码库的AI编程助手（例如Claude Code、Cursor）中。助手将收到精确的选择器和上下文，以进行准确的代码更改，从而将视觉反馈转化为可操作的开发任务。
Agentation 的核心功能
可视化注释工具栏：一个简单的基于浏览器的工具栏，让您可以直接在运行的应用程序上点击任何UI元素来创建反馈注释，使过程直观且可视化。结构化上下文生成：自动为AI助手生成精确数据，包括CSS选择器、源文件路径、React组件树和计算样式，提供确切的代码位置。MCP集成：实现您的注释与AI助手之间的实时双向通信。助手可以请求澄清、确认修复并列出所有活跃反馈，从而创建对话式工作流。动画暂停：一项独特功能，允许您冻结网页上的CSS或JavaScript动画，从而能够对原本难以捕捉的特定帧进行注释。灵活的输出格式：支持将反馈复制为格式化Markdown以便手动粘贴，或通过MCP/服务器连接自动同步，从而无缝集成到各种开发流程中。注释管理：提供工具来列出、清除和管理跨页面的所有注释。助手可以通过编号（例如“修复注释3”）引用特定注释，以便采取针对性操作。
Agentation 的使用场景
前端开发者：在代码审查或调试期间，快速向AI助手提供精确的UI/UX反馈，指定需要样式或功能更改的精确元素（如按钮或模态框）。产品经理与设计师：使用AI助手向工程团队传达设计调整或错误报告，从模糊的描述（如“让它更出彩”）转变为可操作的代码级指令。QA测试人员：直接在应用程序界面上报告视觉错误或不一致之处。生成的选择器有助于开发者或AI助手立即在代码库中定位并修复问题。开发团队：简化内部反馈循环。团队成员可以对暂存或生产环境站点进行注释，结构化输出确保指定的开发者或AI工具能理解确切的上下文。独立开发者与独立黑客：用作个人调试和重构辅助工具。对自己的工作进行注释，为AI结对编程伙伴创建待办事项列表，从而提高迭代开发效率。
Agentation 的常见问题
最受影响的职业
Frontend Developer
Software Engineer
UI/UX Designer
Product Manager
QA Engineer / Tester
Full-Stack Developer
DevOps Engineer
Technical Lead
Indie Hacker
Engineering Manager
Agentation 的标签
Agentation 的替代品
