之前我分享过一个 vibe coding 小工具 Selector，它是一个浏览器书签，用来选择页面上的元素并生成位置提示词。最近我在开发浏览器拓展版 Selector Pro，尝试把同样的选择动作延伸到图片：选中网页里的图片以后，直接读取它的设计特征，再转换成结构化的生图提示词。我用两张图片测试了这条流程，也比较了生成结果和原图的差异。
Selector 书签的用法
Selector 是一个小书签，开源在 GitHub：oil-oil/selector。
点击书签以后，页面右下角会出现一个小角标。这时点击屏幕上的任何元素，再按 Command+C（Windows 上是 Ctrl+C），到 Codex 里粘贴，就能得到这个元素的位置信息转换成的提示词。
用这个方式可以快速告诉 AI 要修改的元素在哪里。
Selector Pro：读取图片生成提示词
Selector Pro 是一个浏览器拓展，我预计它会走订阅制，不是免费使用的，但能力会比原本的书签强很多。
举一个具体的使用场景。我在小红书看到 BlueDesignLab 的一组作品，图做得很好看，我想学习这种设计风格，用来生成自己的图片。
操作流程是：
- 开启浏览器拓展版的 Selector，角标上会有一个 Pro 标识；
- 选择图片所在的元素，按 Command+I，拓展会开始读取这张图片；
- 读取完成后，图片会被直接转换成一段结构化的提示词，包含光影、色彩、风格等描述；
- 按 Command+C 复制提示词，粘贴到生图工具里生成图片。
生图时使用的模型是 GPT Image 2。生成完成的效果是：
和原图对比一下。因为生成时没有使用参考图，两者不完全一致，但风格比较相似。
对于不同的生图模型，同一段提示词生成的效果也会有一些偏差。不过大体上来说，已经比较接近我想要的风格了。
再测试一张图
再看另一张图。还是打开 Selector，选择元素，按 Command+I 读图。这次读图的速度很快，演示时没有剪辑。
然后回到生图工具，新建一个话题，换一个模型，把提示词粘贴进去发送。生成之后的效果：
和原图对比：
不能说一模一样，但能复刻原图大部分的设计特征。这类风格的图如果想自己手写提示词去生成，其实是很复杂的。
目前 Selector Pro 还在开发中，这两次测试只验证了从网页图片提取设计特征、再交给生图模型生成图片的流程。结果会受到生图模型影响，也没有使用原图作为参考，所以更适合学习和迁移设计特征，不能把生成结果当作对原图的精确复刻。开发完成以后，我会再整理完整的使用方式。