Skip to main content
Code mode generates code from Figma, text, image, and code inputs. It’s the default selected mode in Kombai. Use it to generate code for small components to full app UIs.

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

Kombai Browser

Runs the code in Kombai Browser. Lets you tag DOM elements and send them back to Kombai as context.

​
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 30+ 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

Generate code

Kombai will generate the code based on the plan. It will also auto-fix any TS or linting errors found in the generated code.
5

Preview and follow up

Run the code in Kombai Browser to preview the generated code. If you find any visual mismatches in the preview, you can tag DOM elements and suggest Kombai to make the necessary changes. Kombai will regenerate the code accordingly.

​
How to switch to Code mode

Code mode is the default mode in Kombai. If you have switched to Ask mode and want to switch to code again, follow the steps below:
  1. Click Ask dropdown in the Kombai’s input box.
  2. Click Code.

​
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. Run the terminal commands to install the dependencies required to perform the task
  4. Generate the working set that includes the code files(generated as per tech stack) and Figma assets
  5. Auto-fix TS and linting errors found in the generated code
  6. Let you preview the generated code in Kombai Browser