Kombai

What is Kombai?

Kombai is a revolutionary AI-driven platform that generates high-quality HTML, CSS, or React code from design files in a single click. It's designed to simplify the process of building frontend applications, allowing developers to focus on complex business logic rather than mundane UI code.

Features of Kombai

• Generates logical div-structure and React components with human-like names for classes and components
• Produces CSS code with no hardcoded dimensions, including flex-grow, flex-shrink, justify-content, align-items, gap, and padding
• Creates high-quality JS code with loops and conditions, along with mock data from design inputs that can be easily replaced
• Supports form elements as functional components, including buttons, inputs, selects, checkbox, and switch using MUI Base or HTML
• Allows for "design prompt engineering" to steer the code generation process

How to use Kombai

• Input your design files into Kombai
• Get high-quality HTML, CSS, or React code in a single click
• Use the generated code to build your frontend application

Pricing

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

Helpful Tips

• Try regenerating the code using the "regenerate button" in the app if the output doesn't look right
• Use "design prompt engineering" to nudge the model and get the desired code output
• Read the guide on "design prompt engineering" for more details and examples

Frequently Asked Questions

• Can't I just get the UI code from Figma itself?
  • Unfortunately, Figma does not provide much useful code for real-world developers, and existing Figma-to-code plugins generate "spaghetti code" that is unsuitable for modern responsive applications.
• 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.