How to Improve Vibe Coded Layouts

All right, everybody. How's it going? Waiver Austin, we're going to get started here in a couple minutes. Um, if you're watching this not live, you could just feel free to kind of fast forward past this initial spot until you see a big old terminal opened on this window. That means we're going to get started. Enjoying the AI UI course so far? Looking forward to claw course. Yes. Um I have about an hour of that course built so far. Um my goal is to get to around two hours over the weekend and then I'll do the early access sometime launch next week. And then we're we're building a full AI powered app in that course um with cloud code design considerations, deployment, the whole thing. I can't wait. So I'll talk about exactly what we're doing here in this particular video. Um, this shouldn't be a very long like live stream because I already prepared everything beforehand. So, we don't have to wait for prompts or anything like that. What's the past Gary mean? Oh, that's the post, Gary. What post? Yeah, I'm not sure if I'll leave the chat up here. We'll see. Oh, what is up, Olrich? I a sprint training student. All right. All right. We got about 50 people. I'm sure we'll probably get up to 100 or so based on how my last stream went. I used to get 300. It's like what the hell? Okay. But I I am like rapidly rebuilding this channel. Um the views have just skyrocketed since I started posting a lot more. Okay. Let's just go ahead and get started. And essentially what I'm doing here in this video is I am going to show you a vibecoded layout. Meaning I allowed AI to generate a layout for me based on a description or a prompt. Let me show you what that looks like. Uh what that prompt looked like. And I did this all this morning. All right. So, I went into a brand new folder called design test and I got open claude and I had to authenticate my plugin, my MCP Figma plugin, Claude Code plugin. Um, and what I said and this is the this prompt isn't huge. This is it like it's it's not like a real elaborate prompt here. Um, but it's consistent with a lot of like what cloud code will produce in terms of layouts for this type of prompt. Um, using the designer skill. So, use I'm not going to read the whole thing, but use the figure MCP server to design a desktop landing page consistent with the following description. Design a minimalist AI product landing page with a hero section with a warm beige background. At the top, place a background I mean a a rounded golden navigation bar containing a logo on the left. unique AI central nav links and a rounded amber CTA button on the right. Try it out with a play icon. So that's the the navbar. Um in the center of the page, create a large headline, the world's most anti-slop generative AI platform, whatever the hell that means, with the phrase anti-slop highlighted. Under the text, place a large rounded AI prompt input card with a gray border containing placeholder text. Um add a plate paper clip icon in the bottom light and blah blah blah. And then also I kind of asked it to decorate the scene with a low poly 3D desk objects like a steaming coffee mug on the left and on the right it has on the right side it has a pair of headphones and a yellow notebook with a pencil. I mean that's it. Use lots of white space, modern sand surf topography, rounded UI elements and a clean startup aesthetic. Okay, so the next part's kind of funny. I don't care that I'm about to show you this because I think we've all done this, but lately Claude Code has been um really freaking slow. So, when I sent this prompt um you know, I'll design this page blah blah blah and then push it into Figma. The way this land this works is I it has to create the actual page in HTML and CSS and then it takes that and pushes it to Figma, which I'll show you the result of the HTML in a second, like the the the result in the browser that it created. Then I said, "What the [ __ ] are you doing?" Like during doing hurry up. I mean, it was like five minutes and it was just sitting there like, you know, the little like what's it say? Those stupid words like kebab losing or whatever. Anyways, it took a while and finally um it started working and it made this. Now I'm going to show you the design. This is what it made. So, if I I boost up the if I zoom it up. Yeah, it looks better. Now, when I said plenty of white space, I didn't mean this. I mean, this is objectively kind of garbage. Let me hide the uh comments here for a second. So, if I if I if I zoom it up, yeah, the the it improves. Um, but this right here, I mean, it's it's this is typical AI generated layouts or maybe even you could call this AI slop, so to speak. Um, it's it's not the worst thing you've ever seen. And in fact, many beginner UI designers make things worse than this. This is why, you know, it's kind of tough to get into the industry unless you're really dedicated and learn this stuff from scratch. So, after it produced this, I asked it to then use the Figma MCP server to translate this to Figma. So, I'm going to show you what that looks like. and it did a good job of basically doing the translation pretty well. So, if I go back um to Figma, here it is. So, that's basically exactly what we saw. Now, sometimes Figma um this plugin will screw things up like it'll add like spaces around the the text, you know, and so we want to fix that real quick. And this is basically what we had in the browser except now we can edit it in Figma. Now, I've already done a video on like how you do that. So, if you want to learn how to do that, go ahead and watch that video. It's from like a week or two ago. Now, um our goal here is I'm going to replicate this and we're going to elevate this design um both with just our our eye, our hand train skills, but also with AI. And you'll see how AI comes in to play when we get to these elements right here, these little assets right here. But for now, the goal is is to make an objectively better layout than what we see here. Okay. So, and then I'm keeping this one over here so we can do a comparison. All right. So, the first thing I'm going to do, I'm going to start um the background color is not bad, but I had a particular color that I wanted to use specifically. So, I'm just going to change that background color slightly. It doesn't even look like it changed it hardly at all. Um, and the top nav I wanted to change as well. One of the problems with this layout is like up here, this navbar, it's like I don't know, it's very uninspiring. Things are not really standing out a lot. It just everything looks muted. So, my goal is to kind of make things a little bit bold, higher contrast, and stand out more. So, as such, I'm going to take the fill here, and we're going to give it something that gives us a little bit more color here. Now, it looks like it added a stroke. I don't want that there either. And then um the button I'm going to change this color as well. So I'm going to change that to this. And then also people might think, oh this is this is fine contrast here with this white text on this pretty vibrant orange color. But no, you want to make that black. That is much more readable. Now it looks like there's a drop shadow on this. I don't want that either. It cleans it up a little bit more. So now we can kind of see when we compare, you know, these two things against each other, the the navbar, at least at this point in time, does stick out more. It's more obvious. Again, these aren't huge changes yet. You're going to see this come together a lot more. Um, another thing that I want to do is I want to increase this just a bit more. And then we're going to change this to auto so things get, you know, separated correctly. And then also need to add equal whites space to the right. And then I'm going to take this. I don't like, you know, one of the mo one of the things that I've seen like claude code when it's generating UIs do is lately it just really likes this this uh kind of tall serif font. And it reminds me of the old school Apple font that they used back in the early 2000s. It was like all over the place. Um I'm just going to change this to something super simple that I know. Oh, no, I meant the logo up here. Sorry. So, we're going to change this to something super simple like enter bold. And, you know, obviously the UI, you know, the this logo could be improved, but you could already see uh if you compare the header here, this is kind of weird with this text. They just don't mix very well and that the logo is just kind of like an afterthought. It's just kind of strange. All right. So now we have this section and I want to do the same thing with this type. So I'm going to change that to enter. We're going to make this bold and scale it down a bit and then adjust the line height just a bit. Now I'm not sure if I really like this particular color here. So I'm going to grab this color. But it's still not going to contrast enough. Like if you look at that like oh no you don't want that something more like this. Okay. Okay. So now if you look at this things are um this is obviously in terms of what we call visual hierarchy things are you know standing out more. You know the headline stands out way more in this context. Um, there's not huge changes yet, but you'll see once we improve these assets in this area down here, it'll get better. So, I'm going to move this up. And for my liking for a sub headline like this, this type, it doesn't contrast enough with the background. So, I might just make it a little bit darker and pull it down right here. Okay. So, there's a little bit too much line height here. So, just tiny fine adjustments. Okay. So now we have that. I want to make sure everything's kind of centered up here as it needs to be. And it looks like it is. Just want to make sure. Okay. Now, one of the the I would say the biggest flaw of this original design is the placement of these illustrations and just how simplistic and stupid they look. Now, that doesn't mean anything simplistic is stupid, but it just doesn't they're not cohes. They don't feel like they fit the design. They're just thrown on there randomly and it's stupid. Okay. So, what I decided to do is like, okay, we're not going to use these assets, but I'm going to use I'm going to make them better. Um, and there's a lot of different ways to do that. So, what I did is I'm going to get out another window here. I think it's on my other monitor. Yes. Is I went into chat. I still have a subscription to chat. And you could do this in any other, you know, you could do this in Gemini. You could do this in midjourney. You know, there's a lot of other tools you can use this. And I said, generate a low polygon scene of an overhead perspective of a person working behind a computer against a light beige background. And we have the coffee cup in this notepad here. And I wanted to isolate and just have it create in the same, you know, kind of like the low polygon manner the uh the three assets, this this coffee mug, the headphones, and this notepad. And you can't just use this asset in and of itself. It's just like a PNG, so you can copy it. I wanted to be able to take those assets and separate them so that I can move them independent of each other in in order to create the composition for that hero section. So, what I did is just I copied the image and then I went into Photoshop. Now, you could bring it this directly into Figma and have it remove the background, but I I tried that initially, but what happened is it got rid of the uh the shadows. I liked the shadows here. So I decided, okay, I'm just going to use Photoshop because I I have Photoshop skills and and and it doesn't require many skills to modify this. So here in Photoshop, this is the image. And it was simply a matter of, you know, using the what's it called? The object selection tool right here. and then selecting this on top of using the lasso tool tool to select and add to the selection, you know, the the the very faint shadow that's being cast. And what I did is just copied that and pasted into its own document. It doesn't matter that this part didn't even get, you know, into the image because this is so similar to the background. Um, same thing with the headphones and same thing with this. And then I save them with uh transparent uh PNG 24bit um PNG files. So once we have that and we have the assets created then what we could do yeah maybe we could somebody said that you can ask chatt remove the background and keep the shadow. In fact let's see if it'll actually do that. Um, let's copy this cuz I'm curious, you know. Um, keep the objects in their shadows, but remove the background only. I mean, we'll see if it actually produces what we want. We'll come back to that. So, now I'm going to move this off on the space. And now that we have those assets, I can double click over here and just, you know, get in here and delete these and then delete the cup. And then now I have access on my other monitor to those files. Let me drag those in. And you'll see it's such a big improvement. Um, so I'm going to drag the cup in here. I'm going to scale it down. Now, we could put it to the back so it's not overlapping this area, but I'm going to let it overlap for a second. Um, and then we have the headphones. Again, scale this down maybe right there. And then also uh the notepad. Scale it down holding shift alt. Yeah, something like that. Okay. So now it's it's now hopefully, you know, this looks like it's it's a much more object objectively better result so far. I think this is probably a little too large and probably would make sense to uh well, first I'm going to redesign this before I start making other design decisions. This prompt area um and by the way, let's see if that that that test worked. Um, it interesting says I removed the beige background. You can download the PNG transparency here. I click it and it says the file is no longer available. What the hell is that? I don't know. Chat GPT is sucking. All right. So, I'm going to remove this the background. Um, I'm going to just do a black stroke instead of this lighter one. And then I'm also going to change the icons in here. There's two icons to black as well so that they stand out more. I'm probably going to put this in the back so it doesn't overlay. There we go. Probably same thing with this. I want this hovering over it just to kind of create some depth. And then fix this area. I'm going to center this and then change the font to like anonymous pro so it feels like a typewriter type situation. Center it and maybe increase the font just a bit. And then we'll take the create movie. Um, and we want to make sure that this is consistent with the the type up top. We'll grab this. Now, by the way, I have a bonus because I've taken this with Figma make and we we we turned this into an actual browser result with animation. I'll show you in a bit. Um, and then we're going to move this above. I'll put this here. And then we're going to take the white elements and make them black. Okay. Then finally, where it says down here, this is not enough contrast at all. Give it a shot. It's free. Going to make that black. I think probably one last change I would make is okay, we're going to scale things up just a tad bit bigger. Maybe this whole area could stand to get just a bit bigger as well, but I'm not going to really bore you all with that. Um, let's see here. We got to make sure this is centered. This is centered. Everything's centered. Okay, so here is the original. You know, kind of just drab, right? Like not a lot of high contrast elements. Nothing really stands out too much. But now we're going to transition to this, which in my opinion, and again, when I I do that back and forth and I come back to my design, I see little things I want to change, you know, micro adjustments, maybe move everything up. There we go. That's better. That's the designer in me. Okay. And and there we go. I would like to say that this is objectively better. Now, of course, design is a very subjective thing. But when we look at both of these, if we ask ourselves which would actually perform better, I think, you know, all my experience tells me this element over here would I or I mean this layout over here would definitely um perform better in terms of conversion ratio, which is ultimately the most important thing that you know we're after. Um so now um the question becomes all right so how would we imagine this looking and performing on a live website now the I there's several ways to do this and to go about it um you know there is a birectional workflow with Figma now in the MCP server where I could just take that same cloud code session and ask it to integrate the changes that I made here. I don't know how well it would do. Um, but what I decided to do instead was um, use Figma make because it's already here in Figma. And if I go over here, this was, uh, kind of the result, but really the result in the browser looks better. Um, so I published it. I'm going to open it in the browser and we're going to come over here. There we go. All right. So, this is the final result. I I had it kind of do a typewriter effect since this that that monotype font kind of had that little situation here. It would be cool to have this transition between different, you know, types of prompts or whatever this service is. I had it also subtly float these elements right here, although they're kind of overlapping in this version. Um, and again, if I if I go back and let me throw this tab in here, you know, here's here's what the AI created. And then here's how we kind of elevated that with our own take. I think the biggest improvement is the the assets over here. This is just garbage. But again, if you don't have that trained eye, then you're not going to be able to understand and know that, hey, you can take this further than what we have here. And thus, we arrive at the problem where so many people now have access to design that's just generated on the fly. And so many projects look very similar and also just a low barrier to you know what they're looking great a lot of people like like if you look at it like on X and the whole design AI designer um community you'll see some people um produce amazing looking designs with AI but the only reason those designs look amazing and better than the rest is because those designers have skill and they've been a designer for a while. So that's why you have to understand the fundamentals. Um you really have to understand the fundamentals as much as possible. Um so we going from this to this and I think it was definitely um a nice improvement um from from obviously from what we have Okay, let me take a look at some of the uh the comments here. All right, thank you for that. It's definitely better. I was hoping, you know, people weren't going to talk crap here. Um, Gary, are people actually using one trick AI sites like this? I don't know what you mean by one trick. Um, the the purpose of this I don't even know what the hell this this service would be. The focus here was just on the UI and improving the UI. Um, yeah. Okay. So that is it for um this particular improvement. Now I'm going to do something just so we can you know stand to I would like to make that thicker by the way um to I want to do something a little bit extra just to show the um the the design challenge that's going on at designcourse.com. In in case you haven't been following along, I have have an ongoing design challenge, AI UI design challenge. And if I click start now, you kind of see the the system in play. And um we've had a lot of submissions. And the latest submission only had five entries so far. And I'll just take a look at some of these um to see what people ended up doing. Um let's see here. you are becoming who you are we believe are I forget what exactly this particular challenge is I think I'm not going to go ahead and review anything at this point in time I will do those reviews soon um but what's really cool is this challenge is set up so that you can learn to use AI based tools but also do so in a tasteful skillful skillful manner so like this particular challenge um involved using unicorn studio um if I go back even further here. Ah, yes. This one just it's so interesting to see people's takes on what they think is like really good and integrated and you know in many times it's simply not. Um not to say that this particular one is horrible or anything um but if you go here you can sort these by um ones that I've reviewed. I've done video reviews of some of these and then also you can sort by like highest rated. Now I have I don't think I've seen this one yet, but it's really cool because anybody can participate. It's free. Um the initial Yeah, we had a lot here. So I think we have like six challenges so far that are live. There I am. This one had 112 submissions and some are actually really good and then others, you know, they're not really using AI in a very tasteful manner and there's issues that they're not able to spot. So, that's one of the big things that um yeah, this one has 30 the very first challenge has 350 entries or so. And yeah, you could just see like who has a a much better trained eye like this one like let me just uh copy open image in new tab so we could see it. This is unfortunately objectively not good. So the the the design here, the challenge here was to take this like this is already designed and but they're to fill out the rest of the design here and improve it. And some people just end up butchering it um because they don't have much experience. And so like if I go back and we sort by like higher rated, let's see like highest rated, we'll see that there are some cases where people did a much better integration. um that's more consistent with what's occurring. So, it's just cool to like go through these and kind of rate people and um this is a real good one as well. I mean, it really I I felt like it really just matched the aesthetic. If I open this up um that's established by the rest of the design. So, I would yeah definitely advise everybody to check this out as much as possible. Um and and you know, get involved. Um I've also integrated a sprint training thing. Um, not a lot of people have signed up for this because it's a little bit more pricey, but you're basically just able to work with me in a one-on-one environment. Um, working on design skills. Um, and it's like a 30-day program. Um, and then also the final thing I mentioned is um, I do have a brand new course that's actively being developed and that's for Claude Code and that is for this project. So, let me go to Figma and let me go to landscape here. It's it's a um let's see here. Right there. Yeah. Yeah. It we're building a in this course we're going to be building a full SAS that is AI powered and we call it landscape. And so the idea is we're going to be building this full project that is going to be based on a mobile phone. It'll work on tablets. It'll work on desktop everywhere. and it'll work as a PWA, which is a progressive web app, which is an installable, easily installable app form of your your project, um, without having to be in the actual app store, um, or the Google Play Store or whatever. So essentially what it does is you'll be able to take a picture of like the front of your house and it will be a tool that is specifically a SAS that costs money which has like a free option to to give it a test that is specifically geared towards generating landscaping options like in terms of vegetation, walkways, whatever. And it shows you how to validate the idea. We start off that way. Um it shows you the brand identity design and how we arrive at this uh concept right here. So if you're interested in in in tackling the brand identity um why is that duplicated? I then you you know you can skip that part if you're not interested in brand design. But it's it's a really important part you know especially when everybody can make a SAS you want to be able to stand out very well. Um, and then we go into setting up cloud code, setting up MCP servers, um, to interface with Versal. We're going to host it on Versal. Um, to interface also with Stripe. We're going to integrate Stripe billing the billing for and have Claude code be able to control the billing aspect through MCP. Um, we're also using Chrome DevTools MCP. I'm trying to remember this stuff off the top of my head. I just recorded it. Um, and also Superbase will be the database. So there's a Superbase MCP server for that. And then what we'll do is just, you know, through a React Nex.js environment, we're going to iteratively start building out the entire scaffolding, the PRD. Um, we have a skill for generating a PRD file, the project requirement, do document, all that stuff. there's going to be um it's just going to be methodically built out step by step instead of trying to oneshot it and all that good stuff. And the goal is is to have a SAS that you know even before you take the course you'll be able to go to landscape.com. I think that's what the the do the com is and you'll be able to use it as a user and you're like, "Wow, I'd like to be able to build this because it's showing the full stack process and I'm not relying on, you know, just whatever the AI spits out in terms of design for the UI. We'll be really making it unique and as high-end as possible with a great UX." So that that's a course that you can start taking next week, I hope, um through early access as I'm building it. So hopefully um you guys will all check that out. So I'm going to take a look at the uh comments here. Maybe I can show the comments on the stage here just a bit. Or actually, I'll just feature them. Um okay, I'm going to answer some of these questions. All right. So, has your way of Figma changed recently considering new AI tools in Figma's new functions like make? So, yes. Uh, in fact, I've been wanting to make a video, I'll probably do it next week about just how freaking much the industry has changed. Uh, if somebody comes to me and say, "Hey, I want to be a UIUX designer." Like maybe they message me today and I'm like, "Oh boy, that sounds very antiquated." even though there's still rules and there I for for UIUX designers but what it meant in the past to be a UIUX designer before all these AI tooling came out um simply meant you lived primarily in Figma you know and and I taught that for many years and you lived in Figma you designed exactly what the UI is going to be look like and then you're going to hand it off to a developer a front-end developer and then the front-end developer has to handcode the HTML CSS JavaScript all that crap That's what it meant to be a UIUX designer. And maybe you would prototype things, you know, here in Figma prototype mode. That's gone. You don't need to prototype like this tab up here. I don't know. It's just it should be gotten rid of in my opinion because you have Figma make that already exists and then becomes like a real product with code that is prototyped. Um so that's changed a lot and so now um yes it it is still in important to understand the fundamentals of UI UX it is but in my opinion going forward it won't be enough because now the barrier to entry to front-end development and understanding like how to translate your design to code and into the browser which is something I taught for many years as well HTML CSS JavaScript all that good stuff. The barrier to entry has been lowered massively because now all it takes is prompting skills, right? Like, hey, I designed this thing. I set up the tokens and the variables and the auto layout to ensure that you understand how to implement this and that that like that's the that's the only skill that's required now to realize your UIs in a browser, right? So that becomes an inherent part of what it means to be a UIUX designer. Except I don't think it makes sense anymore to even label yourself as a UIUX designer because now you're doing something more than just UIUX design. Yeah, you are UI you're you're doing UIUX design, but you're also able to build on top of that and not just the front end, right? So before we had like three different specialties really. We had sorry I'm I'm I'm giving you a long like winded answer but I don't know hopefully you find this interesting um you had you had well we can break it into even more like like what goes into building a whole SAS right like a whole an app a website or project well you have branding brand identity design you have graphic design for different assets and illustrations that's its own little thing now of course multi-d disciplinary designers existed who could care of all those things and then you have UIUX design. So those three things are like designoriented um motion design too as well. Um and then you know that's one realm design right and then the other realm was code front-end development translating things to HTML and CSS. Um that used to be like its own thing as well and then you had like true front-end developers who understand React JavaScript and they can make things in UIs function properly as well. And then you had back-end developers who dealt with the database structure and and you know connecting everything. But now it's like almost like a one-man show in terms of developing the product um because that's how much AI has assisted and become better with especially with the use of tooling like MCP servers and skills like cloud code skills. So now I would yeah like just to answer your question I would not call like I I I I would not want to live it doesn't make sense to live in Figma anymore. Um Figma can be used to you know set the initial design direction. Um it could be used to enhance AI produced designs like what I just did at the beginning of the stream. Um but you're now you're using other tooling like cloud code cursor whatever. Cursor is expensive as hell. I switched off of that recently. Um, but you're using other tooling that is AI that helps build your product in the browser and then you can even make it function. So like now we have more capabilities with less upfront requirements of training and upskilling essentially. So yeah, the the the whole process has been flipped up on its head within the last year or two. It's been crazy. Okay. Um, and do you think Figma is going to remain primary tool for UI design? Um, if you would ask me that like a few years ago, I would say yes. But now there's so many different workflows. A lot of people are kind of just starting the design process with prompting and then refining it thereafter. So yeah, it's hard to say what's going to happen with Figma um because we've seen so much disruption and they're trying to keep up with it. And so we'll see how that turns out. I I don't want to make, you know, um, assumptions. So, you had a project before that used AI to think of ways to turn your hobbies into profitable jobs. That's something that can be just done by any LLM. That's kind of what I meant. Oh, okay. See, I think he was answering a different Oh, yeah. Yeah, I remember that project. That was last year. I forget what it was called, but I did a tutorial series on it, but yeah, for sure. Um, Gary, is there a way to ask for UI review for opensource tools? I'm going to be honest with you. I don't know what you mean by that question. Okay, let's continue on with some of these questions. Uh, do you use the Claude Max plan or is the pro pro plan enough? So, I use the $100 plan. Is that max or or is it I think that's pro. I'm not sure. I haven't had to use it enough to the point at which where, you know, I'm getting dangerous. I I was using cursor forever and cursor was like uh charging me $1,100 and that was during the redesign of design course. I might as well just get it up here so you're not staring at the same freaking thing. Um and like yeah, the entire design course platform I redid and rebuilt. Um, we upgraded from Vue 2 to Vue3 and Nux and um, it took two months and through about 75% of that time I used Claude Code and I had $1,100 bill and I was using Opus 4.5. 4.6 wasn't out yet um, during some of that portion and I said, you know what, like everybody's like, switch to cloud code. It is so much cheaper and they were right. I could still use Opus 4.6 six and I could still prompt as much as I want and not even get anywhere close to like use using and maxing out what I needed uh based on my use case. Um now here's the thing. You might be hitting limits um perhaps depending on if you have like one of the open claw things set up and things are running autonomously and you have a bunch of like like sub agents running all the time. I could see that being a problem. Have you tried Open Pencil, the open- source Figma alternative? I think I just did a video on that on my YouTube channel. Um, if I go back here, I Where's the videos at? Um, was it open pencil that I did or was it just pencil? I did mention mention pencil, but paper I did as well. Was this the open pencil one? I think it was either way. Okay. Um, let's check this out. Let me go back Um, okay. So, I've been testing Cloud Code and Figma MC, but I'm noticing the limitations of web integrations. Do you think tools like Antigra Gravity help supercharge supercharge cla? So, anti-gravity, I did one single video on it when it came out like a couple two or three months ago or something. I think that's how long ago it was. I might be wrong. Um, and so therefore I'm not exactly familiar and I remember with how exactly it works. So I can't really answer that question too much. If someone is currently a UIUX designer, is your cloud code the next step to start adding the front-end skills? I cla similar. Yeah, for sure. And you know, you have different variations uh or you have you have different types of tooling, AI tooling that'll help you get there. Um and they're they're based on probably I would say two different categories really. You have the AI build solutions of which there are many. Um Figma make is an AI build solution that's you know in a SAS called called Figma. Figma make um Replet that's another one. They are competitors. Um lovable that's another one. They're competitors. I think Versil VO or whatever is Z I I never used that one. I think that's one still around. Um, what else is there? Um, Bolt. Is Bolt still around? That was one of the early ones as well. Anyhow, you have these these these these builders that, you know, you're going to pay there's less flexibility and they're more way more for for beginners, I guess you could say. Although I'm not even sure if I want to say that because claude code and and those type of like AI agendic idees um that's the other category like claude code would be one cursor would be another one um those those type of tools offer a little bit more flexibility better pricing I would say um and like I said just being more flexible um and and those tools you you can honestly I would probably say just go with those tools. Um what I mean is by just learn the term like the e either cloud code desktop or the cloud code. Um they're very similar. They're just different environments. They all have the same capabilities for the most part. I would say probably just go there. Um you you learn that you you won't be tied to anyone SAS outside of just the model provider like cloud code or cursor or something like that. Cursor is expensive though, so I don't know if I really even want to recommend that. So at this point in time, which may change tomorrow, I would say cla code is probably it. Um or or you know similar tool. Um do you have good cla skills for web design? Oh, you mean like their actual skills, not my personal skills? Uh yeah, there's the front-end design skill. I I already talked about that on in a YouTube video. Uh but I I foresee a future though where you know there's a there's a there's a a a website theming marketplace that's either you know skills that also have access to um resources and assets like maybe Ry files that are a part of that theme um you know spline 3D or maybe Unicorn Studio asset files that are part of that theme and then you can just like the modern incarnation of website themes and templates would um ones that AI agents can directly tie into and build layouts per your description that are based on specific themes. Um I think that's where, you know, the future's going. I haven't really seen anything big come along that way yet. Maybe I should build it. Anyway, um let's check out some of you are you are everything with AI. Yeah, I'm I mean I'm trying to stay, you know, on the curve because that is what people are interested in. A hack on YouTube is just to mention Claude code in your title and you're gonna get 10,000 views. Um, oh yeah, it's max, but they also have a 200 one. I don't pay for the 2001. The $100 one is fine for me. Um, here's one. Should I put in effort to learn logo design if I am an aspiring UX design student? N those are two different things. Brand identity design is completely a different discipline than UIUX design. So, you could still have a great career as a brand designer because the one thing AI sucks at is brand design. If you ever ask it to design a logo, it's just like it'll do it could do some things well like sports logos and like mascot type of logos, you know, it could do them pretty decently. But if you ask it to do like abstract you know highlevel type of ideas like this that merge you know these unique ideas like okay a leaf with the typical AI symbol what happens when we merge them we take we take this shape and and put it over here to create this like separate leaf and then this part becomes the flower like abstract unique relevant like that type of brand identity which in my opinion for SAS is like the best type um and even like that's the type like that like mo lo most large corporations have you know like the FedEx logo where you have the the the white space arrow in in the middle between the index like that type of stuff that type of critical thinking AI is terrible at. So like if you can think like that and you can great you know become a great brand identity designer that's great. Um, if you're thinking of becoming a UX designer slash UI designer, like I said, I yeah, that's great and all, but you're going to have to add the build skills on top in my opinion. Um, you're going to be worth way more than somebody who's just solely focused on that. Unless you are high-end in that regard, like you have a ton of experience and or you're just like a freaking phenom and you produce the most beautiful UIs possible that companies will still pay for. Um, so yeah. Okay. Hopefully that answered that. Did I say that the Cloud Code uh course is launching soon? Yeah. In early access, so you can take it while I'm building out the course. I'm going to try to get the two hours. I'm at one hour so far. Um, so over the weekend perhaps in the beginning of next week and maybe late next week, I'll release the landing page for it where everybody can just join up for like a discounted fee. You know, it'll be less than a hundred bucks. Um, and I I think I'm going to update my system, my course system, so that I want people to follow along with their own project. Um, because we're going to be using Nano Banana 2 as the heart and soul of this project to, you know, do the landscaping work. you know, we're gonna have inpainting and all that cool stuff, but I don't want people like to build the same damn project. Like, I want them to still build a similar project with Nano Banana 2 and and I'll give ideas. We'll come up with different ideas for how people can build and follow along, but create something that's unique for them. And I might also build a quick system that allows people to submit their work in like a community or something and to get my feedback. I think that would be cool as a perk for as a part of joining the service. So, yeah. All right. We've been streaming for 45 minutes. We'll go back. I if I could find it design again. I just want to look at it again with fresh eyes. Um just to show the before and after result. Where the hell did the it go? Um is it this? Oh, yeah. Let me close these out. Let me get this uh one back up here. Let's open that up. Okay, one last look at what we did during this stream. All right. So, we had AI Claude code specifically with the front-end design skill create a landing page for this. And then we used a bunch of different techniques to end up with this an objectively better implementation of this vibe designed, vibecoded layout um right here. So hopefully you all found that um insightful as a way to elevate and just kind of go beyond what AI just spits out. That's going to give you a definite edge over many other people who are entering this industry right now. All right, everybody. Hopefully you enjoyed that and I will see you all very soon. End stream.