Use Cases

Kombai’s Design Mode helps you generate standout UI designs, whether you are starting a brand-new project or refining interfaces in a mature codebase. This guide covers some of the interesting ways you can use Design Mode in new and existing projects.

​

New projects

When starting a new project, your first task is establishing a visual identity: colors, typography, spacing, and building-block components. Design Mode gives you several ways to bootstrap it quickly instead of building everything from scratch.

​

Find a visual direction from real-world brands

Kombai’s Design System Gallery has a curated library of Design Systems extracted from real-world brands. When you’re starting fresh and don’t have a clear visual direction yet, browsing the Public design systems tab is one of the fastest ways to find your footing. Find a Design System whose aesthetic resonates with your project, attach it to the chat, then describe what you want to build. Kombai will generate a design that captures the same look and feel — color temperature, typographic rhythm, and spacing density — without copying the brand’s content or layout. You can also copy it into My design systems to edit its tokens and make it your own. You can also open any Design System’s detail page and browse its tabs to study how the brand structures its visual identity. This is useful when building a custom Design System from scratch. If you’re looking for full-page designs to remix instead of just colors and typography, browse the Landing Pages tab of Inspirations instead.

​

Extract a Design System from sites

If you admire the look of a live website, you can use its visual language as the foundation for your own project. Paste the URL into the chat input and ask Kombai to extract a Design System from it, or import it from a URL on the Design System Gallery. Good sources to pull from:

• Your own favorite websites.
• Award-winning sites listed on Awwwards or SiteInspire.
• Sites whose tone matches your target audience.

​

Import your existing design system from Figma

You can directly bring an existing Design System from a Figma file into Kombai. Paste the Figma design URL in the chat input and ask Kombai to extract the Design System, or import it from Figma on the Design System Gallery. Kombai will then extract the individual design tokens from Figma and save them to your Design System. This is useful when:

• You have a Figma design for one of the pages of your new project.
• You find a public Figma community file that matches the look you want to use as a starting point.

​

Create a production-ready design system end to end

You can use Design Mode to build a complete design system, from primitive components (buttons, inputs) to compound components (navbars, pricing tables). First, finalize the Design System with the exact tokens for color, typography, spacing, and shadows. Then, ask Kombai to generate your component library from scratch using it, and once the designs are ready, ask Kombai to code them.

​

Existing projects

In existing codebases, Design Mode is generally used for additive and refinement work, such as creating new pages or components, refining existing ones, and exploring variations safely without touching production code.

​

Create new components and pages

When building out new features in an active codebase, Design Mode ensures your additions fit perfectly with your current visual identity. You can generate custom sections from scratch or combine your existing basic components into complex new ones.

​

Build new pages that look native to your project

Kombai reads your repo’s theme automatically, so every design it generates looks native to the project from the first pass. Describe the page or section you need in plain language, and Kombai will design it on the Canvas using your repo’s existing theme. For example, say you want to design a usage analytics page for your app. You can prompt:

“Design a usage analytics page. It should have a summary stats row at the top, a line chart for activity over time, and a table of recent events with filters.”

Kombai will pick up your repo’s colors, fonts, and spacing and generate the design on the Canvas. You can further refine the design through follow-up prompts, then click Code design to hand it off to the agent to generate the code.

​

Use visual references from the web

When you come across a design element you like on the web (such as a color palette, a hero layout, or a pricing card), you can pair it with a design idea you already have in mind. Attach it to the chat, click the Send to Agent dropdown, select Add to Agent, and prompt Kombai on how to use it. For example, say you spot a gradient card on a SaaS site while designing your pricing page. Attach the card to the chat input and prompt: “Use this card style for the pricing tiers, but apply my project’s color theme.” Kombai will adapt the reference card to your existing design language on the Canvas.

​

Build compound components from your existing primitives

If your repo already has basic components (such as buttons, cards, tables, and modals), you can ask Kombai to combine them into full-fledged compound components, like a filterable data table with pagination, a settings panel with grouped form inputs and a save action, or a dashboard stats card with an inline chart and overflow menu. Share your product roadmap with Kombai and ask it to anticipate the compound components you will need for upcoming features. It will design them using the basic components already in your repo. If you don’t have a roadmap ready, you can also ask Kombai to build the most common compound components that almost every project needs.

​

Refine and iterate on existing UI

Design Mode is also highly effective for iterating on existing UI. Use it to refresh a page that’s feeling stale, design missing states for a component, or try a completely different Design System, all without touching a line of production code.

​

Explore a new direction for existing UI

If you want to refresh the UI of a page or section, ask Kombai to regenerate it on the Canvas. If you already have a direction in mind like “more whitespace, softer colors, modern card layout”, describe it and Kombai will follow it. If not, just ask Kombai to regenerate and iterate through Variants using Design Settings until you land on a version you like. You can also reimagine existing components by experimenting with newer Design Systems. You can either manually play with a Design System to try different visual identities or extract one from sources you like, such as a Figma file, a website, or a pre-created design.

​

Design new component states

As your project matures, you will likely need special states of your components that the earlier version rarely covered, such as nested menus, skeleton loaders, or dropdowns with grouped options. Use Design Mode to design these variants on the Canvas, then attach them to the chat and ask Kombai to update the existing code.

​

Generate light and dark mode

If your app only supports light or dark mode, use Generate Versions to imagine how the other version would look before writing any code. Refine the details like contrast, hover states, and surface colors, then iterate until you land on a version you’re confident enough to build and merge into production.