Skip to main content
Design mode is currently in alpha. Please contact us at support@kombai.com to get access.
Every design you create in Kombai is stored in a canvas. It is where you interact with your designs, iterate on them, and access the rest of the Design mode features like themes, styles, and blocks.

​
Open a canvas

There are two ways to open a canvas in Design mode:
  • Prompt Kombai directly: Switch to Design mode and describe what you want to build. Kombai will generate the design in a canvas and open it automatically.
  • Create one manually: Switch to Design mode, then click the icon in the chat input to go to the Design mode home page. Click Create a new canvas, enter a name, and click the Create button to open a new canvas.

​
Canvas toolbars

The canvas has two toolbars: the Left toolbar runs vertically along the left side and is always visible. The Top toolbar appears horizontally at the top of the canvas when you select a design.

​
Left toolbar

The left toolbar gives you access to canvas navigation tools and the core Design mode features.
IconAction
Go to the Design mode home page.
Click and drag to pan around the infinite canvas.
Snip a portion of the design and attach it to the chat window.
Open the CSS editor sidebar to manually adjust the CSS properties of any element in the selected design.
Open the Themes sidebar to generate, apply, edit, and delete structured design token themes for the current canvas.
Open the Blocks sidebar to save and reuse designs or design elements across your projects.
Open the Styles sidebar to create, apply, edit, and delete styles for the current canvas.
/ Toggle between light and dark mode.
Open the help docs.

​
Top toolbar

The top toolbar appears when you select a design. It provides five actions: Preview, Add to context, Edit, Generate, and Code design.
Opens the preview bar, letting you view the selected design across mobile, tablet, and desktop screens directly within Kombai. You can also open the localhost version of the design in your browser.
  1. Click on the design you want to preview.
  2. Click the Preview button in the top toolbar.
  3. Select the Mobile, Tablet, or Desktop tab to switch between screen size previews.
  4. Click the icon to open the design in your browser. From there, you can resize the window or use browser dev tools to test responsiveness.
Attaches the selected design to the chat window as context. This is useful when you want to reference the design in a prompt without generating code immediately.
It provides four options:
  • Edit Design: Opens the CSS editor sidebar so you can manually adjust the styles of the selected design.
  • Extract Theme: Extracts a theme from the selected design and saves it to the Themes sidebar.
  • Change Theme: Opens a submenu with a Detach theme option at the top, followed by a list of all available themes. Click Detach theme to remove the current theme association from the design, or click any theme to apply it.
  • Change Style: Opens a submenu listing all available styles. Click any style to apply it, or click Browse all to open the saved styles in the styles sidebar.
It provides options to generate variants or regenerate the entire design:
  • Variants: Generates a new variant of the selected design. Hover and click the Generate variants option.
  • Regenerate design: Regenerates the selected design.
Attaches the selected design to the chat input and sends a prompt to the agent to generate code for it.