Claude Design is SICK - Real Landing Page Demo

Okay. Is Claw Design as good as they say it is? Check this landing page out that I've spent a few hours building with Claw Design. Now, this is for the landscaping AI infused service that we're building as a part of the follow along course. Check out the description if you want to follow along with this to see how to build the full thing, including this landing page. Um, and I'm actually pretty impressed with it. I'm going to show you this landing page. It is pretty sick. Right here is this interactive section. I told it, you know, I kind of wanted to do like a before and after sort of thing. Um, we can actually change the styles like this is for entertainment before and after. This is modern and a nighttime childfriendly. Okay, pretty cool. I had to integrate these watermark graphics here for more texture in the background. I'm happy with it so far. The next section I also um specifically told it to build and I got pretty specific. So right here you can see like this this this orbiting kind of uh plant assets with this UI in front of it. I described in detail exactly how I wanted this to to integrate and it did it on the first shot. I did make some adjustments about the size and you know how large this orbital thing is. Again pretty nice. I like it. The next section I also advised it what to do. I wanted to have like an area where it shows the fact that, you know, each of the 500 plus plants and vegetation we have all has information about it. Again, good solid design. Let's check out the next area. This right here, I also told it to integrate this video. So, you just attach the video that you want. I told it I wanted like a centered headline and underneath it kind of just like a walkthrough about how it works. So, this is also a part of the system that you learn how to build from the course. It's a before picture and an after picture and then VO3.1 I will, you know, with the help of a modal and settings will create this cool sort of before and after video. So, it's another really cool feature. Next up, this here, the most of the sections underneath this, I just told it to go, okay, build all these sections on your own with your own discretion. And then I went through and I refined them. Now, I didn't upload placeholder screenshots here, right here, but this this section's sick. I like this. This is good. Uh, it kept this part fixed. Again, I did not describe this layout at all. Looks solid to me. This next section is really cool. Now, you see these little leaf graphics floating in the background. I told it to add that because I wanted more texture. There's a lot of flat things happening here. So, this is relevant. You know, this this is a landscaping service. We have these subtly floating, you know, differently sized leaves with specific colors that kind of match the color scheme. So, this part right here is really cool. Initially, it just had a masonry grid of um non-interactive before and afters where it just had a split view. I was like, wait, let's make it so that we can hover over these and we could show the before and after and let the user control. So, this is actually, you know, this is all results from the system itself in the back end where people will use it. And I used it to create these before and afters and different, you know, uh settings. This one's funny. Looks like my yard in the front right now. Anyway, I Yeah, these ones are unfinished. I didn't do those yet. So, this is a I really like that section. Super sick. Now, this just wait for this part. You're You're going to be like, "What in the heck?" Move your mouse. Watch the yard transform. So, I wanted to do something that had to do with like 3JS uh shaders and effects. Check this out. Yeah. Follows the mouse. Shows you the reveal in like a portal effect. I don't know if if I really like that particular effect, like if it fits the branding, this sort of like portal thing, but look how cool that is. This is my sister's house, by the way. The back of her house. Okay, so what else? This section, it completely came up with itself. Homeowner, DIY, and landscape pro. Now, it knew to take all this stuff because I gave it the entire project folder that we've been working on. And so it has all the context of how to build and what copy to build and what sections to build as well. Now come down here. Build on a real plant database. Again, I haven't updated these uh placeholders. Nice subtle little uh you know um I guess you could say parallax effect on scroll. Now this is kind of showing up laggy because there's a lot of stuff running on my computer and like recording at the same time, but it is buttery smooth otherwise. We got the pricing cards here. This is just kind of fake pricing for now. We got a homeowner's landscape, one very happy realtor. Simple fact section. I had to add these little trees just for texture. And there we go. This part needs fixed on here. But that's a pretty robust landing page. And again, just a couple hours of communicating with the AI, telling it what I want, what I envision uh to occur on the landing page. Uh and and so I have to say this is one of the best experiences I've I've had for a product that's kind of like a lovable like just you know purely it's not based on an IDE at all you know like cursor or clawed code. This is more like a userfriendly sort of way and you could still get great results with it, you know, just communicating directly in this type of UI. So, let me show you kind of how I approach this so you all can kind of get an idea of like maybe okay, maybe that's how I should do it. So, claude.ai/design, that's how you use it. Click on design systems. That's the first thing I did before trying to generate a landing page. And essentially a design system allows you to attach like your entire code base uh as one of the options which I did and it automatically analyze it and extract the existing design system that I had set up within claude code. So I right here landscape design system published. If I hit open I this is actually pretty sick. So it it kind of recreated the main editor the floating editor UI. doesn't do it perfectly right here, but outside of here, we have like this marketing dashboard sort of thing. This is kind of like a quick little potential layout that it made for a landing page. I don't like it. Uh, but it does have all the type. This is the the actual design system part. Uh, color palettes that we've defined in the actual system. It's extracted all this stuff and just made all of it for us. And this is important because you know if you do have an existing project and you wanted to have like a really good landing page then you want to associate this you know uh design system with that landing page which I'll show you in a second. So that's the actual design system. So new design using this system. Okay, that's what you would click when you want to start like a landing page or maybe a different page like a dashboard or whatever. I want to show you something very important. So this is the uh the main editor in claw design for that landing page that I showed you. I if I scroll all the way up and I start scrolling down, this is how much I prompted it. Again, look at look at the assets over here that I included. That's for this part. Look how much prompting this is. This isn't oneshotting. So this isn't like a oneshotted landing page. You have to anticipate and be willing to work with it and use your design eye in order to, you know, basically direct it and steer it. So yeah, it gets pretty far on its own, but if you're somebody who doesn't have any UI design sense or skills and UX skills, you're not going to make it as far and create as much of a polish project as somebody who does, who a understands what good design fundamentals look like because AI doesn't always get it right, but also b somebody who understands the technical abilities, capabilities of front-end development. Um that's like for instance understanding that hey you can ask it to integrate these vector sort of falling you know little leaves or whatever perhaps they interact and maybe they speed up based on scroll speed. So like these are this is the language of a front-end developer who understands you know what's happening like this thing right here. You know if you're if you're somebody who doesn't know what you know shader effects are then you might have a you know you that's not going to be in your skill set. And so just understanding and taking the time to understanding what is capable with front-end development is going to take you a really long way. So essentially what I would do now at this point and I have not done it yet is you can go ahead and take this and you can connect it to Claude Code itself. If you click on share right up here at the top and then you could choose right here handoff to claude code and that's going to be my next step because then we'll go ahead and integrate this as a landing page. Again, everything here isn't perfectly as it will be. U but we'll integrate it as a landing page and then there you go. You have a pretty sick landing page. Uh for the most part some tweaks are needed. Say oh look what I did. you know, all they did is just give it one simple prompt, no existing design system, no existing context, and what it produces is subpar. Well, that you have to work with it. So perhaps here in the future, if there's enough demand, we'll go through an entire landing page from scratch. Maybe we'll do it live and I'll show you how I approach it. Anyhow, I just wanted to share that more of like a show, you know, showand tell. If you want to figure out how we're building this landscaping SAS with the course, definitely check out the course here in the bottom. And I will see you all very soon.