Frontend development is now in a whole new phase where AI isn't just a helper, but an active collaborator. Before, you had to build everything from start to finish by yourself. You'll design, write the code, debug, and go through the entire process again. It was a loop of repeating the same steps and solving the same issues.
Despite AI coding assistants' best efforts, many have failed to address these issues. They either create code that's hard to maintain or stop at simple prototypes/demos. Kombai in Cursor stands out for its different AI approach. It's not a general AI tool that tries to do everything and ends up doing little well. Instead, it focuses only on frontend development, with a deep understanding of UI patterns, design systems, and components.
When you combine this focus with vibe coding, which is about creativity over repetition, you get a faster building process. The only thing you need is a description/prompt, and you'll get a production-ready code in your IDE in a few minutes. You'll stay in control, build scalable UIs without getting stuck in repetitive setup work.
In this article, you'll learn how vibe coding works and what makes Kombai's setup in Cursor different from other AI tools. By the end, you'll understand how this approach makes it faster and easier to build scalable UIs.
What is vibe coding?
Vibe coding is about letting your creativity lead rather than just following a set of rules. It's about telling an AI what you want to build, and it generates the code for you right inside your IDE (Cursor, VS Code). That way, you don't have to handle the usual setup or styling work yourself.
It's common to confuse vibe coding with just asking AI agents like Kombai to assist with coding tasks. I found myself confused about it, too, at first. Although both methods can do the task, there is a significant difference between them.
AI-assisted coding: You rely on AI tools to generate code or provide suggestions. Then, you would review and test the code before implementation.
The main aim of using the AI tool is to help you code faster*,* not to build the whole thing. You need to understand the code the AI suggests, which differs from Vibe Coding. You must check every line to ensure it's secure, correct, and well-suited to your project.
Vibe coding: You, the developer, are in control of the entire software creation process. You use your creative vision to direct the AI on what to build and how to refine the output. You control the "What" (the feature) and the "Why" (the style), while the AI controls the "How" it's built.
- Start the vision: Begin with a creative prompt for whatever you want to build. For example, this prompt can be, "I want you to create a user login form and a dashboard."
- AI executes: The AI then generates the initial functional code and component structure.
- Review and direct: Next, you can get creative to further improve the design/output. You can ask the AI to "Change the layout to have a sidebar on the left, and use a dark color on the background instead."
- Repeat until perfect: Keep going back and forth with the AI until its output matches the design you had in mind. Your main goal is the finished output, and you don't need to know how the code works.
This way of working fits frontend developers well. It removes the repetitive work of writing boilerplate code and styling from scratch. As a result, you can spend more time on creativity, design quality, and user experience of the final product.
Why scalability matters in UI design
Scalability in UI design is about how well your code adapts as your project grows. A scalable UI lets you add new features, handle more complex designs, and bring in new developers without starting over from scratch.
Many developers end up building fast prototypes that can't handle long-term growth. But in practical projects, the frontend's scalability is more important than speed. Without scalable UI patterns, you'll end up with disorganized code, duplicated components, and more.
Kombai alters this situation by prioritizing scalable user interfaces from the start. It goes beyond quick demo outputs. Using your design tokens (colors, spacing, typography), styles, and component libraries, it builds a clean, scalable structure for long-term projects.
Setting up Kombai in Cursor
Installing Kombai in Cursor takes only a few steps. After setup, it runs in your IDE and provides built-in AI support for frontend development tasks.
The first step in setting up the Kombai extension in your cursor IDE is to:
- Open the Cursor IDE on your laptop; if you haven't installed it already, click here.
- After downloading Cursor, go to the extensions marketplace (usually accessible via the sidebar). You can also click Cmd/Ctrl + Shift + X, depending on your device (Windows or Mac).
- Search for "Kombai". You can also visit the Kombai website to download the extension from there (choose the IDE of your choice).
- Click "Install" to download the Kombai extension.
- Restart Cursor when prompted.
Once you've installed Kombai in your Cursor IDE, it's time to log in or create a new account to authenticate it. Follow the steps below:
- Click the expand button in the sidebar (a chevron or arrow icon). Select the Kombai icon from the list to open the extension and begin authentication.
- Click "sign up" or "Sign in with Kombai" if you already have an account.
- Allow Cursor to access your Kombai account.
- Return to Cursor. You'll see the Kombai panel in your Cursor sidebar, ready to chat, preview, and generate UI components.
Connecting Kombai to a repository
Kombai is good at understanding what's happening in your IDE. It understands your project structure, design system, and existing components. Before you start writing any code, you connect it to whatever project you're working on.
- For new projects: First, create a new project folder and open it in Cursor. Kombai will use your first prompt to set up the basic structure and files.
- For old projects: Open the root folder of your current React or Next.js project in Cursor.
- Scanning project: Once you open the folder, Kombai will detect which framework you're using before it gets to work. It will check whether you're using Tailwind CSS, CSS Modules, or another component library. So, the code it creates will always match your file structure and compile well without any immediate issues. For example, if your repo uses Tailwind with a custom primary color, Kombai won't generate bg-blue-500; it will respect your theme.
Designing UIs with Kombai in Cursor
Let's start by creating a reusable button component that aligns with our design system. Building a Button component by hand takes longer than it seems. You have to define types, use forwardRef, style variations, and handle accessibility issues. On average, it takes around 15–20 minutes.
But if you're using Kombai for vibe coding, you can get it done in just 3 easy steps, and it'll only take about 2 to 3 minutes.
- Open your Cursor IDE.
- Go to Kombai.
- Type in your prompt in plain English:
“Create a Button component with primary, secondary, and outline variants. Include small, medium, and large sizes. Add hover and active states. Make it fully accessible with proper ARIA attributes. Use our Tailwind config for colors and spacing."
Kombai will then generate all the code right away:
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { forwardRef, type ButtonHTMLAttributes } from "react";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
{
variants: {
variant: {
primary:
"bg-primary text-primary-foreground shadow hover:bg-primary/90 active:bg-primary/80",
secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 active:bg-secondary/70",
outline:
"border-2 border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground active:bg-accent/80",
},
size: {
small: "h-8 px-3 text-sm [&_svg]:size-4",
medium: "h-10 px-4 py-2 [&_svg]:size-5",
large: "h-12 px-6 text-lg [&_svg]:size-6",
},
},
defaultVariants: {
variant: "primary",
size: "medium",
},
}
);
export interface ButtonProps
extends ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, type = "button", ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
type={type}
{...props}
/>
);
}
);
Button.displayName = "Button";
export { Button, buttonVariants };
The code above shows how well Kombai generates production-ready code. Instead of writing simple HTML, it generated advanced React code. It used the CVA library to handle different button sizes and styles, added accessibility support, and even used forwardRef so the button works well inside larger applications.
Example 2: Let's ask Kombai to convert a simple Figma landing page design into a working code.
A picture of the Figma design:
Step 1: Prepare the workspace. Opened my cursor IDE and installed the necessary Node.js and Next.js dependencies (it took a few minutes in the terminal).
Step 2: The single command. I connected my Figma design to Kombai using only the design's URL. Afterward, all I had to do was click the send button; Kombai didn't need any description of colors, sections, or fonts.
Step 3: Immediate code generation. Kombai analyzed the design and wrote the code for every button, text, and icon.
import Header from '@/components/Header';
import HeroSection from '@/components/HeroSection';
import SocialSidebar from '@/components/SocialSidebar';
import FloatingButton from '@/components/FloatingButton';
export default function Home() {
return (
<main className="relative">
<Header />
<HeroSection />
<SocialSidebar />
<FloatingButton />
</main>
);
}
Kombai didn't put everything into one large file. It split the code into smaller, reusable parts, the way an experienced engineer would.
Generated Kombai image:
The resulting page looked very much like the original Figma design. But it needs a few tweaks (which often occur after a human developer writes code as well). I need to ask Kombai to add some padding and margins, and it should be fine. This back-and-forth conversation with the AI until the page is perfect is what makes vibe coding so fast and effective.
Why Kombai beats prototyping tools for real projects
Kombai is an AI agent that helps frontend developers create production-ready user interfaces*.* It helps speed up the process of turning an idea into a feature that works as intended.
The following are the reasons why Kombai beats prototyping tools for real projects:
- It provides designs that look and function as you want, with features like responsiveness and accessibility.
- Kombai generates production-ready components with proper hierarchy, naming, and structure.
- It keeps your entire workflow inside the code editor. You prompt, review, and edit all in one place, which means a quicker workflow with less confusion.
- Respects existing design tokens, Tailwind classes, and component libraries.
- Kombai generates code that is clean, organized, and easy for developers to edit or maintain. You get production-ready code, avoiding the need to fix or rewrite the AI's structure.
Kombai vs. V0: Why developers choose Kombai for production work
V0 is an AI frontend developer from Vercel (the creators of Next.js). It's designed to generate React and Tailwind CSS components based on text prompts. V0 generates code on its own site, and then developers need to copy and paste it into their project files.
The main difference between VO and KOmbai is where the tools work. V0 works in isolation; it doesn't know about your project's rules, components, or style. When you copy V0's code into your project, you'll need to update imports and styles to match your project's style.
Kombai, on the other hand, works inside your IDE (VS Code, Cursor). It reads your whole project, understands your existing file names and styles, and knows which components you've already built. It is better at managing design systems. If you've a specific design system laid out in a file like Figma, Kombai can read and use that file directly. It'll make the code match your original design.
Also, Kombai lets you describe a change and generate the code in the correct file and folder, with proper organization. On the other hand, with V0, you receive the components but must handle the complex assembly process yourself.
Kombai is the way to go for professional teams that need good-quality code. Its ability to fit right into your project structure means you can count on it to deliver quality, consistency, and organization.
Best practices for scalable UI with Kombai
Before generating large amounts of UI with Kombai, establish a strong foundation. That way, you'll have a good starting point that's consistent and scalable from the start.
- Foundation: Provide Kombai with your design system details (colors, spacing, and typography). By doing this, you'll keep the output of your project consistent with its design.
- Components: Provide Kombai with your established component libraries (e.g., cards, buttons). It tells Kombai how to build features using your already-approved components.
- Preview: Use Kombai's live previews to check the generated code before accepting it. If the result needs improvement, tweak your directions for the AI right away.
- Share the workload: Let Kombai handle the basic structure, boilerplate code, and styling. You then take control of the complex logic and backend connections, such as APIs, that require your skill set.
These tips will help you speed up your frontend workflow without sacrificing quality. If you follow these guidelines, you'll end up with a user interface that looks great and production-ready code.
What’s next for vibe coding?
Vibe coding won't take over your job as a frontend developer; it'll give you more power to do your job. Rather than wasting time on mundane tasks, you'll use AI as an invaluable creative partner. You'll still plan how everything works and looks, but the AI will handle the setup and routine tasks, allowing you to move faster.
Vibe Coding's future lies in combining human creativity with AI speed. As AI agents like Kombai get better, the difference between coming up with an idea and actually making it happen will become way smaller. Your coding process will feel more like having a conversation than typing lines of code. The future of Vibe Coding is fast workflows, cleaner code, and more creative freedom.
Conclusion
This guide explains how vibe coding takes frontend development from theory to practice. It's a simple process where you describe your idea, check the code that's created, improve it if needed, and end up with production-ready code. Kombai makes all these possible via the Cursor IDE. It brings speed and creativity into your frontend workflow.
Aside from the speed improvements, vibe coding offers many benefits. In the past, it took hours of manual work to get your site up and running. Now it happens fast, with clean code, accessibility, and responsiveness built right in. Web developers can now focus on design, usability, and creating better user experiences. The time saved is just a bonus; the real value is in doing more creative and meaningful work.
Switching to vibe coding won't happen all at once, and that's understandable. You have to take your time to understand what works and create some routines to get up to speed. The goal isn't to ditch everything you already know and just rely on AI. It's all about using new tools to step up your game, while still keeping the practices that make your work great.
Top comments (0)