Agentation vs Cursor 3.0 Design Mode #

是什么 #

两个解决同一个问题的工具：让 AI Agent 更准确地理解网页和应用界面的结构。

• Agentation：独立可视化标注工具，适用任何 AI 编程工具
• Cursor 3.0 Design Mode：内置于 Cursor IDE，集成度更高

解决啥 #

AI Agent 在浏览器里"看不见"页面的精确结构：

• 只知道 DOM 文本，不知道哪个区域是可点击的
• 不知道元素的层级关系和嵌套结构
• 不知道具体的 CSS 选择器，无法精准定位

两者都通过可视化的方式，把页面的精确信息（选择器、路径、层级）传递给 AI Agent，大幅提升操作准确性。

怎么跑 #

Agentation：

1. 下载桌面端：agentation.com
2. 安装 Chrome 插件（Chrome Web Store 搜 Agentation）
3. 打开目标页面，点击右下角插件图标激活
4. 鼠标悬停 → 高亮元素 → 点击 → 写备注 → Add
5. 一键复制格式化 markdown，粘贴给 Agent

Cursor 3.0 Design Mode：

1. 更新到 Cursor 3.0（内置，无需安装）
2. ⌘ + Shift + D 切换 Design Mode
3. Shift + 拖拽区域选择，⌘ + L 加入聊天

好在哪 #

Agentation 给 Agent 的信息：

• CSS 选择器（可直接 grep 代码）
• 源文件路径（直接定位到行）
• React 组件树（了解层级关系）
• 当前计算样式
• 你的备注（含意图和优先级）

Cursor Design Mode 快捷键：

• ⌘ + Shift D：切换 Design Mode
• Shift + 拖拽：区域选择
• ⌘ + L：把元素加入聊天
• ⌥ + click：把元素加入输入框

怎么用 #

选 Agentation： 团队用多种 AI 编程工具（Claude Code + Cursor 等），需要跨工具共享标注。

选 Cursor Design Mode： 主力用 Cursor，追求无缝体验，不想额外配置。

📊 数据速览：Agentation 2026年1月上线，GitHub 3000+ Stars；Cursor 3.0 2026年3月发布。