00:00This might be the best Claude code skill I've ever used

00:02And it all came from this viral post on X which teaches you how to install it in just a few minutes

00:09And in this video, I'm going to show you how to set up this skill and use it with Claude Code to create incredible UI designs in minutes

00:14If you don't know me, my name is Chris and for the last 15 years, I've been designing apps and advising startups on product and design

00:21With that said, let's jump straight into this Claude code skill and show you exactly how to use it

00:28>> [music] >> build

00:33>> So before we get started here, I just want to show you the tweets that I found this skill from

00:36And this is a tweet that has got over 235,000 views so far on X

00:40This is from a few days ago

00:43So this is a little bit old now if you're following stuff on X, but I wanted to show for everyone else who hasn't seen this how to use this Claude code skill to basically build incredible, beautiful UIs for your application

00:55And you can see here's basically the output for like for use this front-end design skill in claude code

01:01Create a music player app and it's designed it like this which kind of looks like something similar to maybe teenage engineering but it's a pretty high quality like level of design just from that one prompt

01:11And underneath here is basically the instructions to get started with this

01:14And I'll put them in the description of the video down below so that you can get started with these front-end skills in Claude Code

01:21What I'm going to do is I'm going to set up a very basic website that we can kind of see the standard AI design style in

01:29And then we're going to use the Claude Code front-end skill to redesign that page

01:33Maybe based on a reference or maybe just to kind of redesign it based on a bit of information that it would know about our website

01:39And so let's go over to cursor and start building this website

01:44So what I'm going to do is we've just got a new terminal open in cursor inside this Claude design skill project which I've created just to kind of demo this

01:52Let's run Claude in this project and let's just ask it to create a landing page for us

01:57So we're going to say let's create a simple landing page for an AI agency that builds and sells custom AI apps to businesses to save them time, automate processes and make them more money

02:07Research other AI agencies to create highquality copy that converts potential clients to book a call

02:13follows best practice for agency landing pages to maximize the number of call bookings that we would get

02:17Let's send that prompt to Claude Code so that it can get started building this inside of this project folder

02:23So, Claude Code has now built us this learning page here

02:28And what we're going to do is we're going to open this in the browser to see what this looks like

02:30This is what it looks like here

02:32So, um we're probably we've got a bunch of kind of like AI kind of style design

02:36We didn't give it any design prompt

02:39It actually isn't too bad overall

02:41Like it's not the purple gradients that you would usually see on like most AI design, but it is using purple

02:49It's kind of defaulted to that kind of bluey purple

02:51Um, as it kind of always does

02:53It looks fairly basic

02:55Like it's not too bad from a design point of view, but let's use this front-end skill to see if we can improve this design even further

03:02And what I'm going to do here first is just use the front-end skill and don't give it any context and just see what it comes back with

03:10So, first let's go back to the post and copy these commands over to claude code so that we can install this skill in claude code

03:16We're just going to paste this into our Claude code chat here basically to add this marketplace

03:23Um, so that's successfully added that marketplace

03:25And then we're going to go back again to this and then install this plugin

03:30This front-end design skill plugin basically

03:33Uh, so let's paste that in there

03:35So install now

03:35Create distinctive production grade front-end interfaces with high design quality generates creative polish code that avoids generic AI aesthetics

03:43Let's install that now

03:46So, we've now installed the front-end design skill and then all we have to do as per the kind of instructions in this post

03:52So, we just have to say as simple as use the front-end design skill to improve the design for this landing page

03:59So, let's go back to claw code and say that let's say use the front end design skill to improve the design of this landing page

04:14and let's see how well this front-end design skill kind of improves the design of the landing page without any guidance

04:20And then maybe after this we'll do another step just to see how well this front-end design skill actually uses a design reference to improve the design for this landing page as well

04:31Okay, so Claude Code has finished using the front-end design skill to redesign our entire landing page

04:37Let's actually see if it's done a good job

04:40So, here is our redesigned website and it looks pretty it looks pretty good

04:47It's pretty good here

04:49There are some things that I would change, but like this is way better than what it was before

04:52It's used like some really nice typography here

04:54It's added this kind of glow as you scroll down

04:57I think there was like animations

04:59These kind of fade in

05:01They have hover effects

05:03The padding is decent

05:03You have the glow on these kind of menu buttons

05:08The styling is consistent

05:08It's using black, white, and one color, which I love because that is a great place to start for any good design

05:15Black, white, and one color, and then add in another color palette on top of that if you want to

05:21This also aligns pretty well with this kind of target market of like AI kind of agencies and businesses who want to use AI to like build apps that can save them time and make them more money

05:36It's pretty I would say like there is some things that I would improve like to add a call to the the call to action

05:44This button here is not standing out on this black background

05:45So we need to make that into like this blue style on this background so that this is like a primary call to action above the fold

05:53We've got a great subheading here

05:53We also might want to add in like some social proof

05:57It's added this here

05:57But none of that is kind of like apart from the button styling is design styling

06:03We've got these called out

06:03I don't know what this kind of animation is in the bottom right here with this square

06:06That might be a little error

06:08It's done something there

06:10I really like this kind of You might not be able to see it on the video, but there's like a subtle grid kind of pattern behind these cards

06:18But this is giving, you can see it a bit more here

06:19There's like a subtle gray kind of grid in the background of this section, which is super nice

06:23This I am loving this design

06:26And this section is not so good

06:28Okay, so we've got some text laid out here

06:31not particularly great

06:33These need to be cards

06:33This kind of uh title and kind of alignment is off completely

06:38So, it hasn't done a perfect job in these sections

06:40But for this section here, for this contact form for the footer and for these top sections here with these kind of cards um in this grid layout, this is super nice

06:50We have some hover effects here

06:53We had the the fade in animations as well

06:56This is and this is just basically from using this claw code front-end skill asking it to use that to improve the design of your website

07:06And what you can do with this is then you can then use it to follow a screenshot

07:11Um so let's do that as well

07:13I'm going to go over to dribble um which is one of the kind of main places I go to for kind of UI design inspiration

07:21and let's say like AI website design and just find something like pretty nice that we can like take and copy here into our app

07:29So I don't want to go for anything that's like too um kind of AIish like we don't want these kind of purple gradients or like any of this stuff

07:37I want to do maybe something like this

07:42Let's use this um let's use this because this is kind of like quite a clean design style

07:47It's got a couple of colors in here

07:49uh slightly different typography

07:51I think it might be able to match this pretty well

07:53Let's go back to Claude Code and let's say let's use the front end design skill to improve the design of this landing page following the attached screenshot

08:11And then let's paste in the file here that we copied to our clipboard

08:13And then let's send that off to Claude Code to redesign this app based on that screenshot using the front-end design skill and see how well it does

08:22So now Claude Code has finished redesigning this website based on the screenshot that I gave it

08:28It said that it's gone from this brutalist version to a soft modern version

08:33And here are the differences

08:34So black, white, and cyan has gone to soft gradients and pastels

08:38Soft shadows with blur instead of harsh shadows, sharp edges to rounded everything

08:42uh monospace fonts to modern sand serif which has chosen outfit which is interesting

08:48Geometric icons to emoji icons which it kind of seems to fall back to

08:52I think it was still using emojis in this brutalist version

08:56Terminal aesthetic to a premium SAS feel data streams and grids to a floating gradient blobs and hard transitions to smooth animations

09:03So let's see what this actually looks like

09:06We go back to our reference here

09:09This is the reference that we gave Claude code to work from

09:13This is the previous version of the website

09:16So let's refresh this website now and see how the design has improved or changed

09:23So this is now the current website which is pretty it's got like it's even got this kind of like soft scroll

09:29This is looking really good

09:32Like again, there's still some things I would change here, but there's some great hovers with soft that really soft shadow on there

09:40The underline animation on these is so good

09:46Um, but strategy call get started for free

09:48I actually still don't really I don't really like the emojis on here, but this is looking pretty good

09:52Um, these are kind of breaking

09:55Um, so that formatting is not quite right and maybe the icons aren't showing there correctly

10:02This is pretty good

10:02This this this section is pretty good

10:08And this section styling is still kind of messed up, but this really soft kind of pastel gradient background is super nice

10:14I really really like that

10:14There's some issues here with the text over this, but to be honest, like this this version of the website, this is better than 99% of or this is better than a very large percentage of designs that you're going to get from other AI tools without using this front-end skill

10:31And so, you can see just in this short video kind of me demoing this front-end skill here, even just by providing a simple screenshot

10:40If you wanted to do this a little bit further, you could create a design system similar to what I've kind of gone through that process in another video with cursor of how you can create a design system in your codebase and then use that in your designs

10:50You could create a design system kind of framework and then use claude code using the front-end skill to design your website following that framework and that would probably yield even better results than this

11:02But for now, this is incredible and this is already so much better than the generic kind of AI design

11:06It's still gone back to purple a little bit

11:11I won't lie there though

11:11But that is how you can get up and running with this Claude code skill in just a few minutes just installing that plugin and then use the skill to actually create beautiful incredible design for your app and website user interfaces

11:25So, I think this not only shows the power of this specific skill in Claude Code, but also it shows the power of Claude skills just in general

11:35The ability to create your own custom skills that do a specific task incredibly well would just allow you to unlock even more potential from Claude Code as you're building your app

11:47And this means that you can take your app designs to a level of quality that is nearly professional and just looks incredible and so much better than all of the purple gradients that you get everywhere else

11:56So if you are using claw code, I would highly recommend installing this front-end skill and then using it to design your app as you build

12:05And if you are building an app with AI and you want to join a community of other people building apps too, then you can head over to school.com/iapps

12:13There's courses there on how to build and launch your app, scale it to real paying customers, build AI agents, mobile apps

12:18So, I'd love for you to check it out

12:19If you enjoyed the video, don't forget to like and subscribe

12:21Is a massive help to the channel and I hugely appreciate it

12:25Thank you for watching and see you next time

12:26[music]