MiroMiro

MiroMiroとは？

MiroMiroは無料のChrome拡張機能で、任意のライブウェブサイトの要素を検査し、基盤となるデザインとコードのアーティファクトをコピーできます。CSSを抽出してTailwindに変換し、SVGやLottieアニメーションなどのアセットもエクスポート可能です。

目的はUIの「リバースエンジニアリング」を減らすこと。ページから色、フォント、スペーシング/ラディウス/シャドウ、コード出力を直接エディタに引き込めます。

ワンクリック要素コピー（ライブサイト）: 要素をクリックして、現在のページから正確なCSS由来の値と関連デザイン情報を取得。
CSS to Tailwindエクスポート: 抽出されたスタイルを本番対応のTailwind出力に変換し、HTMLと一緒にプロジェクトワークフローに再利用。
デザイントークン抽出（パレット+トークン）: ブランドカラー/パレットを抽出し、Tailwind configやCSS変数などの形式でプライマリ/アクセント/サーフェスなどのUI値をエクスポート。
画像・ベクターアセット抽出: 画像をオリジナル品質のPNG, JPG, WebPでエクスポートし、インラインSVG/アイコン/イラストを編集可能なベクターアセットとして抽出。
Lottie抽出: ページで再生中のLottieアニメーションを検知し、JSONをダウンロードしてプロジェクトで再利用。
ページ上でのアクセシビリティコントラストチェック: ライブサイトに留まりながら、テキスト/UIカラー組み合わせをWCAG AAおよびAAAのコントラストでチェック。
ローカル動作: 抽出はローカルで実行され、拡張機能はコピー内容を見ません。
ライブラリ/ブックマーク: コンポーネント、カラー、アセットなどを個人参考ライブラリに保存。

ランディングページの高速再構築: ライブページのUIコンポーネントをクリックしてTailwind + HTML出力を取得し、スクリョンショットの手動マッチングを省く。
ブランドパレットとトークンの生成: ライブサイトからフルパレットを抽出し、hex/RGB/HSL/OKLCH値をデザインチームワークフローに合わせた形式でエクスポート。
ベクターアイコン/SVGイラストの取得: ページのインラインSVGを抽出し、編集可能なベクターアセットとして貼り付け。スクリーンショットに頼らず。
既存アニメーションをアプリに追加: ページのLottieアニメーションを見つけ、JSONをダウンロードして自身のLottieベースUIに統合。
アクセシビリティ向けカラーコントラスト事前チェック: ページ上でWCAGコントラストチェック（AA/AAA）を使い、本番前にテキスト/UI組み合わせを検証。

MiroMiroはウェブアプリですか、ブラウザ拡張ですか？ MiroMiroはChrome拡張機能です。

MiroMiroは任意のライブウェブサイトからコードを抽出できますか？ 拡張機能は任意のライブウェブサイトの要素に基づきCSSをコピーしてTailwindに変換するよう設計されています。

どのような出力をエクスポートできますか？ ページに基づき、Tailwind + HTML、デザイントークン（カラー/パレット）、CSS変数/configエクスポート、画像（PNG/JPG/WebP）、SVG、Lottie JSONを出力します。

MiroMiroはコピー内容をサーバーに送信しますか？ ページによると、抽出はローカルで実行され、コピー内容は見ません。

Pro機能の無料トライアルはありますか？ はい。ページではクレジットカード不要の3日間Proトライアルがあり、その後Proは€6/月（限定早期生涯オプションは「一括払い」と記載）。

ブラウザDevTools（手動検査）: CSSとDOMを直接検査可能ですが、Tailwindなどへの手動抽出・変換が必要です。
UI-to-code / design-to-codeツール（レイアウト中心ワークフロー）: スクリーンショットやデザインファイルからコード生成しますが、ライブページからの正確な値引き出しとはワークフローが異なります。
デザイントークン抽出ツール（カラー/テーマ特化）: パレット/トークン抽出に特化しますが、Tailwind/HTMLエクスポート、Lottieダウンロード、インラインSVG抽出をまとめてカバーしない場合があります。
Lottie特化抽出ツール: Lottieアセット取得に特化しますが、MiroMiroのCSS/Tailwindやデザイントークン抽出は提供しません。