Enjoying this issue?
Get tomorrow's AI & engineering digest in your inbox — hand-picked, summarized, and always spam-free.
TLDR
Kimi K3 is the current top AI model for front-end design, capable of building stunning, interactive websites with 3D animations and video in under 20 minutes. By combining Kimi K3 with tools like Higsfield for media generation, Firecrawl for brand extraction, and Vercel for hosting, users can create professional, mobile-optimized websites that rival those costing thousands of dollars. The key is using a structured skill/prompt system to guide the model and avoid common mistakes.
Key points
- Kimi K3 is ranked number one for front-end design, outperforming models like Fable 5 and Opus 5, and costs about 30% of Fable 5.
- Building a beautiful website requires three components: an intelligent AI model (Kimi K3), a media generation tool (Higsfield), and a hosting platform (Vercel).
- The video demonstrates a three-level approach: Level 1 builds a desktop site, Level 2 optimizes for mobile, and Level 3 personalizes the site using a brand's existing identity.
- Using a pre-built skill (provided free) ensures consistent, high-quality results and avoids costly trial-and-error mistakes.
- Higsfield CLI integration allows Kimi K3 to generate custom images and videos directly within the build process.
- Firecrawl is recommended for extracting brand identity (logo, colors, typography) from existing websites to feed into the AI.
- The Agentic Operating System (Hermes agent) enables seamless switching between models and provides full visibility into token usage and costs.
- Mobile optimization is critical because most users browse on mobile; the skill can dynamically adapt the design for different breakpoints.
Tools mentioned
Techniques
- Using a structured skill/prompt system to guide AI model behavior
- Integrating media generation CLI (Higsfield) into the AI workflow
- Extracting brand identity via Firecrawl for personalized design
- Building responsive websites with separate desktop and mobile versions
- Leveraging an agentic operating system to manage multiple AI models and terminals
Stop scrolling. Start reading smarter.
Receive the day's most important AI & engineering updates in one concise email. No spam.
Transcript (captions)
Kimmy K3 builds beautiful, showstopping websites, but 97% of them look terrible. And it's not your fault. You just have to give it the correct prompt. And in this video, I'm going to show you how to build beautiful websites, like the top 3% using this new system, how to make them look gorgeous every time, and the costly mistakes that you must avoid. And I'll also include the entire system completely for free so you can download and follow along with everything that I'm doing.
And this works even if you're a complete beginner. [music] So, if you haven't already, grab that beautiful coffin and let's dive straight in. You are going to learn how to build beautiful websites that look like this that absolutely gorgeous. And I'm going to show you things that you have never seen on YouTube before. Systems that absolutely crush it as somebody who's gone ahead and sold websites for thousands and thousands of dollars.
So, let's talk about Kim K3. It is the new number one. The king changed more often than the Game of Thrones in this AI space. But right now, Kimmy K3 is the best model. I'm also going to show you how you can use that so so easily.
You need to understand this because I'm going to show you this across three levels that you must understand. Each level is more important than the last. And by level three, you'll have something that is spectacular that you won't have seen before. So, it beats Fable 5 at the front end. That isn't just a test that we've done.
It's actually codified into the front-end code arena where people blind test all these models. TLDDR, it is the best design basically model on the planet right now. But what makes it amazing is the fact that it is so much cheaper. It is literally around 30% the price of Faber 5, which from my point of view is great news. So, we're going to go ahead and do this across three levels of difficulty.
Level one is the gorgeous website. effectively. We're going to do one story, one scroll, and we're going to build a beautiful showstoppping uh video to do that. Now, first thing to do is go ahead and grab the new and improved system, the new skill. I'm going to put a link down below.
So, all you're going to do is come down and literally download this. Again, it's 100% for free just so you can follow along and do everything I'm doing here. Download. And by the way, this took me so many hours and so many dollars to get this right. You can just like use it and and save from all the mistakes that I made.
Then, what we need to do is give Kimmy K3 this skill. Now, ordinarily inside cloud code, we would come down, we'd upload it, and we'd be talking to Fable 5 or, you know, Opus 5, but we're going to be using Kimmy slightly differently. Now, there are two ways, big ways that you could do it if you're not on their website. Number one is you can get Claude to open it up in a terminal. To do that, it's pretty straightforward.
You're going to come down to this skill, which I'll put down below. You're going to copy all of this, come straight over to Club Code, and say, "Hey there, follow this skill and open up Kimmy K3 in a terminal." Okay? going to come down, paste this in, and it will do exactly that. The only thing that you need to do is grab a key from openroot.com that lets you access every model. What I'm going to be doing basically for this video is I'm going to be using the Claude Code Aentic operating system.
The very cool thing about the Agentic operating system here is the fact that I can actually, if I want to chat with any model I like. So, I'm going to click on this here. So, this is my Hermes agent and this one right here lets me pick any model. So, this is Fable 5. I want to go ahead and have a conversation with Kimmy K3, which is awesome.
I'm gonna set the effort level to extra high. And then I'm gonna say, "Hey there, which model is this?" Okay. And basically, we can see who we're talking to. So, hey there, which model is this? Hey, I'm Kim K3 Moonshots AI model running the open router.
And this is running in the claude code harness means we get all the benefits of claw code. I can do slash commands like compact and everything's there. All of my skulls are there. I can just select any model I want to. It is so freaking epic.
It's unbelievable. Now, before we can build a beautiful website that does lots of fantastic things like this, where we get these super immersive, beautiful stories, what we have to do is understand what actually goes into making a website like this. Well, you only need three things. We need an AI model to build it. Something super intelligent.
That could be Fable 5. That could be Kimmy 3. For us, it's Kimmy 3 cuz it's amazing. We want a place to grab all of the beautiful imagery and videos and all this sort of stuff. And then we need a place to actually host it.
So you're also going to learn exactly how to host this, get it published online so that others can come to your website and see it. We're very much at step one. So we've got Kimmy, we've given it a prompt. What we need to do next is actually go ahead and connect to Higsfield. Higsfield is this incredible website that lets you build any kind of images and videos and it has access essentially to all these different models.
Seance, VO, Cling 3.0, Nana Banana, you name it. Now all you're going to do is come over to this website. So, all you're going to do is click the link down below and you're going to see this link for the CLI. Dead straightforward. We've got Claude code.
All you're literally going to do, guys, is come down here and you're going to take a screenshot or you can just copy this and head back over to Claude. You can also do this within the Aente operating system. You literally paste that in and say, "Hey there, I would like to connect to the Higsfield CLI. Follow these instructions and sign me in." And what this will do is open up a new browser. And then you just sign in.
So, as you can see, I pasted it in, and then all it's done is open up this new thing. I say, "Hey, I allow." And once you have an account with that, I can now create any image, any video, and be able to build these beautiful showstoppping websites, which are absolutely fantastic. And now that Kimmy K3 has access to that, now that Claude has access to this via the CLI, we can effectively build these whenever we want to by chatting to Kimmy or Claude. So, the next thing that we want to do is basically talk to it and tell it to read the scum. And so, let's open up a new window.
For argument sake, I'm going to click on this plus uh and we can have a quick look at this. Here we go. And we got Kim K3. So, I might come down here. We'll set it to extra high, which is awesome, and say, "Hey there, I would like to build a website.
Please check out the skill here and follow the instructions." And all you're going to do is attach the skill, or you could even say, "It's the last thing that I downloaded on my computer." Okay? And then send that one straight off. And then it'll basically come back and ask you some questions. So, it's got a pre-flight status. It's got the Higsville CLI if we're using Higfield CODC CLI, which is we're going to use basically in this skill to crossverify.
So, we're going to bring in a secondary model. And again, it could just be another Kim K3. You don't have to worry about that if you have chat GPT. It will actually tag it in to make make the website even better. And we're also logged in to versel, which I'll touch on shortly of where we host the website.
Then it's going to ask a couple of questions. So we're going to come down and say yes for card one, we're going to want the media engine from Hicksfield. So we don't want it to be code only. We want to have beautiful video graphics. Let's bring in GBT 5.6 as a judge.
Again, if you don't have that, don't worry about it. It's just going to improve it. And if you don't, you can just use cold critics or anything else. And of course, I would love to know. Now, in terms of the idea, I would love to do something with honey.
Wouldn't it be great to have bees and show a real life honeycomb and maybe show that journey from the the wild kind of where the honey comes from all the way down to a product that you actually get. I don't have any assets. So, please do use your imagination and just make it as epic as you possibly can. All right. Going to come down and then we're going to send that one off, which is awesome.
And obviously anytime you can actually see down here guys um how many tokens you're using the context window which is really helpful auto compacts at 891,000 tokens and what the cost of the conversation is with the model. And by the way but all of this sounds like Spanish. I'm going to put a link down below for the full claw code masterass explains all the concepts from foundation setup building websites power features memory systems Hermes agent apps building anything stuff I've never shared online before. And you also get access to the full cloud code agentic OS which is what we're building everything in in this video. Beautiful.
And then we'll get the first product that comes out. And bear in mind you can have as many conversations but this is our honey drop. So let's go through and have a look. We have the honey. The honey dropping down comes in for jar fills up and that is gorgeous.
And it comes down and then we have the rest of the website. Different sections free refusals uh information about the products the jar with the ability to go ahead and buy it with this beautiful little animation. And it's got at the bottom and it's created everything from the honey drop logo to the entire process. You can come down and see and it's got this nice little grain animation that flicks over it which is freaking and just so smooth that it comes down fills up a jar. You know what you're getting shows the product and absolutely gorgeous.
Now we can build these in any kind of style that we like. If we want we can do that one too. Really pick everything up. Make it look gorgeous. Make it look beautiful interactive anything we want to.
The interesting thing about Kimmy K3 through is if you give it a design reference that this one had no design reference by the way, but if you give it a design reference, it is remarkably talented at following and replicating any design that it actually sees. And it actually ranks number one on the 3D design arena, which is gorgeous above Claude Fable 5 GLM 5.2. It is the best design model that we have, better than Opus 5. Opus 5 is a great model. Kimmy K3 is the top in terms of its design capabilities, which is exciting.
But there is one big issue that we have here, right? And if you think about any website that you see people build and drive is it's great for desktop, but most users are actually on mobile. So the question becomes, how do we capture this exact same magic but for mobile? And so this is level two, which we call the mobile design. Now, we built a beautiful graphic and animation for desktop, but what about mobile?
Well, one really cool thing, and I've added this into the skill, and by the way, guys, I have spent so many dollars and so many hours trial and erroring these 3D generations. I if there's a problem, I've probably come across it and fixed it in this skill, and it's all yours completely for free. I'll put it down below. But the cool thing is we can actually, if we want to, do two things. One is we could redesign it without a video generation, or we could actually ask Kim K3 to take the same design and turn it into something that would work on a mobile.
And this is really unique because nobody does this dynamically for their mobile, which is why this is so cool. And effectively, we ask it to reshoot it for a different format or add some flavors. Again, we want one idea per screen. That's a really core design principle. But I want the same story spine.
That's the key detail. And so, for example, if you're chatting here, that's cool. You can also do this in the terminal, which is awesome. And the cool thing is you can actually use, if you want to claw code to help manage this. It can manage it in an agentic operating system.
It can also manage any terminals you have of Kim K3 as well. I'll just show you here because it's like very easy to do. So, and I can also I just like the fact that I get full visibility of the token usage where all it's going through and any like credits you have which is really important. So I might say hey there we just built this beautiful website in desktop and now I want you to go through the same process but build one that is mobile optimized use the same skill as before and I would like it such that if the break point when they reach a certain size that the video changes from being vertical to horizontal and it should look seamless. Go ahead and go ahead and send that one off to Kimmy K3.
And when that's finished we'll get something that looks like this. So, as you can see, it's now been optimized for mobile. And we've done no um any other focus on anything like the design, like the typography, all this stuff. We can elevate to like a level 1,00. This is just literally building the website in one go with this beautiful software.
I'm going to come down and let's have a look at this now because it's all mobile optimized. It comes down, lands in the jar, and there we go. It's completely done. And I've kept this one quite simple. It's quite nice.
We start at the beginning with the honeycomb. We can come down and see. Look at this. And you're using this on mobile. It's absolutely gorgeous.
So you can come down and see this. Come down and at the bottom when we've done that, we can come down have a look at this. Go ahead purchase it if we want to. All exactly the same. So we can build these mobile optimized versions of the videos in exactly the same way.
And if you extend this one out for example, you will see it then flicks back to this version of it. So we can get mobile and desktop working and we work out the break points as we go. And what I'd recommend that you do is literally just tie in like this and see where the break points are. see if it's something you like and you can work with Kimmy K3 or any model to modify that. But the key detail is even if you don't want the video again on mobile cuz obviously there's a cost to generate these beautiful videos.
The key thing is that you do think about mobile design. I can tell you from my last tech startup we had like around 50,000 unique people landing on our website every month and I did the SEO for it. I I was in the data with the mobile and I can tell you so many people will come and look on the mobile. So make sure that that journey is also as beautiful. One of the things that we'd need to do here, for example, off the bat is really increase the size of this because we're really trying to tell a journey and we can make this as complicated as we like.
But then this leads us on to the third level and actually solves one of the biggest problems that we have. And if you really want to make good money with this stuff, you're going to be doing it this way, which is the idea that we're not going to be creating these products, these websites in isolation. We're actually going to be doing personalized websites. We're effectively, and I found this with my clients as well. Obviously, Jack, this is our brand.
We just want a new website for that. And so, they've got an existing identity. They have an existing color palette and also different vibes and things that they want to communicate at the same time. So, the idea with level three is that we can actually build these beautiful 3D websites. Doesn't have to be 3D.
3D is just very cool uh and looks amazing, is very engaging. Or you could have I did one with a embedded video at the top which kind of ran on a beautiful loop that made it feel very very premium um for for the kind of upmarket brand that they were. Now what's cool with this personalization we can actually give Kimmy a prompt that's like can go to a website extract logo extract brand identity and build everything together including a beautiful 3D thing in one prompt in the skill that you can grab down below. So the process is three very simple steps. We're going to go ahead and grab the palette.
We're going to go ahead and make sure the fonts look good. And then we're going to go ahead and build something that looks fantastic. So, for this, I thought we could go ahead and do a website like Fritz Cola, which is cool. So, I thought, let's do a Cola brand. For example, they've got this nice white, black, and red color palette.
They've got different ideas, different logos. Like, I really like this logo here. I think that's really tasty, really clean. and what we effective want for to do. Let's just say we're working with Fritz Colum or maybe we're not and we're like let's go ahead and prospectively create something for these guys, right?
Well, let's go ahead and and start a conversation with Kimmy K3. Again, you can do this in the terminal. I'm just using the OS because I found it easier to do so. So, come down here to Kim K3. I might say something like, "Hey, I want to go ahead and use the skill, the last skill that we downloaded, and I want you to go ahead and quote for me a beautiful 3D website." basically taking the brand identity from Fritz Cola.
All right. And then I'm going to go ahead and I don't have to specify the brand, but I might just grab it down below anyway. Come down here and paste that in. And then we'll often say is I want you to go ahead and use Fire Crawl to extract the brand identity, the logo, the typography, and then I want you to go ahead and build and just follow the steps, ask me the right questions, use the Higsfield CLI to do so, and go ahead and build everything for me. I've honestly found guys using Higsfield is less errorprone in video generation and I've spent hundreds of dollars on this and the really key important thing here that I'm doing and this is not a step that you should just miss.
I honestly use a service like Firecrol. Like you don't have to. You can get these to do web searches. But what I found is that when I ask it to go ahead and actually scrape web pages, get me brand identities that it really struggles like unless you're very very highly specific and sometimes it just spins in circles. And Kim K3 does have a cost associated to it.
It is in the same ballpark as Opus 5. You know, cheaper than Fable 5, but it's not $0. So any tools that we can use like firecrawl that basically doesn't grab things like the useless HTML, the H1 tags, the H2 tags, all that sort of stuff just brings the crisp information is good. And what's cool is you can give it a brand like glider.com. Come down and give me the branding and bam, I've got the logos, I've got the image, I've got the colors already there.
It just makes it so easy. Web search isn't built for agents. Tools like Vil actually make that possible, which is why you'll always find me using it when I recommend it. I just recommend the stuff that I genuinely use on a daily basis and it's very very handy. So we come back over.
I'm going to go ahead and finish the prompt here and say make sure you use firecrol to go ahead and extract the brand identity and then go ahead and build it and ask me the right questions. All right, we're going to go do that and we'll literally send that one off to Kimmy K3 and let it let it work its magic in the background and I can see what Kim K3 is doing, how many seconds it takes and effectively what's happening. Now, if you find that for some reason a model like Kim K3 misbehaves, the really cool thing that you can do is actually speak to Claude code and I built this to be the case in Egentic OS as well and it also works in the terminal. You can say, "Hey, I'm building this thing in the OS. I'm building this thing in the terminal.
could you just help me navigate this or you know I don't understand what it's doing or it's making these errors and chord itself can interface with the model in the chat for you if for some reason you hit a roadblock. So any mistakes I've ever found I built into the skill to make it bulletproof. I'm always like okay write this into the skill such that it never happens again for anybody else. So I try to do all this sort of stuff that you should have a completely flawless experience but it's really good to know and understand that now you can see exactly what it's working on. It's grabbing that.
I can see the tokens down below, how many seconds it is, and then it goes ahead and builds a website. And I can also say, hey, make it, you know, add some beautiful, make sure we got that nice white, black, and red. Make sure we follow the typography perfectly. If I drop an additional message in, I can actually steer and that will cue. And then when it's finished at task, it will absorb that information.
And then when it's finished, this is what we've got. We've got the logo that's been brought in automatically. And what I'm noticing straight away is my pointer is this red dot. So, I think one slight change would mean it's a red dot instead of a click. But I think that's really cool.
It's got in there the idea, the range, the wake. Let's have a look. Wake up, stay awake, lots and lots of caffeine, not a lot of compromise. Look at this glass bottle crown cap. Two friends, one idea.
I love that it's got the story and it's filling up. Less sugar, more caffeine. Independence is 2003. It can be done better. And then that beautiful transition into the website and then it's just got lots of different basically information and design that's come down here, which is awesome.
which is fantastic. Obviously, the main focus is the kind of fantastic 3D animation that comes down and we're getting information about the brand and then we can work out and build and just kind of like do any other aspect we want to to the rest of the website. And then to host the websites, we're going to use a website called versel.com. As you can see, all these websites here are just things that I'm hosting on there. For example, I can come down, I can click on those, and it's just like WordPress.
So, this is awithjack.com, something I built for my community. It's all hosted on WordPress, which is super cool. So, all you're going to do is create an account on versel.com and then literally come over to Claude and just say, "Hey there, I'd like you to connect to Versel via the CLI." That's literally all you're going to say. Send that one off and effectively what will happen is Claude will open up a new browser, you'll sign in, and then Claude can actually host these websites for you on your own behalf. And so, now we know how to build these beautiful websites with Kimmy K3.
The next thing we need to do is learn how to actually leverage an operating system that makes builds like this with any model way easier. and the principles of that.