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

相关推荐
花间相见7 分钟前
【终端效率工具01】—— Yazi:Rust 编写的现代化终端文件管理器,告别繁琐操作
前端·ide·git·rust·极限编程
|晴 天|17 分钟前
我如何用Vue 3打造一个现代化个人博客系统(性能提升52%)
前端·javascript·vue.js
风止何安啊25 分钟前
网页都知道要双向握手才加载!从 URL 到页面渲染,单向喜欢连 DNS 都解析不通
前端·javascript·面试
太极OS31 分钟前
给 AI Skill 做 CI/CD:GitHub + ClawHub + Xiaping 同步发布实战
前端
你_好31 分钟前
Chrome 内置了 AI 工具协议?WebMCP 抢先体验 + 开源 DevTools 全解析
前端·mcp
GISer_Jing31 分钟前
LangChain.js + LangGraph.js 前端AI开发实战指南
前端·javascript·langchain
正在发育ing__35 分钟前
从源码看vue的key和状态错乱的patch
前端
黄林晴1 小时前
第一次听到 Tauri 这个词,去学习一下
前端
可可爱爱的你吖1 小时前
蜂鸟云地图简单实现
前端
布局呆星1 小时前
Vue3 :生命周期、DOM 操作与自定义组合式函数
前端·javascript·vue.js