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

相关推荐
Revol_C14 小时前
开箱即用!轻量级轮询方案,支持同步获取轮询结果!
前端·javascript·设计模式
38242782714 小时前
python:正则表达式
前端·python·正则表达式
用户479492835691515 小时前
我是怎么把模型回复用tts播放的更自然的
前端
JS_GGbond15 小时前
前端崩溃监控:给网页戴上“生命体征监测仪”
前端
俊劫15 小时前
AI 编码技巧篇(内部分享)
前端·javascript·ai编程
Maxkim15 小时前
一文读懂 Chrome CRX📦:你需要了解的核心知识点
前端·前端工程化
JackJiang15 小时前
AI大模型爆火的SSE技术到底是什么?万字长文,一篇读懂SSE!
前端·websocket
Mr_chiu15 小时前
数据可视化大屏模板:前端开发的效率革命与架构艺术
前端
进击的野人15 小时前
一个基于 Vue 的 GitHub 用户搜索案例
前端·vue.js·前端框架
ZsTs11915 小时前
《2025 AI 自动化新高度:一套代码搞定 iOS、Android 双端,全平台 AutoGLM 部署实战》
前端·人工智能·全栈