这个工具让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...

相关推荐
楼田莉子22 分钟前
前端学习——CSS
前端·css·学习
掘金安东尼29 分钟前
理解 Promise.any():一次成功就行
前端·javascript·面试
掘金安东尼31 分钟前
CSS 电梯:纯 CSS 实现的状态机与楼层导航
前端·javascript·github
张风捷特烈33 分钟前
FlutterUnit 3.3.0 | 全组件、全属性、鸿蒙支持来袭
android·前端·flutter
安心不心安2 小时前
React Router 6 获取路由参数
前端·javascript·react.js
fuyongliang1235 小时前
Linux shell 脚本基础 003
java·服务器·前端
lypzcgf7 小时前
Coze源码分析-工作空间-项目开发-前端源码
前端·人工智能·typescript·系统架构·开源软件·react·安全架构
yuguo.im7 小时前
Chrome DevTools Performance 是优化前端性能的瑞士军刀
前端·javascript·性能优化·chrome devtools
FSHOW8 小时前
【独立开发日记】MQ端到端类型安全
前端·javascript·后端
老华带你飞9 小时前
社区互助|基于SSM+vue的社区互助平台的设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·小程序·毕设·社区互助平台