Skip to main content

Make agents follow a design system

When your product already has an established visual language, you should not have to reconstruct that language before exploring a new screen. Kombai can extract a Design System from an existing codebase, then use that system to generate designs in Design Mode.

In this walkthrough, you’ll turn the conventions already present in your CSS, Tailwind configuration, and other design tokens into a reusable Design System, attach it to a prompt and create a new design that follows the same visual direction.

Before you begin

Make sure you have:

  • The Kombai desktop app or the IDE extension already installed.
  • An existing codebase that already contains the design conventions you want the Kombai to follow.
  • A short description of the screen or flow you want to design.

1. Open My design systems

Select Design Systems from the sidebar. If you are using Kombai extension in your IDE, select the Palette icon in the chat input and click Design System to open the Canvas Gallery.

Select My design systems.

2. Choose your codebase as the source

Click + Create, then select Import from codebase.

This is a key implementation step. Instead of starting with a generic style direction, you’re giving Kombai the project that contains the CSS, Tailwind configuration, and tokens it can use to build the Design System.

Note: You can also create a design system from a webpage URL. Use this when the webpage is a better source for the design system than your codebase. To use a URL to create a design system, select Import from URL and paste the page URL into Website URL

3. Select the project and name the system

In the Import from codebase modal:

  1. Enter the Codebase path, or click Browse and select the project folder.
  2. Enter a clear Name for the Design System.
  3. Optionally add Notes describing what you want the extraction to focus on.

For example, if you are creating a new analytics page for an established product, you might name the system after the product and use notes such as:

Focus on the existing application shell, semantic color tokens, type hierarchy, spacing rhythm, button treatments, form controls, and card patterns.

If your repository contains several apps or more than one styling approach, select the folder that best represents the product you are designing for.

4. Generate the Design System and verify

Click Generate. Kombai sends a prompt to the agent, generates the Design System, and saves it under My design systems.

Return to My design systems and locate the design system. Click to open its detail page.

On the detail page, verify that you can see:

  • The Design System’s name.
  • Its sections and token cards.

You can also click Edit to open the raw source beside a live preview. If you make changes, click Save to keep them or Cancel to discard them.

5. Apply the Design System to a Canvas design

Now open the Canvas containing the design you want to restyle.

  1. Select the design on the Canvas.
  2. Right-click the selection to open its context menu.
  3. Under Design System, open the Apply submenu.
  4. Select the Design System you just created.

Kombai sends a prompt to the agent to regenerate the selected design using the system’s tokens. It preserves the original layout and content while applying those tokens.

Use the design system in all future Kombai designs

The generated Design System is designed to make a project’s visual identity reusable. To guide Kombai to always use the design system, attach the Design System to a Design Mode chat. Follow these steps to attach the design system:

  1. Switch to Design Mode and open the Design System popover from the chat input
  2. Select the system you want to provide as context.

Why this workflow is useful

Extracting a design system is useful when your app already follows a convention and you want a new page or flow to begin from the same visual language.

You can also create a design system from a Figma design, a Kombai generated design, an existing URL or a Design.md file. Once created, you can reuse it when generating new designs.

Next steps