Making Vibe Designed Layouts Better

So take a look at this hero section here. This is vibe design with claude code and this is for the landscaping project as a part of the course that you all been following along. You can take it now about how to build and design a full robust SAS and it's a landscaping visualization app. Now I think this this hero section, you know, it's okay. It's not terrible, but it is vibe design and I really didn't give it any extra care outside of just generating these images right here. But I think we can really take it up a notch in terms of level and quality and making it unique. And so in this video, you're going to see me uh talking through my process on how to do this with a mix of skills that have to do with AI, but also handdriven skills. Okay, so here's that hero section. My idea um behind this is to really just open it up. I I hate that it's like in this enclosed little container. This is what Claude Design came up with. We're going to try to elevate it. So, the idea here is I want to have a house that is kind of just opened up and not in this container, but can still in a unique way kind of show the before and after effect along with different styles like this. I like this is modern. So, if I click this and drag it, you can kind of see what that's doing here. Um, childfriendly, you know, something similar like this. Okay. So, what I did is I went into Figma and I I did a I I screenshotted this layout right here and I went into Figma and I kind of got rid of uh everything in here. I can bring back the left content if I want, but my idea was I either have it like centered or a two column approach like this. So, we'll see. I'm not sure what I'm going to end up with. So, I'm just going to leave that back there. Okay. So I did a couple prompts here already here within chat GPT. And so let me come over here and I will show you going up kind of what I started with. I kind of showed what you know where this is going. And I'm not going to sit here and read this boring ass prompt, but I'll show you um iteratively what it came up with. So this is the first thing it came up with. I asked for like modern black and white siding. That's like a trend here. Um, with like, you know, a new construction house without landscaping. And, you know, the problem with this is if you try to take this into Figma, it's like, okay, there's not enough land because I, again, I want it to be a nice seamless, you know, piece of land with a house that's opened up into this entire, you know, area here. There's just not enough land to achieve that. So, it would look like a box. You'd have to go in a box or something or a column or whatever. That's not what I want. So, um, I said if the house is 50 ft away from the camera, push it back to 70 ft. So, I wanted to open up more. This kind of works, but again, if I take this in here, I and increase it. And if, by the way, you would hit remove background to to achieve what I'm wanting to do. Um, and then maybe hit control. And like the problem with this is it's not high up enough. Like I kind of want it to be high up on a hill. so that I can kind of really seamlessly fit into the uh the composition, I guess you could say, of the hero section. So, I went back and forth. I asked it to do an illustrative style that looks like crap. Um, this is a more simplistic illustrative vector style, but still there's too much happening. Um, and then I was like, "All right, maybe add the same thing." And I was eh. And then I asked it, "Put it on a hill." Um, and it did way too bad. But then it did this. I was like, "Hey, that's actually pretty solid. I like this." Um, and then I I was like, "Okay, take the same exact house, leave the the driveway, but make it like new construction without any landscaping." So, this is going to be the starting point. All right. So, here's the image. You can tell like there is a slight background um color difference. So, of course, um we're going to go ahead and remove that background. Now, I want to do the same thing up here with the other one. So, I'm going to paste that in as well because this is actually a pretty decent example. There we go. Copy that. Go back here. All right. Because I want to get these lined up before I start making big adjustments. Okay. So, somewhere around there. and we're going to have to remove the background of that as well. Now, of course, we're going to increase the size here, right? So, I'm going to take both of them and kind of increase the size. Now, initially, I think what I'll do is um bring back the text here just to get an idea of like maybe, you know, if this is going to work properly. I actually think maybe we'll center it. I'm thinking that because I It's still just not high up enough. Now, again, I could probably increase this a bit more. Yeah, I'm personally thinking maybe we'll do a centered approach. This is sort of what I was thinking here. Um, and now we can just real quickly emulate in a very simplistic idea, um, by taking this top layer and going like this. And we can kind of get an idea of like how closely they match up. It looks like uh this top one is needs to be moved up a couple pixels. All right. So, we're going to give this a shot. I have this wrapped in a frame. We have two images and um the one is a little bit smaller. I'm okay with that. Um and so what I'll do is just toggle off this top one. And then I'm going to take this frame and simply export that as a PNG. Okay. So, here is the prompt. It is juicy and large and meaty. I'm not going to sit here reading this. Uh you can read it and pause yourself if you want to. Um, but yeah, this is it's going to be a lot of followup to get this to work because there's a lot happening here. So, I let's go ahead and send it. Okay, I'm expecting this to be junk. Um, let's give it a shot. All right. What was that? I was looking away. Oh, okay. It's kind of what I wanted, but there should be a configurator somewhere. Okay. right there. So, diagonal swipe. Let's Let's try that. That's junk. That could be achieved with just uh standard CSS. All right. So, here is the first attempt. Um I I was not expecting it to be perfect and not get it right. Um but there's the little kind of um shader settings area where, you know, these are so basic. A lot of this can be achieved in just like CSS. I you know going through these like this is really like yeah pixel dissolve. It's not that good. So we're definitely going to have some um follow-ups with better shader effects. All right. So here's a follow-up prompt to get it to go better. You can pause and check that out. Okay. We're making progress slowly but surely. We're still not there yet. There's too much white space above it. Um, let me refresh just to show you what it kind of looks like at this point in time. That's not a good transition. Uh, some definitely more interesting effects. Um, like if I change the smoke bloom, this isn't that cool. And there's also an issue. It's not showing the before after. I I have to kind of like switch and then go to smoke. There we go. You can see it briefly, but then yeah, it's not it's not ideal. This isn't cool. All right, we're getting close. We got the um spacing issues worked out. Um if I refresh, there's still an issue where it starts in the right position, but for some reason it shifts upward. It does also have that nice transition um shader effect, but I want more of those to to, you know, kind of take a look at and experiment with. I think we can get some more interesting ones than that one that just kind of swept across. Okay, so I had to integrate more. Um, so this is the best one. But going back, here's soft. So if I refresh it, here's what the uh original one looks like. I here's diagonal. So if I refresh that, you'll see kind of what diagonal looks like, which kind of looks similar to wave, but let's try and refresh this one. That's kind of cool, but I'm not sure if I like it. Shutter. I don't like that one. Here's shutter. Eh, and then also pixel columns. Um, don't like that either. So, I think I like wave the best. Some things to fix about it, but that is kind of cool. Um, and then this hover effect. It needs to obviously show the original in the back and just only for the portal, like whatever. And again, I'm not even sure if I like this little reveal type thing. Um, so yeah, still have some work to do. Let's go ahead and keep on fine-tuning this thing. Okay, so we've made a lot more progress. Okay, so let me just refresh. We have a fade in at the beginning and then it I think I I'm settling on that particular shader. Um it has like a cool distortion. I also generated a couple more um you know landscaping styles. There's like three of them total. And if I hover over it, this is kind of the effect. I don't know. I kind of like it. And I think the total thing is like 600 kilobytes. It's not very very large. I had it really optimized the images as much as possible. I So yeah, I kind of like this. There's something I kind of want to do something else interesting in the background. I don't want to go too overboard. Uh but let me try to think of something that might be cool. All right, so I made it just a little bit further here. Um, we can see the clouds. So, I added a very slight gradient at the top. Um, let me refresh here. And yeah, you can see them come in. They're okay. They're I think they're pure CSS based clouds. Um, they're simple enough. I'm going to try one more thing before we wrap this up. All right. So, check this out. Stupid butterfly. I I have an idea for this butterfly. Um, and this was its first attempt. I don't like it. I we can make this much better. So yeah, let's think about that. Um I told it to make it like a flat kind of like 2Dish 3dish vector shaded type of uh butterfly, not this this type of clip art looking crap. Okay, so here is the original once again at landscape.co. Um and you know, like I said, it's not the worst thing ever, but I think we could definitely improve it. Here is the final version, or at least the final version at the end of this video. There are still some tweaks I want to make uh myself. Here is the final version. So, I'll go ahead and refresh this. You can see it comes in. We get the nice animation coming into play. We have these little little I you know, I I think we can improve these tiny little butterflies, but I thought that was a cool addition. And they kind of hover around the CTA button. I But yeah, here it is in its full glory. I think personally it's it's definitely an improvement over this. But one thing that's really important for people to understand is, you know, when you're when you're uh working with different designs and different variations, I'm not going to I I wouldn't throw this one away. You want to test you want to do some AB split testing to see which her hero section results in more signups because at the end of the day, you don't know for certain if this fancy version is going to outperform this version. Who knows? It might. That's why we test. Um, but hopefully you kind of um learned a lot about the process of what I do. Again, it's a very iter iterative back and forth process where you start discovering new ideas the more you prompt and the more you work with your handdriven skills. All right, so if you guys want to follow along with this course on exactly how I built the entire thing, you'll see that step by step. So definitely check that out. I will see you soon and goodbye.