Overview

Design Mode provides Kombai with the built-in skills and context to consistently create standout UI designs. You can further iterate on the generated designs in an infinite canvas, either by making precise manual adjustments or by letting the agent refine and perfect your work.

Core concepts

Concept	Description
Canvas	The infinite canvas where each design is stored. Each Canvas can hold multiple designs.
Design System	The collection of all your saved Style Guides, Blocks, and Themes.
Generate Variants	Generate multiple design variations in a single prompt, each refined a set number of times.
Generate Versions	Create device-specific (mobile, tablet, laptop) and dark/light mode versions of a design.
Regenerate Design	Regenerate a selected design from scratch using the same original prompt.
CSS Editor	A visual style editor for manually updating any design element’s CSS properties.
Design Settings	Configure the number of Variants to generate and how many refinement passes to apply to each.

Design Mode chat window

The Design Mode chat window has a few specific controls in addition to the standard chat input.

• Canvas Gallery () — Opens the Canvas Gallery page, where you can manage your Canvases, Style Guides, Blocks, and Themes.
• Active selection bar — 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.
• Design System () — Opens the popover to select an existing Style Guide, Block, or Theme to apply during generation.
• High creativity () — Opens the High creativity popover. See High creativity for details.

High creativity

High creativity lets Kombai generate highly creative designs with a bias towards complex animations, making it the best choice for landing pages and hero sections that need to stand out.

To use it:

1. Click the in the Design Mode chat input.
2. Turn on the High creativity toggle in the newly opened popover.

Designs generated with High creativity option open in a “browser-sized” viewport on the canvas by default, allowing you to scroll within the window to experience the full content along with its scroll-triggered animations.

While standard designs render at full height to show everything at once, High creativity maintains this interactive viewport to preserve the intended motion and depth. If you prefer to view the design at its full length, simply right-click it and select Viewport > Content height to switch between the scrollable box and the full-length view.

Generate designs

Kombai’s Design Mode excels at devising unique creative strategies, even with minimal user guidance. To get unique, creative starting points for your project, try short prompts that describe the main content you are trying to create.

For example: Artisanal boutique specialty coffee roastery landing page for enthusiasts sourcing rare beans from Ethiopia.

You can use natural language descriptions in Design Mode to generate a design, or you can capture a live website and bring it into the Design Mode Canvas to serve as a starting point.

Using natural language

Type a prompt describing the design you want to create, and Kombai generates it in a new Canvas.

1. Select Design from the modes dropdown in the chat input box.
   We recommend selecting Ultra as the Agent Variant to get the best results.

2. Type a description of the design you want to create and send the prompt. You can also attach design.md or other files from your repo, as well as Style Guides, Blocks, and Themes, to give the agent further context.
3. By default, Kombai generates 1 Variant with 3 refinement passes. Click the icon in the chat input to change this setting before you send the prompt. See Design Settings for details.
4. Kombai generates the design based on your input and opens it in a new Canvas.

From a live website

Use the Web Capture tool in the Kombai Browser to capture any section of a live webpage and turn it into a design on your Canvas.

1. Switch to Design Mode from the modes dropdown in the chat input box, open the Canvas Gallery, and select the Canvas where you want to save the captured web design.
2. Open the webpage in the Kombai Browser that contains the section or design you want to capture.
3. In the Kombai extension sidebar, click the icon to select the Web Capture tool.
4. Hover over the section of the webpage you want to save as a design and click on it once it’s highlighted correctly. Alternatively, if you want to capture the entire page, click the Capture full page button.
5. Kombai instantly creates the design in the Canvas from the captured section or webpage. Visit the Canvas you opened earlier to view the newly created design.

Iterate on designs

Once Kombai generates the first draft, use any of the options below to iterate on it until you achieve your desired design:

Generate new variants based on available presets

Choose from preset categories to improve specific aspects of the design: styles, structure, interactions, or responsiveness.

1. Click on the design on the Canvas that you want to create a variant of.
2. Click the Generate dropdown in the top toolbar and hover over Generate Variants.
3. Select a preset category: Styles, Structure, Interactions, or Responsiveness. Each category expands into specific sub-options (e.g., Soften, Rearrange layout, Add sparkles, Optimize for tablet). Select one, or use Custom to define your own aspects and instructions. Kombai sends the selection as a prompt and generates the variant.

Generate new variants using custom instructions

Attach the design to the chat and describe what you want to change without selecting a preset category.

1. Click Add to context from the right-click menu or the top toolbar.
2. Type your custom instructions in the chat to guide Kombai, without using any presets.
3. Send the prompt for Kombai to generate the variant based on your instructions.

Snip an area to iterate on it

Use the Snip tool to capture a specific area of the design and attach it directly to the chat for targeted iteration.

1. Click the icon on the left toolbar of the Canvas.
2. Click and drag the cursor to select the targeted area of the design. It will automatically attach to the chat.
3. Type your instructions in the chat and send.

Attach a specific element to the chat to iterate

Use the Edit tool to select an individual element within the design and attach it to the chat for precise, element-level iteration.

1. Click the icon on the left toolbar of the Canvas, then click on the design containing the element you want to select.
2. Hover the cursor over the specific element you want to select and click once it is highlighted properly.
3. Click Add to context from the top toolbar or the right-click menu on the element.
4. Type your instructions in the chat and send.

Manually edit designs using the CSS Editor

Select the Edit tool to directly modify the text content or CSS properties of any element in the design, without sending a prompt to the agent.

1. Click the icon on the left toolbar of the Canvas.
2. Select any text node, then update its content in the text box at the top of the CSS Editor panel.
3. Select any element, then change its CSS properties, such as background color, borders, and layout, using the options in the CSS Editor panel.

Convert a design to code

All designs in Kombai are created as HTML code. You can either save them directly to your repo as HTML, or have the agent code them in the frontend stack of your choice.

If you don’t have a repo set up, Kombai will ask about your tech stack preference, scaffold the repo, and then code the design. If you already have a repo, Kombai reads the tech stack from it, asks you to confirm it the first time, and then codes the design using your stack and relevant reusable code from your repo, such as components, tokens, and hooks.

Save as HTML

Right-click on the design, select Export, and click Download as HTML.

Use the Code design button

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.
3. Switch to Code mode and send the prompt.

Use the Code element button

1. Double-click and select an element within the design on the Canvas.
2. Click the Code element button in the top toolbar. This attaches the design element as context to the chat input and prompts Kombai to generate the code for it.
3. Switch to Code mode and send the prompt.

Attach via @Designs

1. Type @Designs in the chat input.
2. Find and select the design you want to code.
3. Add your instructions, switch to Code mode, and send.