StreamSparkAI

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