Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.kombai.com/llms.txt

Use this file to discover all available pages before exploring further.

Design Mode is currently in beta. For feedback, please contact us at support@kombai.com.
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 Style Guides 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.
BlocksA saved snapshot of a design or design element, stored in a separate Canvas for reuse.
Style GuidesA lightweight style guide that sets the overall visual identity: palette, fonts, and corner radius.
CSS EditorA visual style editor for manually updating any design element’s CSS properties.

​
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 Versions

You can ask Kombai to create device-specific and dark/light mode versions of a design using the Generate Versions option in the top toolbar or from the right-click menu on a design.
1

Select a device

Choose a target device breakpoint for the version.
DeviceWidth
Mobile390 px
Tablet768 px
Laptop1280 px
CustomEnter a custom width in pixels.
2

Select a mode

Choose Light or Dark mode for the version.
3

Generate

Click Generate Version to create the version.

​
Generate code for a design

1

Refine the design

Once the design is generated, you can further iterate on the design, extract Themes and Style Guides 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 Gallery page, where you can manage your Canvases, Style Guides, 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 Variants to generate and how many times each should be refined. See Design Settings for details.
  • Style Guides & Themes () — Opens the popover to select an existing Style Guide 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, Themes, Blocks, and Style Guides.
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 card to open that specific Canvas.
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.
The Style Guides tab lists all your saved Style Guides. Click Create a new Style Guide to create a new Style Guide or select an existing card to open it.