MiroMiro

MiroMiroとは？

MiroMiroは、DevToolsを開かずに任意のWebサイトからデザインアセットを検査、コピー、エクスポートできるChrome拡張機能です。要素にカーソルを合わせるだけで、CSS、色、フォント、スペーシングを瞬時に取得できます。画像、SVG、Lottieアニメーションをワンクリックでダウンロード。デザイントークンを抽出し、Tailwind設定やCSS変数としてエクスポートできます。ゼロから作り直す手間を省き、迅速なリリースを実現したいデザイナーや開発者向けに作られています。

こんな方におすすめ

• フロントエンド開発者：UIコンポーネントをリバースエンジニアリングし、本番環境で使えるTailwind + HTMLをCursor、Claude、v0に直接コピーしたい方
• デザイナー：ライブサイトからブランドカラー、フォント、デザイントークンをDevToolsを調べずに抽出したい方
• ノーコードビルダー：アセット、アニメーション、デザインシステムを素早く取得してワークフローを高速化したい方

主な機能

ライブインスペクター

ライブサイト上の任意の要素にカーソルを合わせてCSSを確認。色、フォント、パディングをインラインで変更し、ページがリアルタイムで更新されるのを確認できます。編集した値をCSSまたはTailwindとしてコピーしても、リロード時に変更が失われることはありません。

コードへのエクスポート

任意の要素をクリックするだけで、クリーンでセマンティックなTailwind + HTMLを取得し、Cursor、Claude、v0に貼り付け可能。UIを推測したりAIに説明したりする必要はもうありません。ワンクリックで正確なコードを入手できます。

アセット抽出機能

DOMを調べずに任意の画像を元の品質で取得。PNG、JPG、WebPとしてエクスポート。インラインSVG、アイコン、イラストを実際のベクターとして抽出し、完全に編集可能。LottieアニメーションをJSONとしてダウンロードし、After EffectsやLottieFilesで使用できます。

デザイントークン抽出

ライブサイトからすべての色、フォント、角丸、シャドウをTailwind設定または生のCSS変数として抽出。任意のピクセルを選択したり、ブランド全体のパレットを抽出し、hex、RGB、HSL、OKLCHをTailwind、Figma、またはデザインシステムに直接エクスポートできます。

特筆すべき点

「色、フォント、スペーシング、アセットを探すためにDevToolsを調べる必要はもうありません。すべてが瞬時に手に入ります。」

MiroMiroは、従来のデザイン検査の煩わしさを排除します。複雑なDevToolsツリーを操作する代わりに、カーソルを合わせ、クリックし、コピーするだけ。拡張機能は完全にローカルで動作し、ブラウザ外にデータが送信されることはありません。コンポーネント、色、アセットをブックマークして、訪れるサイトごとに成長するパーソナルスワイプファイルを構築できます。また、テキストとUIのペアに対してAAおよびAAA基準のWCAGコントラストチェック機能も内蔵されています。

こんな方におすすめ

UIをAIに説明したり、実際のコードに変換できないスクリーンショットを撮るのにうんざりしている方に。ランディングページを頻繁にリバースエンジニアリングする方、UIを素早く再構築したい方、ライブサイトから手動で調べずにデザインシステムを抽出したい方に特に便利です。3日間のProトライアルで無料で始められ、クレジットカードは不要です。