ibelick/mesurer

解决的问题

Mesurer 提供了一种精确测量、检查和捕获浏览器中视觉元素的方法。它专为帮助开发人员向编码代理传达精确的视觉反馈和布局要求而设计，从而减少“让它看起来像这样”这类请求的模糊性。

工作原理

它是一个你可以嵌入到应用程序中的 React 组件。启用后，它会提供一系列交互式工具——如标尺、指引线和颜色选择器——叠加在你的 UI 之上。用户可以使用键盘快捷键在不同检查模式（如 X 射线模式或文本检查器）之间切换，以分析渲染页面的布局和样式。

适用人群

与 AI 编码代理协作的前端开发人员和设计师，他们需要一种可靠的方式来捕获和传达精确的像素级测量值和视觉规范。

主要亮点

• 视觉检查工具：包含颜色选择器、用于排版的文本检查器，以及查看元素结构的 X 射线模式。
• 代码级精度：提供像素标尺和可拖动的指引线，用于垂直和水平对齐检查。
• 捕获功能：允许用户拖动并捕获可见标签页的特定区域作为截图。
• 测量叠加层：按住 Alt 键时，通过距离叠加层快速检查间距。
• 状态持久化：支持使用可自定义的存储适配器在页面重新加载后保存工作区状态。