Insane Claude Design Skills You Need To Actually Build Beautiful Sites transcript

There are a lot of skills out there that let you design beautiful websites with AI and each one of them is different, but not all of them work. Some have an intensive workflow that seems impressive and at the end of it they still generate a site that looks like every other one. Only a few of them actually deliver. Now you might think why you'd even need these skills in the first place because models are already powerful enough and they design really well now.

But no matter how powerful a model is, each model follows its own pattern when it designs and that pattern is easy to spot. That's why you need something to steer them away from that pattern and actually make your website stand out. Now these skills are developed by people who have extensive experience in design and they've repackaged the workflow they tested and that worked for them into a reusable form so that you can use it, too.

If you're new here, then welcome. We're a software company and this is AI labs and in this video we're going to go over the skills we tested that actually gave us results. And one thing worth knowing before we start is that you don't need to add skills to Claude design itself. The ones you add in your Claude setup are the same ones you can use in Claude design. So you just add the skill from Claude settings. And even though we're using these skills in Claude design, they'd work with Claude code, Codex, or any other agent you're using and give the same result.

The first one we're going to talk about are the skills by Emil Kowalski. In this set, there are not one but nine skills and each one changes a different part of the design. These are the skills we ourselves also use when we're working on designs, whether we're using Claude code or in Claude design. There are many skills in there, each targeting a different area of design. Among them there's Apple design which contains all the design principles Apple uses in its own products and makes them available for use in other websites.

There's also an animation vocabulary skill, which basically turns your vague animation description to exact words that a model can understand. You can add as many skills you want, but there are two of them that we use the most because of how much they improve the capabilities of Claude design. One of them is the email design engineering skill, which contains instructions on how to build beautiful UI components and add animations to them, making it the best skill to start your design with.

The other one we use is Animate, and it contains a complete workflow for adding animations to an already built website with a detailed step-by-step process. To use them, you need to add them to Claude, and once they're added, you can use them inside Claude design. From there, you type {slash} and the skill's name, and in the prompt, tell it what site you want. Since we didn't have the design built yet, we used the Emil design engineering skill first.

Then it pulls in the skill, but before it builds anything, it asks you questions about the app, the same way Claude design does on its own. When you answer those, it builds the design. The first version Claude design makes looks minimal with a monotone style, but the animations that came out didn't look as polished and were out of sync in some places. So, that's where the Animate skill comes in, because it actually refines the animations on already built websites.

This skill understands how the site works and determines what needs movement and what doesn't. Once Claude finished making the changes, the site's animations were greatly improved. The motion was in sync with the scroll, and the whole thing looked more intentional compared to what we had before. Now, you might think that this isn't that different from what Claude normally produces, but that's because this was a landing page.

While it did improve the really small and subtle animations here, the main animation style that looks good on landing pages are those scroll-based animations, and we've covered plenty of skills about that in previous videos. But the place where the skill really works well is in the small elements of the functional side of the apps. For example, we were working on a site for a restaurant, and we used Animate's skill to add animations on it, and it added tiny animations that improved how using this site felt, like adding animation on when we submit the form and the graphics popping up on hover.

All of those details together made the site feel a lot more interactive and made the experience of using it better. And you can add as many of Emil's skills as you want, because all of them would be a significant addition to your design toolkit. Now, the next one we're going to talk about is Connard Lee's Garden skill, and this is also a collection rather than a single skill. There are five skills in it that cover things like video presentations and images.

But the most important one out of them is the web design engineer skill. And this is because this skill actually contains instructions on how to design like a top-tier design engineer. This skill is solely focused on making the visual stunning, not functional. The way that this skill works is that it takes your requirement and works through them with you until it's clear on what you want. And then it looks for real designs to work from.

Its principle is that good design never starts from thin air, just like how every design out there is inspired by something that came before it. It also grounds itself with the designs that have worked previously. This skill also contains a set of references covering multiple design-related areas. They cover how to judge a design, the ways designs usually go wrong, and style recipes for well-known sites like Apple and Linear.

So it can look at how those sites actually work while it builds yours. So once you've added it in Claude design, you can use it by giving it a prompt describing what you want to build. The site we got out of it was a lot more interesting than what Claude design puts out on its own. It was more thorough and better from a design perspective than the version Claude design would have made by itself. And if you already have a design and then run the skill, it goes through that design and scores it in different areas.

You can keep refining the design and running it again and again until it reaches a perfect score and matches the design you actually want. But before we explore other skills, it would be great if you subscribe to the channel and hit the hype button. This small gesture of support goes a long way for us. The next skill we're going to talk about is the AI design skill by Elia Design. And this time it's just a single skill built for landing pages.

Everything it does sits in one file, and its job is to take your idea and turn it into a visual system, which is basically the set of rules everything on the page then follows. And this includes colors, type, and spacing. This skill is a specialized complete system for designing landing pages that are actually worth it. The thinking behind it is that a landing page isn't a homepage. A homepage is trying to serve a lot of different people at once, but a landing page has one job and that's getting people to actually take action.

Models tend to generate homepages that work, but they aren't specialized in designing landing pages the way this skill is. So, it structures the page around that one action that you want someone who visits your site to take so that it draws focus towards that action by structuring your site around it. It also keeps the design to a consistent visual style. And it also addresses other areas of web design that most models overlook, including making sure the website can be easily found through search.

So, once you've installed it in Claude's skills, you run it with a prompt whenever you want a design. It also asks you questions first and once you've answered them, it starts designing. The site it made came out feeling like a real brand and matched the exact vibe we were going for. And the way each element was structured made it much more likely that whoever entered the site would actually make a purchase. But first, let's have a word by our sponsor, Make.

You already know Make for visual automation, but they just launched Maya. It's an AI co-worker that lives right inside the Make builder. Most AI builders hand you a black box and you just hope it works. Maya is different. You tell her what you want in plain English and she builds it right in front of you. So, we tried it. We asked Maya to send our team a Slack summary every time a new lead lands in Salesforce and it went straight to the canvas.

Maya reasoned through the request, picked the right tools, mapped every module, and wired the whole automation together on the canvas while we watched. every decision so you can jump in and adjust anything anytime along the way. You're not just getting an automation, you're learning how Make actually works. It's free to try in beta right now. The link is in the description. The next skills we're going to talk about are by Meng To.

He's actually a designer who's been in the industry for a long time and is known for his immersive scroll-based storytelling designs. And he's taken everything he's found and packaged it into a system of design skills so that you can use it, too. This contains a lot of skills in it covering different areas. All of them are focused on generating high-quality designs that actually tell a story instead of just looking visually good.

One of them is video to super prompt, which works by taking a screen recording or walk-through of a website and using tools on your machine to turn that recording into a prompt for your agent. But, the skill we really want to talk about is Awards quality sites. Awards is the site that holds competition for stunning design, and the sites that win there are recognized to be the best design sites on the web. This skill actually lists the principles and design details that Awards level sites contain, and that matters because Claude doesn't build a design at that level on its own.

So, the skill puts those principles into the process and steers the direction of the design. And what sets these apart is that alongside the principles, the set carries the actual techniques and the specific effects that make a site look expensive, which is the part a model won't produce by itself. Once you've added the Awards skill, you give it a prompt describing the site you want. And what comes back is a site that is structured and designed in the same way as the winning sites.

There's a subtle animated background in there, but the thing that stood out was the scroll. It used that scroll-based storytelling approach, just like the websites you see featured on Awards. The next skill [snorts] set is by Jakob Krehel, and unlike the others where one skill handles every part of the site at once, this splits it into multiple skills so each area gets its own skill. All the elements that are part of the design, including typography, color, accessibility, and more, each get a separate skill instead of having one skill handle everything.

You can add any of those skills to Claude design, but the one we use is the review skill. We use it because it comprehensively reviews all aspects of the design, so we can iterate based on the score it gives. This review skill works better if you connect it to GitHub because it checks what the design looked like before and after the changes you made. If something worked before your last change and doesn't anymore, it flags that and will be able to tell you that it doesn't work anymore because of a certain change you made.

It looks at things like animations, accessibility, and how the site holds up at different screen sizes, and then it lists out everything it found so you can fix it. We also use a better layout skill because this is where Cloud Design actually struggles. This one deals with the spacing, the positioning, and how things line up across the design, and it goes thorough with the design. For example, it caught that a date on the page needed more room than it was given and even told us how many extra pixels it needed.

So, you just tell it to fix all its flags. It won't make the site look dramatically different, but what it will do is make it correct against the design principles people actually work to. The next skill on the list is tastemaker. Its main purpose is avoiding the generic defaults that models produce, and what sets it apart is how it does that. It works from the actual pixels of a real reference, so nothing gets lost turning a look into words first.

When you give the model a reference image, it usually turns it into a text-based summary that it can use as a reference later on. But, this skill actually uses scripts to extract the exact design details and saves them in a structured format that agents can use later on. This preserves the design details that would otherwise get lost in the text-based summary. It relies on scripts first to handle a lot of the things that can be done without the agent having to do them itself.

For example, it pushed them in different directions and try variations. The decisions it makes carry across the whole project rather than stopping at one screen. This skill actually gives models taste to design with so that they don't default to the same generic patterns. So, once you've added it, you run it the same way with the slash command and a prompt. We gave it the site we wanted along with the style requirements from earlier and let it work through them.

What came back was a site that looked really impressive with none of that generic style and matched the look and feel of the site we asked it to build. The last set is another of the popular collections, and what sets these apart is that they're grounded in actual research in the named laws that designers really work from with a separate skill for each one. Some of its skills cover why people leave your website halfway through and how behavior shows up as someone moves through the site.

And you don't have to install all of it. You just install the skills that fit how you work. For our setup, we added two. The first is the screen critique, which takes a screen and reviews it across a lot of different angles, then tells you where that screen is going wrong and it's working from proper guidelines for judging design quality. The second is the perception laws, which basically contains instructions on how the human eye actually sees and comprehends the design itself.

So, once you've got your design, you run the review and it comes back with what's wrong in things like what stands out first, the type and the spacing, and lists it all out so you can fix it. And once the perception laws are applied to the site, the whole thing feels more refined. Now, those were the skills that are on GitHub for you all to use, but we use other skills that we have built and refined ourselves through testing and use them when we are actually building products.

So, if you want access to that, you can get that in AI Labs Pro, which is our community. These are the skills, which include some skills we have built ourselves and some we use open source. So, if you found value in what we do and want to support the channel, this is the best way to do it. The link's in description. 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.