用 AI 改网页 UI 时,你是不是也反复截图、描述“第三个按钮的左侧阴影”,结果 AI 还是改错了元素,白白浪费 token?Qursor 就是为解决这个痛点而生——一个轻量的浏览器扩展,让你直接指着元素说“就这个”。
核心逻辑:指向,复制,粘贴
安装 Qursor 后,浏览器右下角会出现一个浮动面板。点击“激活”按钮,鼠标悬停到任意页面元素上,元素会被高亮并显示一个信息气泡,包含其标签、ID、类名等。确认点选后,所有结构化上下文会自动复制到剪贴板。
这段文本可以直接粘贴到 ChatGPT、Claude 或任何代码助手的对话中。AI 拿到的是精确的 CSS 选择器和样式数据,而不是模糊的截图。这意味着 “把标题字体从 Arial 改成 Inter”这样的指令,AI 能一步到位,不再需要反复确认。
不仅仅是选择器:完整的设计审计工具
Qursor 不只能抓取选择器。它还内置了:
- 字体检测器:实时显示元素的 font-family、font-size、line-height 等属性数值。
- 颜色取色器:点击即可拾取任意像素的颜色值,支持 HEX、RGB、HSL 格式。
- 间距测量:快速查看 margin、padding 和 border 的精确像素。
- 组件导出:将选中区域的结构直接导出为 HTML、CSS 或 JSX 代码片段。
- 资源下载:一键下载页面上的图片、SVG 或其他静态资源。
这些功能叠加起来,让 Qursor 更像一个面向 AI 时代的开发者助手,而不仅仅是“选择器提取器”。设计师也可以用它快速分析竞品页面的排版和配色方案。
典型使用场景:前端开发者的日常救星
想象一下:你正在用 Cursor 或 Copilot 修改一个 React 组件的样式。以前需要手动打开 DevTools,找到对应元素,复制选择器,再粘贴到编辑器。Qursor 把流程缩短到一步:悬停、点击、粘贴到 AI 对话框,AI 直接输出经过修改的组件代码。
另一个高价值场景是跨团队协作。设计师在 Figma 上调整了按钮配色,只需要用 Qursor 从演示页面上抓取新颜色值,连同选择器一并发给开发,开发再喂给 AI 生成更新后的样式表。整个过程减少了两端的上下文损耗。
一点遗憾与前瞻
目前 Qursor 主要支持静态页面元素,对 Web Components 和 Shadow DOM 的兼容性还有待加强。另外,提取的上下文信息有时过于冗长(比如包含所有计算样式),如果能提供“精简模式”会更友好。
不过,这个工具的核心理念足够务实:让 AI 理解你真正指的是哪一个元素。它没有试图做复杂的“自动修改”,而是专注于提供精准的输入。对于频繁使用 AI 编码的开发者来说,这可能是性价比最高的浏览器扩展之一。
如果你也在寻找一种更省 token 的方式与 AI 协作改 UI,不妨给 Qursor 一次机会。安装后试用 5 分钟,你就会明白“点选”比“描述”高效得多。











评论
暂无评论
成为第一个评论的人