Quickstart

This guide walks you through the loop Kombai is built around. You will generate a design from a prompt, iterate on it in the Canvas, have Kombai code it in your own tech stack, and then refine the running UI in the Kombai Browser.

​

Prerequisites

Before getting started with Kombai, ensure you have installed the Kombai desktop app on your OS (macOS, Windows, or Linux) and signed in.

​

Open your project

Kombai works directly on your codebase, so it can read your components, design tokens, and conventions and generate code that fits your project instead of code that only looks correct in isolation. Use the project switcher (the folder dropdown below the chat input) to select a recent project, or click Open folder… to pick a folder from your disk. To try something without touching a real repo, pick Don’t work in a project from the same dropdown and Kombai makes a folder for that chat itself. See Navigating the desktop app for details.

​

Generate standout UI designs

When you want to build a new page or section and don’t already have a design for it, use Design Mode. Kombai explores creative directions on its own before it designs anything, so you don’t necessarily have to hand it a visual direction to get a good first draft.

1. Ensure the Design pill is turned on in the chat input box. If it isn’t, click the + icon and select Design under Modes.
2. Describe the UI you want to create and send the prompt. For example: Artisanal boutique specialty coffee roastery landing page for enthusiasts sourcing rare beans from Ethiopia.
3. Kombai generates the designs and opens them in a new Canvas, laid out side by side. Each one takes a different visual direction.

By default, Kombai generates 3 Variants and refines each of them over 3 Passes (some models support only a single Variant). Click the icon in the chat input to change either count before you send the prompt. See Design Settings for details.

​

Write better design prompts

Kombai has built-in design taste and its own creative strategies, so a single line that names the product, the audience, and the sections you need is usually enough to get a standout first draft. Adding style adjectives to your prompt narrows what Kombai explores, so add them only when you actually want that constraint. Here are the inputs that reliably improve the output:

​

Iterate on the design

Once Kombai generates the first draft, iterate on it in the Canvas until it matches what you want. The fastest way to change something is to point at the exact area you want changed and describe what’s wrong with it. Follow the steps below to snip an area and iterate on it:

1. Click the icon on the bottom toolbar of the Canvas.
2. Click and drag the cursor to select the area you want to change. It automatically attaches to the chat.
3. Type your instructions in the chat and send. For example: The hero headline competes with the product shot. Make the headline smaller and move the CTA above the fold.

You can also iterate in the following ways:

• Generate Variants: Select the design, open the Generate dropdown in the top toolbar, and pick a preset under Generate Variants: Styles, Structure, Interactions, or Responsiveness. Choose Surprise Me to let Kombai pick a direction.
• Element-level iteration: Select a single element with the Edit tool and attach only that element to the chat.
• Manual edits: Change styles, text content, and markup yourself in the design editor, without sending a prompt to the agent.
• Generate Versions: Create mobile, tablet, and laptop versions of a design in light or dark mode using Generate Versions.

See Iterate on designs for complete information on all the available options.

​

Convert the design to code

All designs in Kombai are created as HTML code. You can save a design directly to your repo as HTML, or have the agent code it in your own frontend stack.

1. Click on the design on the Canvas that you want to code.
2. Click the Code design button in the top toolbar. This attaches the design as context to the chat input and prompts Kombai to generate the code for it. Send the prompt.
3. Confirm your tech stack. Kombai reads it from your repo and asks you to confirm it the first time only. If you don’t have a repo set up, Kombai asks about your tech stack preference and scaffolds the repo first.

While coding the design, Kombai reuses the relevant code that already exists in your repo, such as components, tokens, and hooks, instead of writing new versions of them. Index a larger component library as a Context Graph to make this reuse more reliable.

​

Plan complex tasks first

For tasks that involve business logic, state management, or changes across multiple parts of your app, start in Plan mode instead of coding directly. Kombai reads your input and codebase, asks clarifying questions, and generates an editable plan.md covering the technical strategy, component reuse, and to-dos. Review it, ask Kombai to update anything you disagree with, and click Approve Plan to start code generation.

​

Review the generated code

Kombai writes new files to your codebase and updates existing ones as it works. Two pages in the right panel show you what it did:

• Changes: Every file Kombai added, modified, or deleted, as a diff.
• Browse Files: An in-app file explorer and code view for the current project.

Review the diff before you move on. If something is off, describe it in the chat instead of fixing it by hand, since Kombai already has the context of what it just wrote. For example: Make the card grid a single column below 640px, and pull spacing values from our Tailwind config instead of hardcoding them.

​

Preview, debug, and refine UI in Kombai Browser

Once you are happy with the generated code, preview it in the Kombai Browser. Click the localhost link in the Kombai chat to open your project. If you don’t see a link, ask Kombai in the chat to run your project, then click the localhost link it shares in the chat. The browser extension includes a tool for each kind of fix: Click Send to agent once you have attached everything you want to change. Kombai receives the DOM of the attached elements along with your manual edits, generates the code, and the preview updates. If you prefer not to point out changes manually, or want to test a flow, ask Kombai to operate the browser itself. For example: Open the browser and check whether the sidebar navigation works at mobile widths. See here for complete information on how the browser works.

​

Next steps

Now that you have a working understanding of how Kombai fits together, explore the rest of the product: If you get stuck or have any questions along the way, please reach out to us at support@kombai.com.