MiroMiro

Cos'è MiroMiro?

MiroMiro è un'estensione Chrome gratuita che ti permette di ispezionare elementi su qualsiasi sito live e copiare i relativi artefatti di design e codice. Estrae il CSS e lo converte in Tailwind, ed esporta anche asset come SVG e animazioni Lottie.

L'obiettivo è ridurre l'ingegneria inversa manuale di un'UI, così puoi estrarre direttamente colori, font, spaziatura/raggio/ombre e output di codice dalla pagina nel tuo editor.

Funzionalità Principali

• Copia elemento con un clic (sito live): Clicca su un elemento per ottenere i valori CSS esatti e le info di design associate dalla pagina corrente.
• Esportazione CSS in Tailwind: Converti lo stile estratto in output Tailwind pronto per la produzione insieme all'HTML per il riutilizzo nel tuo workflow di progetto.
• Estrazione token di design (palette + token): Estrai colori/palette del brand ed esporta token (in formati come config Tailwind e variabili CSS) come primary/accent/surface e altri valori UI.
• Estrazione asset per immagini e vettori: Esporta immagini in qualità originale come PNG, JPG o WebP, e solleva SVG/icon/illustrazioni inline come asset vettoriali editabili.
• Estrazione Lottie: Rileva animazioni Lottie in riproduzione su una pagina e scarica il JSON per il riutilizzo nel tuo progetto.
• Controllo contrasto accessibilità on-page: Verifica accoppiamenti colore testo/UI contro WCAG AA e AAA restando sul sito live.
• Operazione locale: L'estrazione avviene localmente e l'estensione dichiara di non vedere ciò che copi.
• Libreria/bookmarking: Salva elementi come componenti, colori e asset in una libreria di riferimento personale in crescita.

Come Usare MiroMiro

1. Installa l'estensione Chrome e apri il sito che vuoi referenziare.
2. Ispeziona con hover per visualizzare stile elemento (CSS) e valori correlati, e opzionalmente regola valori inline per vedere aggiornamenti in tempo reale.
3. Clicca per esportare l'elemento selezionato come codice (Tailwind + HTML) o estrai token di design come colori.
4. Esporta asset (immagini come PNG/JPG/WebP, SVG inline come vettori, animazioni Lottie come JSON) usando l'estrattore asset.

Casi d'Uso

• Ricostruire una landing page più velocemente: Clicca sui componenti UI di una pagina live per ottenere output Tailwind + HTML invece di abbinare manualmente lo screenshot.
• Generare palette brand e token: Estrai una palette completa da un sito live ed esporta valori hex/RGB/HSL/OKLCH in un formato allineato al tuo workflow di design system.
• Estrarre icone vettoriali/illustrazioni SVG: Solleva SVG inline da una pagina e incollale come asset vettoriali editabili invece di affidarti a screenshot.
• Aggiungere animazioni esistenti alla tua app: Trova un'animazione Lottie su una pagina e scarica il suo JSON per l'integrazione nella tua UI basata su Lottie.
• Pre-verifica contrasto colore per accessibilità: Usa controlli contrasto WCAG on-page (AA/AAA) per validare accoppiamenti testo/UI prima della produzione.

FAQ

MiroMiro è una web app o un'estensione browser?
MiroMiro è un'estensione Chrome.

MiroMiro può estrarre codice da qualsiasi sito live?
L'estensione è progettata per copiare CSS e convertirlo in Tailwind basandosi su elementi di qualsiasi sito live.

Quali output può esportare?
A seconda della pagina, gli output includono Tailwind + HTML, token di design (colori/palette), esportazioni variabili CSS/config, immagini (PNG/JPG/WebP), SVG e Lottie JSON.

MiroMiro invia il contenuto copiato a un server?
La pagina dichiara che l'estrazione avviene localmente e che non vede ciò che copi.

C'è una prova gratuita per le funzionalità Pro?
Sì. La pagina indica una prova Pro di 3 giorni senza carta di credito, dopo la quale Pro è descritto come €6/mese (e si menziona un'opzione lifetime early limitata come “pay once”).

Alternative

• Browser DevTools (ispezione manuale): Puoi ispezionare CSS e DOM direttamente, ma tipicamente richiede estrazione e conversione manuale in Tailwind e altri formati.
• Tool UI-to-code / design-to-code (focus su layout): Questi tool generano spesso codice da screenshot o file di design, ma il workflow può differire dall'estrazione di valori esatti da una pagina live.
• Tool estrazione token di design (focus su colore/tema): Tool dedicati all'estrazione di palette/token aiutano con i sistemi colore, ma potrebbero non coprire esportazione Tailwind/HTML, download Lottie e sollevamento SVG inline insieme.
• Estrattori specifici per Lottie: Tool dedicati per asset Lottie recuperano animazioni, ma potrebbero non fornire l'estrazione più ampia CSS/Tailwind e token di design descritta per MiroMiro.