0:00There's a monster inside of Claude Code
0:02and it's called AI slop. Purple gradients,
0:05interfont for everything.
0:06And the same card setup on every single website.
0:10You know that kind of AI slap I'm talking about?
0:12But today
0:13I'm gonna give you 10 different tools to help you slay this beast.
0:16And no, none of them are the front end design skill.
0:19In fact, a lot of these tools are relatively new.
0:22So even if you've been in the cloud code design space for some time,
0:26I promise you're gonna learn something today.
0:28Now all these tools we're gonna go over today
0:30serve essentially the same purpose
0:31and that's to give you a fighting chance to create high quality
0:35front end web design with cloud code.
0:37Because as good as cloud code is,
0:39that is one area it is extremely deficient.
0:42And the first tool on the list is impeccable.
0:44This is a single skill that includes 18 commands.
0:46And I will link this in the description
0:49as well as every other tool we will cover today.
0:51Now I really like impeccable
0:52because what it's able to do is extremely wide ranging.
0:55It's one skill, but it's 18 commands.
0:58And if we follow the link on the Github to impeccable dot style,
1:01we can see all of their commands in action.
1:04And better yet, we can see generic AI output.
1:07Hey intricate purple gradients
1:10and sort of the after image using the different commands.
1:14So for example we have something Like clarify,
1:16which is all about UX errors and error messages.
1:19And you can see the difference between the two here.
1:22Also has a Chrome extension
1:23which will highlight the
1:25sort of AI slop aesthetics directly on your webpage,
1:28like in this example.
1:29And I really like how this skill uses anti pattern,
1:32so it essentially teaches large language models
1:34what AI slop actually looks like.
1:37These border accents,
1:38these side tab accent borders that you see everywhere,
1:42you know, spark lines,
1:43glass morphism, I.
1:45We just see these things again and again and again and again.
1:47So why don't we use a skill that tells LMS this is AI slope verbatim,
1:52instead of using something like the front and design skill,
1:54which is like, just don't do AI slope, please.
1:56Like, that doesn't work.
1:57And as you can imagine, this skill is pretty dense,
2:00as we see here, and I continue to scroll.
2:03That's because it has several references for each specific
2:06sort of design domain. You can almost think of those as sub skills.
2:10And the aforementioned 18 different commands.
2:14Now, the easiest way to see all these commands in action
2:16is actually just to go to the impeccable docks.
2:19And just like you saw on the hero page,
2:21you can see the examples of the before versus the after.
2:25And so visually
2:26seeing what all these things can do
2:27is way better than kind of just looking at the description
2:30and hoping Claude Code uses what you Expect it to use.
2:33And it isn't even just a purely visual thing.
2:35When you look at skills like adapt,
2:37it makes sure it actually works across different platforms
2:40like mobile and tablet versus just desktop only.
2:43So highly suggest you check this one out.
2:45It's only been out for about a month now.
2:46Before we go into tool number two,
2:48just a quick plug for my Claude Code Master class,
2:50which I just released last month
2:52and have already put out a ton of updates.
2:54It is the number one place to go from zero to AI dev.
2:57And the price of this is increasing in just a few days,
3:01so if you want to get your hands on this,
3:03make sure to check it out.
3:04There's a link in the PIN comment.
3:05Now let's talk about tool number two,
3:06which is skill you. Why now?
3:08This is a tool I just found out about this morning.
3:12It's. It hasn't even been up for 24 hours.
3:14It's got seven stars. We are on the ground floor.
3:16I didn't make this. I don't know this guy.
3:18I just happened to see him post about it on Twitter.
3:21I was just like doom scrolling.
3:22I saw. So this looks like a cool skill,
3:24and it allows us to reverse engineer any design system into a claw
3:28ready skill. What does that mean?
3:30That means we take this skill,
3:31we point it at some sort of website that already exists,
3:34and it Essentially analyzes how that website was built
3:38and turns that into a template,
3:40into a skill, essentially.
3:43Let me show it in action. So right here we have the stripe website.
3:47Pretty cool website. A lot going on.
3:48Obviously, it has a lot of custom graphics and things like that.
3:52It is impossible for Claude Code
3:54without a lot of these graphics and visuals
3:56to necessarily recreate it. Yet,
3:59let's say I like the general design,
4:01just kind of how it's set up in terms of cards and layouts.
4:03And I wanted to use this as a foundation for my own website.
4:06Well, we've talked about in past videos ways we can do that.
4:08Like, we look at the HTML,
4:09all these things, but,
4:11you know, it ends up being like a 60,
4:1270% solution. So I took that skill
4:14you I skill. I pointed it at stripe,
4:16and then I said, hey,
4:17make me a fake stripe website in that sort of style.
4:21And this is what it came up with as a one shot.
4:24That's all I told it, I didn't give it any more information,
4:26and it created this. And so it kind of has like,
4:29definitely a stripe vibe to it. Again,
4:32like, these are custom graphics on stripe.
4:34Is not gonna be able to recreate that just off a prompt.
4:36But, you know,
4:39pretty good actually, if you ask me.
4:42Like, you know,
4:44it still has some, you know,
4:46standard AI stuff there, kind of Like how stuff is set up in the icons,
4:50but it didn't just do like a 2 by 2 bento,
4:53you know, box with the cards.
4:55I do like the colors it used,
4:56I like sort of the graphic it.
4:58But here, like this is honestly really good for me.
5:02Just saying. Hey,
5:02look at Strike's website, build me a foundation.
5:04And since it turned it into a skill,
5:06I now have a stripe design skill,
5:09which is just on the project level,
5:10but I could bring that up at any time.
5:12So let's say I wanted to make another website
5:14that also used the stripe style.
5:16I can do that, but I can point skill UI at anything.
5:18And you can see it in action
5:20in the example video he has here on the Github
5:22where he pointed this tool at notion
5:24and they told Claude Code,
5:25make me essentially a notion clone,
5:27and that's what you see right there.
5:29So to use this skill,
5:30you just follow the install commands here on the Github page.
5:33And it has two different modes.
5:35So if you want something that essentially takes everything like scroll,
5:39screenshots, and different interactions when your mouse goes over stuff,
5:43it uses playwright to figure all that out.
5:46So it isn't just looking at the HTML like normal stuff does.
5:49something like my custom site breakdown skill has done in the past.
5:53So if you use ultramode it actually brings in playright?
5:55So there is A certain level of sophistication here.
5:57So all in all, really clever skill.
5:58You're on the ground floor.
5:59If you start using this,
6:00you're now like a hipster git hub repo skill user.
6:03And I would highly suggest you do this.
6:05If you're starting a new website and you have no idea how,
6:08you should kind of, like,
6:09start it at the ground floor,
6:10because again, this is a great starting point.
6:11I can edit anything I want from here now.
6:13Tool No. 3 is one that I will be honest,
6:15is a little outside of my wheelhouse,
6:17but I find it super interesting.
6:19I'm trying to learn more about it and use it myself.
6:21And that is a web GPU skill.
6:23So webgpus are essentially like web design components
6:27where the webpage is interacting with your graphics card.
6:30And this allows us to create super cool animations like you see here.
6:35I like. This stuff is wild.
6:36When we talk about.
6:37If you watch my 7 levels of Claude code web design and you.
6:41We looked at stuff like the igloo website on level 7,
6:44they were using things like Webgl and custom shaders.
6:47Like, this is the sort of realm I'm talking about.
6:49And so this skill teaches Claude Code how to essentially
6:53write code that does that.
6:55So it tells it how to set up the renderer,
6:57how to do shaders, how to create the node based material.
6:59And by using the skill I just gave it,
7:01A couple text prompts,
7:03and it was able to create this.
7:06Now, is this as cool as,
7:07you know, this one?
7:08No, but I.
7:09I did it in two minutes after. Well,
7:11actually took it like 10 minutes with the GPU,
7:13but a couple text problems,
7:14and I had no idea what I was doing.
7:16So if this sort of stuff interests you,
7:18and out of all the tools I talk about here,
7:20this is the one that's the most,
7:21you know, probably out there,
7:22but I. I liked it.
7:24If this stuff interests you,
7:26this is a skill you should check out,
7:27because it kind of moves you in that direction.
7:29But obviously, this is something that is much more advanced
7:31than just changing what our cards look like
7:33or changing the typography of a website.
7:35But something to keep in mind.
7:37Now, tool No. 4 is one of the hottest AI repos over the last month.
7:41And that is awesome design dot MD.
7:43This is at over 50,000 stars at this point,
7:46so it's been absolutely ripping.
7:48And this is similar
7:49in some respect to the Skill UI tool we talked about,
7:52because it's a skill that allows us to look at other websites
7:55that already exist and use them as somewhat of a template
7:59for a website we're gonna build.
8:01Now, awesome design is heavily influenced by stitched.
8:04And we will talk about stitch a little bit later.
8:06And stitch has this concept of design dot empty Design markdown files.
8:11And they're just prompts describing how you should build your website.
8:14The difference is Google did a very good job of creating these prompts
8:18like you see here. And it gets very,
8:19very specific about what the overview is.
8:22What's the North Star? How are we doing colors?
8:24It just adds great structure
8:26instead of, again,
8:27something like the front end design skill from Cloud Code,
8:29which is kind of like, ah,
8:30let's kind of just do stuff in this.
8:31This way, this is much more concrete about what it needs to do.
8:34And so
8:35it has taken that idea of these very specific design system prompts
8:39and essentially created them for a bunch of different websites
8:43across a bunch of different domains.
8:44So something like 11 Labs.
8:48I click on that here,
8:50I can see essentially the entire 11 Labs design idea ripped apart.
8:56Form elements, card examples,
8:58buttons, headings,
9:00typography, colors,
9:01all that. And it's not just that live preview we see,
9:04it's the actual prompt that we can then feed to Claude Code.
9:07And again, they have a ton of websites here, including, like,
9:10non text stuff. Things like Bugatti.
9:12Right. Like,
9:13you know, it's essentially,
9:15this is giving you the building blocks of some website you like,
9:17so you can build your own using those same building blocks.
9:21So while the Skill UI tool we saw earlier
9:23kind of just looks at any website you want
9:25and then builds it for you,
9:26this Is just kind of breaking out the component parts,
9:29and then it's up to us to build it ourselves.
9:31Now, after hyping up awesome design,
9:33it's only fair that for tool number five,
9:35we talk about the application that actually inspired it,
9:38and that is stitch itself from Google.
9:40So stitch is awesome if you wanna start from a visual approach
9:44before you actually go out there and begin building your webpage.
9:48So what you do is you go into stitch
9:49and you just give it a prompt for what you're trying to build.
9:51This can include screenshots of inspiration.
9:53What it's going to do is
9:54it's going to create that same sort of design MD file you saw earlier,
9:58but it's natural habitat. So it gives us a breakdown of the colors,
10:02the sort of typography, the labels,
10:04the buttons. And then we can see over here the entire design system.
10:09The same sort of design MD you saw before,
10:11but now it's customized for whatever you prompted it.
10:13And once it does that, it then gives you a bunch of variations
10:16of the type of website you're going to create.
10:18It's not just the hero section,
10:20it does it all. And once it creates that mockup,
10:22I can edit it however I wish.
10:24I can click on it, I can go to right click.
10:26I can get specific variants,
10:28I can customize the different variants.
10:30I can change it from. I want three variants,
10:32five variants. I can Give it a creative range,
10:34instructions, etc, etc.
10:35I basically have a ton of different ways to spin up a bunch of visuals
10:40of my potential website. And this is great
10:42because it is tough when you're inside of Claude Code.
10:44And every time you want to do a visual change, right?
10:46Needs to write the code, you need to spin up Dev Server,
10:49you need to check it on the webpage.
10:50And often times when we're doing these things,
10:52especially from a front and design,
10:55you know, angle,
10:56I wanna see the options in front of me. Right?
10:58It's a lot easier for me to see all three of these and say, alright,
11:01I hate this, I hate this,
11:02maybe I like this. Versus like, alright,
11:05no code, try again.
11:06Nope, try again.
11:08So this is also free, which is great.
11:11And whatever I build here,
11:13it's really easy to transfer to Claude Code
11:15because if I just click on the one I like,
11:17I go to more. I can view the code,
11:19I can then copy the code and then bring it into Claude Code.
11:23And you can even do stuff like a copy it to Figma.
11:25You can bring it into AI Studio as well.
11:27But the easiest path to Claude Code is just to export
11:30and then copy to clipboard.
11:31There is an MCP,
11:32so you can do all of this through the Claude code terminal.
11:35But to be honest, I don't really Understand what it really buys you.
11:39I. I feel like being hands on in this visual senses is kind of worth it.
11:43Now I actually have a full deep dive on stitch and Claude Code
11:46and I'll link that above if you want to see more of this in action.
11:49Now I debated putting skill No.
11:516 in this video because I feel like it's getting so ubiquitous.
11:53Pretty much everyone knows it exists,
11:55but you never know. Might be someone's first time seeing it.
11:57And that is the UI UX Pro MAX skill.
12:00This is, I think
12:02the spiritual successor
12:03or what the anthropic front end design skill should be.
12:07So imagine a anthropic front end design skill
12:10that is actually trained on different sorts of,
12:14you know, conventions for different sorts of websites
12:17in different sorts of domains.
12:19Because not every website needs to look like some sass.
12:22Like some B tier sass. And that's what this skill is all about.
12:25It's an intelligent design system generator.
12:27So it's actually gonna ask you questions.
12:29It's gonna figure out what your website is about,
12:31what your service is about,
12:32and then design it based on its function.
12:35So it has 161 industry specific reasoning rules.
12:39So they really built this thing out.
12:43You are not gonna get the sort of generic AI slop with no skill.
12:46And you're not gonna get
12:47what is slowly becoming the Claud code version of AI slop
12:51with the front end design skill.
12:52It's Also built out with a bunch of stack specific guidance
12:55so you aren't pushed into just something like react.
12:59And ultimately,
12:59it's a great skill if you kind of just have no idea where you wanna go.
13:04A lot of the stuff we've talked about already
13:05requires you to have some sense of what you want either.
13:10Well, especially if you have an example website.
13:12Right when we saw Skill UI,
13:14if I have an example, I can pretty much copy it.
13:17And same thing with awesome design.
13:19Like I'm choosing from these websites that exist.
13:21If you don't want to go that route,
13:22but you still are kind of confused about where you should be,
13:25use this skill. Great starting point.
13:28Now, tool No. 7 is all about components
13:31and really nailing the details of our webpage.
13:34And that is where we bring in 21st dot dev,
13:36which is a website with a million different components
13:39for us to choose from and directly integrate into our website.
13:42So, for example,
13:43let's say I was trying to figure out something for our hero page.
13:46Well, I just go to the heroes section on 21st dot dev
13:50and I search for one I like.
13:52Let's say I like this one,
13:53this hero page that uses spline,
13:56so it has this robot that actually follows my mouse.
14:00Well, instead of figuring out how to use spline and write up that code,
14:04I just go into 21st dot dev,
14:06I copy the prompt, By clicking the copy prompt button up there,
14:09I go to Claude Code and I paste it in. Boom!
14:13I will have this as my hero section.
14:14Now, obviously,
14:15hero sections are probably the heaviest thing
14:17we could possibly import into our webpage,
14:19because if we have a hero page with a robot looking all over the place,
14:23our whole website kind of has to fit that aesthetic.
14:24So luckily,
14:25I think you get the most value out of something like 21st dot dev
14:29when it comes to the smaller components and the small
14:31little flourishes like buttons.
14:33Right? Just the fact that this button has this little light on it
14:36when I move it around versus your standard button
14:38is something that will make your website look better.
14:41Or cards that have this, you know,
14:43sort of lighting animation that follows my mouse or anything like that.
14:46Again, it's these little minor details,
14:48these glowing shadows,
14:49these are the sort of thing that elevates your webpage,
14:52makes it look more premium and just makes it look like you cared, haha.
14:56And you actually tried. And if nothing else,
14:59what this should do is it should just give you inspiration.
15:03Because there's nothing that says you can't copy a prompt
15:05for any of these components,
15:07whether it's borders or heroes or whatever,
15:09and then tweak it to your heart's desire.
15:11With Claude Code, it's not an all or nothing thing.
15:14And I think,
15:15especially for those of us who don't Come from a web design background.
15:17I certainly don't. You know,
15:19you just don't know what you don't know.
15:21And being exposed to all these different ways
15:23that we can create a button
15:25kind of get your mind moving in different directions.
15:27And it helps you, over time,
15:29the more you're exposed to it,
15:30to kind of develop your own taste and figure out what you like.
15:33But until you see these things,
15:35you just don't even know what you like.
15:36All you've seen is what is what Claude Code gives you.
15:39So highly suggest you check this out.
15:41Virtually all these things are free,
15:43and you should be integrating at least some of the smaller things,
15:46like some of the ways they do with buttons and cards,
15:48in your next webpage. Now,
15:49the phrase you keep hearing over and over and over these days is,
15:52AI has no taste. Well,
15:54what if we gave it taste as a skill?
15:56Well, that's what we attempt to do with tool No. 8.
15:59And that is the taste skill repo.
16:01And this is a collection of skills that tries
16:05or attempts to give Claude Code some measure of taste,
16:08aka moving away from the AI swap stuff,
16:11which is the theme you see over and over and over again.
16:13Now, this taste skill includes a number of different sub skills,
16:16like you see here. And it has different settings,
16:18so you can kind of adjust how,
16:20you know, abstract it gets versus A normal AI generation.
16:24And what you see here is an example
16:26of some of the websites that have been created using this skill.
16:31And right away you notice it's a little bit different,
16:34right? I mean,
16:35it's not mind blowing, but right away different.
16:37And different is good. The.
16:38The less it looks like every single sass template,
16:41the better. And a lot of these include things like scroll animations.
16:44And, you know,
16:46we're not seeing bento boxes over and over.
16:48So this is a cool sort of skill,
16:51like, on the margins,
16:52that you might want to at least try out
16:53and see how it does in comparison to your normal codeword generations.
16:57Now, tool No. 9 will seem very simple to a lot of you,
16:59but you would be blown away by the amount of people who do not know
17:03that Google Fonts exists. Google Fonts is a giant
17:07free repository of a trillion different fonts
17:11that you can use in literally all of your coding projects.
17:14You do not need to be a slave to enter
17:16or whatever five fonts that Claude Code uses for everything.
17:20You can just go on Google fonts,
17:22and it is broken down by appearance,
17:24by feeling,
17:26you know, by family and tell.
17:28Clock code, use this,
17:29use that. Clock code has access to all these as well,
17:32because typography is a huge,
17:34huge part of how your design looks and feels.
17:38Furthermore,
17:38you can use Cloud Code to help you Search through Google Font.
17:42So simply tell Cloud Code the type of website you're building,
17:45the type of feeling you're going for,
17:47and it should give you an example or five sort of fonts.
17:50Look at. You can actually see it in real time here. Again,
17:53you don't want to just leave everything up to chance.
17:56And just depends on how Claudia feels that day
17:59as to what font it's going to give you,
18:00because it's going to feel like enter.
18:02It's always enter. Always.
18:04And last but not least, tool No. 10,
18:06Playright CLI. Now,
18:07Playright CLI is not a design tool per se,
18:10although it's something we've already talked about in the past
18:12with Skill UI
18:13and its ability to go out there and take screenshots of web pages
18:15so you can use it as sort of a research ideation tool.
18:19What I really want to focus on, though,
18:21is the idea of form and function,
18:23and that when we build things on the front end.
18:25Think of something as simple as a form submission page,
18:27we are going to have to test it.
18:29We're gonna have to make sure these things actually work.
18:32And the easiest way to do that at scale is play right CLI,
18:35not play right MCP CLI is way more effective.
18:38And the way we do that is once you create your front end design stuff,
18:41all you have to do once you install the CLI tool is tell Claude Code,
18:44I want You to test every single interaction on this webpage
18:48using Playwright CLI.
18:49It will create a bunch of different Chrome instances.
18:52You can have it beheaded if you actually want to see them,
18:55or headless so it's invisible.
18:56And it will test it all on its own.
18:58So this makes the whole front end design process go way quicker.
19:01Because I think we've all been there where we added something,
19:04then we wanted to see it and then we want to test it
19:06and just takes forever. Especially things like form submissions
19:08where there's tons of edge cases
19:10with how some weirdo users is gonna go in there
19:13and actually put in their information.
19:15So those are my 10 favourite cloud code design related skills.
19:20Plugins and CLI's. I hope at least a few of those were new to you.
19:24I mean skill you. I better be.
19:25Like three people know about this thing.
19:28So uh. But yeah, the.
19:30The front and design space
19:31I just find super interesting with Claude Code
19:33because it's so bad at it.
19:35From like a taste point of view.
19:37Although I hate saying even the word taste these days
19:39because it's all anyone talks about.
19:40But because cloud code is bad at that,
19:43that should be kind of a good thing for you,
19:45the individual, right?
19:46Because that is a space now
19:48where you can differentiate yourself from the pack.
19:51And anytime you can differentiate yourself from everybody else.
19:54Who's hopping onto Claude Code?
19:55These days, that's a good thing.
19:57And these skills and tools can help you do that.
19:59So, as always,
20:00let me know what you thought.
20:01Make sure to check out Chase AI plus
20:03if you want to get your hands on the Master Class.
20:05And I'll see you around.