00:00:00Claude code sucks at front-end design and it's your fault,
00:00:04but this is a problem we can solve with a simple roadmap.
00:00:07You just got to know where you're going.
00:00:09And in this video,
00:00:10I'm going to break down the seven levels to Claude code
00:00:13front-end design and explain what you can expect at each
00:00:16level, the traps to avoid,
00:00:18and what you need to do to progress to the next one.
00:00:21And by the end,
00:00:22you will have a simple repeatable process to create
00:00:25front-end designs with Claude code that aren't yet another
00:00:28generic boring template.
00:00:30Now our case study for today's video is going to be our fake
00:00:33SAS web app known as Argus.
00:00:36Argus is going to be a social media intelligence application.
00:00:41So essentially a place that content creators are really,
00:00:43whoever can go to and find trending topics in their niche.
00:00:48And it is through Argus.
00:00:49We are going to go through the entire seven level process.
00:00:52So let's begin with level one.
00:00:53And sadly, a lot of people are actually stuck here.
00:00:55This is just you and a prompt.
00:00:57You're going to have Claude code open and you're just going to
00:00:59say something like, Hey,
00:01:01let's create a landing page for Argus,
00:01:02my social media web app that acts as an intelligence app for
00:01:05content creators to find and identify trending topics in
00:01:08their niche. Now,
00:01:09even if I do this and I put it into plan mode,
00:01:12what we are going to get is something very, very generic.
00:01:15Why? Because we've really given it no design direction.
00:01:18And we're kind of relying on Claude code to fill in the gaps
00:01:20of like, what looks good.
00:01:22You hear this often like AI has no taste true,
00:01:26but actually most people have no taste.
00:01:28And because of that problem,
00:01:31they can articulate it to Claude code, right?
00:01:33If you don't know what right looks like,
00:01:35how was Claude code supposed to figure it out?
00:01:37So what it is here at the most base level that we need to
00:01:39begin to master a few skills.
00:01:41And those three skills are writing descriptive prompts,
00:01:43specifying frameworks and understanding what these frameworks
00:01:46even are,
00:01:46and then beginning to build a basic design vocabulary.
00:01:50Now, by simply using plan mode in this process,
00:01:53you're going to begin to build some of these skills because
00:01:55it's going to ask you questions like what tech stack do you
00:01:57want to use for this landing page, right?
00:01:58Next JS, plain HTML, Astro.
00:02:00You're going to have no clue what any of these mean,
00:02:02but by simply typing something asking what are these
00:02:05frameworks, right?
00:02:07You're going to begin to build some level of competence in
00:02:11this space when it comes to frameworks and things like this,
00:02:13you just have to ask questions.
00:02:14Plan mode is also going to force you to think about design
00:02:17decisions and the actual goal of your website,
00:02:19because it's not enough to say, Hey,
00:02:20I just want a landing page for Argus.
00:02:21What is the point of this, right?
00:02:23What is the actual outcome you are shooting for?
00:02:25In this case,
00:02:26we want both a weightless signup and a product showcase.
00:02:29And then it's going to explicitly ask us questions about
00:02:32style. Now, right away, you know,
00:02:35these sorts of visual styles it's going to give you again,
00:02:38are kind of generic, dark and techie, clean and minimal,
00:02:41right?
00:02:42Like this isn't specific enough to really get the outcomes we
00:02:45want yet. This is where everyone stays at.
00:02:47And this is why everything looks so generic.
00:02:49So for us, we'll go ahead and we'll do clean and minimal,
00:02:52and then we'll just do the hero,
00:02:53the features and a call to action and submit this guy.
00:02:55Now you're probably thinking, Hey, if this is all super basic,
00:02:58how am I actually going to write descriptive prompts and
00:03:01build that basic design vocabulary?
00:03:03Well, frankly,
00:03:04it's going to just take some time and it's going to take
00:03:06experience. The more you are exposed to again,
00:03:09what right looks like creative front end designs,
00:03:12the more you're going to pick up on these things.
00:03:13And we'll talk about that more in future levels.
00:03:16So let's take a look at what it built us and holy AI slop.
00:03:20This is hideous, right? This is as generic as it gets.
00:03:24We even have the purple gradients,
00:03:27which AI absolutely loves for some reason. So what happened?
00:03:30What went wrong? Even with plan mode, this is what we got.
00:03:32Well, the truth is like you already know,
00:03:35Claude code and AI in general,
00:03:37isn't the best at front end design.
00:03:38And if you give it sort of nondescriptive boring prompts,
00:03:42this is the sort of output you're going to get, right?
00:03:44And yet this is what you tend to see all over the place with
00:03:46maybe a few differences. So what can we do?
00:03:48What can we do to get out of level one and get out of design
00:03:51hell? But before we do that,
00:03:52a quick word from everybody's favorite sponsor me.
00:03:55So I just released the Claude code masterclass,
00:03:58not too long ago.
00:03:59And it is the number one place to go from zero to AI dev,
00:04:02especially if you don't come from a technical background,
00:04:04I update this every week. And since it's released,
00:04:07we've already added over an hour of new content and updated
00:04:1020 plus modules. So if you want to get your hands on it,
00:04:13you can find it in chase AI.
00:04:14Plus there's a link to that in the pin comment,
00:04:17but if you're brand new to AI,
00:04:18that's just a bridge too far.
00:04:19Make sure to check out the free chase AI community.
00:04:22There's a link to that in the description.
00:04:24Well, the move on to level two,
00:04:25we need to give Claude a design education.
00:04:28And this is where we begin to bring in skills.
00:04:30This is where we start bringing outside specialized prompts
00:04:33that tell Claude code how to design better.
00:04:36Now these skills we rely on like the front end design skill
00:04:39in the UI UX pro max skill are going to do a lot of the
00:04:41heavy lifting for us.
00:04:42They're going to inject Claude code with these prompts that
00:04:45say, Hey, if you're creating a webpage in this industry,
00:04:49here's the sort of things you could be looking for.
00:04:51Here's a list of all like the AI slop design techniques,
00:04:55avoid these.
00:04:56So essentially it's going to supercharge our problems.
00:04:58Even if we show up with something that's rather poor and
00:05:00here's a look at that UI UX pro max skill.
00:05:03This is an open source repo on GitHub. It's got 52,000 stars.
00:05:07We can go inside of here in the skills folder and actually
00:05:09see how everything is set up. If we want to write,
00:05:12it's all just text prompts and it's a bunch of text prompts
00:05:15that are acting like a checklist for Claude code to again,
00:05:17get it out of this generic stuff.
00:05:19So we don't get stuck with this now to install this
00:05:21particular skill and all other skills like it.
00:05:23It's very simple. If we go inside the GitHub,
00:05:26we have instructions laid out for us right here.
00:05:27We're just going to do forward slash plug in marketplace,
00:05:30add the skill and then install the skill.
00:05:32So we just run this inside of our cloud code terminal.
00:05:35And if that is a bit too confusing, understand,
00:05:37you can always just copy paste the URL of this,
00:05:40dump it into cloud code and say, Hey,
00:05:41I would like to install the skill.
00:05:42So let's put the skill to the test.
00:05:44I've loaded the skill with a forward slash.
00:05:46You can also use natural language and say something like,
00:05:47Hey, cloud code, use the UI UX pro max skill.
00:05:50And we're going to say,
00:05:51I want you to recreate the landing page using the skill.
00:05:54Ask me any questions you need.
00:05:55Now, similar to standard cloud code plan mode.
00:05:57It's going to ask us some questions about the style.
00:05:59We'll do what it recommends this time, right?
00:06:03Going for some typography. Sure. Sounds great.
00:06:05And then a CTA color. Let's do orange.
00:06:07We want to get away from the purple at all costs.
00:06:09So cloud code finished the redesign. So let's take a look.
00:06:12So here's the landing page using the UI UX pro max skill.
00:06:15And right away, this is a huge improvement, right?
00:06:18We actually have like a proper background and add this little
00:06:21square thing.
00:06:22The buttons themselves have like a subtle glow and even change
00:06:25color. When you mouse over them,
00:06:27we have a graphic and the colors change from section to
00:06:30section. So this is way, way better, even though it's still,
00:06:33it absolutely loves the purple. That being said,
00:06:36this is clearly made by AI, right?
00:06:38This isn't something that you would see and be blown away with
00:06:40what was created. This still looks like an AI template.
00:06:43It looks like a designed AI template,
00:06:46but this is still an AI template. And at its core,
00:06:48it's the same exact website you kind of saw before,
00:06:49which is a little bit of window dressing.
00:06:51So how can we actually improve this?
00:06:52How can we move out of level two into level three?
00:06:55Because these skills are great.
00:06:56They are bringing some ideas of color theory and typography
00:06:59spacing and just general layout design, but at its core,
00:07:02right, this is still generic.
00:07:04And the truth is when it comes to the skills to master,
00:07:07the biggest one is like,
00:07:08how do we evaluate this output with a designer's eye and then
00:07:11turn those critiques into prompts?
00:07:13This is still a prompting problem, but the issue with
00:07:16prompting, and this is where we get into the trap here,
00:07:18is like there is a ceiling to our descriptive. We can be,
00:07:21especially when we first start, right?
00:07:23We lack the knowledge to actually articulate the problems,
00:07:27right?
00:07:27I'm trying to explain a visual medium and a visual problem
00:07:31with text inherently. There's some loss there.
00:07:34So what can we actually do? Well,
00:07:36we need to start showing Claude code. The problem was,
00:07:39we need to start showing Claude code,
00:07:41actual examples of what we're trying to push for. Right?
00:07:44So to unlock level three, right?
00:07:46That's where we start moving away from just text prompts and
00:07:49we start moving into the visual medium, right?
00:07:52We start showing it, not just telling.
00:07:54And so level three is where you become the visual director.
00:07:56This is where we begin to give Claude code,
00:07:58concrete examples of what we are shooting for, right?
00:08:01That way we aren't just relying on text and skills.
00:08:03We're now going to use text plus skills plus visual examples.
00:08:07Now this is a huge unlock for two reasons. One,
00:08:09Claude codes obviously going to be able to better mimic an
00:08:12image that you show it versus your description of the image.
00:08:15But secondly, because we are using images,
00:08:17that implies that we're looking at other websites and we are
00:08:20now going to be able to see again, what right looks like,
00:08:23what are actual pros in the space doing and how can we mimic
00:08:25them? Now,
00:08:26there are a number of places where you can find inspiration
00:08:28for your front end designs and I'll list four of them.
00:08:31The first one is awards. That's awards with three W's.
00:08:34This is a place where people submit their front end work and
00:08:37they get graded on it. So it's very much has a creative bent
00:08:40to it. Secondly is godly.website.
00:08:42It's an infinite scrolling website where you can just, again,
00:08:45see a bunch of different designs. Number three is Pinterest,
00:08:48which surprisingly has some pretty cool stuff.
00:08:49So here I'm just looking for SAS landing page.
00:08:52When I find one, I want,
00:08:53I can also see a bunch of similar ones as well.
00:08:56And then lastly, we have dribble. That's dribble with three B's
00:08:58here. I just put SAS landing page. And again,
00:09:01I'm seeing a bunch of different stuff that looks pretty cool.
00:09:04Let's say I laid it on a website like open hands that I like.
00:09:07I like sort of the, you know,
00:09:09scrolling thing they have on the top with the proven
00:09:11workflows. I kind of like the different color scheme.
00:09:14It's something unusual right away.
00:09:15They have the social proof and just in general,
00:09:19I'm liking the style, right? For example. So again,
00:09:22what I'm going to do is very, very simple.
00:09:23I'm just going to take a bunch of screenshots of this webpage,
00:09:26dump it into cloud code and say, Hey, this is the visual style.
00:09:29I want to move towards. So inside of cloud code, I said,
00:09:31actually I want our website to match the style of open hands.
00:09:34I gave it the URL. And then I said,
00:09:36here's some screenshots for reference.
00:09:38And I dropped all the screenshots in there.
00:09:40And so now it has actual visual references to go off of.
00:09:43It'd be kind of difficult for me at least to describe in
00:09:45words, what I was looking for here,
00:09:47even with the help of something like the UI UX pro skill.
00:09:51And it's through this process,
00:09:52we're going to begin to curate really good visual references.
00:09:55There's so many of them out there.
00:09:57And once you begin to see them more and more and more stuff
00:10:00like this is just a complete and total turnoff. And it's like,
00:10:03why would I ever do anything like this when all this cool
00:10:05stuff is available? And as you see more of those references,
00:10:07even though we're just giving cloud code screenshots,
00:10:09this is going to help you communicate what you do specifically
00:10:12like,
00:10:12because you're going to see the same things over and over
00:10:14again, as you look through all these references.
00:10:16And what you also are going to want to start doing is
00:10:18combining references from multiple sites, right?
00:10:21Even though we were using open hands here,
00:10:23there's probably some cool stuff I found on Pinterest or
00:10:26godly.websites from like, let me pull this from here.
00:10:28And let me pull this from there, right?
00:10:29I want to take the best of all these different sites and
00:10:32combine it. However,
00:10:33it's very easy to get stuck in this particular trap on this
00:10:36level. And I would say most people kind of stop here at level
00:10:39three, where they understand, yeah, I got to use skills.
00:10:41Cloud code sucks off the bat,
00:10:42but with skills and with screenshots, I can get pretty far.
00:10:45The truth is there is a ceiling here because we're going to,
00:10:49we're going to get kind of stuck at the vibe gap.
00:10:50Like you're going to see with what it comes out with.
00:10:52It's going to be like kind of close, right?
00:10:55But it's not going to be perfect because again,
00:10:57there's still that effect that like lossy effect of me
00:11:01telling Claude code, which is very much right.
00:11:03It does everything in code, showing it a visual image and
00:11:05saying, Hey, translate the visual to code.
00:11:08And that's kind of the problem with a lot of front end
00:11:10design. It's like, it's a visual medium yet.
00:11:12I'm trying to type it out to text yet at the same time,
00:11:15if I throw it visual screenshots,
00:11:17there's still that translation piece.
00:11:18Like how does it actually do it properly? Well,
00:11:20the truth is it has a limit and we can see that
00:11:22limit in action right here,
00:11:24because this is what it created with all those screenshots.
00:11:28Here's the original here's ours.
00:11:31And like I've said in the past,
00:11:32like this is where people get stuck.
00:11:33Cause if we scroll through this, like, you know,
00:11:36if you squint your eyes,
00:11:37you can kind of see what it was going for.
00:11:39And then maybe it got like 50% of the way there.
00:11:41And there's some things we do like,
00:11:43but what people do now is they're just going to go here,
00:11:46take another screenshot of the hero. Okay.
00:11:49Let's work on the hero piece over and over and over again,
00:11:51a bunch of prompting, all right, go back screenshot, go back.
00:11:53And it just takes forever and you never really nail it.
00:11:56Right?
00:11:57Because it's that issue with the translation from screenshots
00:11:59to code.
00:11:59And so to move out of level three and start moving on to
00:12:02level four,
00:12:03we need to not only look at the surface of these websites,
00:12:06we like and grab inspiration from them.
00:12:08We need to learn how to actually clone them properly and
00:12:11actually get the underlying code that is powering something
00:12:15like open hands. And this goes beyond simply just like, Oh,
00:12:18we just want to clone it. And we're just like copying them.
00:12:20No, the process of cloning it and then figuring out how to
00:12:23actually copy these things comes with some huge benefits for
00:12:26us, not just due to the templating piece, which is great,
00:12:30but you are going to then get exposed to the actual like code
00:12:34that is happening beneath the surface and sort of moved from
00:12:36level three to level four.
00:12:38We now have to go beyond simply the surface level of looking
00:12:41at these websites for inspiration with the screenshots.
00:12:44We now need to learn how to go below their surface,
00:12:48look behind the curtain and see how these websites are built
00:12:51in terms of their actual coding components, their HTML,
00:12:54their CSS and their JavaScript.
00:12:56And so level four is the cloner.
00:12:59This is where we learn by stealing from the pros.
00:13:02Now, let me be very clear.
00:13:04This level is not about, Oh,
00:13:05we're just going to go plagiarize websites and copy and call
00:13:08it our own. That's not the case here.
00:13:10What is the case is we are going to find websites that we like
00:13:13and we are going to deconstruct them and then use them as a
00:13:16template that we build upon. And in the process of doing so,
00:13:20we are going to learn a ton, just like any skill in any domain.
00:13:24How do you get better at it? You see what the pros do.
00:13:27You try to copy them.
00:13:28You learn a ton by trying to emulate them.
00:13:30And over time you give it your own spin and you create
00:13:33something original. That's what this level is all about.
00:13:35And so to really get the most out of this,
00:13:37we kind of need to begin to understand what's going on with
00:13:39front end design front end design to make it kind of
00:13:42simplified has like three parts. It has the HTML.
00:13:45Think of that is like the bones of the website, right?
00:13:47How it's actually structured. We have the CSS.
00:13:50That is like the styling, right? Of the website.
00:13:52Think of it as the clothes on the website.
00:13:55And then we have a JavaScript.
00:13:56Think of JavaScript as like the muscles, right?
00:13:59It's what actually allows things to happen when you click a
00:14:01button or do whatever.
00:14:02And it is by looking at these three parts of a website that we
00:14:05are a going to be able to better clone or template a website,
00:14:08but be understand how they work, right?
00:14:10That whole idea of deconstructing the website and learning how
00:14:13they do things. So how do we do this?
00:14:15How can we deconstruct, for example, open hands,
00:14:17clearly screenshots don't work because this is not the same
00:14:21thing. Well, it's relatively simple. So to grab the HTML,
00:14:25we're just going to go to the website and then do control U.
00:14:28What you see here is the entirety of the HTML.
00:14:33So what we're going to do is we are going to copy this,
00:14:37right? We're going to copy this whole thing.
00:14:39And then we're going to paste it into cloud code.
00:14:42Now this will usually be rather large in this case.
00:14:44It is 1,152 lines of HTML. Now at the very,
00:14:48very bottom of this,
00:14:50you can see that there are also links to the CSS
00:14:54files as well as the JavaScript.
00:14:56And that's what I'm highlighting down here.
00:14:58Now this is going to be at the bottom of essentially all of
00:15:01these HTML files and I'll kind of zoom out.
00:15:04It's kind of hard to see, but at the bottom, right,
00:15:06we have the JavaScript as well as the CSS.
00:15:09So these are actual files that also include a ton of code.
00:15:13So what we are going to do is after we give it the HTML,
00:15:17we're also going to tell cloud code, Hey,
00:15:19take a look at the JavaScript and take a look at the CSS to
00:15:22really understand what's happening. So I wrote,
00:15:24take a look at the CSS and JS files as well. Now you can stop here.
00:15:29And it will use web fetch on its own to take a look at those.
00:15:31The problem is the way web fetch works is cloud code does web fetch.
00:15:35It calls a smaller model to do it for it, right?
00:15:39So this instance of cloud code doesn't actually go to that webpage.
00:15:42It uses a smaller model. The smaller model takes a look at summarizes it and gives
00:15:46it back to cloud code.
00:15:47The issue with that is the CSS and JS files are pretty large and they contain
00:15:51again, like a lot of the very specific ways this website was put together.
00:15:54So we want all of it, right? I don't want a summary of these files.
00:15:58So what I have done is I have created a skill that allows cloud code to do this
00:16:03better. It's essentially an enhanced prompt.
00:16:04So it grabs as much as the CSS and the JavaScript as it needs.
00:16:07So I just say use the site tear down skill.
00:16:12Now I will put this site tear down skill inside the free school community and
00:16:16link to that is in the description.
00:16:18So you just have to load that up and you'll be able to do this as well.
00:16:21And so in total, what did I say? I said, here's the HTML for open hands.
00:16:25Take a look at the CSS and JS files as well.
00:16:28Use the site tear down skill and use this info to better clone the original open
00:16:31hands site. Now, how is this going to educate us? Well, first things first,
00:16:36you probably have no idea like how I was able to do things like this background,
00:16:39right?
00:16:40You probably don't really understand or even know what sort of vocabulary you
00:16:43should have used to have it better mimic this, right?
00:16:46When we just gave it screenshots, we got this like, Hmm, you know,
00:16:50kind of sorta close thing,
00:16:52but by having cloud code actually look at what's going on under the hood,
00:16:56we can now rely on cloud code to teach us these things because now that cloud code
00:17:01actually understands at a coding level what's going on.
00:17:04We can now have an intelligent conversation with cloud code and say, Hey,
00:17:07how did they do this? What does that mean? What is a GSAP?
00:17:11Like how did they do the scrolling animations? How did they do this?
00:17:13How did they do that?
00:17:14And over time after you clone more and more of these websites and use them as
00:17:18templates for your own thing, because again,
00:17:19you're always going to put your original spin on it.
00:17:21You're just using this as like a baseline foundation.
00:17:23You will become better at front end design,
00:17:26just like you do with any other skill.
00:17:29And this is the process by which you are not only exposed to,
00:17:31but begin to bring in pro techniques into your builds,
00:17:34but to move on to the additional levels. Like I said, you can't just be,
00:17:38you know, a monkey at the keyboard with cloud code,
00:17:41just like with everything else we talked about. Can't just hit accept, accept,
00:17:43accept next, next, next, because how do you differentiate yourself?
00:17:46So what skills do we need to master in this process?
00:17:48We need to learn to read and understand the source code.
00:17:51Cloud code helps us there.
00:17:52We need to identify which techniques equal each effect because at a
00:17:57certain point we kind of have to be able to see these websites and kind of
00:18:02recognize right away, like, Oh, this is what's happening. And lastly,
00:18:04we need to learn how to adapt these clone patterns to our own designs, right?
00:18:09We're not plagiarizing. We're getting inspiration.
00:18:12And if you don't master these skills,
00:18:13you're going to get stuck in this trap, right? The clone ceiling,
00:18:16you're just going to copy, but you can't create.
00:18:18You're not going to want to understand the why.
00:18:20And so you're going to hit a hard limit.
00:18:22And I at the end of the day could replace you with any dude off the street and
00:18:25just tell them to do steps one, two, and three, right?
00:18:27That won't get you as far as you want to go.
00:18:29So let's see what cloud code was able to build and we gave it all this additional
00:18:32coding context and here is the updated version.
00:18:35And this one obviously looks a lot closer to the original,
00:18:39especially now that the background is actually looking.
00:18:41So if we compare these two now, obviously it is a one for one just yet.
00:18:45This was essentially its first pass, but much better,
00:18:48much closer to what we had.
00:18:50And if we want to continue to iterate at this point and bring it closer to
00:18:54whatever we like here, well, that's much easier, right?
00:18:57Because now it's looking essentially at the same cookbook open,
00:19:01open hands is looking at and we can say, okay, let me change this.
00:19:04Let me change that. I see how they did it. Here's how we can emulate it. Right.
00:19:07And again, this is where we can begin that education process. For example,
00:19:10like this cool background, how was that working?
00:19:12And also how can we get the same thing open hands has where the mouse scrolls
00:19:17through and you know, sort of eliminate some of it.
00:19:19And all you have to do is ask cloud code, how's the background working?
00:19:22How can we match that effect? And every time you do this,
00:19:25you're just adding another tool to your toolbox.
00:19:27And so cloud code explains how this effect works and better yet it now does the
00:19:32proper thing on our own background. Right. Pretty sweet.
00:19:35But for obvious reasons, we don't want to sit in level four.
00:19:38We don't want to just be a cloner, right? We want to put our own spin on it.
00:19:42We want to begin to make this ours. How do we do that?
00:19:45How do we begin to move on to level five and put our own twist on things? Well,
00:19:48this is where we begin to have fun with components and also our own custom asset
00:19:53designs. This is where we bring in our own stuff. And we're no longer just copying
00:19:56exactly what some other website is doing.
00:19:57Now one of the easiest ways to begin doing this is finding quality components on
00:20:02websites like 21st.dev. So in many ways,
00:20:04this is similar to how we found inspiration for websites and bringing in those
00:20:08parts, but at like a micro level on a component level.
00:20:11So on a place like 21st.dev, for example,
00:20:14I can look at things like buttons over here on the left.
00:20:17And what I'm going to get is like a bunch of different,
00:20:21essentially button designs. And if I find a button design, I like, let's say,
00:20:26you know, something like this. Well then I can just copy this prompt,
00:20:29bring it in a cloud code and say, Hey, let's integrate this button design.
00:20:33And this applies to essentially any sort of button, right?
00:20:36We have stuff for carousels. We have stuff for scroll areas, maps,
00:20:40navigation menus, images, hopes, everything.
00:20:42And it isn't just limited 21st.dev. We have other websites like CodePen, right?
00:20:46CodePen has a lot of cool designs that we are able to bring in as well.
00:20:50Monet is another really cool one. In fact,
00:20:52there's a bunch of places where you can find these sort of cool components and
00:20:57begin integrating them into your webpage.
00:20:59But what if we want something that's a bit more custom?
00:21:01I don't want to just copy a bunch of random components I found somewhere else.
00:21:04How do I really make it original? Well, you have two options.
00:21:08The first is you still use these components from 21st.dev,
00:21:11but we just prompt cloud code to change it, right? It's just code.
00:21:14This prompt gives us the exact code and then we can just tweak it to our heart's
00:21:18desire or we can literally create it ourselves. I mean,
00:21:21if we head over to Pinterest and we see cool landing pages like this that are
00:21:25very like almost art forward, well, there's nothing saying,
00:21:29we can't use AI to create some sort of image like this and let it be sort of the
00:21:34showstopper for when people go on our page.
00:21:36And these don't just have to be still images. I mean,
00:21:39we totally have the ability to add videos to our background,
00:21:42to have it tied to certain scrolling animations to, again,
00:21:45take the ideas that we discovered in step four and make it our own.
00:21:49So let's actually do that. Let's quickly redesign our webpage,
00:21:53get away from this open hands clone and actually design some like cool piece of
00:21:57AI art and let that be what you foresee when you come onto our site.
00:22:01And so you know the drill by now,
00:22:02first we need to find some sort of inspiration and after scrolling through
00:22:06Pinterest for a little bit,
00:22:07I'm seeing a lot of sites like this where we have some sort of almost cartoonish
00:22:10slash stylized image of the background for the hero section.
00:22:14And then we'll have some of our texts on the left.
00:22:16Now this is where you can start to bring in some of your visual storytelling,
00:22:19right? What is the app we're creating? The app is Argus, right?
00:22:22And we need to come up with some sort of tagline that ideally also kind of ties
00:22:27into the image itself. Like what are we trying to get here with Argus? Well,
00:22:30Argus, you know, mythological figures, 10,000 eyes.
00:22:33We're talking about social media.
00:22:34We're talking about finding things before the people do.
00:22:37So the tagline I came up with was see what's next simple.
00:22:41It's tight. And you know who helped me come up with that.
00:22:44Obviously it was Claude code. And then when I did with Claude code is,
00:22:47I pretty much said like, Hey, you know,
00:22:49we're talking about like visual storytelling here.
00:22:51What are some ideas we could come up with imagery, right?
00:22:54Cause I don't want to at this stage, we're doing our own thing, right?
00:22:57I can rip the general concepts of what you see here image wise in terms of how
00:23:01they set things up, but the image needs to be my own. And again,
00:23:04having some sort of visual storytelling that ties into what your application
00:23:07actually does will go very, very far.
00:23:10So what I ended up doing is then creating an image based off of some
00:23:15ideas, Claude code gave me, and I actually leaned on mid journey where this one,
00:23:18now you can use any sort of image generator you want,
00:23:21whether that's nano banana pro seed dream, doesn't really matter.
00:23:24I really like mid journey for these kind of like almost concept art type pieces
00:23:28because mid journey, especially version seven,
00:23:31I really haven't tested out version eight very much.
00:23:33Like you can give it kind of a weird prompt. Like the prompt I give it was,
00:23:38I need a background image that will be the landing page for a website called
00:23:41Argus. The tagline is see what's next.
00:23:43And so just with like a really poor prompt like that, that's very vague.
00:23:47I got a bunch of cool different stuff that I was able to choose from.
00:23:50And I saw this and I was like, this looks pretty sick, right? And I can only,
00:23:54I can already imagine right now,
00:23:55like having sort of the information over here on the left,
00:23:59we can have maybe some of the stuff up top. Like I can play with this. Like,
00:24:02this is I think very cool. Maybe we even do some sort of animation at some point.
00:24:06So once I have my image, it's pretty easy from there.
00:24:10I'm just going to download this image, give it to cloud code and say, Hey,
00:24:13I want to reimagine the hero page using this image as the background.
00:24:17And so inside of cloud code, I said,
00:24:19I actually want to change the front end entirely.
00:24:21I want to use the following image as the background for the hero.
00:24:24Let's put the info about the app Argus on the left-hand side,
00:24:27leave some negative space on the right to show off the image and make the tagline
00:24:30see what's next. So we'll see what it does at this point. And again,
00:24:34this is kind of the level where you need to start letting your creative juices
00:24:37kind of flow because up until this point,
00:24:39you've been exposed to a lot of different front end designs that are different
00:24:43than just the super generic stuff you see in every single SAS template.
00:24:46That means some cool art, whatever, again,
00:24:48visual storytelling is what we're going for here is really going to level up your
00:24:52game.
00:24:52And so here's what our updated hero section looks like with that brand new
00:24:56background image. And I made this a little bit smaller,
00:24:58so you can see it in its entirety and cloud code went ahead and also, you know,
00:25:02updated all of the colors. Now, again, that was just the very first pass.
00:25:06All we've done is added this background, but right away,
00:25:09you start to see it feels a little bit, I don't know, more original,
00:25:12more creative stands apart, right?
00:25:15And now we begin to add more and more of our flair to it.
00:25:19And to start that can be as simple as just upscaling this image.
00:25:21You can do that inside of mid journey, because as we see here,
00:25:24the image feels a little stretched out and not as detailed as you would like,
00:25:28or we can do something like add motion.
00:25:30We don't have to have a still background.
00:25:32We can actually put a video back there as well.
00:25:34Then to turn it into video is really easy.
00:25:36You're just going to head to somewhere like cling 3.0 or VO 3.1,
00:25:40just anywhere where you can do a starting frame.
00:25:41Ideally you can do the end frame as well. Like you see over here on the left,
00:25:45that way it doesn't do some like crazy motion because you have to remember like,
00:25:49ideally it would be a complete loop.
00:25:52Sometimes it can be hard to get AI images to loop correctly.
00:25:55So the second best option is just to create a rather long video about 15 seconds.
00:25:59And you want the motion to be subtle. So kind of what you see here, right?
00:26:03If I had this as a background, even with the birds completely still,
00:26:07which is totally fine, it's almost like a parallax type thing you got going on.
00:26:11And since it's the hero page and this is lasting 15 seconds,
00:26:14the chance there that someone's going to sit there for 30 seconds and see the
00:26:18whole thing through are unlikely. So if there is a hitch at the very end,
00:26:22you're still going to be okay. But luckily for this one,
00:26:24since we had the motion so subtle,
00:26:25you almost can't even tell when it switches from second 15 to second one.
00:26:29So we're going to use this one. And you're probably also asking,
00:26:31what about performance stuff? Well, in terms of performance on desktop,
00:26:35there'll be just fine with the video, but we will tell Claude code, Hey,
00:26:38if it's a mobile, you know, user that comes on your mobile webpage,
00:26:42it's not going to load the video for them. It will just load that still image.
00:26:45So I gave it the new upscaled image and said, use that for the mobile.
00:26:50And then I give it a link to the video and said, Hey,
00:26:52replace that in the hero.
00:26:54And here's a look at the page now with the motion,
00:26:58right? I think it looks pretty good. The other thing is it's subtle, right?
00:27:02You don't want to do crazy motion and have like a full on video game going on in
00:27:06the background, unless you know what you're doing,
00:27:07but something like this with like the subtle sort of cloud movement,
00:27:11you have the water moving at the bottom, right? Again, this gives it,
00:27:14this gives you a webpage,
00:27:15some character and giving your webpage some level of original character is what
00:27:19level five is all about. Like I keep saying the first four levels,
00:27:22we're learning the fundamentals. We're seeing what pros do here in level five.
00:27:25We're actually customizing it. So just like you did it with the hero,
00:27:28that's how you need to begin to approach every other section, right?
00:27:32Like these cards, these cards are hideous. The background here is kind of boring.
00:27:36It's the same exact thing every time. So what am I going to do?
00:27:38I'm going to find inspiration. I'll go to 21st thought dev. I will go to awards.
00:27:42I'll bring it into cloud code. And then I'm going to iterate, iterate,
00:27:45iterate until I get it to a place I actually like. Now it's at this stage,
00:27:48as you're doing all these visual edits that you're going to feel a little bit
00:27:51constrained sitting inside of cloud code. Again,
00:27:54there's always that sort of like tension between being inside of a terminal and
00:27:58using texts and trying to mess with things in a visual medium. So in step six,
00:28:03we're going to start moving outside of cloud code a little bit because it's here
00:28:06in level six where we start bringing in some outside tools that let us get even
00:28:11more specific with how these sort of visual things are coming together.
00:28:14And there are a lot of tools at our disposal.
00:28:17We got things like paper dot design. We got stitch, we got figma, right?
00:28:21We got pencil dot dev.
00:28:22This is where you now have the building and the skills to bring in these outside
00:28:26programs to just tinker a little bit more and a great one to try out because it's
00:28:29very AI forward and simple to use is stitched. It's also free, right?
00:28:33This is from Google and essentially gives us a visual canvas to mess with front
00:28:37end design type stuff.
00:28:38So what I did here is we're not starting anything from scratch.
00:28:42We're doing a redesign. So I gave it screenshots of our website,
00:28:45both the hero page and the rest of it.
00:28:47And I said here's a look at the current webpage set up. I really like the hero.
00:28:51I like sort of the aesthetic there and I like the colors,
00:28:53but I want to update essentially the entire bottom half of our website, right?
00:28:57Just feels very flat, right?
00:28:59I want to sort of bring in sort of the imagery and colors that we have here up
00:29:03top. Like let's see what you can come up with.
00:29:05So let's take a look at what it generated for us for a redesign.
00:29:08And here's what we got.
00:29:10Now the cool thing about stitched is I can have it to redesigns of the redesign.
00:29:14So if I have the selected,
00:29:15you can see it gets like down below and I can just prompt it like any chat bot.
00:29:18I can also right click on it and go to variants and again,
00:29:22change the layout color scheme, images, et cetera.
00:29:24Now since this was a redesign in stitch and I wasn't just building something from
00:29:28the ground up, this is just an image it created.
00:29:30But this is something I can totally right click copy.
00:29:34And then now bring that back to cloud code and say, Hey,
00:29:37what do you think about this? Right? Again,
00:29:38these sort of visual editor tools are just great for sort of the ideation process.
00:29:43And again, there's a whole bunch of them. Pencil.dev is another one.
00:29:46You're going to see all over the place.
00:29:47This works really well if you're inside of like cursor or vs code,
00:29:50because you can actually like have the canvas up and edit things in real time.
00:29:54So there's a bunch of tools in the space and more coming onto the market like
00:29:58every week. And so I dropped that image back in the cloud code and pretty much
00:30:01said, Hey, what do you think about this?
00:30:03What do you think of this sort of glass morphism effect we got going on with the
00:30:06image in the background? Let's try that out.
00:30:08And that's pretty much what you're going to do from now until the website is where
00:30:12you want it,
00:30:12because this is the stage in front of design where now you're just tinkering.
00:30:15You're going to tinker, tinker, tinker, tinker.
00:30:16By now you've built the skills to see like what you're kind of moving for,
00:30:21but this is just an extremely iterative process and no real shortcut here.
00:30:25But again, you have all the tools at your disposal now,
00:30:27both to find inspiration and to actually play with.
00:30:31So after about 20 minutes of tinkering on my own,
00:30:34this is what I got with Argus. So first of all,
00:30:37you will notice a few small changes that give it some weight,
00:30:40give it a more premium feel. First of all is the loading section, right?
00:30:43When I refresh this, what do you see?
00:30:45You notice sort of like a hesitation before all the text loads and it gives it
00:30:49some weight, right? It makes it feel heavier.
00:30:52You also notice I changed the fonts. Fonts are huge. Typography is huge.
00:30:57Where can you go to see different fonts and sort of like, you know,
00:31:00get some inspiration? Well, great place is Google fonts.
00:31:03They have a bajillion fonts. They're all for free.
00:31:06They're broken down by different type and Claude coach can use all of them.
00:31:08So definitely check out Google fonts. If you're like, ah,
00:31:11I don't really know which one I should use. We added a scroll section down here.
00:31:14We added this sort of ticker at the bottom that also doubles as sort of a border
00:31:19between right our video and then our image background down here before we had
00:31:25this border going from a video hero section to the same image as the background
00:31:30was very jarring, but this gives it a nice sort of natural border.
00:31:35You will also notice the changes that we brought in from stitch.
00:31:38We now sort of have this glass morphism effect that we still need to edit a
00:31:41little bit. You will notice it can get a little cut off when it bounces,
00:31:44but it again kind of shows off that background artwork that gives our things from
00:31:48character. And then you can also see some subtle things, right?
00:31:52If I refresh right here,
00:31:54you will notice the counter just like zooms up from zero to 10 million. I mean,
00:31:59these are these nice little like on the margin things that show you actually cared
00:32:03about the website and at some level of like professional pride,
00:32:07you'll even notice sort of like this lighting zoom go over like AI tools and
00:32:10content strategy. And again, it's just these little things.
00:32:12It's these little small things that truth be told most people won't even actually
00:32:16notice at all. Yet when you combine all of them,
00:32:20what you eventually get is something that looks coherent and something that you
00:32:24cared about and created whether or not you used AI as the tool.
00:32:27The point is it was crafted, right? It's got just like all those little things.
00:32:31I mean, like even like the scroll bar up top, right? You see how that progresses.
00:32:34Again, it's just all these little, little things. And so how did I prompt this?
00:32:38Well, I mean, frankly,
00:32:40it was just a combination of everything we talked about up till now. Like,
00:32:42I've seen the kind of things I like.
00:32:45I take screenshots of those and I bring them into Claude code, but even more so,
00:32:48like I'm no expert in web design. So what I did on certain things,
00:32:52like I knew right away, like, Hey, like I,
00:32:53I liked the glass morphism cards we saw in stitch, right?
00:32:57Cause remember stitch kind of gave us this idea first.
00:32:59And when Claude code originally made them, they were just kind of flat, right?
00:33:03They didn't have any of this like pop off the page. So I said, Hey,
00:33:06like let's give them some weight. Let's have them pop off the page.
00:33:08But what I also told Claude, what I also told Claude code was, Hey,
00:33:12what I want you to do is I want you to do a web search for the best web design
00:33:17practices when it comes to doing these sorts of things.
00:33:20And on top of figuring out, Hey,
00:33:22how do we want to like make these cards sort of pop and give them some weight,
00:33:25come up with some other things that can make our website look a bit more premium
00:33:29yet in a subtle fashion. And it came up with a bunch of different ideas.
00:33:32I had it run through all the ideas. Some I discarded, some I kept,
00:33:36but that's sort of the general, you know, cadence of doing this, right?
00:33:40You don't have to rely completely on yourself.
00:33:41Claude can go out there on the web and again, see best practices, but remember,
00:33:45you are always in control.
00:33:47You are in the driver's seat and don't be afraid to kind of have fun with us.
00:33:50Like I said, all these little things, this is where you, again,
00:33:53give it character and this is where you make it yours, right?
00:33:57The more we can make it yours and reflection of your creative spirit in this
00:34:02space, the better it's going to look right. Truthfully,
00:34:04because if it is a reflection of you and what you want on the screen and what
00:34:08you're trying to portray, it's hard to really call that AI slop.
00:34:11It's hard to call that an AI template because it's yours.
00:34:14And so while this level is on the surface about, Hey,
00:34:17using these outside tools like stitch,
00:34:19I think really this level six is pretty much everything I just said.
00:34:23Like using these outside tools like stitch to iterate.
00:34:25But ultimately at this level,
00:34:27this is where you're finally able to sort of think creatively express yourself in
00:34:31the front end design space and using Claude code as the tool versus in the first
00:34:34couple of levels, we were just along for the ride that leaves us with the final
00:34:37layer, layer seven, right? And what is going on there?
00:34:41What is this stuff about 3d? Well, spoiler alert.
00:34:45This is like a place where none of us are probably going to be playing it at all.
00:34:51Right. When we talk about the frontier and the architect and 3d stuff,
00:34:55this is where like the big leagues play.
00:34:57This isn't really something we are going to be able to do. I think as of today,
00:35:02March, you know, late March, 2026,
00:35:05I don't know if this is really in our wheelhouse yet because this is when we
00:35:07started talking about things like custom web GL and shaders and 3d experiences.
00:35:12This is what we're talking about.
00:35:13Like websites that pretty much look like a video game. I mean, take for example,
00:35:17this website right here.
00:35:20Do you think this is something where we can just do control you control a, you
00:35:25know, take a look at the HTML and the CSS and see what's going on.
00:35:30No, no, this is all, this is like art, right?
00:35:34This is a team of designers that spent a long,
00:35:37long time putting this all together and it is absolutely gorgeous. Now,
00:35:41in theory, could AI do this? Maybe, but I will be honest. This is like,
00:35:45this is so far beyond you or me.
00:35:47And I frankly just put this in here to kind of show you what's possible.
00:35:50Cause when you see some websites like this, and if you want to see more of them,
00:35:53head over to awards,
00:35:54which I talked about earlier and go to like their sites of the day and sites of
00:35:57the month, they all like have the same kind of thing going on where it's like,
00:36:00this is all custom type stuff.
00:36:03And maybe this is something AI will allow us to play in, in a few years time.
00:36:07But like, it's really cool.
00:36:09Like the whole website design space is just so interesting.
00:36:12This stuff is like straight up art. And like I said,
00:36:16when you first get started in the space,
00:36:17you just see the same SAS stuff over and over and over again.
00:36:19But when you see stuff like this, your, your mind is just kind of blown.
00:36:22And so this is very much level seven.
00:36:24And if you know how to do stuff like this with AI, like, Hey,
00:36:27you should be the one on YouTube making videos.
00:36:29Cause I would love to learn how, but just,
00:36:30I purely made this level to honestly show off this igloo website.
00:36:34Cause it's so cool. So, um, definitely check it out and like,
00:36:38just kind of have your mind blown and let it kind of think about what you could do
00:36:42in the future.
00:36:43And so this is where I'm going to leave you at the end of our seven levels of
00:36:46front end design with Claude code. What I hope you got out of this more than
00:36:51anything is sort of the idea of the progression of the skills to get
00:36:56to something like this. Cause it's something that's totally doable.
00:36:58And it's the idea that first we need to see stuff we like,
00:37:01then we need to learn how to deconstruct it.
00:37:03That whole idea of cloning websites, I think is super, super important, right?
00:37:06Because you're going to learn so much by essentially having Claude code walk you
00:37:10through how someone else created a website you loved. And through that process,
00:37:14you're going to get educated on all these different techniques and effects of that.
00:37:18You didn't even know where possible. And through that process,
00:37:21you can then go to your own website and begin to apply those in your creative
00:37:26style, right? That's what it's really all about. What it's not about is like, Hey,
00:37:30there's this one super special skill and you use a special skill and Claude code.
00:37:33And wow, look at the website. Like truth be told you, if it was that easy,
00:37:37everyone's website would look good. Everyone's website does not look good.
00:37:40So clearly it's not that easy, right? There's a little bit more to it. I mean,
00:37:44I think the whole idea of taste and AI not having tastes,
00:37:47I think that's kind of true,
00:37:48but I think more accurately is the idea that we have
00:37:53a very tough time articulating our taste and we have a tough time
00:37:57articulating our taste because we don't even know the correct words to use
00:38:02because we aren't web designers. We don't know the vocabulary.
00:38:05We don't know the nomenclature.
00:38:06And that's actually really common thing with cyber like all the AI stuff in
00:38:10general, not just web design. Um, that goes for like any sort of coding stuff too.
00:38:13Like if you don't come from the space,
00:38:15you just don't know how to speak the language literally. And so that creates sort
00:38:19of a translation, you know,
00:38:21disadvantage between you and Claude code and the end result becomes something
00:38:25sloppy and generic, but hopefully kind of going through this roadmap,
00:38:29you see a path forward to alleviating some of those things over time.
00:38:32So hope you got something from it. I had fun doing this. Um,
00:38:37let me know in the comments, what you thought as always make sure to check out
00:38:40chase AI. Plus, if you want to get your hands on the cloud code masterclass,
00:38:43We'd love to have you there and I'll see you around.