
AgentEcho
AgentEcho 是一款适用于开发人员的可视化反馈注释工具,允许在网页元素上放置标记并生成 AI 优化的 Markdown 报告,从而改善开发人员和 AI 编码助手之间的沟通。
https://github.com/Areshkew/agentecho?ref=producthunt&utm_source=aipure

产品信息
更新于:2026年02月09日
什么是 AgentEcho
AgentEcho 是一款 Chrome 浏览器扩展程序,旨在通过可视化注释和结构化反馈生成来弥合开发人员和 AI 编码工具之间的差距。它在 Chrome Web Store 上提供 2 美元的付费版本,并提供免费版本供开发人员从源代码构建。该工具使开发人员能够通过将视觉标记与有关目标 DOM 元素的详细技术信息相结合,从而提供关于 Web 元素的精确、上下文丰富的反馈。
AgentEcho 的主要功能
AgentEcho是一款面向开发者的可视化反馈标注工具,允许用户在网页元素上放置标记,并生成AI优化的Markdown反馈报告。它具有React和Angular组件的框架检测、用于提取CSS选择器和属性的智能元素分析以及带有持久标记的可视化标注系统,同时通过Shadow DOM保持样式隔离。
可视化标注系统: 使用户能够在任何网页元素上放置编号标记,并带有蓝色悬停高亮显示和持久定位,从而轻松识别和跟踪反馈点
框架检测: 自动识别React和Angular组件,从而更深入地了解Web应用程序的技术结构
智能元素分析: 生成唯一的CSS选择器并提取全面的元素信息,包括类、ID、数据属性和组件名称
Markdown导出: 一键导出针对AI编码代理优化的结构化反馈报告,包括所有元素上下文和精确的技术细节
AgentEcho 的使用场景
代码审查协作: 开发人员可以在代码审查期间可视化地标记和记录界面问题或所需的改进
缺陷报告: 质量保证团队可以创建详细的缺陷报告,其中包含有关受影响元素和组件的精确技术背景
AI助手沟通: 开发人员可以生成结构化反馈,这些反馈经过优化,可与AI编码助手和自动化工具进行通信
UI/UX反馈: 设计团队可以为开发人员提供有关界面元素的特定反馈,并提供技术背景
优点
可在任何具有Shadow DOM隔离的网站上运行
提供全面的技术元素分析
提供免费(源代码构建)和付费(Chrome商店)选项
缺点
由于浏览器安全限制,无法注入到跨域iframe中
框架检测在生产/缩小版本上可能会失败
如果DOM结构发生重大变化,选择器可能会中断
如何使用 AgentEcho
安装 AgentEcho: 可以从 Chrome Web Store 购买 1 美元,也可以通过克隆 GitHub 存储库、运行 'npm install' 和 'npm run build',然后在 Chrome 中将 dist/ 目录作为未打包的扩展程序加载,从而从源代码构建
激活扩展程序: 单击浏览器工具栏中的 AgentEcho 图标,然后单击“激活”以启用当前网页上的注释
悬停在元素上: 将鼠标移动到任何网页元素上,以查看其以蓝色突出显示,显示您可以注释的内容
添加反馈标记: 单击突出显示的元素以放置编号的标记并打开反馈模式
输入反馈: 在放置标记后出现的模式中键入您的反馈意见
添加多个标记: 根据需要重复单击并为尽可能多的元素添加反馈的过程
生成报告: 单击工具栏中的“复制”以将所有反馈作为格式化的 Markdown 报告复制到剪贴板
使用键盘快捷键: 可选:使用诸如“C”复制、“H”切换标记、Delete/Backspace 清除标记以及 Escape 退出注释模式之类的快捷方式
管理注释: 使用工具栏控件来暂停突出显示、隐藏/显示标记、复制反馈、清除所有标记或退出扩展程序
AgentEcho 常见问题
AgentEcho是一个面向开发者的可视化反馈注释工具,允许用户在网页元素上放置可视化标记,并生成AI优化的Markdown反馈报告。它特别适用于代码审查、错误报告以及与AI编码助手进行通信。











