Kombai: Unlocking Front-End Power. Beats Claude 4 and Gemini 2.5 Pro in FE tasks

--- type: transcript date: 2025-08-20 youtube_id: 3db1LuhX4XQ --- # Transcript: Kombai: Unlocking Front-End Power. Beats Claude 4 and Gemini 2.5 Pro in FE tasks Last week, I saw this viral post on X that caught my attention. What they claim is this new platform combine does really great at front-end development. You're going to be able to import Figma files. You're going to be able to reference the different frameworks that you want to leverage as well as the routers and all of the minutia that goes in with what you actually build on the front end of an application. And what's really interesting with this is if you've used one of these app builders before, at the core of them, they do leverage a model, generally speaking, something like Sonnet 4. And one of the issues with that is a lot of the applications and the outputs of these app builders is a lot of the time they look the same, right? They have linear gradients. The fonts are often quite thick. They might have emojis all over the place. Overall, they have the same sort of look or feel. What Combine aims to solve is the front-end portion of building out software. In this video, I'm going to focus on showing you what it looks like. And here you can see some of the benchmarks. It claims to be better than Gemini 2.5 Pro, Sonnet 4 with the Aenta capabilities and MCP. Just raw combined, you're going to be able to get an agent that's going to ideally perform better for real world applications. This isn't really a tool for just 0ero to one type of applications. This is really geared towards actually building within real code bases. So without further ado, let's dive in. To install Combine, this is going to be an extension that you're going to be able to use in VS Code, Cursor, or Windsurf. You're going to be able to just download this. And they do have a free tier to try all of this out if you are interested. Right off the bat, if you are interested, they do have a number of examples on the website. And what's interesting with the examples here is you're actually going to see the implementations across different types of UI libraries. Say for instance, instead of leveraging something like shad CNUI, which you can use by the way, but if you want to see what it looks like with emotion or CSS modules, you can see all of the example apps that they have here, and what the output actually looks like from combined. Now, one of the nice features of the platform is since it does have the ability to leverage Figma, but also you have the ability to specify what type of frameworks as well as what type of router and all of the component pieces of the front end. What's nice with this is you can take your Figma, pair it with Combi, and ultimately get a desirable output in terms of what you want to leverage or potentially what you have to leverage in your project. What's nice with Combi is instead of letting the LLM decide what you should use, you can be a little bit more opinionated and instruct the agent in terms of the different frameworks and preferences that you have for things like routing and different versions and libraries and all of that stuff. Once combin is installed, this is going to be what it looks like. On the right hand side here, we have this panel where it looks similar to something like the cursor agent feature. And within here, what you're going to be able to do is you can atmention things like Figma files if you have them. You can also appment mention folders or files if you do want to specify particular context. Now what I'm going to do is I'm going to show you how you can leverage this with a pre-existing Figma file. So the first thing that you're going to have to do is you are going to have to connect this to Figma. I'm going to open this up within my Figma account. I'm going to allow it access. Once I have access, what I'm going to do is I'm going to copy the link to the selection of this particular aspect of the Figma file, which is basically a SAS template. And what I'm going to do within here is I'm going to put in our Figma URL. I'm going to confirm that. Now, within here, what we're going to be able to do is we can determine the text stack. Say for instance, if we want to leverage Nex.js, we can do that. Alternatively, leverage something like tan stack query, we can include that. Additionally, within here, we can specify our routing methods for Nex.js, we can specify the app router. If you were just leveraging React, you could specify if you want to leverage something like Tanstack router or React router. That will also be included within here. Now within here we have the ability to select our UI component library. If we want to leverage material UI we can do that. Alternatively we can leverage shadui or a whole host of other options as well. In this I'm going to specify to leverage tailwind. Then in terms of the styling method you can select between emotion CSS modules custom or none. In this case I'm going to disable it since we're going to be leveraging shad cien. And then for this we can also even set things like the icons. So if we want to leverage hero icons or font awesome or what have you, we can select that just like that. Now, additionally, we can set our global instructions or advanced configurations, but for now, I'm just going to leave that as it is. As soon as I submit that, what we'll see is we're passing in the context of our Figma file. It's going to grab all the contents of what it needs to start to generate that, and it will begin to work through the process. The first thing that you'll see that it will do is we'll grab the Figma file. Once it has the context of the Figma file, it will begin to process it, and then it will start its planning phase. Within here, what we'll see is we have a comprehensive planning phase in terms of all the different aspects that it's going to build out for us. We have the plans for the navigation, the hero section, the project management section, work together, so on and so forth. Now, at any point if you do want to edit any of the plans, you can go ahead and do that and then save it out. And what this step encourages you to do is to edit anything that you see. For instance, if I want to change this pricing plan, maybe we're like, hey, this should be $59.99 instead of 49. I can go ahead and make any tweaks like that. And then additionally within here is we have the particular features. So we're going to have the responsive navigation. We're going to have a compelling call to action. We're going to have a feature showcase, pricing comparison, social proof, so on and so forth. And within here, I have all of these different colors. And if I go over to our style guide, we'll notice that it is very similar to the colors that are referenced from the styles of the design, which is something I think a lot of people miss. things like typography and animations. These two alone along with the colors as well as appearance. This is going to be what differentiates your application from what looks to be clearly an AI generated application is really being mindful of the design aspects. I'm going to go ahead and update our plan. Then as soon as I update our plan, we'll see it will begin to process all of this for us. I'll go and I'll update that. And then finally, I'll click to approve the plan and start the coding process. And now at this point, you can really just leave the agent to its own devices and we can circle back to it once it's done and we can review what it has generated for us. After a couple minutes, we see that it's generated a number of different files for us based on the context of that Figma that we had passed in. The neat thing with combi is what we're going to be able to do is we can run this within a sandbox. And one of the nice aspects of combine is you're going to be able to iterate on it within its own isolated environment before you actually put it within your own codebase. Now, if I put it side by side with the Figma, we see a ton of aspects laid out here. Within here, we see project management. We have the correct colors of the buttons. We also have the correct colors for the background. There are some subtle things like you'll notice for this vector within the background that we'll just have to swap out for the correct color of this sort of white or gray look that we have. We have a very close representation of what was designed within the design file. Now in the choose your plan section. So within here we see there are some differences like in terms of the background and stuff like that. But I see that we have the icons that are correct as well as the copy that's correct. We have the correct fonts across the board. And now one thing to consider with large language models in general is you're not going to get anything that can generate something 100%. But anything that can get you closer to what you would have otherwise had to do manually. For instance, actually converting this Figma to this functional front end like you see on the left hand side here. Even though it didn't quite get everything, it would have taken an awful lot of time. Whereas this took all of about 2 minutes to get us to a pretty good starting point to continue on building out our application. And within here, we even have some really good representations of what it took from our Figma design. If you just look at this carousel here, we can see that it pretty much got almost across the board all of the different aspects of what it looks like here with just some subtle tweaks like moving the spacing around for what looks like an HR element. And in terms of some of the other aspects, if we look at the footer here, again, it is a much closer representation. Whereas if I would have taken a screenshot of say this section and passed it into something like claude or one of the GPT models or O series of models, it would have not been able to generate something this close to what combine has generated for us. Now I want to show you a quick demonstration of combine within a pre-existing application. Here I have split easy where it's an application where we can split different expenses between different groups that we have. There's recurring bills. We can set and create new groups within here. If I just say hello world for instance, all of this is a functional application. So you can imagine that this is something that you are working on whether it's at work or a project that you have personally of something that you want to leverage. Just to quickly demonstrate this, I'm going to say I want to create a beautiful hero area that has the title for each respective tab. And the cool thing with this is what we can do is we can go and we can scan the pre-existing repository. And where this is helpful is it will be able to determine the style as well as structure for things like dependencies and things that you're already using. It will recognize if you're using Nex.js. It will recognize the type of router that you're using, the type of styling library. It's going to be able to automatically determine all of those different aspects. And then here we go. Combine has dynamically determined what the text stack is. I can go ahead and I can save this out and I can click to proceed. Okay. So now what we see it doing is it's going through and it's reading through the structure of the different components that are pre-existing. We see that it's checking for any heroike components. And now that it's determined that we don't already have a hero area component, what it's going to do for us is it's going to create that hero component for us and then it's going to update it within the proper and respective place within our application. Now that it's gone through and done that, I'm going to go ahead and run this within our sandbox. All right. And here we go. Here is what it's generated for us. Here is an example of adding that hero area. And within here, what we see is it's matching the containers. We do see it's matching the overall look and feel. We can see it's leveraging the proper font sizes that we have within our application. Now, a really neat thing with combine that I do want to emphasize is that this is in a sandbox environment. So, it's different than some of these other tools that are out there where you're applying it directly within the codebase that you're working on. And one of the common criticisms of that is it's easy to mess up a lot of pre-existing code. Whereas what it will do is for these types of generations is it will actually put it within a sandbox and not until you review it is it actually touching the pieces of code that you're intending. And then from here what you can do is if you click view and save, what you're going to be able to do is see all of the different pieces of your codebase that it's editing as well as the new components that it's generated for you. You can go ahead and deselect different things that you don't want to add within your codebase. And the nice thing with this is before the agent actually touches your live codebase is you can actually see the rendering of those different components and those front-end features before you actually have them applied to your codebase. Otherwise, that's pretty much it for this video. I encourage you to check out Combi. Give it a shot. You will be able to try this out completely for free. And honestly, just kudos to the team at Combi for focusing on a particular aspect of development. Actually being focused on front-end development and being able to reliably take the context of a Figma file, have the accurate representation within the design library that you're using, the particular text stack, as well as actually having the functional components on the front end. It is definitely something that is very promising. And not to mention, as the LLMs under the hood that power combined get more powerful, this will only get better over time. Otherwise, if you found this video useful, please comment, share, and subscribe. Otherwise, until the next