Mesurer: Новый инструмент для точной передачи визуальных данных от дизайнеров к ИИ-разработчикам

Mesurer sieht aus wie ein Design-Werkzeug, richtet sich aber an den Coding-Agenten, der den Code schreibt. Der quelloffene Inspektor misst und kommentiert jede Live-Oberfläche direkt im Browser, danach geht das Feedback an KI-Agenten und das Team. Agenturen und Freelancer, die Layouts mit Cursor oder Claude bauen, bekommen damit eine gemeinsame Sprache aus Zahlen. drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen Der UI-Inspektor Mesurer sammelt seit dem Start im April 2026 rund 475 Sterne auf GitHub, und der Zuspruch hat einen Grund. Entwicklerinnen und Entwickler, die Oberflächen zusammen mit KI-Agenten bauen, beschreiben Abstände, Farben und Ausrichtung bisher mühsam in Worten. Genau diese Übersetzung von Auge zu Prompt nimmt das Werkzeug ab und ordnet sich neben andere Bausteine, die Frontend-Wissen für Agenten aufbereiten. Das Wichtigste in Kürze - Mesurer ist ein quelloffener UI-Inspektor für den Browser, veröffentlicht unter der MIT-Lizenz und kostenlos. - Das Werkzeug misst Abstände, prüft Typografie, legt Hilfslinien an und sammelt Anmerkungen direkt auf der laufenden Seite. - Der Zweck trennt Mesurer von BugHerd und Marker.io: Das Feedback geht an den Coding-Agenten, nicht nur an das Team. - Verfügbar als Chrome-Erweiterung und als React-Komponente über npm. Was unterscheidet Mesurer von BugHerd und Marker.io? Dienste wie BugHerd und Marker.io sammeln Kommentare von Kunden und wandeln sie in Tickets für das Entwicklungsteam. Mesurer verfolgt ein anderes Ziel. Der Inspektor richtet sich an Design Engineers, die Oberflächen zusammen mit einem Coding-Agenten bauen, und bereitet das visuelle Feedback so auf, dass ein Agent damit weiterarbeiten kann.[1] Die nächste Verwandtschaft ist deshalb nicht BugHerd, sondern Googles quelloffenes VisBug. Beide Werkzeuge bearbeiten die Seite direkt im Browser. VisBug zielt auf das freie Editieren des Layouts, Mesurer auf präzise Messung und Weitergabe. Wie liefert Mesurer das Feedback an den Coding-Agenten? Der Inspektor legt sich über die laufende Seite und blendet ein Werkzeugset ein. Das Werkzeug misst Breite und Höhe eines Elements, zieht waagerechte oder senkrechte Hilfslinien und bestimmt mit gedrückter Alt-Taste den Abstand zwischen zwei Elementen. Hinzu kommen eine Typografie-Prüfung, ein Röntgenmodus für die Elementstruktur, eine Farbpipette, Pfeile, Freihandnotizen und Screenshots.[1] Diese Anmerkungen übergibt das Team anschließend an den Agenten. Statt einen zu großen Abstand in Worten zu umschreiben, liefert der Entwickler die gemessene Zahl. Wie gut ein KI-Agent eine Website überhaupt bedienen kann, prüfen inzwischen eigene Testdienste. Technisch greift Mesurer auch bei modernen Layouts, samt Shadow DOM und eingebetteten Frames. Ähnlich genau geht ein Nachschlagewerk vor, das alle 63 CSS-Einheiten live im Browser misst. Was kostet Mesurer, und für wen lohnt er sich? Mesurer kostet nichts. Julien Thibeaut, ein in Paris ansässiger Entwickler hinter den Komponentensammlungen prompt-kit und motion-primitives, stellt das Projekt unter die MIT-Lizenz.[1] Für den reinen Blick auf fremde Seiten genügt die Chrome-Erweiterung, für den festen Einbau in die eigene Anwendung dient die React-Komponente über npm.[2] Für den DACH-Raum lohnt der Blick vor allem für zwei Gruppen. Agenturen und Freelancer, die Kundenlayouts pixelgenau umsetzen, sparen den Umweg über Screenshots und handgetippte Notizen. Inhouse-Teams, die Oberflächen mit Cursor oder Claude bauen, gewinnen eine überprüfbare Grundlage für ihre Anweisungen. Ein Rat zum Schluss: Erst an einem laufenden Projekt testen, dann über den dauerhaften Einbau entscheiden. Quellen [1] Mesurer: „Inspect, annotate, and give feedback on any live interface“ (GitHub-Repository) [2] Mesurer: Dokumentation und Installation (mesurer.dev)