前端 AI 编程提效:告别手动定位,把 UI 上下文一键「喂」给 AI

在使用 Claude Code 或其它终端 AI 工具写 React 时，你是否也遇到过这种「鬼打墙」的时刻：

明明只想微调一个按钮的边距，或者修改某个弹窗的样式，却需要费劲地向 AI 描述：「不是上面那个 div，是嵌套在卡片里的第二个组件...」

这种时候，单纯靠提示词去「盲操」不仅效率低，还容易改错位置。

Trae 等 IDE 的可视化预览功能让人羡慕，点击元素即可带入上下文。那么，在更加灵活的 Claude Code 命令行工作流中，我们能不能也拥有这种「指哪打哪」的能力？

答案是肯定的。今天分享两个轻量级神器，帮你打通从浏览器 UI 到 AI 编程代理的「最后一公里」，让元素定位不再靠猜。

React-Grab

react-grab可以将选中元素的 context 放到剪贴板上，然后就可以发送给你使用编程代理了，不管它是 Claude Code 还是 Codex。

安装配置也很简单，就是执行一下截图里的命令。

动画演示：

官网地址：https://www.react-grab.com/

Agentation

这个 agentation 和前面一个类似，但是又有一点点不同。

它配置完成后，同样可以在网页上进行元素选择，选择完之后，它是允许你直接把需要反馈意见写上的。

另外，它是可以一次添加过的元素反馈，然后将其复制成 markdown 格式的文本，这样就可以扔个 LLM 了。

Agentation 安装配置稍微麻烦一点点，它功能比 grab 要多一些。

官网地址：https://agentation.dev/

大家可以根据自己需要选用，这样再也不用费劲巴拉的给 LLM 写一段提示词告诉它你要修改哪个元素了。

除了 React-Grab 和 Agentation，你还有什么私藏的‘上下文投喂’神器吗？

是 Trae 的一键引用，还是什么工具？欢迎在评论区留言分享，没准下期文章的主角就是你推荐的工具。

最后，感谢你看到这里👏

如果喜欢这篇文章，不妨顺手给我

点赞👍｜在看👀｜转发📪｜评论📣

如果想要第一时间收到推送，不妨给我个星标🌟

各种实用的AI知识和工具在持续更新中，感兴趣的话，可以点个关注。