Agentation 标注模式详解：点选、文字选择、多选与区域框选，6 大用法一次学会

Agentation 标注模式详解点选、文字选择、多选与区域框选6 大用法一次学会【免费下载链接】agentationThe visual feedback tool for agents.项目地址: https://gitcode.com/gh_mirrors/ag/agentationAgentation 是一款面向 AI 编程助手的视觉反馈工具它的标注模式让你直接在网页上用鼠标点选元素、选择文字、多选组件、区域框选再一键复制出带选择器、位置、类名等结构化信息的 MarkdownAI 助手就能精准定位你说的是哪段代码而不是猜侧边栏那个蓝色按钮。本文带你一次学会 6 大标注用法 快速上手两步启用标注工具栏只需安装并挂载一个组件页面右下角就会出现 Agentation 标注工具栏npm install agentation -Dimport { Agentation } from agentation; function App() { return ( YourApp / Agentation / / ); }⚙️ 要求React 18桌面浏览器暂不支持移动端。详见 package/README.md点击工具栏激活后下面 6 种标注方式任你组合使用。用法一点选元素标注 —— 最常用的一击激活工具栏后点击页面上任意元素即可添加标注。Agentation 会自动为该元素命名优先使用类名、ID其次用语义化内容如button.submit-btn并生成可被grep的 CSS 选择器。这套智能识别逻辑在 package/src/utils/element-identification.ts 中实现。适合场景按钮文案不对、组件样式问题、图标显示异常——点一下就标记。用法二文字选择标注 —— 精准吐槽错别字直接用鼠标划选一段文字弹层会自动引用你选中的内容。比如页面里把 Settings 拼成了 Settigns选中这个词写下 Typo - should be Settings 即可。被选中的文字会作为selectedText字段进入结构化输出AI 助手能直接搜索到这段文本。适合内容校对、文案修改、翻译调整等场景 ✍️用法三多选标注 —— 一次标记多个同类问题两种操作方式核心逻辑见 package/src/components/page-toolbar-css/index.tsx按住⌘或Ctrl⇧逐个点击元素每点一个元素外框就会亮起表示已加入本次标注按住修饰键后拖拽框中多个元素一次全选。所有选中的元素会合并成一条多选标注isMultiSelect: true每个元素都会单独记录位置与类名一条反馈覆盖多个问题省去了重复标注。用法四区域框选标注 —— 空白处也能下标注在页面上按住鼠标拖拽画一个矩形即可标注任意区域——哪怕那里一片空白。这是其他工具很难做到的当你想表达这里应该放一张图、这块留白太宽这类布局建议时区域框选正好补位。输出中会带上区域的边界坐标boundingBoxAI 能准确理解你框的是哪个位置。用法五暂停动画 —— 定格瞬间再标注页面动画、视频动效不停标注位置会跑。点击工具栏的Pause 按钮或按P键可一键冻结页面上的 CSS、JS 动画与视频实现位于 package/src/utils/freeze-animations.ts把动画定格在你想反馈的那一帧从容写下备注。用法六一键复制结构化输出 —— 标注的价值所在标完后点击工具栏Copy 按钮或按C所有标注会生成一份结构化 Markdown 并写入剪贴板粘贴给 AI 助手即可。生成逻辑在 package/src/utils/generate-output.ts标准格式示例## Page Feedback: /dashboard **Viewport:** 1512x738 ### 1. button.submit-btn **Location:** .form-container .actions button.submit-btn **Source:** src/components/FormActions.tsx:42:5 **Classes:** submit-btn primary **React:** App Dashboard FormActions SubmitButton **Feedback:** Button text should say Save not Submit在设置面板里还能切换 4 档详细度Compact / Standard / Detailed / Forensic——从极简一句话到包含源码位置、React 组件树、附近文本的取证级输出按需选择。工具栏按钮与键盘快捷键速查 按钮 / 快捷键作用⏸ PauseP暂停 / 恢复全部动画 VisibilityH显示 / 隐藏标注标记 CopyC复制结构化 Markdown 反馈 ClearX清除全部标注✈ Send Annotations通过 Webhook 直接推送给已配置的 Agent Layout ModeL进入布局模式见下节⚙ Settings输出详细度、标记颜色、行为等设置Esc关闭工具栏或取消操作Cmd/Ctrl Shift F开 / 关反馈模式小技巧标注标记上单击可删除右键可编辑可在设置中切换默认行为工具栏本身可拖拽到任意位置。完整快捷键表参考 package/example/src/app/features/page.tsx。进阶布局模式像画原型一样提需求按L进入Layout Mode会出现一个包含 65 组件类型的素材面板把按钮、文本、导航栏等直接拖进页面也能抓取现有区块拖到新位置——相当于在真实页面上画线框图。你的每次放置和重排都会以placement/rearrange标注同步给 Agent让我想要一个两栏布局从口述变成可视化指令。标注数据长什么样每条标注都是一份结构化数据包含元素名、选择器路径、视口百分比坐标、绝对位置、用户备注、选中文字、边界框、附近文本、CSS 类名等字段完整 Schema 可参考 package/example/public/schema/annotation.v1.json字段定义见 package/src/types.ts配合 MCP 集成后Agent 还能双向交互确认收到、追问细节、完成修改后给出总结标注从单向留言升级为对话。常见问题标注会丢失吗标注按页面存储在 localStorage保留 7 天需要跨页面持久化时可配合项目内置的 MCP 同步服务mcp/src/server/。会影响线上用户吗通常只在开发/预览环境挂载Agentation /它也支持通过copyToClipboard{false}等属性做纯程序化集成。小结Agentation 标注模式把给 AI 提 UI 反馈这件麻烦事拆成了 6 个顺手动作点选、文字选择、多选、区域框选、暂停动画、复制结构化输出——再配合布局模式从这感觉不太对到改这里、改成这样一气呵成。装好包、挂载组件你的下一次需求沟通就从点击开始 【免费下载链接】agentationThe visual feedback tool for agents.项目地址: https://gitcode.com/gh_mirrors/ag/agentation创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考