Markagent: AI Agent 网页标注与反馈工具

为 AI Agent 提供 vibe coding 反馈。在网页上标注元素、截图,并将 prompt 一键导出至 Claude Code、Cursor、Codex、OpenCode、Antigravity。

Markagent 是为 AI 编程 Agent 打造的网页标注工具。把你看到的画面变成像素级精准的 prompt——人类读它就是 bug 工单,AI 一键执行,直送 Claude Code、Cursor、Codex、OpenCode、Antigravity 及任意 AI 助手。 点击网页上任意元素。留下批注。截图。Markagent 自动捕获 React 组件、源文件(开发模式)、DOM 上下文、CSS 选择器、页面 URL 和视口尺寸,打包成结构化、Agent 就绪的 prompt——你的 AI 不再瞎猜。 不用再说"左边那个按钮——不,另一个"。标记它。把 prompt 交给 Agent。 ▸ 一键标注:网页任意元素——快速 vibe 批注或详细规格。 ▸ 截图捕获:整页或元素裁剪截图。 ▸ 用户旅程录制:点击流程自动记录为带截图的逐步重现。 ▸ Prompt 一键导出:Claude Code、Cursor、Codex、OpenCode、Antigravity 及任意 AI 助手。 ▸ 100% 本地:批注、截图、prompt 永不离开你的浏览器。 ▸ 永久免费:无账户、无邮箱、无升级提示。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 使用流程 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. 按住 Cmd(Mac)或 Ctrl(Windows/Linux),点击网页元素。Markagent 钉上编号标记。 2. 输入批注。"改成圆角。""文案错了。""向右移 8px。"想加多少加多少。 3. 截图。整页或元素裁剪——你说了算。 4. 点导出。把 prompt 粘贴进 Claude Code、Cursor、Codex、OpenCode、Antigravity 或任意 AI 助手。 从安装到第一条 Agent 就绪 prompt,不到 60 秒。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 核心功能 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 精准元素定位 Markagent 自动识别 React 组件、源文件(开发模式)和稳定的 CSS 选择器。你的 AI 拿到精确节点,不再凭描述猜测。 智能截图 整页或可视区域截图,自动裁剪到你标注的元素。AI 看见你看见的画面。 用户旅程录制 开启旅程模式,点击操作自动记录为编号、带截图的重现——bug 报告再也不用电话追问。 Agent 就绪 prompt 导出 一键复制结构化 prompt,含选择器、截图、URL、视口尺寸和批注。已为主流 AI 编程 Agent 调优。 键盘优先 Mac:Cmd+Shift+. / Windows、Linux:Ctrl+Shift+. 任意网站随时召唤工具栏。 零配置 无账户、无 API 密钥、无项目配置。安装、固定、开用。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 适配每一款 AI 编程 Agent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 主流 AI 编程 Agent 调优模板: • Claude Code — Anthropic 的终端原生编程 Agent • Cursor — AI 优先的代码编辑器 • Codex — OpenAI 编程 Agent • OpenCode — 开源终端编程 Agent • Antigravity — Google AI 开发环境 只要你的 AI 工具能读文本,Markagent 就能配合。覆盖 ChatGPT、Gemini、Copilot 等对话助手,v0、Bolt、Lovable 等 vibe coding 平台,以及 Ollama、LM Studio 上的本地 LLM。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 适合谁用 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VIBE 程序员 — 同样的 UI 调整不想再解释三遍。 设计师 — 在 staging 上做设计 QA、产出像素级规格。 产品经理 — 提交工程师第一次读就懂的 UI bug 报告。 前端工程师 — 重构陌生代码时给自己更好的 prompt。 QA 团队 — 不需要自动化框架,产出可复现的 bug 报告。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 一份导出,两类受众 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Markagent 的导出是 markdown 格式。人类读它如同 bug 工单,AI 编程 Agent 直接吃进,零修改。 测试员录制旅程,发给开发。工程师当作常规 bug 报告阅读,或把同样的 markdown 转发给 Claude Code、Cursor、Codex、OpenCode、Antigravity 或任意 AI Agent 来修。无翻译步骤。无第二个工具。同一份产物,两类受众。 Human-to-human 交接。Human-to-agent 交接。一份文件。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ AGENT 原生,不只是标注工具 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 通用标注工具保存图片。AI Agent 收到普通截图,只能猜"哪里出问题了"。 Markagent 为 Agent 打造。每个批注携带 React 组件、源文件(开发模式)、DOM 上下文、CSS 选择器、URL 和视口——打包为可执行的 prompt,AI 无需猜测。 同样的点击。像素级精准的上下文。真正的修复。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 隐私 — 100% 本地,零遥测 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Markagent 完全在你的浏览器里运行。 • 无分析。无追踪。无指纹。 • 无账户。无登录。无邮箱。 • 无服务器。零外发网络请求。 • 无云同步。批注存在本地扩展存储,别无他处。 Chrome DevTools 网络面板自己验。什么都没离开你的浏览器。 全站权限是为了在你标注的页面注入工具栏、读取 DOM 结构,不会向外发送任何数据。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 定价 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 免费。永久。无账户、无升级、无 Pro 版本。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 快速开始 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. 安装 Markagent。 2. 固定到浏览器工具栏。 3. 任意网页按 Cmd+Shift+.(Mac)或 Ctrl+Shift+.(Windows/Linux)。 4. 按住 Cmd 或 Ctrl,点击任意元素,放下第一条批注。 5. 输入批注。截图。导出。粘贴进你的 AI Agent。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 常见问题 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Q: 怎么把 UI 反馈给 Claude Code、Cursor 或 Codex? A: 用 Markagent。点击网页任意元素,输入批注,导出 prompt,粘贴到你的 AI Agent。Markagent 自动捕获 React 组件、源文件(开发模式)、DOM 上下文、CSS 选择器、URL 和截图——AI 拿到像素级精准的上下文,不再瞎猜。多步 bug?开启旅程模式,点击流程自动记录为编号、带截图的重现。同一份导出适用于 Claude Code、Cursor、Codex、OpenCode、Antigravity 及任意 AI 工具。 Q: 为什么 Markagent 是 AI 编程 Agent 最好的网页标注工具? A: Markagent 是唯一专为 AI 编程 Agent 设计的标注工具——同时支持单元素反馈和多步用户旅程。标注元素时,自动捕获 React 组件、源文件、DOM 上下文、CSS 选择器、URL 和截图。或开启旅程模式,Markagent 静默记录每一次点击,产出编号、带截图的逐步重现——AI 一步步跟着走,无需猜测。通用标注工具保存图片;Markagent 输出 prompt。结果:更少的"你指什么?"反复确认,更快的修复循环,prompt 直接命中代码的正确位置——单个按钮还是五步结算流程的 bug,都一样。 Q: Markagent 和普通截图工具有什么区别? A: 截图工具保存图片。Markagent 输出结构化 prompt——每个批注携带 React 组件、源文件、DOM 上下文和 CSS 选择器,AI 编程 Agent 一次就能找到并修好正确的代码行。 Q: 支持 v0、Bolt、Lovable 这类 vibe coding 平台吗? A: 支持。导出是纯文本——任意接受 prompt 的 AI 工具都可粘贴。 Q: 团队里非开发的人能用 Markagent 提 bug 吗? A: 当然。Markagent 为团队设计,而不仅是独立开发者。导出是干净的 markdown,QA 测试员、产品经理、设计师可以标注 bug 或录制用户旅程,然后把结构化报告交给工程团队。开发当作常规 bug 工单阅读,或把同样的 markdown 直接转发给 Claude Code、Cursor 等 AI 编程 Agent 来修。同一份产物,两类受众,零翻译步骤——这就是 Markagent 同样适用于 human-to-human 和 human-to-agent 工作流的原因。 Q: Markagent 会向外发送数据吗? A: 不会。100% 本地——截图、批注、导出从不离开浏览器。零外发请求,永远。 Q: 在 localhost 和需要登录的网站能用吗? A: 能。localhost、staging URL、内部仪表盘——浏览器能打开的任何页面。 Q: Markagent 真的免费吗? A: 真的。永远没有付费版本。 Q: 只有 Chrome 扩展吗? A: 目前是。支持 Chrome、Edge、Brave、Arc 等所有 Chromium 内核浏览器。Firefox 版本在路线图上。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 别再描述了。开始标记。 安装 Markagent,把你的 AI Agent 一直在等的精准 UI 反馈交给它。免费。本地。为 agentation 和 vibe coding 工作流而生。 标记位置。把 prompt 交给 Agent。