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