我之前开发过一个小工具 Selector，它是一个浏览器书签。在安装页面把 Selector 按钮拖拽到浏览器顶部的书签栏，安装就完成了。
使用的时候，在任意页面点击这个书签，页面右下角会出现一个小工具栏。这时可以点击页面上的任何元素，按 Command+C（Windows 是 Control+C）把它复制成提示词。
把提示词粘贴到 Codex 这类 AI Agent 的对话里，可以看到它带着元素的位置信息，比如 locator 和对应的属性。这些信息帮助 AI 快速找到元素在代码里的位置。之前的思路是，上下文越准确，AI 定位的效果越好。
写轮眼模式
这次更新给 Selector 加了一个新模式。安装最新版本以后，打开工具栏的设置，可以看到多了一个「写轮眼模式」开关。这个模式用来复制某个区域的完整元素设计，而不只是单个元素的位置信息。
配合使用的还有设置里的第一个开关「截图 + 文本合并」。打开以后，复制提示词的时候会把对应位置的截图一起截下来，保存到指定的位置，可以连同提示词一起发给 AI。两个开关都打开以后，复制下来的就是截图加上完整的元素设计信息，包括 DOM、hover 和 dark 模式的样式、字体、动画和设计 token。
复刻一个真实页面
最近我看到 Matrix 这个产品（matrix.build），它的页面设计很有意思，我用它来演示完整的复刻流程。
在页面上点击 Selector 书签，确认写轮眼模式和截图文本合并都已开启，然后选择最外层的区域，按 Command+C。浏览器会弹出一次剪贴板授权，点击允许。
接着会弹出一个保存对话框，把这次截图保存到指定的位置，之后可以随着提示词一起提供给 AI。
打开 Codex，把刚才的提示词粘贴进去，告诉它：参考这个信息，将整个 HTML 复刻出来。为了防止 Codex 自己联网去查看原始网站，我另外说明只参考提供的信息，不要参考其他信息，这样复刻结果完全基于截图和复制下来的元素信息。
这份提示词非常长，我把它打开看了一眼，区域里所有元素的信息都在里面，包括每个元素的 CSS 规则和它在样式表里的出处。
复刻效果
Codex 完成以后，我把它生成的 HTML 和原始设计做了对比。复刻程度比较高，布局、卡片和连线的结构都还原了，配色上有一些差异，这类问题通过微调可以解决。
也就是说，只要是用 HTML 实现的页面效果，都可以用这个方式快速复制设计信息，交给 AI 复刻。
安装和更新
之前安装过 Selector 的，需要把旧书签删除，重新到安装页面把按钮拖拽到书签栏。打开设置以后能看到写轮眼模式，就说明更新成功了。写轮眼模式开启以后，工具栏上还会有一个特制的复制提示词按钮。
没有安装过的，可以在我的 GitHub 仓库 oil-oil/selector 里安装：打开仓库右侧 About 里的链接进入安装页面，把按钮拖到书签栏就完成了。
