Transcript
00:00:00Kimi K3 just dropped and it's an insanely powerful model on the same level as Claude's Fable 5 and GPT 5.6.
00:00:06The biggest thing about it is that it's genuinely good at front end,
00:00:09so good that people are calling it better at design than any other model out there.
00:00:14And it really is that good, but there's a catch and it's not just a Kimi problem.
00:00:17Every AI model has its own design style and you don't notice it until you've used one enough.
00:00:22Whenever a new model is announced, everyone says it's the best at front end and for the first few sites, it kind of is.
00:00:28But the truth is they all have their own patterns that they use in every design.
00:00:32It doesn't matter if it's Sonnet 4.5 or GPT 5.6, those patterns keep showing up in its designs.
00:00:38So no matter which model you're on, you need something to push it off that default, which is what a good designer does.
00:00:43And one of the best ways to do it is a skill called Hallmark.
00:00:46If this is your first time, we're a software company and this is our channel AI Labs,
00:00:50where we show you how to optimize your business with AI and if you don't have your own,
00:00:54you can use these skills to get paid by optimizing it for someone else.
00:00:58And in this video, we're going to go over the Kimi model, its front end design capabilities and the skill that strips the designs from these patterns.
00:01:05You might already know Kimi K3 as one of Moonshot's best models, but here's a quick recap for anyone who doesn't.
00:01:11Moonshot AI released it as their flagship model and it got popular fast.
00:01:15And the big one is that it now joins the models with a million token context window.
00:01:20On performance, it rivals Fable 5 and GPT 5.6 across a lot of areas and those are two of the strongest models right now.
00:01:26To compare it, we use the benchmarks from artificial analysis, which grades models across different areas.
00:01:32On intelligence, it is way ahead of Opus 4.8 and the new Gemini 3.6, but just behind Fable 5 and GPT 5.6.
00:01:40And the gap in the numbers is so small that it's basically on the same tier as them.
00:01:44On front end design, it actually beats even those two as measured by LM Arena,
00:01:48which runs models against each other on the same prompt and ranks them on real user reviews.
00:01:54One reason Kimi does so well there is its built-in vision in the loop, which comes out of its strong vision capabilities.
00:02:00Basically, the model doesn't just write code, it checks what it's building.
00:02:04Most models look only at the code to guess how a site will turn out,
00:02:07but Kimi takes screenshots of what it built, looks at the result and adjusts from there.
00:02:11And that's a big part of why people say it's better at front end.
00:02:15Its spacing and layouts come out way more balanced and purposeful than other models.
00:02:19That leaves cost.
00:02:20And this is where Kimi lands the real advantage.
00:02:22It's priced at $3 per million input tokens and $15 per million output.
00:02:27GPT 5.6 is a bit more expensive at $5 input and $30 output.
00:02:32And Fable's the priciest right now at $10 input and $50 output.
00:02:36So Kimi gives you the same tier of performance as the top models at the lowest price of the three.
00:02:41Now, Kimi ships with its own harness called Kimi Code, which launched alongside their K2.5 model.
00:02:47It's a terminal-based coding agent and it lets you run Kimi without going through the API directly.
00:02:52But when we used Kimi Code, we found it really slow.
00:02:55A task that takes Claude Code or Codex around 3 minutes takes Kimi Code closer to 10.
00:03:00And that comes down to two things.
00:03:01The first is that Kimi's waits aren't open yet, which means this model is just hosted by Kimi and no other servers.
00:03:08So every request has to go back to Kimi's own servers and nowhere else.
00:03:12Those servers get overloaded, so everything you ask takes longer to come back.
00:03:16The second is the harness itself.
00:03:17We found it rough to work with even on the older models and Kimi themselves admit in their docs that it isn't built to bring out K3's full potential.
00:03:25There are two more problems on top of the speed.
00:03:27One is context.
00:03:28With Codex and Claude Code, we switch models a lot depending on the task coming up and both of them hold on to the context well when we do.
00:03:36But you can't really do that in Kimi Code because the way this tool holds in context of the conversation breaks down when you switch models.
00:03:43The other is sub-agents.
00:03:44When it ran, it looked like it was spinning up a huge number of them.
00:03:47But when we asked afterward, it said it had only spun up 5 to handle the task.
00:03:51So to test the model properly, we ran it inside Claude Code instead because it works incredibly well there.
00:03:57And Kimi gives you a way to do exactly that.
00:03:59Now one way of running Kimi inside Claude Code is straight through its API.
00:04:03But that gets heavy on your bill because you're charged for every word the model reads and writes and it adds up fast once you're using it a lot.
00:04:10So the better move is to run it through the Kimi plan you already pay for.
00:04:14That way you never have to think about a bill and you just pay your usual monthly amount.
00:04:18For that, there's a tool called CLI Proxy API.
00:04:21It takes the coding tools you're already logged into and turns them into an API of their own, running locally on your own machine.
00:04:28So you're basically converting the subscription you already pay for into a server you can run through.
00:04:33You install it with the brew install command.
00:04:35Once that's done, you log in to Kimi with the Kimi login command, which opens the Kimi login page so you can sign in.
00:04:41And once it has your details, you're logged in.
00:04:43Then you start the server so the Kimi connection stays live.
00:04:47There's one more thing after that, which is generating an API key for that local setup because that key is what you hand to Claude Code so it can get access.
00:04:54But instead of doing it yourself, you can just ask Claude Code or whichever agent you use to set the API key up for you with that tool.
00:05:02Once it's done, you copy the key out and use it.
00:05:04Then you launch Claude Code.
00:05:06For that, you change the URL Claude sends its request to.
00:05:09By default, it points at Claude's own URL so you point it at your local host instead because that server is running on your own machine now.
00:05:16You paste in the key Claude generated as your Anthropic auth token and you set the model to Kimi K3.
00:05:22After that, run the Claude command and Claude Code opens up running K3 on your Kimi subscription.
00:05:28And one thing worth knowing is that these settings only live in that one terminal session.
00:05:32So none of this is permanent.
00:05:33When you close the session and run Claude in a new terminal, you can use Claude Code through subscription like you used to.
00:05:39But before we go into details of the skill, it would be great if you subscribe to the channel and hit the hype button.
00:05:44This small gesture of support goes a long way for us.
00:05:47A landing page is the face of your company.
00:05:49And if its landing page looks like slop, you lose credibility and people won't come to your business at all.
00:05:54So to build one properly, you need to break the model out of the safe patterns it just casually defaults to.
00:06:00There are plenty of skills built for exactly that.
00:06:02And one of the most popular is Hallmark, an anti-AI slop design skill for agents.
00:06:07You use it through four verbs.
00:06:08The first is the default, just telling the agent what you want to build and it builds new UIs following the workflow in its instructions.
00:06:15The second is audit, which checks your code against known anti-patterns to make sure the site doesn't have any.
00:06:21The third is redesign, which throws out your current design and tries a fresh revision in a totally different direction.
00:06:27And the last is study, where you hand it a site you like and it pulls the style out of that site and works in that direction.
00:06:33Here's the part that matters.
00:06:34If you asked any agent to study a site without Hallmark, it would just straight up clone the style.
00:06:40But Hallmark specifically stops that and instead treats the site as a design reference rather than a copy.
00:06:45So your result still comes out original.
00:06:47It also ships with a rich library of design styles you can pull from for your own projects.
00:06:51If you want to actually see those styles, their site has landing pages built in each one.
00:06:56So you can look through them visually.
00:06:57And in their docs, the recipe.md file lays out the prompting best practices.
00:07:02To use Hallmark, you need to install it first.
00:07:04For that, you need to copy the install command from the GitHub repository, paste it into the terminal, and the installation starts.
00:07:11It asks which agent you want to install it for.
00:07:13If you're using Kimi code or running Codex, you go ahead without changing anything.
00:07:17And it installs into the .agents folder, which a lot of agents, including those two, use to hold their configs.
00:07:23But since you're using Kimi in Cloud Code, you need to select Cloud Code from the agents list as well.
00:07:28And that installs it into the .cloud folder, where all of Cloud's configs live.
00:07:32Once it's installed, you head to the project and find both the .agents and .cloud folders with the skill in place.
00:07:38The skill.md file holds the descriptions of how to use it, how it should be invoked, and everything it needs to work.
00:07:44And this is what makes it better than the alternatives.
00:07:46Because it carries more than a hundred references covering different aspects, including AI slop patterns.
00:07:52It runs a 58-gate test before it hands the output back, which is 58 checks that help make sure the site's clean of slop.
00:07:58It also carries references for components and for the verbs from earlier.
00:08:02But before we see the designs from this skill, let's have a word by our sponsor.
00:08:05Your AI coding assistant is amazing while you're working with it, then forgets everything the moment you close it or switch tools.
00:08:12You start fresh, not knowing what you built yesterday or what another agent figured out, so you waste time and money re-explaining what it already knows.
00:08:19Jolly Memory, a free open-source IDE extension that gives your assistant a persistent memory.
00:08:24It automatically captures the reasoning behind your project from tickets or links and conversations and saves it on your machine and turns them into structured documentation attached to every commit that automatically captures the reasoning of every architecture and engineering decision.
00:08:39It isn't locked to one tool or model, so jump from Claude to Gemini to Quen and your memory comes with you, with no state.md file or notes to keep in sync.
00:08:48It works inside VS Code, IntelliJ, Cursor, Claude and Windsurf, installed once and remembered everywhere.
00:08:56When something breaks, you can trace the reasoning behind every change and it lays everything out like a simple map of your project.
00:09:03Grab Jolly Memory using the link in the pinned comment.
00:09:06Now, even though Kimi is genuinely good at front-end, it has also picked up patterns of its own, and those add up to its design style.
00:09:13It's brand new, so those patterns aren't very noticeable yet, but they'll get more obvious eventually.
00:09:18And because Chinese models are known to be trained through distillation of Claude models, which basically means training one model on the outputs of another, Opus 4.8's style shows up a lot in what Kimi generates.
00:09:29The way Opus puts images behind the hero section, runs large hero text off to the side, and reaches for warm orange and brown palettes, whether the site's dark or light, all of that shows up in Kimi's designs too.
00:09:40But the thing we like about Kimi is that the writing isn't stuffed with the marketing hype words Opus leans on.
00:09:46Everything feels like it's there on purpose, and it reads way more intentional than what other models put out.
00:09:51To test the skill, we ran it in Claude code with Kimi and gave it a simple prompt for a landing page.
00:09:56Once it runs, it opens with a pre-step called the pre-flight.
00:09:59The pre-flight goes through your existing files that hold information about the design style and works out what it can keep and what needs to change.
00:10:06Since we'd just spun up a Next.js template, it locked in Next.js as the framework and threw the rest out.
00:10:11Before it moves on, it asks three things, which are who the audience is, what the site will be used for, and what the tone is.
00:10:18Mentioning that directly in the prompt is a best practice, but if you leave it out, it just asks you on its own, so it isn't something you strictly have to do.
00:10:25Once you answer, it pulls the theme and everything else from the references and builds the site.
00:10:30And when it's finished, it makes sure all 58 slop detection checks have passed.
00:10:34Since Hallmark runs off those verbs, asking it for a complete redesign changes everything.
00:10:39It recognizes that verb, loads the redesign protocol, asks the questions again, kicks off the same workflow, and rebuilds the whole thing in a completely different direction from the first one.
00:10:49Then there's audit mode, which checks the design against AI slop patterns.
00:10:53When you run the Hallmark audit, it loads the skill again, generates a report based on those patterns, and flags every finding.
00:11:00And from that report, you decide which fixes to apply.
00:11:02But when you're working with Kimmy and Claude Code, you have to keep context management in mind because auto-compaction won't run.
00:11:09So once the context window fills up, it doesn't stop working.
00:11:12But with the window full, you'll notice the answers start drifting off the instructions or turning weird and generic.
00:11:18After the audit, Kimmy went ahead and made the flag changes, and there were a few.
00:11:22It removed the font that made the design read as AI slop.
00:11:25It swapped the images from Unsplash over to another site called Pixum, since Unsplash is the go-to for nearly every model.
00:11:32And it fixed the mobile responsiveness, which lifted the site overall.
00:11:36From there, you can keep asking for new versions until you're happy with it.
00:11:39One tip if you're going to use skills with Kimmy and Claude Code.
00:11:42The automatic invocation doesn't fire reliably because Kimmy isn't Claude Code's default model,
00:11:47and that automatic triggering is tuned around Claude's own models.
00:11:51So the better move is to invoke the skill manually with its slash command, which makes sure it actually loads before it starts building.
00:11:57We also ran the same test in Claude Code on the Opus 4.8 model, both with the skill and without it.
00:12:03We started without the skill, and it built the app the usual way.
00:12:06It took about 6 minutes, and the site it produced was heavy AI slop.
00:12:10Everything gave it away as classic Opus, from the colors it picked, to the gradient in the background, to the rounded boxes it leaned on.
00:12:16Now, if you remember, our design system has the AI slop detector skill,
00:12:20which is trained to catch slop across all the known patterns, including the ones from Opus.
00:12:24So we ran it on the project, and it flagged the lot, reporting multiple high and low confidence slop patterns,
00:12:30and calling out the gradient text in particular.
00:12:32Then we ran Hallmark.
00:12:33It loaded the skill, ran the preflight, logged the patterns, asked the same questions, and ran the whole workflow again.
00:12:39It took way longer than the run without the skill, but the result was worth it,
00:12:43because the final design came out way more creative and intentional.
00:12:46The buttons had much better interactivity, and all of it came from the model understanding the product better.
00:12:51By default, it doesn't drop in placeholder images either, because reaching for Unsplash stock is one of the slop patterns in its rules.
00:12:58It's built for product builders, so it tells you to bring your own, instead of falling back on AI generated or stock ones.
00:13:04And overall, it produced a noticeably better design than Kimi did, so we'd say the skill works better with Claude right now.
00:13:10It doesn't yet have a deep sense of how Kimi designs, and is just flagging findings from the others' known patterns.
00:13:15But across all our testing, the skill worked really well.
00:13:18Now, this design system we just mentioned, along with everything else we build and show you in all our videos,
00:13:23can be found in AI Labs Pro, which is our community.
00:13:26So if you've found value in what we do, and want to support the channel, this is the best way to do it.
00:13:31The link's in the description.
00:13:33Now, if you've used Codex, or know how it works, you'll know its default colors are a mix of green and white,
00:13:38the same way Opus defaults to orange, cream, and brown.
00:13:42Those are the colors it reaches for as its default style.
00:13:45Its designs also lean on a lot of SVGs, and it tends to pick font sizes that run fairly small against the screen.
00:13:51The designs come out pretty good next to the others, but those default patterns are going to surface no matter what.
00:13:56So we tested Codex with the skill installed in the .agents folder, and gave it a prompt that simply said what we wanted to build.
00:14:03We used the Codex app for this, because it comes with browser use tools, and other capabilities that make it work really well.
00:14:09It went through the preflight, and asked us about the audience, the use case, and the tone.
00:14:14Once we made those choices, it ran the whole workflow, editing multiple files, running the usual tests, and an interactive browser test.
00:14:21It has browser capabilities on hand, and it's genuinely good at this kind of thing, so it puts them to use.
00:14:26When it was done, the site it came back with looked way better.
00:14:29The one thing is that the blue and white combination can still read a little AI generated, but here it comes across as intentional rather than slop, because these color resonates with technical websites.
00:14:39All the elements were different from how Codex produces designs by default.
00:14:43Although there were some issues in the image it has put on the hero section, like the selected tab's visuals didn't came out right, but this is something we could have fixed later on.
00:14:52So we ran the Hallmark audit, and it generated a report.
00:14:54The report said the overall structure was strong with only a few issues left including responsiveness, which the first version tend to miss.
00:15:02That brings us to the end of this video.
00:15:03If you'd like to support the channel and help us keep making videos like this, you can do so by using the super thanks button below.
00:15:10As always, thank you for watching, and I'll see you in the next one.