Skip to main content
Design mode is currently in alpha. Please contact us at support@kombai.com to get access.
Design mode gives Kombai access to a dedicated set of tools and skills for generating beautiful UI designs. It comes with everything you need to manage the look and feel of your designs - from granular token-based themes to high-level styles and reusable blocks.

​
Core concepts

ConceptDescription
CanvasThe workspace where designs live. Each canvas can hold multiple designs.
ThemesA structured design system with granular tokens: colors, typography, spacing, shadows, and more.
StylesA lightweight style guide that sets the overall visual identity: palette, fonts, and corner radius.
BlocksA saved snapshot of a design or design element, stored in a separate canvas for reuse.
CSS EditorA visual style editor for manually updating any design element’s CSS properties.
Design SettingsControls for how many design variants Kombai generates and how many times it refines output before generating the final one.

​
Generate a design

1

Switch to Design mode

Select Design from the modes dropdown in the chat input box.
2

Describe your design

Type a description of the design you want to create and send the prompt.
3

View the result

Kombai generates the design and opens it in a new canvas.

​
Generate code for a design

1

Refine the design

Once the design is generated, you can further iterate on the design, extract themes and styles from it, apply previously saved ones, or save the design or individual design elements as Blocks for reuse.
2

Send to agent

When you are ready to implement the design, select it and click Code design in the top toolbar. Kombai will send it to the agent for code generation.

​
Design mode chat window

The Design mode chat window has a few specific controls, in addition to the standard chat input.
  • Home () — Opens the Design Mode page, where you can manage your canvases, styles, themes, and blocks.
  • Canvas slot — Displays the designs currently attached to the chat. Click on a design to attach it here. When attached, Kombai uses it as context for your next prompt.
  • Design settings () — Shows the current variant and pass counts (e.g. 1 | 3). Click the icon to open the popover where you can set how many design variations to generate and how many times each should be refined. See Design Settings for details.
  • Styles & themes () — Opens the popover to select an existing style or theme to apply during generation.

​
Design Mode page

The Design Mode page is the central hub for managing all your designs. Open it by clicking the icon in the chat input or on the left toolbar of any canvas. It has four tabs: Canvas, Styles, Themes, and Blocks.
The Canvas tab shows all your canvases as cards. Click Create a new canvas to open up a new canvas or click any existing canvas cards to open that specific canvas.
The Styles tab lists all your saved styles. Click Create a new style to create a new style or select an existing card to open it.
The Themes tab shows all your saved themes as cards on the right. Click a theme card to update the preview on the left according to the selected theme’s tokens. In the preview, click Inspect Theme to open the token inspector modal.
The Blocks tab shows all your saved blocks as cards. Hover over a block card and click the external link icon to open its dedicated canvas.