MiroMiro

Qu’est-ce que MiroMiro ?

MiroMiro est une extension Chrome gratuite qui vous permet d’inspecter les éléments de n’importe quel site en direct et de copier les artefacts de design et de code sous-jacents. Elle extrait le CSS et le convertit en Tailwind, et peut aussi exporter des assets comme les SVGs et animations Lottie.

L’objectif est de réduire l’ingénierie inverse manuelle d’une UI — pour extraire directement couleurs, polices, espacements/rayons/ombres et sorties de code de la page vers votre éditeur.

Fonctionnalités principales

• Copie d’élément en un clic (site en direct) : Cliquez sur un élément pour obtenir les valeurs CSS exactes et les infos de design associées de la page courante.
• Export CSS vers Tailwind : Convertissez les styles extraits en sortie Tailwind prête pour la production avec HTML pour réutilisation dans votre workflow.
• Extraction de tokens de design (palette + tokens) : Extrayez les couleurs/palettes de marque et exportez les tokens (y compris formats Tailwind config et variables CSS) comme primary/accent/surface et autres valeurs UI.
• Extraction d’assets pour images et vecteurs : Exportez les images en qualité originale en PNG, JPG ou WebP, et récupérez les SVGs/icônes/illustrations inline comme assets vectoriels éditables.
• Extraction Lottie : Détectez les animations Lottie jouant sur une page et téléchargez le JSON pour réutilisation dans votre projet.
• Vérification de contraste accessibilité sur page : Vérifiez les paires de couleurs texte/UI contre WCAG AA et AAA tout en restant sur le site en direct.
• Fonctionnement local : L’extraction s’exécute localement et l’extension indique qu’elle ne voit pas ce que vous copiez.
• Bibliothèque/marque-page : Sauvegardez des éléments comme composants, couleurs et assets dans une bibliothèque de référence personnelle en croissance.

Comment utiliser MiroMiro

1. Installez l’extension Chrome et ouvrez le site à référencer.
2. Inspectez au survol pour voir les styles d’élément (CSS) et valeurs associées, et ajustez optionnellement les valeurs inline pour voir les changements en temps réel.
3. Cliquez pour exporter l’élément sélectionné en code (Tailwind + HTML) ou extrayez des tokens de design comme les couleurs.
4. Exportez les assets (images en PNG/JPG/WebP, SVGs inline en vecteurs, animations Lottie en JSON) via l’extracteur d’assets.

Cas d’usage

• Reconstruire une landing page plus vite : Cliquez sur les composants UI d’une page en direct pour obtenir des sorties Tailwind + HTML au lieu de matcher manuellement la capture d’écran.
• Générer une palette de marque et tokens : Extrayez une palette complète d’un site en direct et exportez les valeurs hex/RGB/HSL/OKLCH dans un format aligné sur votre workflow de design system.
• Récupérer icônes vectorielles/illustrations SVG : Extrayez les SVGs inline d’une page et collez-les comme assets vectoriels éditables plutôt que de dépendre de captures d’écran.
• Ajouter des animations existantes à votre app : Trouvez une animation Lottie sur une page et téléchargez son JSON pour intégration dans votre UI basée Lottie.
• Vérifier le contraste des couleurs pour l’accessibilité : Utilisez les vérifications WCAG sur page (AA/AAA) pour valider les paires texte/UI avant production.

FAQ

MiroMiro est-il une web app ou une extension navigateur ?
MiroMiro est une extension Chrome.

MiroMiro peut-il extraire du code de n’importe quel site en direct ?
L’extension est conçue pour copier le CSS et le convertir en Tailwind à partir d’éléments sur n’importe quel site en direct.

Quelles sorties peut-il exporter ?
Selon la page, les sorties incluent Tailwind + HTML, tokens de design (couleurs/palettes), exports variables CSS/config, images (PNG/JPG/WebP), SVGs et Lottie JSON.

MiroMiro envoie-t-il le contenu copié vers un serveur ?
La page indique que l’extraction s’exécute localement et qu’elle ne voit pas ce que vous copiez.

Y a-t-il un essai gratuit pour les fonctionnalités Pro ?
Oui. La page mentionne un essai Pro de 3 jours sans carte bancaire, après quoi Pro est à 6 €/mois (et une option lifetime limitée précoce est référencée comme « payez une fois »).

Alternatives

• DevTools navigateur (inspection manuelle) : Vous pouvez inspecter CSS et DOM directement, mais cela nécessite typiquement une extraction et conversion manuelles vers Tailwind et autres formats.
• Outils UI-to-code / design-to-code (focalisés sur layouts) : Ces outils génèrent souvent du code à partir de captures d’écran ou fichiers de design, mais le workflow diffère de l’extraction de valeurs exactes d’une page en direct.
• Outils d’extraction de tokens de design (focalisés couleur/thème) : Des outils dédiés aux palettes/tokens aident pour les systèmes de couleurs, mais ne couvrent pas ensemble l’export Tailwind/HTML, téléchargements Lottie et extraction SVG inline décrits pour MiroMiro.
• Extracteurs spécifiques Lottie : Des outils dédiés aux assets Lottie récupèrent les animations, mais ne fournissent pas l’extraction CSS/Tailwind et tokens de design plus large de MiroMiro.