用 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 分鐘，你就會明白「點選」比「描述」高效得多。
評論
暫無評論
成為第一個評論的人