3秒安装，效率翻倍：安利一个被低估的 AI 网页拾取神器 Selector

在用 Claude Code、Cursor 或者 Codex 辅助开发时，你是不是经常遇到这种尴尬：

对着一个复杂的网页元素，想让 AI 帮改个样式、加个功能，结果文字描述了半天，AI 还是找不对地方，甚至写出来的代码南辕北辙？

「把那个蓝色的按钮调大一点，就在导航栏右侧...」 「这个列表的间距太密了，能不能加个圆角？」

描述网页结构，真的很痛苦。

今天，我要给你安利一个神器：Selector。它是一个浏览器书签（Bookmarklet），却能成为你和 AI 之间的「视觉翻译官」。

什么是 Selector？

简单来说，Selector 是一个可以让你在任何网页上「指哪打哪」并生成结构化 Prompt 的工具。

它不需要安装复杂的插件，只需一个书签，就能让你：

1. 1. 视觉化选择：像 Chrome 开发者工具一样点击元素。
2. 2. 实时批注：直接给选中的元素添加指令。
3. 3. 一键生成：自动提取定位符、组件信息、样式上下文，生成一段 AI 听得懂的「结构化 Prompt」。

安装只需 3 秒

无需去 Chrome 商店，也不用下载安装包：

1. 1. 访问安装页面（支持中英文切换）。https://oil-oil.github.io/selector/
2. 2. 将 [Selector] 按钮拖动到你的浏览器书签栏。

1. 3. 完成！ 就是这么简单。
2. 记住了，打开一个新页面时，需要点击书刚刚拖动到书签栏上的即可

Selector 的真正强大之处在于它对网页结构的极致解析。

1. 基础操作：指哪打哪

打开任意网页，点击书签栏的 Selector。

• • 点击：选中元素。
• • Shift + 点击：多选。
• • ↑ / ↓：切换父子层级。
• • ✎ 按钮：直接输入「把这个变成红色」或「给这里加个 Analytics 链接」。
• • ⌘C：复制 Prompt 到剪贴板。

2. 「写轮眼」模式（Sharingan Mode）

当你需要 1:1 复刻一个复杂组件时，开启设置里的 Sharingan 模式。 按 ⌘C 后，它会生成一份详尽到恐怖的 Markdown 复刻报告：

• • 根 CSS 变量 & 视觉属性
• • 清洗后的 DOM 快照（图片自动转 Data URL）
• • 精确的样式 Diff（只保留非默认值）
• • 交互状态样式（:hover / :focus）
• • React Fiber 细节（如果页面是 React 写的）

这份报告丢给 Claude，AI 几乎能瞬间完成代码复刻，精准度惊人。

3. 截图 + 文字：双管齐下

启用「截图+文本组合」后，复制时会同步截取选中区域。这对于多模态模型（如 Claude 3.5 Sonnet）简直是绝杀——既有坐标文字说明，又有视觉参考。

看看它生成的 Prompt 是什么样的

当你选中一个 Dashboard 的 Hero 区域并添加备注后，复制出来的内容长这样：

URL: https://example.com/dashboard 1. Hero "Welcome to the Dashboard"

• • locator: heading "Welcome to the Dashboard"
• • source: src/components/Hero.tsx:12
• • instruction: Make this red and larger

2. nav "Home Settings Profile Logout"

• • instruction: Add an "Analytics" link after "Settings"

Page: https://www.baidu.com/ 1. div "百度一下" <div> locator: div "百度一下" layout: display:flex; flex-direction:row; align-items:center; justify-content:center; gap:normal

AI 拿到这段话，再也不用猜你指的到底是哪个节点了。

如果你每天都要面对大量的 UI 改动需求，或者正在用 AI 进行的前端开发，或进行自动化测试的同学 Selector 绝对是你书签栏里最值得占据一席之地的工具。

今日行动建议：

1. 1. 按我说的安装上。
2. 2. 把它拖进书签栏。
3. 3. 试着选中你公司主页的一个按钮，让 AI 帮写个UI测试脚本。

你会发现，沟通成本从未如此之低。

官方仓库

https://github.com/oil-oil/selector

#AI #Selector #playwight