Kombai is an AI agent that takes a Figma design link, text, or an image and generates responsive frontend code built on React/Next.js and Tailwind CSS. It goes beyond a simple “design-to-code” converter: design generation, code generation, in-browser visual editing, and autonomous testing of user flows are all brought together in a single workspace. The company positions it as an all-in-one agent for building world-class frontends, and it has learned human-tested best practices for more than 400 frontend libraries. It is available both as a desktop app (Windows / macOS / Linux) and as an IDE extension.
Key Features
- High-fidelity code from Figma designs: Hand it a Figma link and it reads the layout, spacing, and typography, then converts them into structured React/Next.js + Tailwind CSS code. Text and image inputs are supported as starting points too
- Code generation across 400+ libraries: It scans your existing codebase and reuses the components, hooks, utilities, and design tokens already in use. Content from npm packages and Storybooks can also be pulled in as context
- Design generation itself: Drawing on curated references, it proposes several layout directions, so teams without a designer can still start from a solid draft
- In-browser visual editor: Click the rendered UI to edit text, styles, and layout on the spot; the changes sync back into the code
- Automated testing and Git integration: It tests user flows autonomously and versions the generated output with Git. Autonomous terminal commands are also supported (Pro plan and above)
- External connections via MCP: Through the Model Context Protocol (MCP) it connects to external systems and data sources, so it can be combined with tools for issue tracking, browser automation, and more
Pricing
| Plan | Price | Credits | Highlights |
|---|---|---|---|
| Free | $0 | 300/month (150 on signup + 50 daily) | Infinite canvas, design inspirations, HTML/image exports, community support |
| Pro | $20/month (20% off with annual billing) | 2,000–110,000/month | Everything in Free, plus code design, Git versioning, autonomous terminal commands, SOC2 compliance, no AI training on your data, email support |
| Team | $40/user/month (up to 20 seats) | 2,000–110,000/month (shared pool) | Everything in Pro, plus indexed external packages, shared rules and commands, unified billing, team usage analytics |
| Enterprise | Contact sales | Custom allowance | Everything in Team, plus a custom context engine, dedicated support, onboarding services, custom SLAs |
Pricing reflects information as of August 2026. Check the official site for the latest details.
Pros & Cons
✅ Pros
- Handing over a Figma design significantly compresses the initial implementation effort
- Because generation accounts for the conventions and components of your existing codebase, the output does not feel out of place
- Design generation, code generation, visual editing, and testing live in one place, so there is no tool-switching
- Free-plan credits are topped up daily, which keeps the barrier to trying it low
- Both a desktop app and an IDE extension are available, making it easier to fit into an existing workflow
⚠️ Cons
- The credit system makes consumption hard to predict for large screens or work with many revision cycles
- Its strengths are concentrated in the frontend (React/Next.js + Tailwind CSS), so it is not suited to building an entire stack including the backend
- Generated code should not go straight to production; review and testing remain prerequisites
- The Free plan restricts key capabilities such as autonomous terminal commands
- Japanese-language documentation and resources are scarce, so English-based use is assumed
Comparison with Similar Services
| Criteria | Kombai | v0 (Vercel) | Lovable | Builder.io Visual Copilot |
|---|---|---|---|---|
| Main input | Figma link / text / image | Text / image | Text | Figma designs |
| Main output | React/Next.js + Tailwind CSS | React/Next.js + Tailwind CSS | Full-stack web app | Components for various frameworks |
| Existing codebase integration | Scans and reuses conventions and parts | Limited | Self-contained per project | Maps to your design system |
| Visual editing | In-browser editor | Preview-oriented | Preview-oriented | Figma/visual editing at the core |
| Delivery | Desktop app / IDE extension | Web service | Web service | Figma plugin / web |
Who Is It For
- Frontend developers who want to cut the implementation effort for designs built in Figma
- Teams that experience frequent rework in the designer-to-engineer handoff
- Developers adding screens to an existing React/Next.js project while keeping its conventions intact
- Solo developers with no designer on hand who must produce draft UI themselves
- Teams that want to fold AI-generated UI implementation into their workflow in a reviewable form
Summary
Kombai is an AI agent that generates frontend code from Figma designs and text, and it differentiates itself through output that respects an existing codebase’s conventions plus in-browser visual editing and automated testing. Since Free-plan credits refill daily, the sensible first step is to hand it a single screen from a design you already have and judge the generation quality. For serious use, treat it as a way to accelerate the early stages of implementation ─ with the assumption that the output still goes through your usual review and testing rather than being adopted as-is.