ibelick/mesurer

何を解決するか

Mesurer は、ブラウザ内の視覚的要素を正確に測定、検査、キャプチャする方法を提供します。開発者がコーディングエージェントに正確な視覚的フィードバックやレイアウト要件を伝えるのを支援するように設計されており、"これと同じように見せたい"という曖昧なリクエストを減らします。

動作方法

React コンポーネントとしてアプリケーションに挿入するだけです。有効になると、定規、ガイド、カラーピッカーなどのインタラクティブツールがUIの上に重ねて表示されます。キーボードショートカットを使って、X線モードやテキストインスペクターなどの異なる検査モードを切り替えることができます。これにより、レンダリングされたページのレイアウトやスタイルを分析できます。

対象ユーザー

AIコーディングエージェントと連携して作業しているフロントエンド開発者やデザイナーで、ピクセル単位の正確な測定値や視覚的仕様をキャプチャ・共有する信頼できる手段が必要な方。

特徴

• 視覚的検査ツール: カラーピッカー、タイポグラフィ用テキストインスペクター、要素構造を確認できるX線モードを含む。
• コードによる正確性: ピクセル定規とドラッグ可能なガイドで、垂直・水平の整合性をチェック可能。
• キャプチャ機能: 表示中のタブの特定領域をドラッグしてスクリーンショットとしてキャプチャ可能。
• 測定オーバーレイ: Altキーを押しながら距離オーバーレイで、すばやく余白のチェックが可能。
• 状態の永続化: カスタマイズ可能なストレージアダプタを使用して、ページリロード後もワークスペース状態を保存可能。