ibelick/mesurer

解決的問題

Mesurer 提供了一種精確測量、檢視和擷取瀏覽器中視覺元素的方法。專為協助開發人員向編碼代理傳達精確的視覺反饋與佈局需求而設計，減少「讓它看起來像這樣」之類請求的模糊性。

作用方式

它是一個可插入應用程式的 React 組件。啟用後，會提供一組互動式工具——如尺規、指引線與色彩選擇器——疊加在您的 UI 上方。使用者可使用鍵盤快速鍵切換不同檢視模式（如 X 光模式或文字檢視器），以分析已渲染頁面的佈局與樣式。

適用對象

與 AI 編碼代理合作的前端開發人員與設計師，需要一種可靠方式來擷取並傳達精確的像素級測量值與視覺規格。

主要特色

• 視覺檢視工具：包含色彩選擇器、排版用文字檢視器，以及可檢視元素結構的 X 光模式。
• 程式級精準度：提供像素尺規與可拖曳的指引線，用於垂直與水平對齊檢查。
• 擷取功能：允許使用者拖曳並擷取可見標籤頁的特定區域作為截圖。
• 測量覆疊層：按住 Alt 鍵時，透過距離覆疊層快速檢查間距。
• 狀態持久化：支援使用可自訂的儲存適配器，在頁面重新載入後保留工作區狀態。