Building Frontend Interfaces with Kombai AI

Visual Design and Prototyping

Kombai functions as an IDE extension that introduces an infinite canvas for frontend development, allowing users to generate UI variations from natural language prompts. Users can configure a design system by defining primary colors, Google fonts, spacing, and border radii. The tool supports high-creativity generation modes and allows for the integration of external design references, such as screenshots or existing UI patterns, to steer the creative output. Once a design is generated, users can perform visual edits directly on the canvas, including swapping static images for AI-generated video backgrounds and adjusting layout properties like font size and spacing.

Code Generation and Iterative Refinement

After finalizing a design on the canvas, the tool converts the visual output into production-ready code using a specified stack, such as shadcn/ui. The workflow includes a native browser integration that allows for live manipulation of the deployed site. Users can use a snipping tool to capture specific UI components from the live site and provide them as visual context to the agent, enabling real-time redesigns or style matching between different sections. The agent also supports an "Ask" mode, where users can upload screenshots of external websites to guide the implementation of new sections, such as pricing tables, which are then automatically scaffolded and integrated into the existing codebase.