YT YouTube2Text

YouTube2Text → Transcripts → Insane Claude Design Skills You Need To Actually Build Beautiful Sites

Insane Claude Design Skills You Need To Actually Build Beautiful Sites — Transcript

by AI LABS · 2,841 words · 410 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

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

About this transcript

This page contains the full transcript of Insane Claude Design Skills You Need To Actually Build Beautiful Sites by AI LABS, generated from the public captions YouTube serves with the video. The transcript has 2,841 words across 410 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.