2

A new AI model that you can prompt with UI designs

 1 year ago
source link: https://www.producthunt.com/posts/kombai
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Support is great. Feedback is even better.

"Kombai is currently in research preview and is free to use for individual developers. In this phase, our aim is to learn more about the model's strengths and weaknesses from your usage. So please give it a try, provide your valuable feedback and help us reach more devs 🙏"

The makers of Kombai
Sort by:

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

@dipanjan_dey Congrats on Kombai's launch! Your AI generating top-notch React and HTML + CSS code from UI designs is amazing. Simplifying complex coding while maintaining quality is a game-changer. Excited to see where Kombai goes!

@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.

@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! :-)

@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?

@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 🤷‍♀️

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK