MiroMiro

Что такое MiroMiro?

MiroMiro — бесплатное расширение для Chrome, которое позволяет инспектировать элементы на любом живом сайте и копировать базовые элементы дизайна и кода. Оно извлекает CSS и конвертирует его в Tailwind, а также может экспортировать ассеты, такие как SVG и Lottie-анимации.

Цель — сократить ручную «обратную разработку» UI, чтобы вы могли напрямую вытащить цвета, шрифты, отступы/радиусы/тени и кодовые выводы со страницы в свой редактор.

Ключевые функции

• Копирование элемента одним кликом (живой сайт): Кликните на элемент, чтобы получить точные значения CSS и связанную информацию о дизайне с текущей страницы.
• Экспорт CSS в Tailwind: Конвертируйте извлеченные стили в готовый для продакшена Tailwind-вывод вместе с HTML для повторного использования в вашем рабочем процессе.
• Извлечение дизайн-токенов (палитра + токены): Извлекайте брендовые цвета/палитры и экспортируйте токены (включая форматы Tailwind config и CSS-переменные), такие как primary/accent/surface и другие UI-значения.
• Извлечение ассетов для изображений и векторов: Экспортируйте изображения в оригинальном качестве как PNG, JPG или WebP, а встроенные SVG/иконки/иллюстрации — как редактируемые векторные ассеты.
• Извлечение Lottie: Обнаруживайте Lottie-анимации на странице и скачивайте JSON для повторного использования в проекте.
• Проверка контраста доступности на странице: Проверяйте сочетания цветов текста/UI на соответствие WCAG AA и AAA прямо на живом сайте.
• Локальная работа: Извлечение происходит локально, и расширение заявляет, что не видит, что вы копируете.
• Библиотека/закладки: Сохраняйте элементы, такие как компоненты, цвета и ассеты, в растущую личную справочную библиотеку.

Как использовать MiroMiro

1. Установите расширение для Chrome и откройте сайт, который хотите использовать как референс.
2. Инспектируйте при наведении, чтобы просмотреть стили элемента (CSS) и связанные значения, и по желанию корректируйте встроенные значения, чтобы видеть изменения в реальном времени.
3. Кликните для экспорта выбранного элемента как кода (Tailwind + HTML) или извлеките дизайн-токены, такие как цвета.
4. Экспортируйте ассеты (изображения как PNG/JPG/WebP, встроенные SVG как векторы и Lottie-анимации как JSON) с помощью экстрактора ассетов.

Сценарии использования

• Быстрее перестроить лендинг-страницу: Кликайте по UI-компонентам на живой странице, чтобы получить Tailwind + HTML вместо ручного подгона под скриншот.
• Генерация брендовой палитры и токенов: Извлеките полную палитру с живого сайта и экспортируйте hex/RGB/HSL/OKLCH-значения в формат, подходящий для вашего дизайн-системного workflow.
• Извлечение векторных иконок/SVG-иллюстраций: Вытащите встроенные SVG со страницы и вставьте их как редактируемые векторные ассеты вместо использования скриншотов.
• Добавление существующих анимаций в приложение: Найдите Lottie-анимацию на странице и скачайте её JSON для интеграции в вашу Lottie-based UI.
• Предварительная проверка цветового контраста для доступности: Используйте проверки WCAG-контраста (AA/AAA) на странице, чтобы валидировать сочетания текста/UI перед продакшеном.

FAQ

MiroMiro — это веб-приложение или расширение для браузера?
MiroMiro — это расширение для Chrome.

Может ли MiroMiro извлекать код с любого живого сайта?
Расширение предназначено для копирования CSS и конвертации в Tailwind на основе элементов с любого живого сайта.

Какие выводы оно может экспортировать?
В зависимости от страницы, выводы включают Tailwind + HTML, дизайн-токены (цвета/палитры), CSS-переменные/config-экспорты, изображения (PNG/JPG/WebP), SVG и Lottie JSON.

Отправляет ли MiroMiro скопированный контент на сервер?
Страница указывает, что извлечение происходит локально и что оно не видит, что вы копируете.

Есть ли бесплатный пробный период для Pro-функций?
Да. На странице указан 3-дневный Pro-триал без ввода карты, после которого Pro стоит €6/месяц (и упоминается ограниченная пожизненная опция «плати раз»).

Альтернативы

• Browser DevTools (ручная инспекция): Вы можете инспектировать CSS и DOM напрямую, но обычно требуется ручное извлечение и конвертация в Tailwind и другие форматы.
• UI-to-code / design-to-code инструменты (фокус на layouts): Эти инструменты часто генерируют код из скриншотов или дизайн-файлов, но workflow может отличаться от вытаскивания точных значений с живой страницы.
• Инструменты извлечения дизайн-токенов (фокус на цветах/темах): Инструменты, посвященные палитрам/токенам, помогают с цветовыми системами, но могут не охватывать Tailwind/HTML-экспорт, Lottie-скачивания и извлечение встроенных SVG вместе.
• Lottie-специфические экстракторы: Специализированные инструменты для Lottie-ассетов могут извлекать анимации, но могут не предоставлять более широкий CSS/Tailwind и дизайн-токен экстрактор, описанный для MiroMiro.