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