MiroMiro

O que é MiroMiro?

MiroMiro é uma extensão gratuita do Chrome que permite inspecionar elementos em qualquer site ao vivo e copiar os artefatos de design e código subjacentes. Ela extrai CSS e o converte em Tailwind, e também pode exportar assets como SVGs e animações Lottie.

O objetivo é reduzir a engenharia reversa manual de uma UI — para que você possa extrair cores, fontes, espaçamentos/raios/sombras e saídas de código diretamente da página para o seu editor.

Principais Recursos

• Cópia de elemento com um clique (site ao vivo): Clique em um elemento para obter os valores exatos derivados de CSS e informações de design associadas da página atual.
• Exportação de CSS para Tailwind: Converta estilos extraídos em saída Tailwind pronta para produção, junto com HTML, para reutilização no seu fluxo de trabalho.
• Extração de tokens de design (paleta + tokens): Extraia cores/paletas de marca e exporte tokens (incluindo formatos como config Tailwind e variáveis CSS), como primary/accent/surface e outros valores de UI.
• Extração de assets para imagens e vetores: Exporte imagens na qualidade original como PNG, JPG ou WebP, e extraia SVGs/ícones/ilustrações inline como assets vetoriais editáveis.
• Extração de Lottie: Detecte animações Lottie em reprodução na página e baixe o JSON para reutilização no seu projeto.
• Verificação de contraste de acessibilidade na página: Verifique pares de cores de texto/UI contra WCAG AA e AAA enquanto permanece no site ao vivo.
• Operação local: A extração roda localmente e a extensão afirma que não vê o que você copia.
• Biblioteca/marcadores: Salve itens como componentes, cores e assets em uma biblioteca de referência pessoal crescente.

Como Usar o MiroMiro

1. Instale a extensão do Chrome e abra o site que deseja referenciar.
2. Inspecione ao passar o mouse para ver estilos de elemento (CSS) e valores relacionados, e opcionalmente ajuste valores inline para ver mudanças em tempo real.
3. Clique para exportar o elemento selecionado como código (Tailwind + HTML) ou extraia tokens de design como cores.
4. Exporte assets (imagens como PNG/JPG/WebP, SVGs inline como vetores e animações Lottie como JSON) usando o extrator de assets.

Casos de Uso

• Reconstruir uma landing page mais rápido: Clique em componentes de UI em uma página ao vivo para obter saídas Tailwind + HTML em vez de combinar manualmente com o screenshot.
• Gerar paleta de marca e tokens: Extraia uma paleta completa de um site ao vivo e exporte valores hex/RGB/HSL/OKLCH em um formato alinhado ao seu fluxo de design system.
• Extrair ícones vetoriais/ilustrações SVG: Extraia SVGs inline de uma página e cole como assets vetoriais editáveis em vez de depender de screenshots.
• Adicionar animações existentes ao seu app: Encontre uma animação Lottie em uma página e baixe seu JSON para integração na sua UI baseada em Lottie.
• Verificar contraste de cores para acessibilidade previamente: Use verificações de contraste WCAG na página (AA/AAA) para validar pares de texto/UI antes da produção.

FAQ

MiroMiro é um web app ou uma extensão de navegador?

MiroMiro é uma extensão do Chrome.

O MiroMiro pode extrair código de qualquer site ao vivo?

A extensão é projetada para copiar CSS e convertê-lo em Tailwind com base em elementos de qualquer site ao vivo.

Quais saídas ele pode exportar?

Com base na página, as saídas incluem Tailwind + HTML, tokens de design (cores/paletas), exportações de variáveis CSS/config, imagens (PNG/JPG/WebP), SVGs e Lottie JSON.

O MiroMiro envia conteúdo copiado para um servidor?

A página afirma que a extração roda localmente e que não vê o que você copia.

Há um teste gratuito para recursos Pro?

Sim. A página indica um teste Pro de 3 dias sem cartão de crédito, após o qual o Pro é descrito como €6/mês (e uma opção vitalícia limitada inicial é referenciada como “pague uma vez”).

Alternativas

• Browser DevTools (inspeção manual): Você pode inspecionar CSS e DOM diretamente, mas geralmente requer extração e conversão manual para Tailwind e outros formatos.
• Ferramentas UI-to-code / design-to-code (focadas em layouts): Essas ferramentas geram código a partir de screenshots ou arquivos de design, mas o fluxo pode diferir de extrair valores exatos de uma página ao vivo.
• Ferramentas de extração de tokens de design (focadas em cores/temas): Ferramentas dedicadas a extrair paletas/tokens ajudam com sistemas de cores, embora possam não cobrir exportação Tailwind/HTML, downloads Lottie e extração de SVG inline juntos.
• Extratores específicos para Lottie: Ferramentas dedicadas a assets Lottie podem recuperar animações, mas podem não fornecer a extração mais ampla de CSS/Tailwind e tokens de design descrita para o MiroMiro.