Kombai - Automated Design-to-Code Conversion for Web and Email

What is Kombai?

Kombai is a cutting-edge tool designed to transform design files into production-ready code. It intelligently analyzes design inputs and generates corresponding HTML, CSS, or React code. This process significantly reduces the time and effort required for front-end development.

The model avoids hardcoded dimensions and focuses on creating logical div structures and React components, using human-like names for classes. It creates functional form components and high-quality JS code with loops and conditions, streamlining the development workflow.

Features

Design Input Flexibility: No need to tag, name, or group elements or use auto-layout.
Logical Code Structure: Generates div-structure & React components with human-like names.
Responsive CSS: Uses CSS flexbox with no hardcoded dimensions.
High-Quality JavaScript: Includes loops, conditions, and mock data from design inputs.
Functional Form Components: Creates buttons, inputs, selects, checkboxes, and switches using MUI Base or HTML.
Design Prompt Engineering: Steer the AI to get the desired code output.
Multiple Output Options: Generates React and HTML + CSS Codes, with options for vanilla CSS or Tailwind.

Use Cases

Rapid prototyping of web applications
Automating the creation of email templates
Streamlining the workflow between designers and developers
Converting design mockups into functional web pages
Generating reusable React components from design systems
Creating responsive email designs

FAQs

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