MiroMiro

MiroMiro 是什麼？

MiroMiro 是一款免費 Chrome 擴充功能，讓您檢查任何線上網站的元素，並複製底層設計與程式碼資源。它會擷取 CSS 並轉換成 Tailwind，還能匯出 SVG 和 Lottie 動畫等資產。

目標是減少 UI 的手動「反向工程」—讓您直接從頁面拉取顏色、字型、間距/圓角/陰影，以及程式碼輸出到編輯器中。

主要功能

• 一鍵元素複製（線上網站）： 點擊元素，即可取得精確的 CSS 衍生值與相關設計資訊，從當前頁面擷取。
• CSS 轉 Tailwind 匯出： 將擷取的樣式轉換成可直接用於製作的 Tailwind 輸出，連同 HTML 以便在專案流程中重複使用。
• 設計代幣擷取（調色盤 + 代幣）： 擷取品牌顏色/調色盤，並匯出代幣（包含 Tailwind 設定與 CSS 變數格式），如主要/強調/表面及其他 UI 值。
• 圖像與向量資產擷取： 以原始品質匯出圖像為 PNG、JPG 或 WebP，並將內嵌 SVG/圖示/插圖轉為可編輯向量資產。
• Lottie 擷取： 偵測頁面播放的 Lottie 動畫，並下載 JSON 以供專案重複使用。
• 頁面無障礙對比檢查： 在線上網站上檢查文字/UI 顏色配對是否符合 WCAG AA 和 AAA 對比標準。
• 本機運作： 擷取全程在本機執行，擴充功能聲明不會看到您複製的內容。
• 函式庫/書籤： 將元件、顏色與資產等項目儲存至個人參考函式庫。

如何使用 MiroMiro

1. 安裝 Chrome 擴充功能 並開啟您想參考的網站。
2. 懸停檢查 以檢視元素樣式（CSS）與相關值，並可選擇調整內嵌值來即時查看變更。
3. 點擊匯出 選取元素為 程式碼（Tailwind + HTML） 或擷取 設計代幣 如顏色。
4. 匯出資產（圖像為 PNG/JPG/WebP、內嵌 SVG 為向量、Lottie 動畫為 JSON）使用資產擷取工具。

使用情境

• 更快重建首頁： 在線上頁面點擊 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 變數/設定匯出、圖像（PNG/JPG/WebP）、SVG 和 Lottie JSON。

MiroMiro 會將複製內容傳送到伺服器嗎？
頁面說明擷取在本機執行，且不會看到您複製的內容。

Pro 功能有免費試用嗎？
有。頁面提及 3 天 Pro 試用，無需信用卡，之後 Pro 為每月 €6（並提及限量早鳥終身方案「一次付費」）。

替代方案

• 瀏覽器 DevTools（手動檢查）： 可直接檢查 CSS 和 DOM，但通常需手動擷取並轉換成 Tailwind 等格式。
• UI 轉程式碼 / 設計轉程式碼工具（聚焦版面流程）： 這些工具常從截圖或設計檔案產生程式碼，但流程可能不同於從線上頁面拉取精確值。
• 設計代幣擷取工具（顏色/主題導向）： 專門擷取調色盤/代幣的工具有助於顏色系統，但可能不涵蓋 Tailwind/HTML 匯出、Lottie 下載與內嵌 SVG 拉取。
• Lottie 專用擷取工具： 專門用於 Lottie 資產的工具可擷取動畫，但可能不提供 MiroMiro 所述的廣泛 CSS/Tailwind 與設計代幣擷取。