Use Claude Code DESIGNER Skill to 10x UI Designs

0:00I'm going to give you along with hundreds of other designers a really cool experiment. I want to see how far we can take AI design and this time is specific to Claude code to produce a hero section all on the same fictional business idea. So, currently there's an ongoing 30-day UI design challenge at designcourse.com. It's 100% free. We've already had one challenge and we've had over 200 submissions. And this is the second challenge. I'm going to show you how to use Claude Code and equip it with a special design skill in order to produce some really good designs. And the goal with this challenge is I'm

0:42going to give you all the same fictional business idea, but we're going to see how good your prompting skills are to create the best UI possible for this task. So, in a little bit, I'll show you exactly how you partake in this challenge today, no matter what time you're watching this. Could be months after this. You can always participate in this challenge to see what people are doing. But first, I'm going to show you how to set up everything you need. So, first, you're obviously going to need Claude Code. All right, so this is the page for setting it up. There's different environments. I'm not going to

1:12go through all of it. So, I'm just going to link the setup page. You can figure out how to install it if you haven't yet. And once it's ready, all you have to do is type in Claude and it should load up right here. Okay. Now, the next step is to make sure you equip it with a special skill. Now, a skill is just a set of instructions really that's fed into the context of the AI. And there's a bunch of different skills. So, before I show you the skill, this is how you install skills on your system. You have to find where your cloud code folder is

1:40based on the OS you're using and the environment that you're using. And then you're going to simply take this markdown file which is a skill and then place it into that folder. Now the particular skill I'm talking about is called front-end design right here. I will link it here in the description so that you can access it. Now what you want to do is click on skills frontend skills skill.md and then right here download raw file. All right. So once you have that skill file, you take it and you find your claude code folder in that URL that I just showed you. Now my folder here on Windows 11 happens to be

2:17crmpt users Gary andclude. Now inside of here, you may not have a skills folder. If not, create it. I already do. Double click it and then just create a folder called designer. And then inside of it, that's where you paste that skill file. Skill.md. Now, if you already have Claude running, make sure you close it first by hitting control C a few times. Type Claude again and then just type forward slashskills list all available skills. Right now, I just have three. We see right here front-end design. And the way you access this one is going to be slashfrontend

2:55design. Then you paste in your prompt. Now, let me show you this in action. So if I put forward/frontend designer designer hero section of a landing page for an AI identity verification service, it should have a light beige background with two columns, a strong headline and a copy on the left with a call to action. And on the right should be a fictional but simplistic UI animation that demonstrates the idea of identity identity verification. Sorry. Place this in an HTML file with CSS and include variables. That's all my prompt is. And this is what it ended up producing. So, I don't know about you, but this is

3:29actually really solid and it oneshotted this. And you saw the prompt. It's very small. So, I'm going to show you the challenge and the business idea of the prompt that I want you to use for the fictional business, and I want to see what you can produce. The idea is to augment it with your own design preferences. So, you can create something that's unique and even animated if you want. So the first step is to go to the designcourse.com foundations challenge. The link is below somewhere. And when you come here, you'll see this page right here. 613 students already in 197 submissions for

4:06the first challenge that we already had. This is for the second challenge. All you have to do is click here and you'll see get the 2026 UIUX Figma template. And in there is challenge number two. And that's what I want you to use. So, what that looks like is right here. This is challenge number two. And here are the instructions. This is part of the prompt that I want you to include. This is the fictional business idea. I don't want you using any other idea. I want us all to use the same idea. And that is an AI home inspection business. It uses computer vision to analyze crawl space,

4:40roof, foundation images for common defects and autogenerate standardized inspection reports. Our goal is to instruct the AI with this right here, this initial prompt in order to create a hero section that is next level with our Claude code designer skill. And over here are the instructions. All right, so use Claude code to generate a hero section for the fictional business idea featured to the right of this frame over here. So make sure you paste that in as a part of your prompt and then include the business idea, but also include your own design and styling preferences. So, that's kind of how I directed it to kind

5:15of create that little animated card that we just saw. You can use as many prompts as you want to refine the end result. You can integrate animation if you wish. And when you submit, first include the number of prompts that it took to get to the end result because I want you to refine the result if you want to. And also include the prompt itself in the

5:34comment where you can leave a comment. Now, you can also use CL the cloud code to Figma plugin to share a Figma prototype of the design in your submission, but you don't have to. Uh, a screenshot will work just fine. So, the cloud code to Figma plugin allows you to take your end result of your UI and then send it over to Figma. I'm not going to show you how to do it here because I literally just uploaded a video

5:58yesterday that shows you how to do that. Again, you don't have to do that. A screenshot would work just fine for your submission. Then when it comes to submitting your entry right here, it shows you how to do that. Let's say, for instance, if you you do decide to share a Figma document of what you're doing, which will allow me to make revisions if I do end up reviewing yours, then you just hit share over here, click copy prototype link, make sure anyone can view it, and then you submit that along with your submission. So, this is going to be a really cool challenge because we're going to see are the results going

6:30to be very similar? Well, they are. if you don't provide a lot of direction, your own creative interest in your stylings and how you infuse your creative ideas. And so if you do do that, I think we can see a lot of interesting variations and concepts that are produced. So again, specify the color scheme that you want. Specify any type of interesting illustrations or animations that you want. The goal is to try to maximize what AI can produce. All right, I hope to see everybody enter

7:01this one. This is a very cool challenge.