别再给AI描述那个按钮:Markagent一点页面,Claude Code直接开改

做前端改 bug，最烦的往往不是 bug 本身，而是描述 bug。

按钮低了两像素、弹窗点错地方才关闭、加载态闪一下、某个二级菜单 hover 颜色不对。你明明已经在页面上看到了问题，却还要花半天把它翻译成文字：

“仪表盘右上角第二个按钮，不是图标那个，是旁边那个，点开以后……”

这种描述对人都不稳定，对 AI 编程工具更容易跑偏。Claude Code、Cursor、Codex 再强，也得先知道你到底指的是哪个元素、哪个组件、哪个文件。

Markagent 解决的就是这个小但很真实的痛点：把一次页面点击，变成一份 AI 编程工具可以直接执行的结构化 Prompt。

前端改 bug 最贵的环节，竟然是“把页面翻译成人话”

现在很多人已经在用 Claude Code、Cursor、Codex 改代码。问题通常不在“AI 会不会写 CSS”，而在你给它的信息够不够精确。

传统反馈链路大概是这样：

场景	常见做法	坑在哪里
UI 偏移	截图、圈红、口头描述	AI 不知道对应组件和文件
交互异常	手写复现步骤	步骤容易漏，描述不精确
内部系统问题	发 Slack、写 ticket	信息在设计、产品、工程之间反复翻译
AI 编程修复	把截图和文字丢给模型	模型还要猜页面结构

说白了，你不是在修 bug，你是在给 AI 写“寻宝地图”。

Markagent 想砍掉的就是这段低效流程。

Markagent 到底是什么：点一下页面，吐出一份可执行 Prompt

Markagent 是一个 Chrome 扩展，面向 Claude Code、Cursor、Codex 这类 AI coding agent。它的用法不复杂：

1.在浏览器里打开目标页面。

2.按 Cmd + Shift + .，Windows / Linux 使用 Ctrl + Shift + .。

3.按住 Cmd 或 Ctrl，点击页面上的任意元素。

4.写一句你的反馈。

5.点击 Copy，复制生成的 Markdown Prompt。

6.粘贴到 Claude Code、Cursor、Codex 或其他 AI 工具里。

它输出的不是单纯截图，而是一份结构化上下文，通常会包含：

信息	用处
页面 URL	让 AI 知道问题发生在哪个页面
视口尺寸	避免响应式布局误判
DOM 元素	定位具体节点
React 组件名	帮 AI 找到组件边界
源文件路径	开发模式下可直接指到文件
CSS Selector	提供稳定定位线索
截图	保留视觉证据
用户备注	说明真正要改什么

这就比“那个按钮有点怪”强太多了。

真正有用的不是截图，而是“能让 AI 开始改代码的上下文”

截图工具只能告诉 AI：这里看起来有问题。

Markagent 更进一步，它告诉 AI：

•问题元素是什么；

•它大概率来自哪个组件；

•源码文件在哪里；

•页面当前尺寸是多少；

•用户希望它变成什么样。

这类信息对 coding agent 很关键。

因为 AI 改前端时最容易翻车的地方，不是不会写 CSS，而是定位错对象。它可能改了另一个同名按钮，可能在全局样式里乱补一刀，也可能根据截图猜一个完全不存在的结构。

如果 Prompt 里直接带上组件名、文件路径、选择器和截图，AI 第一次改对的概率会高很多。原文给出的单点反馈大概长这样：

markdown

## UI feedback

Page: https://app.example.com/dashboard

Viewport: 1440x900

Element: <button class="cta-primary">Save changes</button>

Component: <SaveButton /> (src/components/forms/save-button.tsx)

Selector: main > section.form-wrap > form > button.cta-primary

Note:

This button sits 2px too low against the input row, and the

hover state has no transition. Should match the cancel button.

Screenshot: [attached]

这已经不是普通 bug report，而是一份可以直接交给 AI 执行的任务输入。

Journey Mode 更狠：多步骤 bug 不用再手写复现流程

单个元素标注适合改样式、改文案、改 hover、改 loading。

但真实 bug 很多是流程型的：

•点 A；

•再点 B；

•输入一段内容；

•提交；

•结果弹出错误 toast；

•或者页面跳到了不该去的地方。

这种问题最怕手写复现步骤。少写一步，工程师复现不了；写太细，又像在写测试用例。

Markagent 的 Journey Mode 可以记录一整段点击流程。你打开记录后，按真实操作走一遍，结束后复制结果，它会把每一步点击和截图整理成 Markdown。

对 AI 来说，这就像拿到一份带证据的复现脚本。它不再需要猜“你到底点了哪里”。

哪些人最适合用它：不是只有程序员

这个工具看起来是给 AI coding 用的，但实际受益的人会更广。

角色	使用价值
前端工程师	快速定位组件和源码文件
设计师	直接标注像素级问题，不用在截图上画半天
产品经理	把交互问题变成结构化反馈
QA 测试	用点击记录替代冗长复现步骤
非技术同事	不需要懂代码，也能生成工程师看得懂的问题描述
AI 编程用户	让 Claude Code、Cursor、Codex 少猜一点

尤其是产品、设计、QA 和工程之间的协作，这类工具很实用。

过去一个 UI 问题可能要经历：产品描述、设计截图、测试复现、工程定位、AI 修复。Markagent 把中间的信息损耗压低了。

支持哪些 AI 工具：只要能粘贴文本，基本都能用

Markagent 导出的是普通 Markdown，不绑定某一家 AI 工具。

类型	工具
AI 编程 Agent	Claude Code、Cursor、Codex、OpenCode、Antigravity
Vibe Coding 平台	v0、Bolt、Lovable
通用 AI 助手	ChatGPT、Gemini、Copilot
本地模型工具	Ollama、LM Studio

这点很重要。

它不是再造一个新的工作台，而是把浏览器里的 UI 问题，包装成所有 AI 工具都能消费的输入格式。

隐私这一点别省：本地工具才敢拿来标内部系统

Markagent 另一个值得关注的点，是它强调本地运行。

按照原文说明，它的截图、备注和导出内容不会离开浏览器，也没有账号、云同步、分析统计和遥测。对内部后台、localhost、预发环境来说，这个设计很关键。

因为很多 UI bug 恰恰发生在：

•公司内部管理台；

•带登录态的业务系统；

•staging 环境；

•本地开发页面；

•还没发布的新功能页面。

这些页面不适合随便上传到第三方服务。能在本地生成 Prompt，再由你自己决定粘贴到哪个 AI 工具里，安全边界会清晰很多。

3 分钟上手：我会这样把它接进 AI 编程流程

如果只是随手试一下，可以按这个顺序来：

1.打开 Chrome Web Store，安装 Markagent。

2.把扩展固定到浏览器工具栏。

3.打开一个你正在开发的页面，比如 localhost:3000。

4.按 Cmd + Shift + . 或 Ctrl + Shift + . 唤出工具栏。

5.按住 Cmd 或 Ctrl，点中你要反馈的元素。

6.写清楚“要改成什么”，别只写“这里不对”。

7.复制 Markdown，粘贴给 Claude Code、Cursor 或 Codex。

这里有个小经验：备注尽量写结果，不要只写情绪。

比如不要写：

text

这个按钮很丑，改一下。

更适合写：

text

这个保存按钮和右侧取消按钮没有垂直对齐，当前大约低了 2px；

hover 状态缺少过渡动画，希望和取消按钮的 150ms transition 保持一致。

AI 不怕你要求细，怕的是你给的信息模糊。

我的判断：它不是大而全神器，但很可能变成 AI 编程标配小工具

Markagent 解决的问题不宏大，但很扎实。

AI 编程现在已经过了“能不能写代码”的阶段，真正影响效率的，是上下文质量。你给模型的信息越接近工程现场，它越少犯低级错。

这个工具的价值就在这里：

•把模糊描述变成结构化 Prompt；

•把截图变成可定位的上下文；

•把复现步骤变成点击记录；

•把产品、设计、QA 的反馈变成 AI 能直接处理的任务输入。

它不负责替你判断怎么改，也不保证 AI 一次修好所有问题。

但它能少掉最烦的一步：别再对着 AI 解释“不是这个按钮，是旁边那个按钮”。

对于已经在用 Claude Code、Cursor、Codex 的团队，我会把它放进前端反馈链路里试一轮。尤其是 UI 细节、内部后台、低成本快速迭代场景，收益会比较明显。

原文地址：https://dev.to/peter_truong/markagent-turn-any-ui-click-into-a-perfect-prompt-for-claude-code-cursor-and-codex-2i34

创作来源：个人观点仅供参考