Claude Design Skills: Build Polished UIs in 5 Minutes

Okay, super quick video here. I'm going

to show you how to level up your design with Claw Code. This is something you'd expect potentially of a production grade habit tracker and we've done it in two prompts. As you can see, we got quite a

prompts. As you can see, we got quite a basic design here. I'm going to show you how to install Claude Code skills, specifically the design skill. I'll show

you how to install that here through GitHub and then I'll show you how to use it. It's very simple and you can get

it. It's very simple and you can get incredible results. So, the first thing

incredible results. So, the first thing you're going to want to do is come to claw code, run Claude. As you can see, we've got running here. And we're going to forward slash into plugin plugins marketplace. And here you're going to

marketplace. And here you're going to want to click add marketplace. And then,

as you can see, it's asking for a link, GitHub link or some other sources. So,

if you come to this repo here, I'll include a link to this github.com/anthropic/skills.

github.com/anthropic/skills.

And then you're going to paste that in there, and it will install those skills.

If you just click example skills and it will just this is all we need and it's basically like the demo of skills. So

we'll install that now. And here it says restart claw code to load new plugins.

So we'll exit out of that and then we'll run claude again. And then if you go back to plugins and click browse and install plugins, you can come here and

install the example skills. So that will install all the ones we just did. And

then if you ask it to check if we've got the front-end design skill, you could say, "Hello, do you have the front end design skill?" And basically what this

design skill?" And basically what this is, it's like a power up, the two clawed code. It's like a special ability if you

code. It's like a special ability if you like. So here it says it has access to

like. So here it says it has access to the front-end design skill and we've got a few different versions. And here you see we've got the example skills, front end design. So we've got a couple of

end design. So we've got a couple of them there, but that's fine. Don't worry

if yours does not look like that. So as

you can see, we've got our dashboard here. here. And if I click sign out,

here. here. And if I click sign out, then we've got a landing very basic landing page. So, let's give them both a

landing page. So, let's give them both a makeover. Don't worry, it's not going to

makeover. Don't worry, it's not going to take long. Okay, great. So, if we go

take long. Okay, great. So, if we go into our dashboard here, and then I'm going to say, can you do an overhaul?

And I'll zoom in here. Can you do an overhaul of our dashboard using the front-end design skill? Give me some options of the vibe to go for. And what

we're going to get back here hopefully is a few different options, and it will ask me what direction I want to take the design in. So, we're still a bit

design in. So, we're still a bit involved in the process here. And if

you're feeling lazy, you can just go straight into it without any options and it will do a great job. And basically

how this works is it gives Claude a bunch of instructions about different design principles with spacing, with fonts, with motion design, which will then inject into your design process and

really level up. And I've seen some incredible results on this. So it's

given us a few options here. What have

we got? We got dark mode, minimal, warm and organic, bold and playful, neo brutalist. Let's go for dark mode

brutalist. Let's go for dark mode minimal. Why not? It's nighttime. So,

minimal. Why not? It's nighttime. So,

we'll punch that in and then let it get to work. And as you can see, it's saying

to work. And as you can see, it's saying the front end design skill is running, which is telling us that it's in communication with those extra resources, those extra instructions to

level up your design. So, now we'll wait and let Lord cook. So, I'll start implementing the dark mode minimal redesign. Let me begin with the global

redesign. Let me begin with the global CSS. And again, there's a bunch of

CSS. And again, there's a bunch of different paths we can do here to level up your design. We can use external tools like Gemini 3 or V0 and then create components, bring them back in.

We can install Shadien and use different tweak themes. But as of the 27th of

tweak themes. But as of the 27th of November, this is the easiest and arguably the best way to level up your designs, especially to go from maybe a basic Convex Chef or starter app

template to actually getting something that looks money. Okay, so as you can see here, it has completely transformed this dashboard. The main layout is still

this dashboard. The main layout is still similar, but you can see we got much more of a modern theme. And if we go back to our landing page again, it's applied this dark theme. But as you can

see, it's kept the layout pretty similar. So we can ask it a follow-up

similar. So we can ask it a follow-up prompt to say, can you please using design skills improve the layout of the dashboard and the landing page? And it's

always important to actually ask it and specify to use the skill otherwise it may not do it. And by the way, we are using Opus 4.5 here. It's their new model that dropped this week as of

recording. Super strong model and works

recording. Super strong model and works very well with the front- end design skill. Okay, so with that follow-up

skill. Okay, so with that follow-up prompt, we've already done some cooking here. The first prompt just added a new

here. The first prompt just added a new color scheme. Didn't do much, but this

color scheme. Didn't do much, but this second prompt has completely changed it.

So by asking it to change the layout, we've got a really nice hero here with some nice custom components here with a nice animation. The form field for the

nice animation. The form field for the convex login is still a bit funky. So we

can obviously ask it to fix that up.

We've got a nice bento grid here again with our sign in. So let's go to the dashboard again. This did this all

dashboard again. This did this all within the follow-up prompt. Super nice

dashboard here. As you can see, simple but clean at the same time. And to be honest, it's quite hard to actually design dashboards, especially with empty states. Let's see here. We'll add this

states. Let's see here. We'll add this habit. Create habit. Come and tick that.

habit. Create habit. Come and tick that.

And then come back to dashboard. Look at

that. This is something you'd expect potentially of a production grade habit tracker. And we've done it in two

tracker. And we've done it in two prompts. Imagine what you can do with an

prompts. Imagine what you can do with an hour or two of prompting with this design skill. Maybe with some reference

design skill. Maybe with some reference images as well, cuz obviously you can paste screenshots into claw code and get that to replicate or be inspired by different designs. So yeah, hopefully

different designs. So yeah, hopefully that's shown you how to level up your apps. And it's a welltimed video because

apps. And it's a welltimed video because front end skills is super powerful. And

to be honest, it's been slept on. Not

many people are using it. I think Claude is going to keep pushing the plugins.

So, get ahead while you can get your edge and get your apps looking super strong as you can see here. And yeah,

there you have it. All the best. Enjoy.