Product Thumbnail

Kombai

A new AI model that you can prompt with UI designs

Productivity
Developer Tools
Artificial Intelligence

New ensemble model purpose-built to understand and code UI like human devs. Prompt it with designs. Get high-quality UI code in seconds. No manual tags or auto-layout needed. Logical DOM structure & React components. CSS with no hardcoded dimensions. Clean JS.

Top comment

Hello world, from team Kombai! We are excited to launch our private research preview on ProductHunt! Thanks a lot for dropping by.🙏 WHAT IS KOMBAI Kombai is a new ensemble model that can understand and code UI designs like humans. You can prompt it with design files in Figma to get high-quality React and HTML + CSS (vanilla/ tailwind) code in just a single click per component. MOTIVATION Over the past few years, frontend and fullstack devs have been complaining loudly about how tedious and cumbersome it is to code UI, particularly CSS. As developers, we have experienced this firsthand, heard our friends grumble about it, and laughed at countless memes about this in every corner of the internet where devs assemble (e.g., r/programmerhumor). However, it has only gotten worse with time - with increasingly complex designs and frontend tech stack. Design tools like Figma and XD, while great for designers, don’t generate useful code for devs. Design-to-code tools built on top of them only produce unusable spaghetti code. Even Chatgpt, such a great help in writing boilerplates and functionalities, cannot really help in translating designs! So, we thought we’d take a stab at making frontend development fun again for the devs who build all these beautiful experiences that make the modern internet what it is. KEY FEATURES Kombai’s proprietary ensemble model is able to “look at” complex, real-world designs, derive these inferences as a developer would, and generate code using that “understanding.” 🤩No manual pre-processing needed - no tagging, grouping, naming the elements, or using auto-layout is required, either in Figma or in the product itself 🥳High-quality code that can be actually used in prod: logical, div-structures, React components and names; appropriate flex CSS without hardcoded dimensions; clean JS code with loops and conditions; form elements as functional components. EVOLUTION & NEXT STEPS We developed Kombai with feedback from over 500 developers who accessed our private research preview. Their invaluable time and feedback have enabled us to rapidly and iteratively improve our underlying models. In the public research preview phase, our goal is to learn about Kombai’s strengths and weaknesses as more and more developers try it out. So, please give us a try and let us know your feedback using the options in the app or at [email protected]. Our team will also be live on Producthunt throughout the day to answer your questions and gather your input. We'll plan to leverage these learnings to improve the underlying models further and, hopefully, make frontend development fun again for y’all! —----- Dipanjan Co-founder & CEO, Kombai

Comment highlights

Hey Kombai team! 🎉 Firstly, a massive congratulations on launching Kombai on ProductHunt! The concept of translating UI designs directly into high-quality code is something that the developer community has been yearning for, and it's fantastic to see Kombai stepping up to address this challenge. 🚀💡 Having been in the trenches of frontend development myself, I can resonate with the pain points you've highlighted. The gap between design tools and usable code has always been a significant hurdle, and it's refreshing to see a solution that promises to bridge this gap effectively. 🌉🖌️ The features you've outlined, especially the ability to generate code without manual pre-processing and the emphasis on high-quality, production-ready code, are truly game-changing. The fact that Kombai can understand complex designs and generate logical code structures is a testament to the power of your ensemble model. 🤖🎨 It's evident that a lot of thought, research, and feedback have gone into developing Kombai. Engaging with over 500 developers and iterating based on their feedback showcases your commitment to creating a product that truly addresses the needs of the developer community. 🙌🔧 I'm genuinely excited to give Kombai a spin and see it in action. The promise of making frontend development fun again is a compelling one, and I'm eager to see how Kombai delivers on this promise. Wishing you and the entire Kombai team all the best on this journey. Here's to revolutionizing frontend development and making the lives of devs a whole lot easier! 🌐🎊

Kombai Research Preview holds potential for breakthroughs. Is there a roadmap for integrating with academic databases? This could bridge research with existing knowledge.

Awesome. So many things are chaning these days with AI. Does it handle responsiveness automatically as well?

congrats on the launch!! if this works out and is trained with lots and lots of code & design, this could come in really handy. interested, with which data do you train the model? are you doing screenshots of website and fetch the frontend code and then analyse how it's structured?

Wow, this is really helpful. I am sure this would really help reduce front-end dev time. Congratulations on building a great product and all the best!!!

Love the concept! Would be dope to be able to choose the code output - vanilla JS + html, React, Vue, ... but more importantly (complementary though) for the css: be able to choose either an output in standard CSS or TailwindCSS 😁 What's the roadmap / vision in this regard?

@dipanjan_dey : Congratulations on the launch of Kombai ! Wishing you great success ahead!

Wow, this is amazing. Looking for something like this where Developers can create multiple UI variations through AI. Next innovation could be having multiple UI variations for A/B testing and optimizing for a conversion event 👍