MiroMiro

Was ist MiroMiro?

MiroMiro ist eine kostenlose Chrome-Erweiterung, mit der Sie Elemente auf jeder Live-Website inspizieren und die zugrunde liegenden Design- und Code-Artefakte kopieren können. Sie extrahiert CSS und wandelt es in Tailwind um und kann Assets wie SVGs und Lottie-Animationen exportieren.

Das Ziel ist es, manuelles „Reverse Engineering“ einer UI zu reduzieren – sodass Sie Farben, Schriftarten, Abstände/Radien/Schatten und Code-Ausgaben direkt von der Seite in Ihren Editor ziehen können.

Wichtige Funktionen

• Ein-Klick-Elementkopie (Live-Site): Klicken Sie auf ein Element, um die exakten CSS-abgeleiteten Werte und zugehörigen Design-Infos von der aktuellen Seite zu erhalten.
• CSS-zu-Tailwind-Export: Wandeln Sie extrahierte Styles in produktionsreife Tailwind-Ausgaben neben HTML für die Wiederverwendung in Ihrem Projekt-Workflow um.
• Design-Token-Extraktion (Palette + Tokens): Extrahieren Sie Markenfarben/Paletten und exportieren Sie Tokens (einschließlich Formate wie Tailwind-Konfig und CSS-Variablen) wie Primär/Akzent/Oberfläche und andere UI-Werte.
• Asset-Extraktion für Bilder und Vektoren: Exportieren Sie Bilder in Originalqualität als PNG, JPG oder WebP und heben Sie Inline-SVGs/Icons/Illustrationen als editierbare Vektor-Assets heraus.
• Lottie-Extraktion: Erkennen Sie auf der Seite laufende Lottie-Animationen und laden Sie das JSON für die Wiederverwendung in Ihrem Projekt herunter.
• Barrierefreiheits-Kontrastprüfung auf der Seite: Überprüfen Sie Text/UI-Farbpaarungen gegen WCAG AA und AAA Kontrast, während Sie auf der Live-Site bleiben.
• Lokaler Betrieb: Die Extraktion läuft lokal, und die Erweiterung gibt an, dass sie nicht sieht, was Sie kopieren.
• Bibliothek/Merklisten: Speichern Sie Elemente wie Komponenten, Farben und Assets in einer wachsenden persönlichen Referenzbibliothek.

So verwenden Sie MiroMiro

1. Installieren Sie die Chrome-Erweiterung und öffnen Sie die Website, die Sie referenzieren möchten.
2. Beim Hover inspizieren, um Element-Styles (CSS) und zugehörige Werte zu sehen, und optional Inline-Werte anpassen, um Änderungen in Echtzeit zu sehen.
3. Klicken zum Exportieren des ausgewählten Elements als Code (Tailwind + HTML) oder Extraktion von Design-Tokens wie Farben.
4. Assets exportieren (Bilder als PNG/JPG/WebP, Inline-SVGs als Vektoren und Lottie-Animationen als JSON) mit dem Asset-Extraktor.

Anwendungsfälle

• Landingpage schneller nachbauen: Klicken Sie auf UI-Komponenten auf einer Live-Seite, um Tailwind + HTML-Ausgaben zu erhalten, statt Screenshots manuell anzupassen.
• Markenpalette und Tokens generieren: Extrahieren Sie eine vollständige Palette von einer Live-Website und exportieren Sie Hex/RGB/HSL/OKLCH-Werte in ein Format, das zu Ihrem Design-System-Workflow passt.
• Vektor-Icons/SVG-Illustrationen ziehen: Heben Sie Inline-SVGs von einer Seite heraus und fügen Sie sie als editierbare Vektor-Assets ein, statt auf Screenshots zu setzen.
• Bestehende Animationen in Ihre App einbauen: Finden Sie eine Lottie-Animation auf einer Seite und laden Sie deren JSON für die Integration in Ihre Lottie-basierte UI herunter.
• Farbkontrast für Barrierefreiheit vorab prüfen: Nutzen Sie On-Page-WCAG-Kontrastprüfungen (AA/AAA), um Text/UI-Paarungen vor der Produktion zu validieren.

FAQ

Ist MiroMiro eine Web-App oder eine Browser-Erweiterung?
MiroMiro ist eine Chrome-Erweiterung.

Kann MiroMiro Code von jeder Live-Website extrahieren?
Die Erweiterung ist dafür ausgelegt, CSS von Elementen auf jeder Live-Website zu kopieren und in Tailwind umzuwandeln.

Welche Ausgaben kann sie exportieren?
Je nach Seite umfassen die Ausgaben Tailwind + HTML, Design-Tokens (Farben/Paletten), CSS-Variablen/Konfig-Exports, Bilder (PNG/JPG/WebP), SVGs und Lottie JSON.

Sendet MiroMiro kopierten Inhalt an einen Server?
Die Seite gibt an, dass die Extraktion lokal läuft und dass sie nicht sieht, was Sie kopieren.

Gibt es eine kostenlose Testphase für Pro-Features?
Ja. Die Seite erwähnt eine 3-Tage-Pro-Testphase ohne Kreditkarte, danach kostet Pro €6/Monat (und eine begrenzte frühe Lifetime-Option wird als „einmal zahlen“ referenziert).

Alternativen

• Browser-DevTools (manuelle Inspektion): Sie können CSS und DOM direkt inspizieren, aber es erfordert typischerweise manuelle Extraktion und Umwandlung in Tailwind und andere Formate.
• UI-zu-Code / Design-zu-Code-Tools (Layout-fokussiert): Diese Tools generieren oft Code aus Screenshots oder Design-Dateien, aber der Workflow unterscheidet sich vom Ziehen exakter Werte von einer Live-Seite.
• Design-Token-Extraktions-Tools (Farben/Themen-fokussiert): Tools speziell für Paletten/Tokens helfen bei Farbsystemen, decken aber möglicherweise nicht Tailwind/HTML-Export, Lottie-Downloads und Inline-SVG-Heben zusammen ab.
• Lottie-spezifische Extraktoren: Spezialisierte Tools für Lottie-Assets können Animationen abrufen, bieten aber nicht die breitere CSS/Tailwind- und Design-Token-Extraktion wie bei MiroMiro.