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 in sandbox to preview the working set. Auto-fix TS and linting errors found while running the sandbox.

​
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 the tech stack configuration.
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 & run code

Kombai will generate the code based on the plan. You can verify the code and run in sandbox. Kombai will automatically fix the TS and linting errors found during the sandbox run.
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

View & save

Once you are satisfied with the preview, you can view 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 view the code files and save them to the repo.