Oikon

Posted on Aug 3

From Figma to Frontend in Minutes: A Hands-On Review of "Kombai"

#kombai #frontend #ai #webdev

Note: this original post is in Zenn (Japansese)

I'm excited to share my experience with Kombai, an AI-powered frontend tool that specializes in Figma to Code conversion.

Kombai previously ranked #1 on Product Hunt and was officially released on July 31st, 2025.

My Overall Assessment

After testing Kombai extensively, here are my key takeaways:

Easy to use as VSCode or Cursor plugin
Excellent sandbox UI preview functionality
High UI compilation success rate
Not pixel-perfect for Figma to Code, but excellent as a starting point

AI coding tools like Claude Code often struggle with frontend and UI development, so I find frontend-specialized AI tools particularly interesting.

About Kombai

https://kombai.com/

Kombai is an AI agent specializing in frontend development and has gained attention as an AI-powered development assistance tool. In 2023, it was selected as the most upvoted tool on Product Hunt (link). Kombai aims to automate frontend development with AI.

At Kombai are building a developer tool for web app developers which takes away their mundane automatable tasks like writing and maintaining CSS and other boilerplate JS code. Our vision is to automate all the mundane tasks a frontend dev team has to do today, accounting for 60-70% of their work.

The product page showcases benchmarks for frontend development. Kombai reports better performance than commonly used AI coding agents in three areas: Code Review, Feature Implementation, and Compilation Success.

Pricing starts with a free plan that includes credits. As I'll explain later, loading one Figma design and creating UI typically costs around 20-40 credits.

Trying Kombai

Installation

Kombai is currently available on these marketplaces:

VSCode
Cursor
Windsurf

I'll explain the process of installing Kombai in Cursor.

Search for "Kombai" in the plugin search, and you'll see Kombai with a dog icon.

After installation, a Sign in screen appears in the editor view. If you don't have an account, select Sign up.

Upon successful sign-in, you'll see a screen like this:

Creating UI with Natural Language

First, I tried instructing UI creation using natural language. I entered the following prompt:

I want to create a Pokédex. Make it possible to view all 151 Pokémon from the first generation.

When you run the chat, it lists what technology stack to use for designing the frontend.

Framework: React 19 TypeScript
API Framework: RTK, RTK Query
Router: React Router v7 (declarative mode)
Component Library: MUI v7
Styling: Emotion

The technology stack choices provided seem a bit different from what's typically preferred in Japan. You can change the technology stack used from Configure stack if needed.

Available categories include:

Framework
API & State Management
Router
Components
Styling
Icons
Global Instructions
Advanced Configurations

After deciding on the technology stack, it moves to the Planning Phase. The Planning Phase lists what views and components to create. You can edit or provide input if there are issues.

If there are no issues with the Planning Phase content, you execute it. After execution, a Run in Sandbox button appears as shown in the image below.

When you run Run in Sandbox, you can view and interact with the actual frontend created on localhost. The ability to preview AI-generated frontend in a sandbox is one of Kombai's key strengths.

The Pokédex created this time looks like this. It has a MUI-style UI.

It prepared 5 mock data entries for me.

I tried adding the following additional prompt:

Make it 151 types of Pokémon. Also, make all UI language Japanese.

The Pokédex generated by the additional instruction is shown in the image below. It properly supported Japanese and prepared 151 types of mock data.

UI interactions were also possible in the sandbox. For example, when selecting a Pokémon, I could check individual Pokémon details.

Beyond this, I was able to confirm that search and filter functions worked correctly within the sandbox.

If there are no issues with changes in the sandbox, you can save the changes. Conversely, unless you adopt the changes, Kombai won't reflect changes to your local work environment. Items developed in the sandbox can also be restored to checkpoints in the chat.

The frontend output for this Pokédex is as follows:

Kombai not only created components but also organized the frontend folder structure.

Creating UI from Figma

Kombai also provides "Figma to UI" functionality that imports Figma designs and converts them to UI. You can add it from Add Figma link in the bottom right of the chat.

A dialog for entering the Figma URL appears. The dialog also explains how to get the Figma URL:

Right-click frame > "Copy/Paste as" > "Copy link to selection"

The first time requires authentication to connect Figma and Kombai.

When the Figma URL is correctly loaded, the Figma design appears in the prompt as shown in the image below. This design is treated as a @ resource, so it was possible to load multiple Figma designs.