MiroMiro

Product Introduction

1. Definition: MiroMiro is a specialized Chrome extension for technical design asset extraction, operating as a visual inspection tool that bypasses traditional browser DevTools. It falls under the category of web development productivity software, specifically targeting CSS, design tokens, and digital asset harvesting.
2. Core Value Proposition: MiroMiro eliminates manual DevTools digging by enabling one-click extraction of website design systems, including CSS properties, color palettes, fonts, SVGs, Lottie animations, and spacing metrics. Its core purpose is to accelerate UI/UX workflows for designers and developers rebuilding or referencing existing interfaces.

Main Features

1. Surgical Inspector Mode:

   • How it works: Hovering over elements triggers real-time style breakdowns using DOM parsing and computed CSS analysis. Displays exact values for typography (font family, weight, size), colors (HEX/RGB), padding, margins, and border-radius without console commands.
   • Technology: Leverages Chrome’s Accessibility API and CSS Object Model (CSSOM) for live rendering data.

2. Design Token Export Engine:

   • How it works: Automatically aggregates color schemes and design tokens from site-wide CSS, exporting them as production-ready Tailwind config files or CSS variables (e.g., purple-600: #9333EA).
   • Technology: Scrapes CSS rules and variables, then compiles them into framework-specific formats using token transformation algorithms.

3. Multi-Asset Extraction:

   • How it works: Isolates and downloads SVGs, PNGs, JPGs, and background videos directly from the DOM. For animations, it extracts Lottie JSON data (e.g., animation.json) without network tab inspection.
   • Technology: DOM node traversal combined with Blob URL generation for asset serialization.

4. WCAG Contrast Auditor:

   • How it works: Scans elements or full pages for WCAG 2.0 compliance, calculating real-time contrast ratios (e.g., 15.8:1 = AAA) and flagging accessibility failures.
   • Technology: APCA (Advanced Perceptual Contrast Algorithm) integration for dynamic contrast analysis.

Problems Solved

1. Pain Point: Manual extraction of design specs (colors, spacing, fonts) from websites is time-intensive, requiring expertise in DevTools and CSS reverse-engineering. MiroMiro automates asset harvesting, reducing tasks from hours to seconds.
2. Target Audience:
   • UI/UX Designers recreating reference sites for client projects.
   • Frontend Developers implementing design systems in Tailwind/CSS.
   • No-Code Builders cloning landing pages in Webflow/Framer.
   • Agency Teams auditing competitor UX patterns.
3. Use Cases:
   • Extracting Shopify store color schemes for rebranding.
   • Cloning interactive Lottie animations from SaaS dashboards.
   • Exporting Dribbble portfolio site fonts into Figma projects.

Unique Advantages

1. Differentiation vs. DevTools: Unlike manual browser inspection, MiroMiro offers visual, context-specific data overlays and exports assets in developer-ready formats (Tailwind/CSS variables). Competitors like ColorZilla or CSS Peeper lack Lottie extraction and token export capabilities.
2. Key Innovation: One-click Lottie animation theft – a rarity in design tools – and surgical precision in isolating nested assets (e.g., SVGs inside shadow DOM). The tool’s zero-configuration hover detection removes learning curves for non-technical users.

Frequently Asked Questions (FAQ)

1. Can MiroMiro extract responsive or dynamic CSS?
   Yes, it captures active computed styles rendered in the viewport, including media query-driven properties (e.g., flexbox/grid rules).

2. Does MiroMiro work with password-protected sites?
   No, Chrome extension security policies restrict access to authenticated pages. It operates only on publicly accessible content.

3. How accurate are exported Tailwind tokens?
   Colors and spacing are mapped to Tailwind’s default scale (e.g., spacing-4: 1rem), with 98% accuracy for standard CSS units. Custom scales require manual tweaking.

4. Can I export assets from complex frameworks like React?
   Yes, MiroMiro parses the final rendered DOM, making it compatible with React, Vue, or Angular sites.

5. Is there a Figma plugin integration?
   Not currently, but exported CSS/Tailwind tokens can be pasted directly into Figma’s developer handoff tools.