Skip to main content

Explore different design directions with Generate Variants

When a design is close but not quite right, you do not have to restart from a blank canvas. Generate Variants gives Kombai’s agent an existing design plus a focused improvement direction. The result is a new design that explores a different visual style, layout, interaction approach, or responsive treatment while retaining the design’s core intent.

This walkthrough uses a simple scenario: you have a dashboard design that feels too dense, and you want to explore alternatives before choosing what to build.

Before you begin

You’ll need to have:

  • The Kombai desktop app or the IDE extension installed. See the Kombai Quickstart
  • A design opened in a Canvas. If you do not have a design, prompt Kombai to make one. Kombai opens the generated design in a new Canvas automatically.

You can also decide how many variations Kombai should explore before you generate. To set the number of variations, turn on the Design mode pill and open Design Settings from the chat box, then choose:

  • Variations: 1, 2, or 3 independent design options.

1. Select the design you want to explore

Open the Canvas and click the design you want to use as your starting point. A top toolbar appears when a design is selected.

For our dashboard example, select the current dashboard design—the one whose content and purpose we want to keep while exploring a clearer layout.

2. Open Generate Variants

In the top toolbar, click the Generate dropdown. Hover over Generate Variants to open its preset categories.

Generate Variants is different from the other options in this menu:

  • Use Generate Versions when you want a device-specific or light/dark mode version of a finished design.
  • Use Generate Variants when you want to improve or explore a different direction for the same design.
  • Use Regenerate design when you want a completely fresh take based on the original prompt.

3. Choose the direction you want the agent to explore

Choose a category, then select a sub-option. Kombai provides four focused categories, plus a general Surprise Me option:

  • Improve styles: Explores visual appearance. Options are Suggest a style direction, Soften, Intensify, Pop colors, Add depth, and Improve typography.
  • Improve structure: Explores layout and spatial organization. Options are Rearrange layout, Simplify, Enrich, Fix hierarchy, and Adjust density.
  • Improve interactions: Explores motion and interactive elements. Options are All aspects, Animations, and Add sparkles.
  • Improve responsiveness: Explores behavior across screen sizes. Options are All aspects, Mobile, Tablet, and Large screens.
  • Surprise Me: Explores an agent-selected improvement direction, where Kombai chooses the direction.

Because our dashboard feels crowded, we'll choose Improve structure → Adjust density to explore a different spacing treatment.

4. Let Kombai generate the variant

Once you select an option, Kombai sends the selected design and your chosen direction to the agent as a prompt. The agent then generates the new variants on the Canvas.

Generate variants asks the agent to explore a new direction without discarding the original design’s core intent. This allows you to explore a structural change while keeping the dashboard’s underlying purpose as your anchor.

5. Compare the result with your starting design

Review the generated design against the original. For the dashboard, check whether the new spacing makes the hierarchy easier to scan while preserving the information users need.

Use the category you selected as your review question:

  • For Improve styles, did the typography, color, contrast, or depth move in a useful direction?
  • For Improve structure, is the layout or hierarchy clearer?
  • For Improve interactions, are the motion and interactive details appropriate for the experience?
  • For Improve responsiveness, does the design better address the target screen size?

Treat each variant as a direction to evaluate: keep one, try another preset, or use the strongest result as the starting point for a more specific follow-up.

6. Refine the strongest direction with custom instructions

Presets are useful for broad exploration. Once you know which parts you like, you can give Kombai more specific instructions:

  1. Select the design you want to refine.
  2. Click Add to context in the top toolbar or the design’s right-click menu.
  3. Describe the exact changes you want in the chat, then send the prompt.

For example:

Keep the clearer spacing and card grouping from this variant, but restore the original navigation and use a less saturated accent color like the third variant.

Kombai uses the attached design and your instructions to generate another variant. This lets you move from broad exploration to a deliberate combination of the ideas that work.

What you can do with the direction you choose

Generate Variants helps you explore and compare UI directions on the Canvas before changing production code. Once you have a promising result, you can continue refining it with the agent, make precise visual changes in the editor, or hand it off for implementation.

That makes variants useful for more than cosmetic exploration. You can test a new hierarchy, rethink a page’s density, experiment with motion, or assess a responsive approach while keeping the original design available as a reference. Kombai’s Design Mode use cases describe this as a way to refresh existing UI and iterate until you find a direction you want to pursue.

Next steps

  • Fine-tune the result yourself: Open the design editor to adjust text, colors, typography, spacing, layout, motion, HTML, or CSS, then save your changes.
  • Create a device or color-mode version: Use Generate Versions for mobile, tablet, laptop, custom-width, light-mode, or dark-mode output.
  • Turn the selected direction into code: Select the design and click Code design in the top toolbar. Kombai attaches it to the chat and prompts the agent to generate code. See Convert a design to code for the supported handoff paths.