我最近 vibe coding 了一个小工具，叫 Selector。它可以快速选择页面上的元素，把元素复制成带有位置信息的提示词，帮助我们向 AI Agent 描述清楚要修改的位置。
做这个工具的原因是，很多人在跟 AI 对话修改页面的时候，比较难详细描述清楚要修改的是哪个元素。我自己也有这个问题，经常需要手动截图再解释，所以做了这个小工具。
安装
Selector 开源在 GitHub：oil-oil/selector。
进入仓库后打开右边的链接，会进入安装页面。页面上有一个白色的 Selector 按钮，把它拖到浏览器的书签栏，就安装完成了。
使用
安装之后，在任何页面点击这个书签就可以开始使用。比如我打开自己做的游戏项目 Wolfcha 的页面，想修改其中一段文案。
点击书签后，页面右下角会出现一个小弹窗，这时点击页面上的元素就可以选中它。
选中元素之后，可以点击元素上的编辑按钮，给这个元素单独写一句提示词，比如「将文案改为 xxx」，然后点击 Copy Prompt 复制。
复制出来的内容是结构化的，包含页面信息、元素标签、元素文本和我们自己写的提示词。如果是本地调试的 React 项目，它还会带上元素对应的组件信息：
Page: /zh — Wolfcha | AI Werewolf - Play Werewolf with AI Online
1. .wc-contract-oath <div>
react: AnimatePresence › PresenceChild › WelcomeScreen
text: "我自愿加入这场关于谎言与真相的游戏。当夜幕降临，我将隐藏我的身份；当黎明升起，我将审判罪恶。"
instruction: 将文案改为 xxx
按住 Shift 可以多选元素，也可以选择元素的外层容器。每个选中的元素都可以各自添加提示词，然后一起复制。
复制之后到 Claude Code 里粘贴，再补上自己的需求，比如调整这个位置的边距、文字或者配色。AI 拿到这些元素信息之后，可以很快定位到要修改的代码位置，代码仓库比较大的时候这个工具会更实用。
开发经历
我最开始想把 Selector 做成一个浏览器插件，但插件的分发和更新都比较麻烦，而书签能达到类似的效果。我也考虑过把它做成一个 Skill，但这个工具是帮助我们跟 AI 对话的，我认为没有必要让 AI 去使用它，所以最终做成了一个简单的书签：打开一个页面，把按钮拖到书签栏就完成安装，在页面里点击书签就会弹出小弹窗，可以直接使用。
Selector 目前保持为浏览器书签，安装和更新都通过 GitHub 仓库里的页面完成。它适合在页面已经打开、但很难用语言说明具体元素位置时使用。