Design Mode is currently in alpha. Please contact us at support@kombai.com to get access.
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.Extract Style Guides 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 Style Guide from it. Good sources to pull from:- Your own favorite websites.
- Award-winning sites listed on Awwwards or SiteInspire.
- Sites whose tone matches your target audience.
Use Style Guides from gallery
Kombai includes a gallery of curated Style Guides (like Neo Brutalist or Playful Flat) to help bootstrap your project. In Design Mode, after writing your prompt, click the palette icon in the chat input to select a Style Guide. You can also copy any Style Guide from the gallery to My Style Guides and edit the values to make it your own.Extract Themes from Figma
You can directly bring an existing Theme from a Figma file into Kombai. Paste the Figma URL in the chat input and ask Kombai to extract the Theme. Kombai will then extract the individual design tokens from Figma and save them to your Theme. 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.
Use the Suggest Themes skill
To have Kombai design a custom Theme based on your brand, audience, and aesthetic, run the Suggest Themes skill. It takes specific input from you, such as project type, target audience, color preferences, and the mood you’re going for (e.g., Professional & Corporate, Calm & Minimal, Creative & Energetic). Based on your responses, Kombai generates three distinct Themes. Once you have decided which one to pick, switch to Design Mode and tell Kombai which Theme to save.Build a full design system
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 Theme with the exact tokens for color, typography, spacing, and shadows. Then, ask Kombai to generate your component library from scratch using the Theme. Save every component you’re happy with as a Block, 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, pull inspiration from the Resource Library, or combine your existing basic components into complex new ones.Build custom pages and sections
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 the Resource Library
You can pair the Resource Library with a design idea you already have in mind. If you come across a design element you like (such as a color palette, a hero layout, or a pricing card), 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.Combine existing components
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 Theme, all without touching a line of production code.Reimagine 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 Style Guides. You can either manually play with Style Guides to try different visual identities or extract them 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 Kombai’s Design Mode to imagine how the other version would look before writing any code. Ask Kombai to design the missing variant on the Canvas, and refine the details like contrast, hover states, and surface colors. Iterate until you land on a version you’re confident enough to build and merge into production.Reuse Blocks across projects
If you’ve already saved a Block in another project, you can bring it over to inherit your current project’s style. If it’s not a Block yet, but there’s a section you’d like to reuse, convert it into a Block first. Then, find the underlying Canvas file under.kombai/canvas/ in your source project and copy it to the same folder in your current one. You can now freely use this Block in your current project.