← Back to library

By Chase AI · 20:07 · transcript ok · added 2026-05-03 20:13 GMT+8

Transcript: Top 10 Claude Code Frontend Design Skills, Plugins, & CLIs

Watch video

Source video ID: Q9ty3eopOPs

Transcript

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