Kimi K3 vs Fable 5: I Built the Same Website Twice

[00:00:00]Hey everyone. Now, in today's video, we're going to be covering the Kimmy K3 model. And this Kimmy K3 is a 2.8 trillion parameter model, which is pretty insane because if you scroll down to this graph, it is pretty much like the only open-source model that competes with these more expensive models like Fable 5 or GPT 5.6 Soul. And if you go on Twitter, you and you search for Kimmy K3, you get all of these crazy examples of what different people are building.

[00:00:26]So, for example, this is someone building an Animal Crossing style game.

[00:00:30]It generated a fully playable experience with cozy aesthetics, interactions, and gameplay loop in a single shot. Someone also generated Red Dead Redemption 2 with a fully playable world. And again, this is all using Kimmy K3, which is completely open source. And not only do we get examples with gaming, we also get examples with generating videos like this. This is GPT 5.6 Soul on the left and Kimmy K3 on the right. And like I said, if you go on Twitter and you search for Kimik3, there are a lot of tweets where people are building games, people are building more of these like 3JS types of projects and comparing uh the model with Fable 5, for example. But in today's video, what I want to do is actually want to test this out. I want to start off with a simple prompt and then build something a little bit more advanced with like scroll triggers or something like that. And then by the end of this video, I'll also show you how to visually edit your designs that you built or that you create with Kimmy K3.

[00:01:25]So without further ado, let's go ahead and dive into it. But guys, if you are into these types of workflows, if you want to research with me, if you want to co-work with me, I do have a free community you can join down below. I go live every single day and you can feel free to join me. We listen to some music, we test out different workflows.

[00:01:44]So yeah, link is down in the description below. Now, in order to start, you want to go to kimmy.com. And over here, you can start chatting with the different Kimmy models. And once you're here, what you want to do is you want to click on login, and you want to sign up for an account if you haven't signed up already or log in. And when it comes to the plans, I'm actually currently on this moderat plan. It's good enough just to kind of test out this new model and give it a few things to build. And once you have that, what you want to do next is you want to go to open code and you want to download this app to your desktop because you can theoretically work here with, you know, the kim.com website. But I would prefer to use open code to actually have all of my uh files stored locally in my computer. So whatever I'm building, whether it be a website or anything, it's all stored locally in my computer. Then what you want to do is you want to go ahead and get an API key from here from Kimmy. Now, in order to use Kimmy K3 inside of Open Code, you do need to get an API key. So, what we're going to do is we're going to go to console over here in kimmy do kimmy.com/code.

[00:02:46]And over here, we can create an API key.

[00:02:48]We can give it a name. I'm going to call it like YT for YouTube. Click on create.

[00:02:52]We're going to copy this key. And then in open code, what you want to do is you want to go up here to the top left, click on home. Then you want to click on settings. Then go down here to providers. And you want to scroll down to where it says show more providers.

[00:03:06]You want to then search for Kimmy, right? Click on Kimmy for coding and paste in your API key. Then you want to hit continue. And now it is connected, right? So, and then you can go back over here and automatically it selects Kimmy K3 and you also have the other Kimmy models if if you need it, but we can just choose Kimmy K3. And then before we start building something, we can choose where we want to store this project. I'm just going to click on add project and I'm going to select this specific folder. And in my case, I'm going to use it for something personal. I'm actually going to host a workshop here in this venue. And um this is basically the link of where we can find it, when when is it going to be and so on and so forth. And I would like for Kimmy to look at this page and create like a little form for people to kind of sign up and and register for a spot to be at this event.

[00:03:58]And I would like for the branding of this to match this website, right, with the yellow and with the fonts and with the buttons and so on. So I can get this URL and then I can write a simple prompt like this. Build me a simple form page that shows me a multi-step form with with an image gallery to get people to sign up for hackathon. In this place, I'm going to say let's use a react library and let's enhance the the design and use the branding. From here I basically gave it the website and so we can submit this using open code. Now, in the same time, I'm going to go to Claude Code, and I'm going to run that exact same prompt over here. And instead of Kimmy K3, we're going to be using Fable 5 because that's part of Claude. And obviously, since we're using Claude Code, we're going to be choosing Fable 5. And we're going to hit submit. And for starters, this is what Kimmy K3 gives us. We have like our our form over here, multi-steps. We have these um three stock images that honestly have nothing to do with the venue. We have this little eyebrow component on the top left. Hack knight West Palm Beach. I wonder why night is highlighted. In terms of the layout, it's pretty clean.

[00:05:01]And we can go ahead and test these different things out. So, I'm just going to select a different role experience.

[00:05:07]Click on continue. So, as you can see, I hover over this button. It gives me like a black color. And if I go to venturex.com, which is at the website of that location, we also get that black hover. But the button style is is completely different. It's more rounded.

[00:05:22]the one that Kim K3 gives us. You know, once we hover, the text turns yellow in the original site. The text turns white.

[00:05:28]But we can continue filling out this little form. And then once we click on reserve my seat, we get this nice little verification um note over here. And now this is the result that cloud code gives us. Right? So we have our gallery. The first thing that I notice is that we can select all of these different images and they are basically images from the actual website. We have the logo up here in the top. We have also the buttons which are pretty much identical to the actual website that I referenced. And I can go through this whole process. We have four different steps with four different types of inputs. Interesting is also there's like this logistic steps with that says swag, snacks, and the fine print. So we can select the t-shirt size, dietary needs, creative steps that Fable gives us that I even that I didn't even think about before. So we can continue to to the last one. We have all of these different things that we can confirm. We can click on confirm my spot. Boom. You're in. And overall, like this, just from this one prompt, the design looks much nicer. It looks more correct. Um, when Fable 5 builds it.

[00:06:33]Now, one thing that you can do to improve your design with Kimmy K3 is that you can open up Open Code on the left and then you can open up a browser on the right like Google Chrome for example, and search for magicpath.ai.

[00:06:47]And you want to then create a new project. And once you do that, you can click on connect agent. We can go to documentation and copy this install skill. And then we can just literally just paste this in here. And then you can write something like hey, do you see the open project that I have? And it says yes, project 15. And I can then go ahead and say add my design one to one to our magic path canvas. And that's exactly what we get. We get our design here one to one basically with all of the different steps, right? Everything functioning. This is actual code here on the canvas. It's like literally open code or you can do this with cursor, codeex, cloud code. You give these different coding platforms their own visual canvas. So instead of having to go through all of these pages and run all of these projects on your local host, you have them all here. So with that being said, I can actually go to the original site that I wanted to basically get um that that design style from and I can choose the magic path chrome extension which is called web capture html to react with magic path.

[00:07:48]And then I can literally just select a section that you know I would want to bring over to magic path. Like for example, we can select this card over here or the just the bottom version the bottom part of this card. paste this underneath this uh form. I can go to another page like for example this one and again copy this hero section and then go back into magic path and paste that in here. We already have this one.

[00:08:15]And what I can do since I already have this one here, I can get this. I can hit command D to copy it. And then I can bring this over here. I can select these two. I can then open this left panel and I can say give hackathon night signup contact form the exact button style and fonts from education article which is this one. Right? So we can go ahead and you can actually use a really good model like 5.6 soul and submit this. And then once that's done what I can do is I can click on this little globe icon to preview the design. And now when I go down to the button I can hover over it and beautiful. It's just like what we have in the original site. And what's also great here is that you can select this and then you can go up here to the top light top left and click on visual edits here. This is where you can visually edit different things. So I can for example click on this uh H1 text. I can adjust the font width to something like regular adjust the font size. I can also select images and kind of move them in different places. So like maybe put this one over here. I can also select different divs and kind of move them around in different places if we wanted to. And then once you're done editing these different things, what we can do is we can click on done and then we can select this component and we can say replace the code of the form site you made earlier with the selected magic path component. Then run on local host.

[00:09:37]All right. And now once that's done, we can check it out. We have all of our different edits that we made inside of that visual editor in Magic Path. And now, as you can see, we have the correct button, which I'm very happy about. But now, let's try to do something else.

[00:09:49]Let's try to do something more more fun, more interesting. you know, we see all of this hype on X of people building games and people building things with 3.js. So, let's do that. I drew out these different frames that kind of represent um different scroll triggers through uh while you scroll down on a website. And so, we have, for example, the globe and then you can scroll down.

[00:10:10]The globe kind of rotates a little bit more. It, you know, scales in size and then it zooms into Las Vegas. Then we have a title text. We have like you know some something over here that can represent something maybe uh like the time zone and the temperature something like that. Here we have Florida, Miami.

[00:10:30]Same thing. Then it zooms out, goes to another part of the world. We have Italy and we have Tunisia over here. Um shout outs to the people in my community. You know who I'm talking about. And then when you scroll down we have a dark title text. I'm thinking like maybe stars at the end. So this is quite a complicated prompt to write from scratch. And now I don't know about you, but I'm I'm too lazy to do that. So what I do is I use this tool called Hey Clickie. You can definitely use it for free just for this specific use case.

[00:11:01]They have a very generous free plan and they have an amazing onboarding experience. Like if you guys try it out, please let me know what you think in the comments below. But you can download this. And once you download it, you're going to see this little like blue cursor next to my cursor as you can see over here. And then I'm going to hit control and option at the same time. And right now I'm talking to Clickie. Hello Clickie. So hey Clickie, I need you to help me with a prompt. And by the end of this message or this memo that I'm giving you right now, I'd like you to add that prompt to my clipboard so I can copy and past so I can paste it into uh cloud code. Right? So basically what we see in front of in front of us right now is seven frames for a website. Each frame represents a different scroll trigger. So if we zoom in over here, we see frame one which is the globe and we have uh a title text at the bottom. We have the globe. I want there to be like stars in the background like it looks like outer space. And over here we can I don't know you can think about what we can put on the top left and top right. I just added that cuz it looked nice, like a nice layout. Then the user would scroll down, the globe would basically scale, right? It would get larger and also rotate at the same time. And then um we go to the next scene, which is over here on the right. Um the next scroll trigger would basically zoom the user to Las Vegas, right? We would see Las Vegas. we'd see, you know, the the title text that represents this Las Vegas marker. And then maybe like the temperature of Las Vegas would be interesting. We want to then do the same thing over here with Miami. After Las Vegas, it scrolls to Miami. Then it kind of scrolls out um to the world again.

[00:12:45]And then and then we get Tunisia over here. That would be the next destination. And then the last frame, the last frame would be a title text that um basically we just get stars in the background and a title text to kind of end the site.

[00:13:00]>> I'll put together a clean prompt and get it ready for your clipboard. So now it's going to prepare that prompt. I built out the full seven frame prompt from your storyboard. Starfield space background, spinning globe with title text at the bottom and local time plus time zone in the top corners. Scroll triggered scale and rotation. Then camera flights into Las Vegas. Miami, a pullback to the globe, Tunis, each with title and temperature overlays, and a pitch black starfield outro with closing title. It's on your clipboard ready to paste into cloud code with command V.

[00:13:32]>> Awesome. And when I paste it down over here, you can kind of see the the whole structure of the prompt. And so it gives like a general summary of what needs to be built with the text stack, a line that describes the overall look. Then we have the seven different frames. And then we have some little details. All camera movement moves are scrubbed to scroll. We get the final details at the end. And so what I could do now is I can bring this into open code to use with Kimmy K3 and also into cloud code to use with Fable 5. And so on the left we have Kimmy K3. On the right we have Claude and Fable 5. So I'm just going to go ahead and scroll with Kimmy K3. This is how it looks like. So like a nice comparison between the two hero sections. Then I'm going to scroll down over here. We zoom into Las Vegas. It doesn't really zoom into the city of Las Vegas, but kind of like hovering over it. Then we can scroll down. It zooms out again. And then we have this like awkward zoom in to Miami. Then we zoom out to the globe like we told it. And then we have another awkward zoom into Tunis. And then at the end we have three cities, one sky. And we have this like nice little 3D star zoom zoom out zoom in effect. And now let's try with the website that Fable 5 built us. So we can just scroll down around the world. One globe, three cities. Um we scroll into Las Vegas. It scrolls more into Las Vegas than the other one. We can scroll down and it scrolls to Miami. We have no awkward like uh you know rotation. It's like a nice clean bounce. Then we can then it scrolls out and then we scroll into Tunis and then it scrolls out again and boom, we have our ending. So let me know what you guys think in the comments below.

[00:15:22]Which one is your favorite? And let me know what you guys are building with Kimmy K3 if you've tested it out already. If you're building something interesting, please, you know, feel free to join our community and feel free to share it. And guys, like always, thank you all so much for watching. Hope to see you next time. Goodbye.