Claude just Changed Website Design Forever

**Julian Goldie** (0:00)
Today, we're going to be looking at some of the best ways to use Claude for design using an anti-slop machine. So usually every AI built website looks the same, you know, the same colors, same emojis, the three identical cards, et cetera. And this is typically what your typical AI generated website looks like. All the landing page builders look exactly like this. They always use this gradient color, they love a bit of purple. And you can see an example of what it looks like as a generic. I'm going to show you what it looks like and how to get better results as you can see. So we can see the before and after based on the new design principles that you can teach Claude in like one single click. And these are using open source design skills. And you can also build the skills yourself if you don't want to use anything external as well. Just to put this in perspective, you can see, for example, here, we have a full website created with much better designs using this whole system.
And so the way that we generate the images, the frameworks, everything else, it's all using this similar system that we've built so that you can get better responses and better website designs using Claude. Because Claude or any sort of model, even Fable 5 when it was out, was pretty bad at UI. And so this is a powerful way to just wire it in with new skills so that you can get better results. And so if you look at the old way, you had the AI default.
This is what it looks like. Usually you just have like three cards. You usually have like a CTA, super generic copy on the page, and then like the typical sort of three cards here on the web design page. With this system, you plug in five design skills. You can just take one of them. You don't have to use all of them if you don't want to. And then for example, you actually have much nicer designs and you'll get better pages that actually look different. So for example, if we look at each one of these pages that we've designed here, they all look and feel different. They're all using a totally different vibe. And that's because we've gave it the new system that I'm going to show you today. So how does it work? Well, what we've actually done is we found some of the best front-end design and UI skills that are open source on the web. So for example, like this one, this is a SkillMD for front-end design from Claude. We also have this one as well. This is from ShadCN UI. Basically, these are different skills that you can install.
You can literally just take the GitHub and you could plug this into Hermes or it's Claude or whatever design tool you prefer to use. Then it shows Claude the design skills to avoid and design skills to actually implement. So this is another one as well. This is called UI UX Pro Max Skill. You see it's got 96,000 GitHub stars. Now, one thing to note here is like if you're installing skills externally, for example, open source ones, you do have to be careful, right? Because anyone can create these skills. So one thing you can actually do if you want to play it safe is you can actually rewrite the skills or you can look through the SkillMD or you can also get Claude to look through the SkillMD as well and then from there, you can create your own version of it. So if you're like, I don't want to install these skills separately, no problem. You can just make your own versions in the three ways I've just talked about. So these are the skills that we've added. You don't have to use them all. You could just use one of them and you'll still get better examples. Now, for example, we look at this one. This actually has 161 industry palettes, which means totally different styles, totally different fonts. And it's matched to the type of product that you're creating a website for. So depending on the product type, your page will look different automatically. And then you don't need to worry about, you know, all your websites and pages looking exactly the same. I think that's a great way to sort of look at this and improve this. Then you also got, for example, the front end UI UX skill. This is pretty cool as well. This is from skills.sh. And this sort of stuff you can install from one click, as you can see here. And then you can give your agents, like Claude or whatever you're using it with, a role. So for example, here we have role designer turned developer setup. It has a mission, has a work principles, and it's basically a setup to make sure that you get better design principles from your AI agents. And again, the whole point here is you avoid that AI slop look that nobody wants on their websites. Otherwise, we're just going to have a generation of websites that just all look the same from the same era.