这个工具让AI真正理解你的需求,告别反复解释!

这个工具让AI真正理解你的需求,告别反复解释!

最近做了个小工具,解决了我日常开发中的一个大痛点,分享给大家~

背景

事情是这样的,我平时用Cursor写代码,经常需要修改页面样式。但是每次都要:

  1. 找到对应的元素
  2. 想好怎么描述给AI
  3. AI理解错了,再解释一遍
  4. 反复调试...

太麻烦了!于是我就想,能不能做个工具,让我直接点击页面元素,然后告诉AI要改什么?

于是就有了 HoverPrompt

简单来说,这是一个Chrome扩展,功能超级简单:

点击 → 高亮 → 输入需求 → 生成Prompt → 复制给Cursor

具体怎么用?

  1. 点击扩展图标,进入"检查模式"
  2. 鼠标悬停在页面上,元素会自动高亮
  3. 点击想要修改的元素
  4. 输入你的需求,比如"背景色改成黄色"
  5. 按Enter,自动生成一个结构化的Prompt
  6. 复制粘贴到Cursor,AI就能准确理解你要改什么了

效果对比

之前:

erlang 复制代码
我:帮我改一下这个按钮的样式
AI:哪个按钮?具体要改什么?
我:就是那个蓝色的按钮,改成圆角的
AI:蓝色按钮在哪里?我需要更具体的信息...

现在:

arduino 复制代码
我:背景色改成黄色(元素选择器:#submit-button)
AI:好的,我来帮你修改这个按钮的背景色为黄色

技术实现

其实技术含量不高,主要用了:

  • Chrome Extension API
  • 原生JS操作DOM
  • document.elementFromPoint 定位元素
  • getComputedStyle 获取样式

核心思路就是:

  1. 监听鼠标移动,实时高亮元素
  2. 点击时生成稳定的CSS选择器
  3. 提取当前样式信息
  4. 组装成AI能理解的Prompt

界面设计

界面很简洁,主要就几个部分:

  • 高亮框:蓝色边框+半透明背景,悬停时显示
  • 输入框:浮窗形式,显示当前样式和输入区域
  • 提示信息:右下角显示快捷键帮助

整体风格比较现代,用了CSS3的过渡动画,体验还算流畅。

实际使用感受

用了几天,确实方便了很多:

优点:

  • 操作简单,几乎零学习成本
  • 生成的Prompt很准确,AI理解度大幅提升
  • 支持键盘快捷键,效率更高

⚠️ 缺点:

  • 目前只支持Chrome
  • 在某些复杂页面上选择器可能不够稳定
  • 功能还比较基础

安装方法

如果你也想试试,可以这样安装:

  1. 下载项目文件
  2. 打开Chrome扩展管理页面
  3. 开启开发者模式
  4. 加载已解压的扩展程序
  5. 选择项目文件夹

或者直接克隆代码:

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...

相关推荐
r0ad1 分钟前
从痛点到解决方案:为什么我开发了Chrome元素截图插件
前端·chrome
OEC小胖胖9 分钟前
连接世界:网络请求 `wx.request`
前端·微信小程序·小程序·微信开放平台
jingling55521 分钟前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
en-route22 分钟前
使用 Flask 构建 Web 应用:静态页面与动态 API 访问
前端·python·flask
IT_陈寒24 分钟前
Vite 5年迭代揭秘:3个核心优化让你的项目构建速度提升200%
前端·人工智能·后端
怎么吃不饱捏40 分钟前
vue3+vite,引入阿里巴巴svg图标,自定义大小颜色
前端·javascript·vue.js
无敌最俊朗@41 分钟前
MQTT 关键特性详解
java·前端·物联网
JAVA学习通41 分钟前
微服务项目->在线oj系统(Java-Spring)----[前端]
java·开发语言·前端
excel1 小时前
Vue3 响应式系统核心执行器:Reactive Effect 与依赖调度机制
前端
南玖i3 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js