MiroMiro

¿Qué es MiroMiro?

MiroMiro es una extensión gratuita de Chrome que te permite inspeccionar elementos en cualquier sitio web en vivo y copiar los artefactos de diseño y código subyacentes. Extrae CSS y lo convierte en Tailwind, y también puede exportar activos como SVGs y animaciones Lottie.

El objetivo es reducir la ingeniería inversa manual de una UI, para que puedas extraer colores, fuentes, espaciados/radios/sombras y salidas de código directamente de la página a tu editor.

Características principales

• Copia de elementos con un clic (sitio en vivo): Haz clic en un elemento para obtener los valores CSS exactos derivados y la información de diseño asociada de la página actual.
• Exportación de CSS a Tailwind: Convierte el estilo extraído en salida Tailwind lista para producción junto con HTML para reutilizar en tu flujo de trabajo.
• Extracción de tokens de diseño (paleta + tokens): Extrae colores/paletas de marca y exporta tokens (incluyendo formatos como config de Tailwind y variables CSS) como primary/accent/surface y otros valores de UI.
• Extracción de activos para imágenes y vectores: Exporta imágenes en calidad original como PNG, JPG o WebP, y extrae SVGs/iconos/ilustraciones inline como activos vectoriales editables.
• Extracción de Lottie: Detecta animaciones Lottie en reproducción en una página y descarga el JSON para reutilizar en tu proyecto.
• Comprobación de contraste de accesibilidad en la página: Verifica combinaciones de colores de texto/UI contra WCAG AA y AAA mientras permaneces en el sitio en vivo.
• Operación local: La extracción se ejecuta localmente y la extensión indica que no ve lo que copias.
• Biblioteca/marcadores: Guarda elementos como componentes, colores y activos en una biblioteca de referencia personal en crecimiento.

Cómo usar MiroMiro

1. Instala la extensión de Chrome y abre el sitio web que quieres referenciar.
2. Inspecciona al pasar el ratón para ver el estilo de elementos (CSS) y valores relacionados, y opcionalmente ajusta valores inline para ver cambios en tiempo real.
3. Haz clic para exportar el elemento seleccionado como código (Tailwind + HTML) o extrae tokens de diseño como colores.
4. Exporta activos (imágenes como PNG/JPG/WebP, SVGs inline como vectores y animaciones Lottie como JSON) usando el extractor de activos.

Casos de uso

• Reconstruir una landing page más rápido: Haz clic en componentes de UI en una página en vivo para obtener salidas Tailwind + HTML en lugar de igualar manualmente la captura de pantalla.
• Generar paleta de marca y tokens: Extrae una paleta completa de un sitio web en vivo y exporta valores hex/RGB/HSL/OKLCH en un formato alineado con tu flujo de trabajo de sistema de diseño.
• Extraer iconos vectoriales/ilustraciones SVG: Extrae SVGs inline de una página y pégalos como activos vectoriales editables en lugar de depender de capturas de pantalla.
• Añadir animaciones existentes a tu app: Encuentra una animación Lottie en una página y descarga su JSON para integrarla en tu UI basada en Lottie.
• Preverificar contraste de color para accesibilidad: Usa comprobaciones de contraste WCAG en la página (AA/AAA) para validar combinaciones de texto/UI antes de producción.

Preguntas frecuentes

¿Es MiroMiro una web app o una extensión de navegador?
MiroMiro es una extensión de Chrome.

¿Puede MiroMiro extraer código de cualquier sitio web en vivo?
La extensión está diseñada para copiar CSS y convertirlo a Tailwind basado en elementos de cualquier sitio web en vivo.

¿Qué salidas puede exportar?
Según la página, las salidas incluyen Tailwind + HTML, tokens de diseño (colores/paletas), exportaciones de variables/config CSS, imágenes (PNG/JPG/WebP), SVGs y Lottie JSON.

¿MiroMiro envía el contenido copiado a un servidor?
La página indica que la extracción se ejecuta localmente y que no ve lo que copias.

¿Hay prueba gratuita para funciones Pro?
Sí. La página menciona una prueba Pro de 3 días sin tarjeta de crédito, tras la cual Pro cuesta 6 €/mes (y se referencia una opción limitada de pago único vitalicio como “pay once”).

Alternativas

• Browser DevTools (inspección manual): Puedes inspeccionar CSS y DOM directamente, pero suele requerir extracción y conversión manual a Tailwind y otros formatos.
• Herramientas UI-to-code / design-to-code (enfocadas en layouts): Estas herramientas generan código a partir de capturas o archivos de diseño, pero el flujo puede diferir de extraer valores exactos de una página en vivo.
• Herramientas de extracción de tokens de diseño (enfocadas en color/tema): Herramientas dedicadas a paletas/tokens ayudan con sistemas de color, aunque no cubran exportación Tailwind/HTML, descargas Lottie y extracción de SVG inline juntas.
• Extractores específicos de Lottie: Herramientas dedicadas a activos Lottie recuperan animaciones, pero no proporcionan la extracción más amplia de CSS/Tailwind y tokens de diseño descrita para MiroMiro.