🎉  It's Here!! | The Marketers' Guide to High-Performing Email Designs Download Report

×

Please try us on a desktop

Our app relies on some desktop browser features to render design files and interactable code. Unfortunately, we haven't been able to make these work on mobile yet.

Please try Kombai using a chromium based browser on desktop.

A new model trained to code email & web designs like humans

Input your design files. Get high-quality HTML, CSS or React code in a click.

Watch a 2 minute demo of Kombai

#1 DevTool on Product Hunt in 2023

Rediscover the fun of building Frontend!

Life is too short to struggle with mundane UI code. Spend less time writing styles & DOM, and more on the complex business logic that only you can write.

Use designs as you’ve got them

No need to tag, name, or group elements or use auto-layout.

Logical div-structure & React components

With human-like names for classes and components.

CSS for flex with no hardcoded dimensions

Appropriate flex-grow, flex-shrink, justify-content, align-items, gap, padding etc.

High-quality JS code with loops & conditions

And mock data from design inputs that can be easily replaced.

Form elements as functional components

Buttons, inputs, selects, checkbox, and switch using MUI Base or HTML.

Design Input

Open in Figma
Open in Kombai

Auto-generated code

Use designs as you’ve got them

No need to tag, name, or group elements or use auto-layout.

Design Input

Open in Figma

Auto-generated Code

Open in Kombai

Logical div-structure & React components

With human-like names for classes and components.

Design Input

Open in Figma

Auto-generated Code

Open in Kombai

CSS for flex with no hardcoded dimensions

Appropriate flex-grow, flex-shrink, justify-content, align-items, gap, padding etc.

Design Input

Open in Figma

Auto-generated Code

Open in Kombai

High-quality JS code with loops & conditions

And mock data from design inputs that can be easily replaced.

Design Input

Open in Figma

Auto-generated Code

Open in Kombai

Form elements as functional components

Buttons, inputs, selects, checkbox, and switch using MUI Base or HTML.

Design Input

Open in Figma

Auto-generated Code

Open in Kombai

Steer Kombai with "design prompt engineering" to get the code you want

Initial Prompt

Engineered Prompt

In this design, "Integrated Calendars", "Usage Data", and "Meeting Options" sections do not have any visible boundaries.

Kombai cannot figure out the top cards visually. So, it thinks goes by alignment of the items and splits the whole section into 3 rows.

Frequently asked questions

Wait! Can’t you just get all the UI code from Figma itself?

Unfortunately, Figma - a great tool for designers and design-to-code handoff, does not provide much useful code for real-world developers.

Though developers can get some simple CSS properties, such as color, font, borders, fixed heights, and widths, from Figma, they still need to write most of the UI code themselves (DOM structure, flex-related CSS, react components etc.).

There are some Figma-to-code plugins available in the Figma marketplace. But they only generate "spaghetti code", often with fixed dimensions & positions in CSS, that are unsuitable for modern responsive applications. Their code outputs also tend to be very hard to read and modify (think unnatural div structures, lots of unnecessary codes, no meaningful class names, etc.)

Do I have to tag/ name layers specifically in Figma or use auto-layout?

No. You do not have to tag, name, or group design elements in any specific way or use auto-layout.

Kombai is trained to create code based on what the design would “look like” to a developer.

What’s the tech under the hood?

Kombai is 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. The models have been trained to emulate the implicit and explicit inferences made by developers while building UI code from designs.

You can read more about our technology here.

Are you telling me that Kombai’s code output is not coming from an LLM or publicly available model?

Yes. Because none of the existing LLMs/ GenAI models can understand UI designs, we had to spend the last 15 months building and training purpose-built models from scratch.

We use public LLMs to improve some parts of the code, but 95%+ of Kombai’s code output come from it’s purpose-built models.

What frontend languages & frameworks does Kombai support?

Currently, Kombai generates React and HTML + CSS Codes. You can also choose to get the CSS output either in vanilla CSS or tailwind.

Many of our early users have also been able to use Kombai with non-React frameworks, like Vue, Svelte, Angular, and Django, by taking our HTML + CSS output and modifying it minimally as per their frameworks of choice. Usually, ChatGPT is fairly good at converting Kombai's generated code to other frameworks or languages. 🙂

Is Kombai free?

Kombai is currently in “public research preview” and is free to use for individual developers.

I tried Kombai, but some of the code doesn’t look right. What do I do now?

As a generative model, Kombai doesn’t follow strictly rule-based boundaries. At times, it can produce incorrect outputs, particularly in cases where

•   the design is ambiguous, i.e., there are not enough visual cues in the design for Kombai to derive the right inferences with high confidence
•   there are “unnatural” deviations in the visual aspects of a design, e.g., spacing and alignment, by a margin bigger than the models’ acquired fault tolerance

In such cases, you can try regenerating the code using the “regenerate button” in the app. If that doesn’t work either,

•   you can try to nudge the model using “design prompt engineering”, similar to how you’d prompt engineer texts to steer ChatGPT or Claude. Read this guide for more details and examples

Yay! More Buttons! 🙃

Are you one of the folks who directly jump (or perhaps, Vim: G ?) to the end of the page? Or, maybe, you are still undecided about taking Kombai for a spin? Either way, here are the Call-to-Actions for you again!

TL;DR: Please try us. In case you don’t have a design ready, we have a bunch of examples that you can try in a click.