Skip to main content

Refine a specific area of a design

You have a promising first draft, but one part of it is not quite working—perhaps the hero feels crowded, a card needs another data point, or a section needs clearer hierarchy. In Kombai, you can attach that exact area to the chat, describe the outcome you want, and let the agent revise the design with the relevant visual context.

This guide walks you through that focused iteration loop: select the area, explain the change, inspect the result, and finish any small details in the visual editor.

Before you begin

Make sure you have:

  1. Installed the Kombai desktop app or the IDE extension. See the Kombai Quickstart.
  2. A design in a Canvas. To open an existing Canvas, click Designs below the chat input and select its card from the Canvas Gallery. You can also create a design by asking Kombai to create one. Kombai opens the generated design in a Canvas.

Before you prompt the agent, decide what should change and what should stay consistent. A narrow request is easier to verify than a general instruction to “improve the design.”

1. Attach the area you want to change

Open the Canvas that contains your design, then:

  1. Select the Snip tool or the Select tool in the bottom toolbar.
  2. Select the area or click and drag around it to gives the agent design context.
  3. Confirm that the selected area is attached to the chat input.

2. Describe a concrete outcome

Now tell the agent what is wrong, what you want instead, and which existing qualities it should preserve. Use visible details such as the section name, content, spacing, alignment, or typography.

For example:

In the attached pricing section, add an Enterprise card beside the two existing plans. Match the current typography and card styling, keep the three cards aligned, and preserve the section heading.

This is a suggested prompt, not a required format. The useful pattern is:

  • Identify the attached area.
  • Name the specific change.
  • State the visual constraints that matter.
  • Describe what a successful result should look like.

Once the instruction is specific enough to check, send it to the agent.

3. Use the full design when a snip is not enough

Some changes depend on more context than a cropped area can show. In that case, attach the individual design:

  1. Select the design from the Canvas.
  2. Add your instructions and send the prompt.

For example, you can ask the agent to reorganize a large, crowded section:

Refactor the dashboard overview section. Combine the repeated stat cards into one summary row, move recent activity below it, and preserve the existing content and actions.

Or ask it to consolidate several related sections into a clearer flow:

Refactor the middle of this landing page. Consolidate the repeated feature sections into one scannable section, preserve the essential content, and create a clear transition into the pricing section.

4. Inspect the result against your request

When the agent finishes, return to the Canvas and compare the updated area with the outcome you described. Check the parts that are easiest to see and verify:

  • Is the requested content present?
  • Does the updated section still align with the surrounding design?
  • Are typography, spacing, and color consistent with nearby elements?
  • Did anything outside the intended area change unexpectedly?

If the result needs another pass, snip the remaining problem and send a focused follow-up. For example:

Keep the new card, but reduce the horizontal gap so all three cards align with the section width.

This keeps each iteration tied to a visible issue and a testable outcome.

5. Finish small adjustments in the visual editor

Once the structural change is right, you can make precise adjustments without sending another prompt:

  1. Click Edit in the Canvas bottom toolbar.
  2. Click the design you want to adjust.
  3. Select an element from the Canvas or the Layers tree.
  4. Use the property tabs to adjust its styles or element-specific properties. You can also edit raw CSS or HTML in the Code tab.
  5. Click Save to keep the changes, or Discard to return to the last saved state.

Next steps

  • Use Generate Versions when you need a device-specific or light/dark mode version of the selected design. Choose a device breakpoint and mode, then click Generate Version.
  • When the design is ready to implement, select it and click Code design in the top toolbar. Kombai attaches the design to chat and prepares a prompt for code generation, as described in Convert the design to code.