Dipanjan Dey

Kombai - A new AI model that you can prompt with UI designs

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.

Add a comment

Replies

Best
Dipanjan Dey
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 support@kombai.com. 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
Kausambi Manjita
@dipanjan_dey literally the only product I need now haha :) Is there a dribbble connector in the works? A tonne of times I drive inspo from behance dribbble for product updates that need immediate - and tried and tested - solution.
Dipanjan Dey
@jackson_huge Thanks a lot for checking us out and for your encouraging feedback. Please help spread the word around so that we can get more developer feedback! :-)
Dipanjan Dey
@kmanjita haha! You just made our day! If a design in dribble in behance has its Figma files available, you can easily use that on Kombai. However, if it's only an image file - unfortunately, we don't know how to support that yet. We read the vector images via Figma API and get definitive CSS properties, like color, box-shadow, font etc. from it. Most image-based object detection algos cannot capture such nuanced properties accurately. And honestly, we don't know any novel approach that might solve that problem :-( Do you usually use Figma files/ other vector formats from Dribble/ bahance? or just jpegs/ pngs?
Kausambi Manjita
@dipanjan_dey while working with an internal design team - or a great web / app engineering team - luckily you have the luxury of using png ET al 🤷‍♀️
Dipanjan Dey
@kmanjita haha. fair enough. Hope to support image imports someday!
flo merian
Launching soon!
💎 Pixel perfection
really enjoy the care you put into the app UI, especially for an early-stage team. love the examples in the gallery, too! definitely worth checking out. the premise of prompting AI with design is promising. many developers will get value from this. keep up your great work, ?makers!
Abhijit Bhole
@fmerian Than you flo for your encouraging words. Please give us feedback and help spread the word.
Dipanjan Dey
@fmerian Hey Flo! Thanks a lot for checking us out. Big fan of your work around dev marketing and awesome-developer-first! Please help us spread the word so that we can get more feedback! :-)
flo merian
Launching soon!
@dipanjan_dey thanks, Dipanjan! happy to add Kombai to awesome-developer-first, please open a Pull Request. cc @agamm
Abhijit Bhole
Hi fellow makers and early adopters! 👋 After putting our heart and soul and a whole lot of sweat into building Kombai over these past 16 months - we are excited to bring our research preview to all of you. 💻 A few weeks into our development process, we realized that the biggest challenge in generating meaningful code from UI designs is to interpret the designs intelligently, as a developer would. We, developers, rely on our human intuition to make numerous inferences from a design file while writing code. But unfortunately, no existing tools, models, or algorithms could make these inferences from real-world UI designs. So, we set out to build new models from the ground up! Kombai uses an ensemble of deep learning and heuristics models 🤖, each purpose-built for a specific sub-task of interpreting UI designs and generating UI code from the derived interpretation. These sub-tasks have been defined to emulate the implicit and explicit inferences made by developers while building UI code from designs. The models are trained on carefully collected, purpose-specific training datasets that include a large number of UI designs, HTML code obtained manually as well as in automated ways, mapping between various elements in HTML and design files, and a large diversity of UI elements across pages. You can read more about our technology here: https://kombai.com/docs/technology
Yannick
It is frighteningly amazing how AI can make work better or quicker than web designers. I am a web designer myself. Incredible tool.
Abhijit Bhole
@mho22 Thank you Yannick. Our aim is to make developers more productive by cutting down the repetitive parts through machine intelligence. Please use the tool and give us feedback!
Dipanjan Dey
@mho22 Thanks Yannick! Your kind words mean a lot to us. Please help spread the word around :-)
Tin Chung
Amazing product. Great use of technology into cutting off time for people. I don't see this is a replacement for any jobs but a great add-ons to make frontend engineering easier.
Abhijit Bhole
@chungquantin Thank you for reviewing us. Please try Kombai, give us feedback and help us spread the word :-)
Dipanjan Dey
@chungquantin Thanks a lot, Tin! The point of helping dev, and NOT replacing dev, is 100% on point! Our goal is to make frontend development fun (and efficient) again for the devs by cutting down the mundane tasks, so that they can spend time building codes they actually enjoy writing!
Cyril Gupta
This looks like a cool tool. So I can just use this to get the HTML + CSS? Well, you took away some jobs :)
Abhijit Bhole
@cyriljeet Thank you. Please try the tool and give us feedback :-)
Lukas
Hey mate. Just checked it out a bit and its crazy what your tool is able to do. Can see it a game changer for lot of solo entrepreneurs, startups, prototyping,,, Wish you all the best for the launch!
Abhijit Bhole
@lukas_nedo Thank you Lukas. Please try Kombai, give us feedback and help us spread the word :-)
Dipanjan Dey
@lukas_nedo Thanks a lot for taking the time to check us out, Lukas! Appreciate your encouragement :-)
Ashish Tayal
Congratulations @dipanjan_dey @bholebababa & the @Makers Reviewed the product docs to start with and this product looks promising. Best wishes and cheering for you guys!!
Abhijit Bhole
@ashish_tayal91 Thank you Ashish for the encouraging words. Please try Kombai.
Dipanjan Dey
@bholebababa @makers @ashish_tayal91 Thank you for checking out the docs! @anbhole wrote all of that literally in half a day. Glad that it still came out okay :-)
Alex D
Congrats on your ProductHunt launch, the future looks bright!
Mukund Mohan
@alex_dyadischev Thanks Alex! It definitely is!
Chetan Sanghvi
Seemingly very excited to see this product 👍
Dipanjan Dey
@chetan_sanghvi Thanks a lot for the encouragement, Chetan!
Julien Zmiro
That sounds really cool team! I'm super eager to see how AI can help with coding or building in general. Well done!
Dipanjan Dey
@zmiro Thanks a ton! Please try the product, give us feedback and helps spread the word around :-)
Sunny Kumar
Congrats on the launch guys!
Dipanjan Dey
@sunny_sogra Thanks for taking the time to check us out, Sunny!
Preet Mishra
This looks promising! Congratulations on the launch.
Dipanjan Dey
@wickedmishra Thanks a lot for checking us out, Preet!
Sandra Djajic
Biggest congratulations to the whole team on todays launch! It looks like a helpful tool, also I like your logo very much :) wishing you the best of luck
Mukund Mohan
@sandradjajic Thank you so much for checking us out Sandra! Means a lot :)
Hemant Shah
Surprisingly excited and waiting to see this newly product launch ☺️😊
Dipanjan Dey
@hemant_shah1 Thank you, Hemant! We are equally excited to bring this product to you all!
Shyam HN
Really cool concept, tapping into the power of AI! :) This will be a major efficiency and productivity booster for front-end engineers. Congratulations @dipanjan_dey @bholebababa
Abhijit Bhole
@shyam_hn Thank you Shyam. Please share Kombai with your teams and give us feedback.
Dipanjan Dey
@bholebababa @shyam_hn Thanks a lot for the kind words and all your counsel over the years! :-)
Jannik Andersen
Well done on the launch. Looks like a really nice tool to convert Figma design to HTML easily. Well for sure give it a try👍😊
Abhijit Bhole
@jannikandersen Thank you Jannik. Please try Kombai.
CJ Looi
What a great idea! Going to try this out with the design team
Dipanjan Dey
@cjlv Thanks a bunch CJ! Frontend and Fullstack developers are perhaps the most natural users of Kombai. But any designer who want to chip in with UI code (html/ css/ react) can definitely use it to make life easier for their dev team.
Natalie Lomakina
Hello @dipanjan_dey and Kombai Team. Congrats on the launch! The product looks so interesting and useful good luck and looking forward to try it
Abhijit Bhole
@natalielomakina Thank you Natalie. Please try Kombai and let us know how you find it.
MANAN SANGHVI
Very Excited to see this product!
Dipanjan Dey
@manan_sanghvi Thanks a lot, Manan! :-)