Agentation vs Cursor 3.0 Design Mode 对比整理 #

概述 #

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

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

Agentation #

特点 #

• 独立工具，不绑定特定 AI 编程产品
• 支持 Claude Code、Cursor、Codex 等多种工具
• 浏览器插件 + 桌面端配合使用

安装步骤 #

1. 下载桌面端：agentation.com
2. 安装浏览器插件（Chrome Web Store 搜 Agentation）
3. 打开目标页面，点击右下角插件图标激活

使用方法 #

1. 鼠标悬停元素 → 高亮显示
2. 点击元素 → 写备注 → Add
3. 一键复制格式化 markdown
4. 粘贴给 Claude Code / Cursor 等 AI 工具

Agent 拿到的结构化信息 #

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

MCP 实时同步（进阶功能） #

• 安装 Agentation MCP Server
• 配置到 Cursor / Claude Code 的 MCP 设置
• 标注直接推给 Agent，无需复制粘贴
• Agent 可回复「已修复 annotation 3」实现双向对话

与 OpenCode 集成 #

OpenCode 是开源 AI 编程 agent，支持 75+ 模型，可集成到 VS Code、Cursor、Windsurf 等编辑器。

Agentation + OpenCode 最佳实践：

1. 安装 OpenCode 插件：在 VS Code 终端运行 opencode 自动安装
2. 快捷键：Cmd+Esc (Mac) / Ctrl+Esc (Windows/Linux) 快速启动
3. 文件引用：Cmd+Option+K 插入 @File#L37-42 引用
4. 结合使用：先用 Agentation 标注网页元素，再在 OpenCode 中输入 prompt 并引用标注内容

OpenCode 特点：

• 本地优先，隐私优先
• 支持 75+ AI 提供商（包括 Ollama）
• Vim-like 编辑器
• SQLite 持久化存储会话
• LSP 集成支持代码智能

Cursor 3.0 Design Mode #

定位 #

内置于 Cursor IDE，3.0 版本直接可用，无需额外安装

快捷键 #

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

对比总结 #

数据速览 #

• Agentation：2026 年 1 月上线，GitHub 3000+ Stars，NPM 周下载 22.4 万
• Cursor 3.0：2026 年 3 月发布，Agents Window + Design Mode

选择建议 #

• 选 Agentation：团队使用多种 AI 编程工具（Claude Code + Cursor 等）
• 选 Cursor Design Mode：主力用 Cursor，追求无缝体验

整理自灵山工作室技术讨论 · 2026-04-07 · by 文殊