MiroMiro
Inspect, edit, and export any website's design
934 followers
Inspect, edit, and export any website's design
934 followers
Stop rebuilding designs from screenshots. MiroMiro lets you inspect any website, edit its colors, fonts, spacing, and shadows live like in Figma, then export the result as clean Tailwind or HTML/CSS. Capture full design systems at a glance. Pull SVGs, Lottie animations, and images. Extract design tokens for Tailwind, CSS variables, or JSON. Check WCAG contrast in one click. The fastest way from "I like that site" to working code in your editor. No DevTools needed.
MiroMiro
@soraiadev Happy New Year! I installed the plugin and will try using it in my testing work, as I sometimes check styles and look for bugs. Thanks!
MiroMiro
@julia_zakharova2 Happy New Year! Thank you so much for trying MiroMiro :D
@soraiadev That does address one of the pain points I constantly deal with as a dev
@soraiadev Interesting! I could see this being useful for running A/B tests too.
@soraiadev Very cool idea Soraia!
Maybe allow for a edit session? Where we could try altering a few elements imediatly to check how it would look like.
Won't it be cool if you can also generate prompts/commands so that together with the downloaded assets and color pallet info (color.md file maybe?) we can ask IDE/AI to apply a similar style to a website I'm working on directly and see how it looks like?
MiroMiro
@vibervibing That's interesting, I'm gonna note down this for future updates. Thank you a lot for the feedback!
I usually live in Chrome DevTools, but MiroMiro is just faster. When refining the UI for Dashform, I often need to quickly check a font size or color palette from a site I admire. This extension lets me grab that CSS in a single click without digging through the DOM. It’s a massive workflow upgrade for frontend devs.
MiroMiro
@moni_z So glad to hear it’s making your workflow smoother! 🙌 That’s exactly what I aimed for. Really appreciate you sharing how it’s helping with Dashform!
I am surprised by the function of "steal the motion magic", it was a real problem for me, especially when I see some motion icons very interesting.
MiroMiro
@tyler_tian Thank you Tyler, currently MiroMiro is able to extract Lottie animations. Are there any other features or suggestions you’d like MiroMiro to support?
@soraiadev Hi Soraia, I have recommmended your product to our IT department to see if there are anything we can apply to our project. Thank you! Will give feedback shortly
MiroMiro
@tyler_tian Thank you so much, Tyler! If your IT department finds MiroMiro useful, I’d be happy to explore ways to give access to all features across the department without requiring individual subscriptions. I’d love to hear your feedback! For more direct communication, feel free to reach me on X @ soraiaDev or by email at sorilc@hotmail.com
Minara
This is such a relatable pain point. Nice product name btw.
DevTools is powerful, but once you’re just trying to extract design decisions, it completely kills momentum. Congrats!
MiroMiro
@frank_li13 Thank you a lot Frank, I'm glad you found MiroMiro useful!
Hi soraia,
Congrats on the Product Hunt launch! MiroMiro is clearly the fastest way to extract the "Skin" of a site (Colors/Fonts/Assets).
However, as a Frontend Engineer, I’ve noticed a critical gap that no extension is currently solving: "Structural Blindness."
Right now, tools give me the styles (the paint), but they don't give me the layout logic (the skeleton). I still have to inspect DevTools to figure out if a complex section is using CSS Grid, Flexbox, or absolute positioning.
The "Layout DNA" Feature. Imagine if MiroMiro’s sidebar didn't just show the Color Palette, but also a "Layout Intelligence" tab:
Detection: "This container is a 3-column Grid."
Extraction: One-click copy of the structural HTML (e.g., <div class="flex gap-4 items-center">), stripping the content but keeping the layout architecture.
This turns MiroMiro from a "Designer's Tool" into a "Developer's Cloning Engine."
I’d love to share some thoughts on how to parse computed styles to build this "Layout X-Ray."
MiroMiro
@jaimeen_makavana Hi Jaimeen, thank you so much for taking the time to share this, this is incredibly thoughtful feedback. I love the way you framed it as “Structural Blindness,” that really resonates from a frontend perspective. I’m definitely taking notes for future features 👀
I’d be happy to chat more about this and hear your ideas on parsing computed styles. Feel free to ping me anytime on X @ soraiaDev or by email sorilc@hotmail.com
Flash
Super simple, and useful. I end up spending so much time (and money at times), trying to figure out the minor layout quirks. But, more importantly, typefaces, the weights, styles and font family. I believe typefaces are the soul of the layouts (followed by spacing). Can you add some extra love to help extract typefaces faster?