这个工具让AI真正理解你的需求,告别反复解释!
最近做了个小工具,解决了我日常开发中的一个大痛点,分享给大家~
背景
事情是这样的,我平时用Cursor写代码,经常需要修改页面样式。但是每次都要:
- 找到对应的元素
- 想好怎么描述给AI
- AI理解错了,再解释一遍
- 反复调试...
太麻烦了!于是我就想,能不能做个工具,让我直接点击页面元素,然后告诉AI要改什么?
于是就有了 HoverPrompt
简单来说,这是一个Chrome扩展,功能超级简单:
点击 → 高亮 → 输入需求 → 生成Prompt → 复制给Cursor
具体怎么用?
- 点击扩展图标,进入"检查模式"
- 鼠标悬停在页面上,元素会自动高亮
- 点击想要修改的元素
- 输入你的需求,比如"背景色改成黄色"
- 按Enter,自动生成一个结构化的Prompt
- 复制粘贴到Cursor,AI就能准确理解你要改什么了
效果对比
之前:
erlang
我:帮我改一下这个按钮的样式
AI:哪个按钮?具体要改什么?
我:就是那个蓝色的按钮,改成圆角的
AI:蓝色按钮在哪里?我需要更具体的信息...
现在:
arduino
我:背景色改成黄色(元素选择器:#submit-button)
AI:好的,我来帮你修改这个按钮的背景色为黄色
技术实现
其实技术含量不高,主要用了:
- Chrome Extension API
- 原生JS操作DOM
document.elementFromPoint
定位元素getComputedStyle
获取样式
核心思路就是:
- 监听鼠标移动,实时高亮元素
- 点击时生成稳定的CSS选择器
- 提取当前样式信息
- 组装成AI能理解的Prompt
界面设计
界面很简洁,主要就几个部分:
- 高亮框:蓝色边框+半透明背景,悬停时显示
- 输入框:浮窗形式,显示当前样式和输入区域
- 提示信息:右下角显示快捷键帮助
整体风格比较现代,用了CSS3的过渡动画,体验还算流畅。
实际使用感受
用了几天,确实方便了很多:
✅ 优点:
- 操作简单,几乎零学习成本
- 生成的Prompt很准确,AI理解度大幅提升
- 支持键盘快捷键,效率更高
⚠️ 缺点:
- 目前只支持Chrome
- 在某些复杂页面上选择器可能不够稳定
- 功能还比较基础
安装方法
如果你也想试试,可以这样安装:
- 下载项目文件
- 打开Chrome扩展管理页面
- 开启开发者模式
- 加载已解压的扩展程序
- 选择项目文件夹
或者直接克隆代码:
bash
git clone https://github.com/name718/hover-prompt
cd hover-prompt
后续计划
这个小工具还有不少改进空间:
- 支持批量选择元素
- 添加一些预设的样式模板
- 集成更多AI工具
- 优化选择器的稳定性
开源地址
项目完全开源,代码在GitHub上。如果你觉得有用,欢迎:
- 给个⭐️
- 提Issue反馈问题
- 提交PR改进功能
- 分享给身边的朋友
项目地址 : github.com/name718/hov...
总结
这个小工具虽然简单,但确实解决了我日常开发中的实际问题。现在修改页面样式变得超级简单,就像点菜一样,想要什么效果直接说就行。
如果你也经常用AI写代码,特别是处理CSS相关的任务,强烈推荐试试这个工具。相信会给你带来不一样的开发体验!
项目地址 : github.com/name718/hov... 问题反馈 : github.com/name718/hov...