Qursor

Qursor点选网页元素,为AI代理提取结构化上下文

Qursor 是一款浏览器扩展,让你通过点击网页元素即可提取其选择器、类名、样式、字体、颜色等结构化信息,并直接粘贴给 AI 代理进行精准编辑。不再浪费 token 截图或描述,开发者可以更高效地让 AI 修改 UI 元素。

free
Qursor浏览器扩展AI开发工具元素选择器网页设计工具前端开发AI辅助编程CSS提取字体检测颜色拾取
收录日期
更新日期
3.3 (0 评价数量)

登录后可为项目评分

用 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 ComponentsShadow DOM 的兼容性还有待加强。另外,提取的上下文信息有时过于冗长(比如包含所有计算样式),如果能提供“精简模式”会更友好。

不过,这个工具的核心理念足够务实:让 AI 理解你真正指的是哪一个元素。它没有试图做复杂的“自动修改”,而是专注于提供精准的输入。对于频繁使用 AI 编码的开发者来说,这可能是性价比最高的浏览器扩展之一。

如果你也在寻找一种更省 token 的方式与 AI 协作改 UI,不妨给 Qursor 一次机会。安装后试用 5 分钟,你就会明白“点选”比“描述”高效得多。

优缺点

优点

  • 精准提取元素选择器与样式,减少 AI 误解
  • 内置字体检测、颜色拾取和间距测量工具
  • 支持导出 HTML/CSS/JSX 代码片段
  • 完全免费,无注册要求
  • 极大提升 AI 辅助 UI 开发的效率

缺点

  • 暂不支持 Firefox 浏览器
  • 对 Shadow DOM 元素的兼容性有限
  • 提取的样式信息有时过于详细,缺少精简模式
  • 仅适用于桌面浏览器,无移动端支持

常见问题

Qursor 支持哪些浏览器?

目前支持 Chrome 和基于 Chromium 的浏览器(如 Edge、Brave),Firefox 版本正在开发中。

使用 Qursor 需要登录或注册吗?

不需要。Qursor 是纯客户端工具,所有信息提取都在本地完成,不会收集你的数据。

提取的信息可以直接用于任何 AI 工具吗?

是的。复制的内容是纯文本格式,包含 CSS 选择器和样式属性,可以粘贴到 ChatGPT、Claude、Copilot 或任何文本输入框。

Qursor 会修改网页内容吗?

不会。Qursor 只读取元素信息并复制到剪贴板,对页面本身不做任何修改。

我能用 Qursor 提取动态加载的内容吗?

可以。Qursor 工作在实时 DOM 上,只要元素存在于页面中,即使是 AJAX 加载的内容也能正常提取。

探索更多

相似工具

The Agentic Pipeline Course

The Agentic Pipeline Course

该课程引导你使用编码代理(如Claude Code)从零搭建一个真正的自主AI系统:一个将每日新闻转化为创业点子新闻通讯的Python流水线,架构与GammaVibe相同。适合高级工程师和独立开发者,需要Python和API基础。

Gitash

Gitash 是一款免费、隐私优先的开源工具,让你浏览任意公开 GitHub 仓库,按标签筛选 issue,然后由 AI(支持 Claude、GPT、Gemini)实时生成贡献计划,包含相关文件、逐步指南、测试建议和分支名。适合想参与开源但不知从何下手的开发者。

Ündes

Ündes

Ündes 是一款评估 AI 生成代码或工程方案可信度的工具。它自动生成包括证据、假设、风险在内的可审查工件,并在合并前给出信任裁决,帮助团队更安全地采纳 AI 辅助开发。

AccuWeb Atlas

AccuWeb Atlas

AccuWeb Atlas 是 AccuWeb 推出的一款 AI 网站构建器,能通过自然语言描述自动生成完整、可发布的 Web 应用,无需编码或模板。本文评测其功能性、优缺点及适用场景,帮你判断是否值得一试。

Wholestack

Wholestack

Wholestack 是一款能将自然语言描述转化为完整、可部署的 SaaS 应用的 AI 工具,自动处理认证、数据库、计费、实时更新和 UI,并通过 ShipGate 安全验证机制确保代码安全。适合快速原型验证和中小团队构建 MVP。

Sotto

Sotto

Sotto是一款专为工程师设计的隐形AI覆盖层,能在面试、演示等高压场景下提供温和的语音转文字提示,同时自动隐藏界面防止屏幕共享暴露。它并非替代思考的拐杖,而是关键时刻的推手,保持专业形象的同时缓解压力。

开源项目

guidellm: 评估和优化 LLM 部署性能

guidellm 是一个开源工具,专为评估和优化大语言模型(LLM)在生产环境中的推理性能而设计。它支持压力测试、延迟分析、吞吐量评估等,帮助开发者识别瓶颈并调整部署配置。基于 vLLM 团队开发,适合需要精细化调优 LLM 服务的团队。

terax-ai: 7MB终端优先AI开发工作台

terax-ai 是一个轻量级(仅7MB)的终端优先AI原生开发工作台,专为命令行爱好者设计。它集成了AI辅助能力,提供极快的启动速度和极小的资源占用,让开发者在熟悉的终端环境中高效编码、调试和实验。开源且易于安装,适合追求简洁与效率的开发者。

Kun: 将 AI Agent 工作区嵌入你的应用

Kun 是一个开源的 AI Agent 工作空间,内置代码与写作模式,可无缝集成到你的应用程序中。基于 TypeScript 开发,为开发者提供可定制的智能交互环境,支持多轮对话、工具调用和上下文管理。

Kiln: 一站式 AI 系统评估与优化平台

Kiln 是一个开源 Python 工具,帮助开发者系统化地构建、评估和优化 AI 系统。它集成了 evals、RAG、智能体、微调、合成数据生成、数据集管理和 MCP 协议支持,让 AI 开发工作流更高效、更可控。适合需要深度调优 AI 性能的团队和个人。

jar-analyzer: JAR包GUI分析工具内置AI助手

Jar Analyzer 是一个开源的 JAR 包 GUI 分析工具,内置 AI 助手辅助分析,支持 JAR DIFF、方法调用关系搜索、DFS 调用链分析、污点分析、CFG 程序分析、JVM 栈帧分析等功能,适合 Java 开发者、安全研究人员进行代码审计和逆向分析。

omlx: macOS 菜单栏 LLM 推理服务器

omlx 是一款专为 Apple Silicon 打造的轻量级 LLM 推理服务器,通过 macOS 菜单栏轻松管理。它支持连续批处理和 SSD 缓存,能显著提升推理吞吐量和响应速度。开源且易于上手,适合 Mac 开发者本地运行大型语言模型。