00:00:00I'm going to give you, along with hundreds of other designers, a really cool experiment.
00:00:06I want to see how far we can take AI design, and this time it's specific to Claude Code,
00:00:13to produce a hero section all on the same fictional business idea.
00:00:19So currently there's an ongoing 30-day UI design challenge at designcourse.com.
00:00:24It's 100% free.
00:00:25We've already had one challenge, and we've had over 200 submissions, and this is the
00:00:30second challenge.
00:00:31I'm going to show you how to use Claude Code and equip it with a special design skill in
00:00:37order to produce some really good designs.
00:00:40And the goal with this challenge is I'm going to give you all the same fictional business
00:00:44idea, but we're going to see how good your prompting skills are to create the best UI
00:00:50possible for this task.
00:00:52So in a little bit, I'll show you exactly how you partake in this challenge today.
00:00:56No matter what time you're watching this, it could be months after this.
00:00:58You can always participate in this challenge to see what people are doing.
00:01:01But first, I'm going to show you how to set up everything you need.
00:01:04So first, you're obviously going to need Claude Code, all right?
00:01:07So this is the page for setting it up.
00:01:10There's different environments.
00:01:11I'm not going to go through all of it, so I'm just going to link the setup page.
00:01:15You can figure out how to install it if you haven't yet.
00:01:17And once it's ready, all you have to do is type in Claude and it should load up right
00:01:22here.
00:01:23Okay.
00:01:24Now the next step is to make sure you equip it with a special skill.
00:01:26Now a skill is just a set of instructions, really, that's fed into the context of the
00:01:30AI.
00:01:31And there's a bunch of different skills.
00:01:32So before I show you the skill, this is how you install skills on your system.
00:01:37You have to find where your Claude Code folder is based on the OS you're using and the environment
00:01:43that you're using.
00:01:44And then you're going to simply take this markdown file, which is a skill, and then place it into
00:01:49that folder.
00:01:50Now the particular skill I'm talking about is called Front End Design, right here.
00:01:55I will link it here in the description so that you can access it.
00:01:58Now what you want to do is click on Skills, Front End Skills, Skill.md, and then right
00:02:03here, Download Raw File, all right?
00:02:06So once you have that skill file, you take it and you find your Claude Code folder in
00:02:12that URL that I just showed you.
00:02:14Now my folder here on Windows 11 happens to be C prompt, Users, Gary, and .claud.
00:02:21Now inside of here, you may not have a skills folder.
00:02:24If not, create it.
00:02:25I already do.
00:02:26Double click it, and then just create a folder called Designer.
00:02:31And then inside of it, that's where you paste that skill file, Skill.md.
00:02:35Now if you already have Claude running, make sure you close it first by hitting Control
00:02:39C a few times.
00:02:41Type Claude again, and then just type /skills, list all available skills.
00:02:47Right now I just have three.
00:02:48We see right here, Front End Design.
00:02:51And the way you access this one is going to be /frontend-design.
00:02:56Then you paste in your prompt.
00:02:58Now let me show you this in action.
00:03:00So if I put /frontenddesigner, Designer Hero section of a landing page for an AI identity
00:03:06verification service.
00:03:07It should have a light beige background with two columns, a strong headline, and a copy
00:03:11on the left with a call to action.
00:03:13And on the right should be a fictional but simplistic UI animation that demonstrates the
00:03:16idea of identity, identity verification, sorry.
00:03:20Place this in an HTML file with CSS and include variables.
00:03:23That's all my prompt is, and this is what it end up producing.
00:03:28I don't know about you, but this is actually really solid, and it one-shotted this.
00:03:33And you saw the prompt.
00:03:35It's very small.
00:03:36So I'm going to show you the challenge and the business idea of the prompt that I want
00:03:41you to use for the fictional business, and I want to see what you can produce.
00:03:46The idea is to augment it with your own design preferences so you can create something that's
00:03:51unique and even animated if you want.
00:03:53So the first step is to go to the designcourse.com/foundations challenge.
00:03:58The link is below somewhere.
00:04:00And when you come here, you'll see this page right here, 613 students already and 197 submissions
00:04:06for the first challenge that we already had.
00:04:08This is for the second challenge.
00:04:09All you have to do is click here, and you'll see, get the 2026 UI/UX Figma template.
00:04:16And in there is challenge number two, and that's what I want you to use.
00:04:20So what that looks like is right here.
00:04:23This is challenge number two, and here are the instructions.
00:04:27This is part of the prompt that I want you to include.
00:04:29This is the fictional business idea.
00:04:31I don't want you using any other idea.
00:04:32I want us all to use the same idea, and that is an AI home inspection business.
00:04:37It uses computer vision to analyze crawl space, roof, foundation images for common defects
00:04:42and auto-generate standardized inspection reports.
00:04:45Our goal is to instruct the AI with this right here, this initial prompt, in order to create
00:04:50a hero section that is next level with our Clod code designer skill.
00:04:56And over here are the instructions.
00:04:58So use Clod code to generate a hero section for the fictional business idea featured to
00:05:03the right of this frame over here.
00:05:05So make sure you paste that in as a part of your prompt.
00:05:08And then include the business idea, but also include your own design and styling preferences.
00:05:13So that's kind of how I directed it to try to create that little animated card that we
00:05:17just saw.
00:05:18You can use as many prompts as you want to refine the end result.
00:05:22You can integrate animation if you wish.
00:05:24And when you submit, first include the number of prompts that it took to get to the end result,
00:05:29because I want you to refine the result if you want to.
00:05:32And also include the prompt itself in the comment, where you can leave a comment.
00:05:36Now you can also use the Clod code to Figma plugin to share a Figma prototype of the design
00:05:42in your submission, but you don't have to.
00:05:44A screenshot will work just fine.
00:05:47So the Clod code to Figma plugin allows you to take your end result of your UI and then
00:05:53send it over to Figma.
00:05:54I'm not going to show you how to do it here because I literally just uploaded a video yesterday
00:05:58that shows you how to do that.
00:06:00Again, you don't have to do that.
00:06:01A screenshot will work just fine for your submission.
00:06:04Then when it comes to submitting your entry right here, it shows you how to do that.
00:06:09Let's say for instance, if you do decide to share a Figma document of what you're doing,
00:06:14which will allow me to make revisions if I do end up reviewing yours, then you just hit
00:06:18share over here.
00:06:20Click copy prototype link, make sure anyone can view it, and then you submit that along
00:06:25with your submission.
00:06:26So this is going to be a really cool challenge because we're going to see, are the results
00:06:30going to be very similar?
00:06:32Well they are if you don't provide a lot of direction, your own creative interest in your
00:06:37stylings and how you infuse your creative ideas.
00:06:40And so if you do do that, I think we can see a lot of interesting variations and concepts
00:06:47that are produced.
00:06:48So again, specify the color scheme that you want, specify any type of interesting illustrations
00:06:53or animations that you want.
00:06:55The goal is to try to maximize what AI can produce.
00:06:58All right, I hope to see everybody enter this one.
00:07:01This is a very cool challenge.