Mirrorful - Open-source tool to manage design templates

👋 Hey Product Hunt and thank you for hunting us @mwseibel We have been building our open-source community over the last few weeks and are excited to share Mirrorful with you. You can think of design systems as the “building blocks” of your app. If done correctly, a simple, but efficient design system is the key to improved engineering velocity and a consistently beautiful user experience. We've seen how design systems grow at large companies and also seen how they begin from scratch at small startups. Picking an out-of-the-box solution is easy to start with, but sooner or later, you’ll run into limitations. We saw this firsthand at Liveramp and Robinhood. At the same time, starting from scratch is pretty time-consuming. (We've tried: we've built ~6 different websites in the last 6 months 😂) We started Mirrorful because we wanted to solve our own problem. Mirrorful is a way simple tool for software engineers to create a simple design system, i.e., the building blocks of your app: 🎨 Lives in code, but is visual 🌎 Easy to set up via an NPM package, but prepares you for scale ⚡ Speeds up development, but has simple guidelines Today, you can install Mirrorful as a development dependency of your project to run a visual editor of your theme and then directly export your design tokens to.js, .ts, .css, .scss, .json. It's lightweight, with no design system lock-in. Our roadmap includes eslint rules, Figma integrations, a component library, and whatever else our users want 👀. We're excited to be open-source. What problems are you running into when adding a design system to your project?👇

👋 Hey Product Hunt! Excited to be launching this and helping people start design systems on the right foot. Check out how Mirrorful is used in a practical example here: https://youtu.be/6JaqhaVxgY8 We'd love to hear what you think — join our growing Slack community here: https://join.slack.com/t/mirrorf...

Congrats, I love the idea! As a developer at heart, I have no idea how design systems work. It would be great if this was integrated with Figma (a boilerplate design system) from which we could export the desired theme to use in our react application.

Great graphics and demo video! We were looking for a tool like this for my last project. Love how it’s open source too.

Congrats on the launch!!!

This is awesome. Congrats team!

Your product has a lot of potential for growth and expansion into other markets.

This is great! As someone who uses a few templates with tons of different variations/colors at scale every day, I'm thinking this will be perfect! Excited to give it a try in my workflow

Great idea! This is definitely a pain point that I run into a lot as someone who is also an avid builder — often times my websites look like a mix of 10 different website designs because there's no consistent design system. Can't wait to try it out in my next project.

Great job Alex! Congratulations! Im gonna try it soon.

I have this lib installed on a side project and it really helps keep things consistent and makes styles easily accessible from code and css. Highly recommend!

soooo helpful. excited for even more tooling around making design systems consistent in code.

Super cool product and definitely one I could use. Can't wait to try out the template generator for my next project!

if this was integrated with Figma and it's so amazing