This Just Changed Website Design With Claude Code

Everyone has access to the same AI models, but nobody has built the processes around them. You might have heard the phrase that the model doesn't matter anymore, the harness does. Harnesses are basically the processes that you build for your AI model to follow. But here's the thing you need to understand, models keep evolving. So the harness you built 3 months ago is already obsolete. At the time of recording, the best model out there is Fable 5, Anthropic's flagship model. But don't worry, we'll guide you through different ways that make sure that your harness keeps evolving for any model out there. So Anthropic actually has an official skill for front-end design. And the reason it exists is a problem that they named themselves. What happens is that the model drifts toward the safest and most average version of the design that you asked for. They call it converging on the distribution, which basically means that it builds the thing it's seen a thousand times before. Now with how powerful these latest models have been advertised, you might think this isn't a problem anymore. But that's not what I've found. For example, [snorts] in this prompt, we simply asked it to build a landing page for a plantation website. To nudge it in the right direction, we told it to be as creative as possible and not focus too much on the content itself. We also explicitly told it not to load any skills because we have multiple skills available in our system and we wanted to make sure it wasn't taking advantage of them. This is what it ended up creating. Now it's not a bad design by any means, but it's certainly not the best either. For example, there are some contrast issues and a few of the images don't load properly, but when we used the skill here, things changed quite a bit. nothing special in the skill. There aren't any references or any external resources. It's literally just a prompt. Using that alone, it produced a much better design. The design was significantly more polished and aesthetically pleasing. It included subtle animations and a lot more attention to detail. Overall, the result was noticeably better than what the model would normally generate on its own. With every new model, these AI companies release new prompting guides for people using the model APIs. And using Fable 5's guide, we modified the design skill. You can just copy the general-purpose design prompt and the prompting guide. Paste them both into Claude, tell it that you've got the prompting guide for the model, and ask it to create an updated version based on that. It analyzes the prompt and gives you a rewritten version for the new model. And you can actually see the new site looks way better. It's structured much better, and it turned all the different elements into cards. We think it looks so much more creative than what Claude normally puts out because of tiny details like how the CTA section got turned into a postcard letter with a stamp on top of it. It's these tiny details that make it look so much more creative. Now, there's another reason these companies put out prompting guides. A lot of the time, the models have behavioral issues, and the guides tell you how to fix them. When Opus 4.8 shipped, Anthropic pointed out that the model tended to default to a particular design style. Their fix was to ask the model for multiple design alternatives first, then let you pick which direction to go with. But when Fable 5 came out, this issue wasn't mentioned in its prompting guides anymore. And from what we saw, the model still falls back to that same style. It doesn't happen every single time, but from our testing, roughly two out of three generated sites still end up with very similar styling. So, it was never really fixed. That's why it's worth looking at the docs for previous models, too. You'll often find useful things that just didn't make it into the latest guide. So, using the prompt guide for Opus 4.8, we switched to a different design skill that actually asked us what kind of design direction we wanted. Based on that, it generated this design. This looks good, too. But honestly, a better approach is to use design.md files here. These files contain brand language that you just drop onto your page. Get design.md is a really good source where you can get files of many brands. But even then, use them after the model has already generated the landing page. And this is specifically for landing pages because if you actually look inside design.md files, they lock everything down, right down to the font. And as you saw in the examples, the font is a big part of what made those sites look so much more creative. There are two levels when it comes to adding in animations, the marketing UI and the functional UI. Using the design skill on functional UI like dashboards will make it look beautiful, but people won't actually be able to use it. So, for adding animations, we use two things. For marketing pages, this skill already tells the model to add CSS based animations, but GSAP animations are way better. This is where another step from the prompting guide comes in. Effort is the main lever that controls the model now. For simple tasks, you can keep it from low to medium, but for tasks like adding in animations, using X high is a much better option and will give you fewer retries. In our marketing UI skill, there's a rule that specifies when GSAP should be used. Whenever that condition is triggered, it automatically loads the GSAP skill as well. We actually use that setup on the same landing page shown here. Even with that limited planning on our part, it did a surprisingly good job. It nailed the placement where the screen animation plays inside the postcard and the seasons transition one after another. It's a good example of how these specialized skills can handle a lot of the implementation details automatically. We've achieved this skill system through a lot of trial and error, and by that, I mean repeatedly hitting the 5-hour usage limits. If you want to skip all of that, you can get it from our community AI Labs Pro. The link's going to be in the description. So, as we've already mentioned, there are two kinds of UIs. The entire workflow behind functional UI is completely different from marketing UI. For example, planning is the first step and it matters a lot. We're not going to dive deep into that in this video, but once you have your plan ready, you can give it to Claude. After that, instead of having it build the app, you should ask it to build the mockups using HTML. Our process starts with the design.md. If you've already decided what design.md you want to use, that's great. If you don't have one, that's okay, too. You can move on without it. For example, if you look at our custom built community, you'll immediately notice that the design on the outside and the design on the inside are completely different. In our case, everything was planned using HTML mock-ups first. We started by creating a design.md, which was partially inspired by Notion. Using that design system, we built all of the screens as mock-ups before writing the actual application. Once we finalized and validated those mock-ups, we converted them into this fully functional application. Now, before we move on the most important part in designing functional UIs, let's have a word from our sponsor. A lot of people using Claude Code recently noticed their costs going through the roof. Honestly, that's why Kimi caught my attention. They built an open-source model that's really good at coding at around 1/8 the price of Opus. Their latest model, Kimi K2.6, just hit number one on SweeBench Pro, basically the hardest real-world coding benchmark right now. They didn't just release the model, they built products on top of K2.6 that are genuinely useful. You can generate production-ready websites with good front-end design, create full slide decks from a single prompt, and even handle data bases and authentication out of the box. But, the craziest feature is probably Agent Swarm. You can spin up 300 AI agents in parallel on a single task. Instead of one agent slowly handling everything, you get an entire AI team working simultaneously. And all of this runs on an open-source model that costs far less than the close-source alternatives people have been paying for. So, if you're using Claude Code or Cursor every day and your API bill has been getting painful lately, Kimi is worth trying. If you sign up through our link, you'll also get an extra 10% quota bonus on your first purchase before June 30th. Click the link in the description and start building. Now, there's another really important part of designing functional UIs, which is experimentation. Over time, we've tried a lot of different approaches to solve this problem. Initially, we used task lists with multiple agents working in parallel, where each agent would generate a different variation of the UI. The goal was to experiment with multiple designs and figure out which approach actually worked best. Later, we started using sub-agents for this workflow, but it doesn't matter anymore. With a million tokens of context, you can do it with the primary agent as well. We also built something internally called the gallery viewer. The purpose of the gallery viewer is simple. When you generate multiple HTML mock-ups, they shouldn't get lost among dozens of files. Instead, they're automatically opened together in a single view, making them easy to compare side by side. For example, when we were building the community platform, we didn't initially know what a community interaction space should look like. We knew we wanted a community experience, but there were many different ways users could interact with one another. So, rather than committing to a single design, we experimented using HTML mock-ups. We tasked the agent to create multiple community channel UIs as HTML mock-ups, so we could compare them. The agent would then create multiple versions automatically and open them inside the gallery viewer. From there, we could compare each variation and decide which direction was the strongest. One thing you'll notice in this example is that the designs don't all look visually consistent. Ideally, they should share the same design language while exploring different interaction patterns. The reason that didn't happen here is because there was no design.md provided. When a design.md exists, the model uses it as a source of truth for colors, spacing, typography, components, and overall styling. So, all of the generated mock-ups stay visually consistent while still exploring different UX approaches. There are also a few smaller details that can make a big difference, such as adding animations to functional UIs. We've documented a set of animation guidelines in our own skill, and you're welcome to copy them if you'd like. They've worked quite well for us so far, and we're continuously refining them. One thing I'd strongly recommend, however, is not overdoing animations in the functional part of your application. Excessive animations might look impressive at first, but they often make productivity-focused interfaces feel more distracting. Once you finalize the design, the next step is to use the Shaden CN skill. I've already connected the functional UI skill to the Shaden CN skill, so it handles most of the workflow automatically. Previously, we had much more elaborate workflows. We would generate a detailed implementation plan specifically for the ShadCN MCP, and we'd use that plan to build the entire interface. While that approach worked, it also added a lot of complexity. Today, the workflow is significantly simpler. All you need is the final HTML markup and the ShadCN skill. The reason this works so well is that the ShadCN skill already contains a huge amount of context and implementation knowledge packaged by the creators of ShadCN themselves. Because of that, it can take a finalized HTML markup and reproduce it almost one-to-one using actual ShadCN components. So, at this stage, you don't need to worry about creating complicated implementation plans or conversion workflows. If you like these design processes, subscribe to the channel and click the hype button as well. We post content that helps you learn new ways to optimize different processes in different businesses with AI. Your support here would mean a lot to us. The guide also asks you to make self-verification explicit for these models. You can put a prompt in the Claude.md that asks the agent to verify its output. Now, instead of using the main agent, you should use a sub-agent that can verify the output. And to verify it, you need something that you can compare against. For that, always point the sub-agent to your design.md. Another thing that's mentioned in the guide is that models perform better when they have context about your task. For design, this means having knowledge about what the product actually is. Now, a lot of frameworks have set up a separate product.md, but in our opinion, when you set up a Claude.md, it has sufficient context for the model to understand what your project is about. So, what the functional UI skill does is whenever it gets a new task, it makes the model read the Claude.md as well. In addition to that, it also contains a mocks folder, which has all the HTML files, so that you can reference them whenever you're adding new elements to your app. On top of that, it would be great if you have the design.md as well. These are the files you need to have in your project. Nowadays, a lot of SaaS apps can be easily cloned. We ourselves use custom-built software for team management. We've built our own version because we don't have to host a lot of people. In that case, you don't really have to make it from scratch. You just need to make sure you're cloning their UI as perfectly as you can. With newer models, their ability to understand images has gotten so much better, so the workflow here becomes really easy. In cloning, there are two different modes. Mode B is for marketing UI. For this, there's a really useful CLI tool called single file CLI. Using it, you can capture on a page including the HTML, CSS, and even the images used on that website. If the site contains multiple pages, you can also fetch its sitemap.xml file, which is essentially a map of the website. Using that sitemap, the model can discover and fetch the other pages as well. The problem starts when you run into pages that are behind authentication. For example, if you wanted to clone Notion's UI, you couldn't simply point the tool at Notion's website. When you provide Notion's URL, you're only going to get the landing page. What you actually want is the application interface behind the login screen. Fortunately, models have become very good at understanding interfaces from images. So, in those situations, screenshots are the best option. You have to capture the different states of the interface very carefully. Let's say you have a page open, you'll want screenshots showing what happens on hover and how different interactions affect the layout. Let's take another example. Suppose you open a page where two pages are in one column. If you only provide this, the model's not going to know that you can make two columns. You need to be extremely thorough and provide all the context the model needs. Once you've captured the screenshots, don't paste the images directly into the prompt. Instead, drag them into Claude. This gives the system access to the image paths that mode A can use. Mode A will then gather all of those screenshots, place them inside the clone folder, and use them as reference material. Those screenshots effectively become the foundation for the cloning process. From there, you can generate an initial HTML version of the interface and then move on to building the final application. That brings us to the end of this video. If 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. As always, thank you for watching and I'll see you in the next one.