セクションの検査とエクスポート
ヒーロー、ナビバー、カード、価格表などのセクションを選択し、クリーンな HTML と Tailwind CSS または通常の CSS としてエクスポートできます。
MiroMiro
MiroMiro は、ライブサイトの UI をコピー可能な HTML、Tailwind、CSS、デザイントークン、アセット、Lottie ファイルに変換するブラウザ拡張です。Cursor、Claude、v0、Lovable、Bolt などで、実ページのセクションやスタイルを再利用できます。
ライブページからコードを作成する Web サイト
MiroMiro は、ライブサイトを編集可能なフロントエンド資産に変換するブラウザ拡張かつ design-to-code ツールです。実際のページセクションをコピーし、レンダリングされたスタイルを確認し、その結果を Cursor、Claude、v0、Lovable、Bolt などのツールやコードベースに、UI を一から描き直さずに取り込みたい人向けに作られています。
この製品は、スクリーンショットから推測するのではなく、実際にレンダリングされた DOM を抽出することに重点を置いています。HTML と Tailwind CSS としてセクションをエクスポートし、ライブの CSS 値を確認し、デザイントークンを抽出し、視覚アセットをダウンロードし、Lottie アニメーションを取得でき、これらはすべてブラウザ内でローカルに動作します。
主な機能
ライブ CSS インスペクターとエディター
任意の要素にホバーすると正確な CSS 値を確認でき、ライブページ上で色、フォント、余白、影、グラデーションなどを直接編集してから結果をコピーできます。
アセットの抽出
Web サイト上の画像、動画、SVG、アイコン、インラインベクターグラフィックを、スクリーンショットから再作成するのではなく、元の形式のままダウンロードできます。
Lottie の抽出
ページ上の Lottie アニメーションを検出し、プレビューして、コードやアニメーションツールで使える JSON または dotLottie としてエクスポートできます。
デザイントークンの抽出
ライブサイトから色、フォント、角丸、影、その他のデザイントークンを抽出し、Tailwind 設定や CSS 変数として再利用できます。
ライブコントラストチェック
サイトを離れずに、ページ上のテキストと UI の色の組み合わせを WCAG AA および AAA のコントラスト基準に照らして確認できます。
実用的なユースケース
実際のサイトからセクションを再構築する
ライブのヒーロー、ナビバー、価格表、カードコンポーネントをコピーして、AI コーディングアシスタントやコードベースに貼り付け、より早い出発点にできます。
スタイル変更を視覚的にプロトタイプする
公開中のページを確認し、余白、色、タイポグラフィ、影をライブで調整して、編集後の CSS または Tailwind の値を後で実装に使えます。
視覚アセットを元の品質で抽出する
スクリーンショットではなく編集可能な元素材が必要なときに、画像、動画、SVG、アイコンを含むページ上の元アセットをダウンロードできます。
再利用可能なスタイルシステムを構築する
色、フォント、角丸、影、その他のトークンを Tailwind や CSS 変数に取り込むことで、ライブサイトの背後にあるデザインシステムを収集できます。
ライブインターフェースのアクセシビリティを確認する
公開前にアクセシブルな色の組み合わせを確認できるよう、デザインをレビューしながらページ上でコントラストをチェックできます。
Pros and Cons
Pros
- 実際にレンダリングされた HTML、Tailwind CSS、CSS を出力し、スクリーンショットベースの推測に頼りません。
- 検査、ライブ編集、アセット抽出、デザイントークン取得を 1 つの拡張機能にまとめています。
- ブラウザ内でローカルに動作するため、サイトによれば抽出内容のプライバシーが保たれます。
- Chrome、Edge、Brave、Opera、Firefox を含む複数のデスクトップブラウザをサポートしています。
- Cursor、Claude、v0、Lovable、Bolt、ChatGPT に貼り付けられる出力をまとめることで、AI コーディングツール向けのワークフローに対応しています。
Cons
- MiroMiro はブラウザ拡張として位置付けられているため、単独の Web アプリではなく、対応するデスクトップブラウザに依存します。
- ソース資料では一部機能のドキュメントが途中までしか示されていないため、より深いワークフローの詳細は実際に試す必要がある場合があります。
- この製品はレンダリング済みページのコピーと検査を中心に設計されているため、単体で完全なサイト構築プラットフォームやコードエディタではありません。
FAQ
MiroMiro は Cursor や Claude のような AI コーディングツールと連携できますか？
はい。サイトでは、MiroMiro がコンポーネントをクリーンでセマンティックな Tailwind と HTML としてエクスポートし、その出力を Cursor、Claude、v0、Lovable、Bolt、ChatGPT に貼り付けられると案内しています。
DevTools を使わずに Web サイトから CSS をコピーするにはどうすればよいですか？
拡張機能をインストールし、Web サイトを開いて、取得したい要素をクリックまたはホバーします。すると MiroMiro が CSS または Tailwind の値を表示するので、Chrome DevTools を使わずにコピーできます。
MiroMiro は Web サイトから Lottie アニメーションをダウンロードできますか？
MiroMiro はページ上の Lottie アニメーションを検出し、プレビューして、標準の Lottie JSON または dotLottie ファイルとしてダウンロードできます。
MiroMiro はブラウザベースで、複数のブラウザで利用できますか？
はい。料金ページと機能ページでは、無料トライアルとローカルでのブラウザベース抽出が案内されており、この拡張機能は Chrome、Edge、Brave、Opera、Firefox で利用できます。
MiroMiro で Web サイトのデザインをコピーするのは合法ですか？
サイトでは、抽出はブラウザ内でローカルに実行され、MiroMiro は DevTools やスクリーンショットのようなツールだと説明しています。また、商用で公開するものについては著作権を尊重するよう案内しています。
Quick Facts
- カテゴリ
- 開発者向けツール / デザインツール
- 製品タイプ
- ブラウザ拡張
- 主な用途
- ライブサイトの UI をコピー可能な HTML、Tailwind、CSS、アセット、トークンに変換する
- 対応プラットフォーム
- Chrome、Edge、Brave、Opera、Firefox
- ソースドメイン
- miromiro.app
- 価格形態
- 無料トライアルあり; 月額プランと買い切りプランが表示されます
MiroMiroの代替品
Pixso
Pixsoは、ユーザーがワンクリックでデザイン草案とコードを生成できる次世代のAIネイティブUIデザインツールで、Figmaの国内代替品として機能します。
Refero MCP
Refero MCPは、MCP対応AIエージェントをReferoの厳選されたWebおよびiOSのUI/UX参考事例とユーザーフローに接続し、UI生成前の実践的なデザインリサーチを支援します。Refero Proで利用可能です。
Make Real
Make Realは、tldraw SDKとAIモデルを使い、手描きワイヤーフレームを動作するHTMLプロトタイプに変換するNext.jsアプリです。キャンバスでスケッチし、コード生成し、埋め込みプレビューで確認できます。
PixelDrive
PixelDriveは、ブラウザ編集、REST API、CSV一括、MCPで1つのテンプレートから大量のブランド画像を生成できるAPI。キャッシュ可能なレンダリングと従量課金に対応。
图像大厨imgcook
imgcookは、デザイン稿をフロントエンドコードに変換するデザイン-to-codeツールです。Sketch、Photoshop、VS Code、CLIに対応し、プラグインと開発者向けのワークフローを提供します。
Napkin AI
Napkin AIは、テキストをプレゼン資料や文書、共有用コンテンツ向けの編集可能なビジュアルに変換します。テキスト起点で生成でき、共同編集にも対応。PPT、PNG、SVG、PDFで書き出せます。