Mesurer

Mesurer в 2026 году

Mesurer — линейка для интерфейсов прямо в браузере: нажали клавишу — поверх страницы появляется оверлей, в котором можно кликнуть на любой элемент и увидеть его размеры, зажать Alt и проверить расстояния между блоками (как в Figma), растянуть направляющие, включить пиксельные линейки по краям, снять цвет пипеткой или посмотреть типографику элемента. Есть даже «рентген», показывающий структуру всех элементов на странице.

Автор — ibelick, известный своими открытыми UI-экспериментами. Задумка сформулирована прямо: точность для тех, кто собирает интерфейсы с ИИ-агентами. Когда правки в вёрстку вносит агент, «подвинь чуть левее» не работает — нужны цифры, и Mesurer их даёт. Ставится двумя способами: расширение для Chrome — мерить любой сайт, или npm-пакет — компонент, который подключается в своё приложение только в режиме разработки. Код открыт (MIT), 471 звезда на GitHub, всё бесплатно.

Сильные стороны: замеры, направляющие и пипетка как в графическом редакторе, но поверх живой страницы; два способа установки; открытый код; отменяемая история действий и сохранение разметки между перезагрузками.

Слабые стороны: проект очень молодой (версия 0.1); расширение — только для Chrome; захват скриншотов работает только в расширении, в npm-версии его нет.

Вывод: если вы объясняете ИИ-агенту или разработчику, что «здесь должно быть 8 пикселей, а не 12», — Mesurer даёт цифры, которыми можно разговаривать.