Kombai

Overview

Kombai is an AI design engineer that empowers developers, designers, and product teams to design and code production-ready frontends directly from within their IDE. Available as a native extension for VS Code, Cursor, and other popular editors such as Antigravity, Trae, and Kiro, Kombai merges design generation, repository-aware code synthesis, and visual editing into a single agentic workflow. It is explicitly engineered to avoid generic AI artifacts — the product is built around producing “standout, not slop” websites and product UIs, with a built-in sense of creative direction and a curated library of design references.

Kombai operates in two complementary modes. In Design mode, it creates tasteful, original compositions on an infinite canvas, drawing from a curated library of references to ensure memorable aesthetics rather than default AI patterns. In Code mode, it writes production-ready code directly into your existing codebase, automatically scanning and learning your tech stack, coding patterns, components, hooks, utilities, and design tokens. This repo-aware generation lets the output fit natively within your architecture, including the reuse of existing components via Context Graphs — which connect to npm packages and Storybooks. Kombai also ships with built-in documentation and best practices for over 400 frontend-specific technology stacks, automatically applying them to relevant coding tasks.

A standout capability is Figma import: Kombai parses complex design files natively, fixes common issues like messy grouping and invisible layers, and extracts icons and assets — no MCP configuration required. Once code is generated, Kombai provides a visual editor for the rendered UI, enabling further refinement and polished interaction. The platform also supports full design systems: you can import an existing system or build one from your code, Figma files, or any webpage, then apply it consistently at scale. Additional asset generation covers videos, images, and animations powered by models like Veo, Seedance, and Nano Banana, while preset-driven redesigns such as “soften colors” or “adjust density” let you reimagine entire interfaces or fine-tune specific elements.

With over 500,000 installs and availability on macOS, Windows, and Linux, Kombai is built for real-world frontend workflows. It offers a free tier with 300 monthly credits, plus Pro and Team plans that scale with usage and collaboration needs. All outputs are written directly into your codebase and can be managed via git just like any local files. Whether you are rebuilding a legacy UI, importing a Figma design into React or Tailwind, creating a design system, or generating rich animations, Kombai acts as an AI engineer that understands both design intent and code context — helping teams ship polished user interfaces faster and with greater consistency.

Core capabilities

Design Mode on Infinite Canvas

Generates tasteful, original compositions with built-in creative taste, avoiding generic AI design patterns.

Repository-Aware Code Mode

Writes production-ready code that fits your existing stack, coding patterns, and project architecture.

Native Figma Import

Parses complex Figma files, cleans up messy grouping and invisible layers, and extracts icons and assets without MCP.

Context Graphs

Reuses components, hooks, utilities, and design tokens from your npm packages and storybooks for consistent, maintainable output.

Stack-Aware Best Practices

Automatically applies built-in documentation and best practices for 400+ frontend libraries and tools.

Visual Editor for Rendered UI

Offers a visual editor to refine and polish the generated UI after code synthesis.

Design System Management

Import or build design systems from code, Figma files, or any webpage, then apply them consistently at scale.

Built-in Asset Generation

Creates videos, images, and animations using models like Veo, Seedance, and Nano Banana.

Redesign Presets and Variations

Reimagine full designs or tweak parts with presets such as “soften colors” or “adjust density,” or natural language instructions.

IDE Extension Availability

Works across VS Code, Cursor, Antigravity, Trae, Kiro, and any Open VSX-compatible IDE on macOS, Windows, and Linux.

Use cases

Rebuilding legacy dropdowns or UI components with modern aesthetics

Converting Figma designs into clean, production-ready React or Tailwind code

Creating a new design system from existing code, Figma files, or a webpage

Rapidly prototyping product UIs with on-canvas design ideation

Generating rich animations and visuals to elevate website presentation

Redesigning pages or screens with predefined style presets and variations

Sharing and collaborating on UI changes directly through git-managed codebases