Insane Claude Design Skills You Need To Actually Build Beautiful Sites
AAI LABS
Computing/SoftwareInternet Technology
Transcript
00:00:00There are a lot of skills out there that let you design beautiful websites with AI and each one of
00:00:04them is different, but not all of them work. Some have an intensive workflow that seems impressive
00:00:09and at the end of it they still generate a site that looks like every other one. Only a few of
00:00:13them actually deliver. Now you might think why you'd even need these skills in the first place
00:00:17because models are already powerful enough and they design really well now. But no matter how
00:00:22powerful a model is, each model follows its own pattern when it designs and that pattern is easy
00:00:26to spot. That's why you need something to steer them away from that pattern and actually make your
00:00:30website stand out. Now these skills are developed by people who have extensive experience in design
00:00:36and they've repackaged the workflow they tested and that worked for them into a reusable form so that
00:00:41you can use it too. If you're new here then welcome. We're a software company and this is AI Labs and in
00:00:46this video we're going to go over the skills we tested that actually gave us results. And one thing
00:00:51worth knowing before we start is that you don't need to add skills to Claude design itself. The ones
00:00:55you add in your Claude setup are the same ones you can use in Claude design. So you just add the skill
00:01:00from Claude settings. And even though we're using these skills in Claude design, they'd work with Claude
00:01:05Code, Codex or any other agent you're using and give the same result. The first one we're going to talk
00:01:10about are the skills by Emil Kowalski. In this set there are not one but nine skills and each one
00:01:15changes a different part of the design. These are the skills we ourselves also use when we're working on
00:01:20designs, whether we're using Claude code or in Claude design. There are many skills in there,
00:01:25each targeting a different area of design. Among them there's Apple design, which contains all the
00:01:30design principles Apple uses in its own products and makes them available for use in other websites.
00:01:35There's also an animation vocabulary skill, which basically turns your vague animation description
00:01:40to exact words that a model can understand. You can add as many skills you want, but there are two of
00:01:45them that we use the most because of how much they improve the capabilities of Claude design.
00:01:50One of them is the email design engineering skill, which contains instructions on how to build beautiful
00:01:55UI components and add animations to them, making it the best skill to start your design with.
00:02:00The other one we use is animate and it contains a complete workflow for adding animations to an
00:02:05already built website with a detailed step-by-step process. To use them you need to add them to Claude
00:02:10and once they're added you can use them inside Claude design. From there you type slash and the skills name
00:02:15and in the prompt tell it what site you want. Since we didn't have the design built yet we use the
00:02:20Emil design engineering skill first. Then it pulls in the skill but before it builds anything it asks you
00:02:25questions about the app the same way Claude design does on its own. When you answer those it builds the
00:02:30design. The first version Claude design makes looks minimal with a monotone style but the animations that
00:02:35came out didn't look as polished and were out of sync in some places. So that's where the animate skill
00:02:40comes in because it actually refines the animations on already built websites. This skill understands how
00:02:46the site works and determines what needs movement and what doesn't. Once Claude finished making the
00:02:51changes the site's animations were greatly improved. The motion was in sync with the scroll and the whole
00:02:56thing looked more intentional compared to what we had before. Now you might think that this isn't that
00:03:01different from what Claude normally produces but that's because this was a landing page. While it did
00:03:06improve the really small and subtle animations here the main animation style that looks good on landing
00:03:11pages are those scroll based animations and we've covered plenty of skills about that in previous
00:03:16videos. But the place where the skill really works well is in the small elements of the functional
00:03:21side of the apps. For example we were working on a site for a restaurant and we used animate skill to add
00:03:26animations on it and it added tiny animations that improved how using this site felt like adding animation
00:03:32on when we submit the form and the graphics popping up on hover. All of those details together made the
00:03:37site feel a lot more interactive and made the experience of using it better. And you can add as
00:03:42many of Emile's skills as you want because all of them would be a significant addition to your design
00:03:47toolkit. Now the next one we're going to talk about is Conard Lee's garden skill and this is also a
00:03:52collection rather than a single skill. There are five skills in it that cover things like video
00:03:57presentations and images but the most important one out of them is the web design engineer skill
00:04:02and this is because this skill actually contains instructions on how to design like a top tier design
00:04:07engineer. This skill is solely focused on making the visuals stunning, not functional. The way that this
00:04:12skill works is that it takes your requirement and works through them with you until it's clear on what you
00:04:17want and then it looks for real designs to work from. Its principle is that good design never starts
00:04:22from thin air, just like how every design out there is inspired by something that came before it. It
00:04:27also grounds itself with the designs that have worked previously. This skill also contains a set of
00:04:32references covering multiple design related areas. They cover how to judge a design, the ways designs usually go
00:04:38wrong and style recipes for well known sites like Apple and Linear so it can look at how those sites actually
00:04:44work while it builds yours. So once you've added it in Claude Design, you can use it by giving it a prompt
00:04:49describing what you want to build. The site we got out of it was a lot more interesting than what Claude Design
00:04:55puts out on its own. It was more thorough and better from a design perspective than the version Claude Design would have made by itself.
00:05:01And if you already have a design and then run the skill, it goes through that design and scores it in different areas.
00:05:08You can keep refining the design and running it again and again until it reaches a perfect score and matches
00:05:13the design you actually want. But before we explore other skills, it would be great if you subscribe to the channel
00:05:18and hit the hype button. This small gesture of support goes a long way for us.
00:05:22The 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.
00:05:30Everything 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
00:05:37everything on the page then follows and this includes colors, type and spacing.
00:05:41This skill is a specialized complete system for designing landing pages that are actually worth it.
00:05:46The 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.
00:05:53But a landing page has one job and that's getting people to actually take action.
00:05:57Models tend to generate home pages that work but they aren't specialized in designing landing pages the way this skill is.
00:06:03So 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.
00:06:12It 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.
00:06:22So once you've installed it in Claude's skills you run it with a prompt whenever you want a design.
00:06:27It also asks you questions first and once you've answered them it starts designing.
00:06:31The site it made came out feeling like a real brand and matched the exact vibe we were going for.
00:06:36And the way each element was structured made it much more likely that whoever entered the site would actually make a purchase.
00:06:43But first let's have a word by our sponsor.
00:06:45Make. You already know Make for Visual Automation but they just launched Maya.
00:06:49It's an AI co-worker that lives right inside the Make builder.
00:06:52Most AI builders hand you a black box and you just hope it works.
00:06:56Maya is different. You tell her what you want in plain English and she builds it right in front of you.
00:07:00So 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.
00:07:07Maya reasoned through the request, picked the right tools, mapped every module and wired the whole automation together on the canvas while we watched.
00:07:15You see every decision so you can jump in and adjust anything, anytime.
00:07:19Along the way you're not just getting an automation, you're learning how Make actually works.
00:07:23It's free to try in beta right now. The link is in the description.
00:07:26The next skills we're gonna talk about are by Meng To.
00:07:29He's actually a designer who's been in the industry for a long time and is known for his immersive scroll based storytelling designs.
00:07:36And he's taken everything he's found and packaged it into a system of design skills so that you can use it too.
00:07:41This contains a lot of skills in it covering different areas.
00:07:44All of them are focused on generating high quality designs that actually tell a story instead of just looking visually good.
00:07:51One of them is video to super prompt which works by taking a screen recording or walkthrough of a website and using tools on your machine to turn that recording into a prompt for your agent.
00:08:01But the skill we really want to talk about is awards quality sites.
00:08:05Awards is the site that holds competition for stunning design and the sites that win there are recognized to be the best designed sites on the web.
00:08:12This skill actually lists the principles and design details that awards level sites contain.
00:08:17And that matters because Claude doesn't build a design at that level on its own.
00:08:21So the skill puts those principles into the process and steers the direction of the design.
00:08:25And 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.
00:08:35Once you've added the award skill, you give it a prompt describing the site you want.
00:08:40And what comes back is a site that is structured and designed in the same way as the winning sites.
00:08:45There's a subtle animated background in there, but the thing that stood out was the scroll.
00:08:49It used that scroll based storytelling approach, just like the websites you see featured on awards.
00:08:54The next skill set is by Jakub Krehel.
00:08:57And 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.
00:09:05All 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.
00:09:13You can add any of those skills to Claude Design, but the one we use is the review skill.
00:09:18We use it because it comprehensively reviews all aspects of the design so we can iterate based on the score it gives.
00:09:24This 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.
00:09:31If 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.
00:09:40It 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.
00:09:48We also use a better layout skill because this is where Claude Design actually struggles.
00:09:52This one deals with the spacing, the positioning and how things line up across the design and it goes thorough with the design.
00:09:58For 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.
00:10:04So you just tell it to fix all its flags.
00:10:06It 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.
00:10:14The next skill on the list is Tastemaker.
00:10:16Its main purpose is avoiding the generic defaults that models produce and what sets it apart is how it does that.
00:10:22It works from the actual pixels of a real reference, so nothing gets lost turning a look into words first.
00:10:28When 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.
00:10:34But this skill actually uses scripts to extract the exact design details and saves them in a structured format that agents can use later on.
00:10:42This preserves the design details that would otherwise get lost in the text-based summary.
00:10:46It relies on scripts first to handle a lot of the things that can be done without the agent having to do them itself.
00:10:52For example, it pushed them in different directions and tried variations.
00:10:55The decisions it makes carry across the whole project rather than stopping at one screen.
00:10:59This skill actually gives models taste to design with so that they don't default to the same generic patterns.
00:11:05So once you've added it, you run it the same way with the slash command and a prompt.
00:11:09We gave it the site we wanted along with the style requirements from earlier and let it work through them.
00:11:14What 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.
00:11:22The last set is another of the popular collections and what sets these apart is that they're grounded in actual research,
00:11:28in the named laws that designers really work from with a separate skill for each one.
00:11:33Some of its skills cover why people leave your website halfway through and how behavior shows up as someone moves through the site.
00:11:39And you don't have to install all of it.
00:11:41You just install the skills that fit how you work.
00:11:44For our setup, we added two.
00:11:45The first is the screen critique, which takes a screen and reviews it across a lot of different angles,
00:11:50then tells you where that screen is going wrong and it's working from proper guidelines for judging design quality.
00:11:56The second is the perception laws, which basically contains instructions on how the human eye actually sees and comprehends the design itself.
00:12:03So 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,
00:12:09the type and the spacing and lists it all out so you can fix it.
00:12:12And once the perception laws are applied to the site, the whole thing feels more refined.
00:12:17Now those were the skills that are on GitHub for you all to use.
00:12:20But we use other skills that we have built and refined ourselves through testing and use them when we are actually building products.
00:12:26So if you want access to that, you can get that in AI Labs Pro, which is our community.
00:12:31These are the skills which include some skills we have built ourselves and some we use open source.
00:12:36So if you found value in what we do and want to support the channel, this is the best way to do it.
00:12:41The link's in description.
00:12:42That brings us to the end of this video.
00:12:44If 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:12:50As always, thank you for watching and I'll see you in the next one.