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.
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, Style Guides, 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 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 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 Style Guides sidebar to create, apply, edit, and delete Style Guides for the current Canvas.

​
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, allowing you to view the selected design at multiple zoom levels. 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. Click the zoom percentage dropdown to switch between multiple zoom levels.
  4. Click the icon to open the design in your browser.
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 Style Guides. Click any Style Guide to apply it, or click Browse all to open the saved Style Guides in the sidebar.
It provides options to generate Variants or regenerate the entire design:
  • Generate Variants: Generates a new Variant of the selected design. Hover and click the Generate variants option.
  • Generate Versions: Generates Versions based on the selected device, breakpoint, and mode.
  • 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.

​
Bottom toolbar

IconAction
ZoomClick to see various zoom options for the designs.
/ Toggle between light and dark mode.
Open the help docs.

​
Attach Canvas and Designs in chat

You can attach an entire Canvas or individual designs to the Kombai chat as context for code generation or design questions. Attach a Canvas:
  1. Type @Canvas in the chat input.
  2. Select the Canvas you want to attach.
  3. Write your prompt and send.
Attach a Design:
  1. Type @Designs in the chat input.
  2. Select the individual design you want to attach.
  3. Write your prompt and send.

​
Right-click menu options

​
Right-click on a design

Here are the options you see when you right-click on a design within the Canvas:
OptionShortcutDescription
Add to contextAttach the selected design to the chat window as context.
Focus⇧2Bring the selected design into focus on the Canvas.
Cut⌘XCut the selected design.
Copy⌘CCopy the selected design.
Paste⌘VPaste a copied design onto the Canvas.
Duplicate⌘DDuplicate the selected design.
DeletedeleteDelete the selected design.
Generate VersionsGenerate versions of the selected design based on device, breakpoint, and mode.
Generate VariantsGenerate a new variant of the selected design.
Regenerate designRegenerate the selected design.
EditOpens a submenu with Edit Design, Change Theme (with Enable Theme option), and Change Style (with Create new, Browse all, and saved Style Guides).
PreviewOpen the preview bar for the selected design.
ExportOpens a submenu with Copy as PNG, Copy as HTML, Save as PNG, and Save as HTML.
Create BlockSave the selected design as a reusable Block.

​
Right-click on an empty area

Here are the options you see when you right-click on an empty area of the Canvas:
OptionShortcutDescription
Paste⌘VPaste a copied design onto the Canvas.
Zoom inZoom into the Canvas.
Zoom outZoom out of the Canvas.
Focus⇧2Bring the selected design into focus on the Canvas.
Dark Mode / Light ModeToggle between dark and light mode for the Canvas.