Using Kombai to Generate and Code Frontend UI

Workflow Integration and Design Generation

Kombai functions as an AI agent embedded within an IDE, such as Cursor, allowing developers to generate UI designs and corresponding code directly within an existing project repository. Users initiate the process by selecting a project folder and opening the Kombai interface, which provides controls for creativity levels, design variations, and refinement passes. The tool allows users to import design inspiration from a built-in library, which acts as context for the model to align the output with a specific aesthetic, such as neo-brutalism or dark-mode UI.

Design Refinement and Style Systems

Once the AI generates initial design candidates, users can select a preferred version and open it in a browser-based editor. This interface includes a property inspector similar to Figma, enabling manual adjustments to elements like button borders, stroke weights, and typography. After finalizing the design, users can extract a comprehensive style guide from the canvas. This style guide captures colors, typography, spacing, and border radii, which the agent then uses as context for subsequent generation tasks, such as building out full landing pages or additional sections.

Code Export and Production

After the design is refined, the tool converts the canvas into production-grade frontend code. The generated code is injected directly into the project directory, typically appearing in the distribution folder. Because the design, code, and browser preview remain synchronized, developers can continue to iterate on the UI or modify the underlying markup and CSS within their IDE, maintaining consistency across the development stack.