Generating Code

Generating code for your design

Kombai's primary functionality lies in its capability to convert designs into usable code. This section outlines the steps and options available to users for this process. There are two steps to generate code for your designs:

  1. Identifying component
  2. Generating code for the identified component

Identifying your component

Kombai processes your loaded design, intelligently segmenting it into distinct sections or components. Hover over the design to view these identified sections.

Identifying sections 1

Identifying sections 2

Identifying sections 3

Each of these sections can be used to generate specific code.

Generating code for the identified component

To generate code for a section click on the desired section. Kombai's generative AI will interpret the design and produce the associated code.

Generated code

We allow you to generate code in HTML/CSS and React:

HTML/CSS

To generate the HTML/CSS code for the design, click on HTML/CSS tab located below the design.

HTML/CSS tab

React

To generate the HTML/CSS code for the design, click on React tab located below the design.

HTML/CSS tab

Regenerating code

Since Kombai is an AI , sometimes another iteration might produce better results.

  • Click on the Regenerate Code button if you're looking for alternative code outputs.
  • This process is stochastic; therefore, the output can vary each time.
  • Use the forward and backward navigation buttons to cycle through different generated outputs.
  • You can generate up to three different outputs for each section.

Regenerate code

You can see the layout is different and more suitable than the original output in the above example.

Customize your tech stack

To align with varied development environments, Kombai offers customization options for your tech stack:

  • Access the code generation settings in the "settings" tab located below the design.

Settings

CSS Framework settings

Choose your desired CSS framework:

  • Vanilla CSS: This is the standard CSS output.

    Vanilla output

  • Tailwind: Utilizes the Tailwind CSS framework for the output.

    Tailwind HTML output../public/generating-code/tailwind-html.png

    Tailwind React output

Language settings

Choose your desired language:

  • JavaScript - Utilizes JavaScript for the output. In this case, the React tab will output the standard JSX code.
  • TypeScript - Kombai supports generation of TypeScript code. The generated code includes explicit types for all variables and components. You can view and download the code in the React tab.

Component library settings

Kombai can potentially detect and generate code for components and integrate with libraries and can match the styling of native elements. Current support is ../public/generating-code/mui.pngfor following libraries and limited components.

  • MUI Base (headless components): Limited to form elements like button, input, checkbox, and select.

    MUI output

  • Native HTML elements: Supported with styling to closely resemble the original design.

    Native output

Measurement units

Customize the units used in your generated code:

  • px: Pixels as units.

    px output

  • rem: Relative to font-size of the root element.

    rem output

You can click the px button to view the unit corresponding to px and vice versa

px to rem

With these features, Kombai offers an adaptable and efficient design-to-code solution. Make sure to explore each option to find the best fit for your development workflow.

Reviewing Layout

Exporting React code

Click the download button next to the React tab to download the code. The code downloads as a zip file with the name of the root component.

React code export

In the above example, the zip file contains the following files:

Zip contents

Run npm install && npm run dev to start the development server.

React code output

Exporting HTML code

Select any HTML element in the HTML CSS code panel and right click to copy the code. The tool gives following four options -

  • Copy HTML
    • This element
    • This element with children
  • Copy CSS
    • This element
    • This element with children

Copy code options

The example output for Copy HTML - This element is as follows -

<div class="feature-container">
  <div class="svg-container">
    <svg
      viewBox="0 0 16 16"
      x="0"
      y="0"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g
        id="Bold / Essentional, UI / Check Circle_2"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          id="Vector_20"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M14.667,8c0,3.682 -2.985,6.667 -6.667,6.667c-3.682,0 -6.667,-2.985 -6.667,-6.667c0,-3.682 2.985,-6.667 6.667,-6.667c3.682,0 6.667,2.985 6.667,6.667zM10.687,5.98c0.195,0.195 0.195,0.512 0,0.707l-3.333,3.333c-0.196,0.195 -0.512,0.195 -0.708,0l-1.333,-1.333c-0.195,-0.195 -0.195,-0.512 0,-0.707c0.195,-0.195 0.512,-0.195 0.707,0l0.98,0.98l1.49,-1.49l1.49,-1.49c0.195,-0.195 0.512,-0.195 0.707,0z"
          fill="currentColor"
        />
      </g>
    </svg>
  </div>
  <p class="additional-features-container">Unlimited blocks for individuals</p>
</div>

The example output for Copy HTML - This element with children is as follows -

.feature-container {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.svg-container {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #25c998;
}
.additional-features-container {
  box-sizing: border-box;
  flex: 0 0 auto;
  margin-left: 12px;
  font: 400 16px Poppins;
  color: black;
}

This is useful when you want to use templating based frameworks such as Django, Jinja, Angular, Vue, Svelte, etc. where you can copy and paste these DOM elements.

An example output when Tailwind using CSS Framework -

<div
  class="flex justify-start items-center flex-row grow-0 shrink-0 basis-auto box-border"
>
  <div
    class="grow-0 shrink-0 basis-auto box-border w-4 h-4 text-[#25c998] flex"
  >
    <svg
      viewBox="0 0 16 16"
      x="0"
      y="0"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g
        id="Bold / Essentional, UI / Check Circle_2"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          id="Vector_20"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M14.667,8c0,3.682 -2.985,6.667 -6.667,6.667c-3.682,0 -6.667,-2.985 -6.667,-6.667c0,-3.682 2.985,-6.667 6.667,-6.667c3.682,0 6.667,2.985 6.667,6.667zM10.687,5.98c0.195,0.195 0.195,0.512 0,0.707l-3.333,3.333c-0.196,0.195 -0.512,0.195 -0.708,0l-1.333,-1.333c-0.195,-0.195 -0.195,-0.512 0,-0.707c0.195,-0.195 0.512,-0.195 0.707,0l0.98,0.98l1.49,-1.49l1.49,-1.49c0.195,-0.195 0.512,-0.195 0.707,0z"
          fill="currentColor"
        />
      </g>
    </svg>
  </div>
  <p
    class="grow-0 shrink-0 basis-auto box-border [font-family:Poppins] text-base font-normal text-[black] ml-3"
  >
    Unlimited blocks for individuals
  </p>
</div>

The copy CSS option is also available in the CSS properties panel for every individual class as well as all the classes for an element as well as all the children.

Copy CSS in Panel

Troubleshooting

Check out our section on Design Prompt Engineering to learn how to make minor tweaks to your design to nudge Kombai in the right direction to generate the code you want.