Code mode generates code from Figma designs, images, and text inputs. It is the default selected mode in Kombai. Use it to generate code for small components to full app UIs.

​
Demo

​
Abilities

UX Interpretation

Breaks the design into logical sections. Extracts components, assets, and theme from Figma.

Purpose-built RAG for libraries and frameworks

Generates code with higher contextual knowledge of popular frontend libraries and frameworks.

Plan before complex tasks

Auto plans before complex tasks. Breaks down the task into sections, features, and editable plan files.

Contextual Understanding

Indexes the codebase and reads relevant files to understand the context better.

Working Set

Generates the complete working set of code files and assets based on the prompt.

Run Code

Runs the code locally to preview the working set. Auto-fix TS, compile, and run errors found during the preview generation.

​
Workflow

Here’s the workflow you have to follow to generate code using Kombai:

1

Configure the tech stack

Select the tech stack you want to use for the code generation. Kombai supports a wide range of frameworks and libraries in settings.

2

Add the input

Add the Figma, text, or image input for which you want to generate code. Kombai will interpret the input and generate a plan for the code.

3

Review plan

Kombai will provide a detailed plan that includes the sections, features, and editable plan files. Approve the plan to proceed with the code generation.

4

Verify & preview

Kombai will generate the code based on the plan. You can verify the code and preview in localhost. Kombai will automatically fix the TS, compile, and run errors found during the preview generation.

5

Iterate

If you find any visual mismatches in the preview, or want to add new features or pages, you can ask Kombai to make the necessary changes. Kombai will regenerate the code accordingly.

6

Review & save

Once you are satisfied with the preview, you can review and save the files to your repo. Alternatively, you can also set up a new repo and save the files to it.

​
Example use case

Generate code for this Figma design.
@figma- Dr_Appointment_App

Kombai will:

  1. Fetch and process the Figma design.
  2. Generate and present a detailed plan for the code.
  3. Generate the working set that includes the code files(generated as per tech stack) and Figma assets.
  4. Set up a local deployment to preview the working set.
  5. Auto-fix TS, compile, and run errors found during the preview generation.
  6. Let you review the code files and save them to the repo.

​
Working set

Working set refers to the set of files generated by Kombai during the code generation process.

When Kombai is asked to modify the generated code, it also checks for any dependent files in the working set that may require modification. Kombai then proceeds to make the necessary changes and update the working set.

​
Run code

Kombai sets up a local deployment to run the code. It also fixes TS, compile, and run errors found in the build process to ensure that the local server runs smoothly.

If you notice any visual mismatches between the design and the preview, add a follow-up input to Kombai to request changes.

To preview the working set in localhost, click icon in the working set panel.

​
View the code file

Kombai maintains the latest version of the code files in the working set. You can read the code of each file before saving it to your system.

Click on a file in the working set panel to open it in a new tab.

​
Code review

Once you are satisfied with the working set preview and code, you can save the files to your repo.

Click Review in the working set panel. Then select the files you want to save, and click Save. You can also click Save All to save all files to the repo.

When no repository is open in the IDE, you can also click Setup and Save to setup a new repository and save the files. You can directly open the repo and run npm run dev in terminal to preview the generated repo.

​
Settings

Code mode supports all the tech stacks available in Kombai. You can configure it to generate code as per your specific needs. This includes setting the frameworks, state management libraries, component libraries, etc.

For the complete list of supported tech stacks, refer to the Code Settings documentation.