Claude Code + Nano Banana 2 is SICK!
Chapters9
Overview of the course and the shift to using AI to generate the initial UI to focus on core product development.
DesignCourse dives into building an AI-powered landscaping app with Claude Code + Nano Banana 2, showing UI generation, asset libraries, and a playful video feature all during early access.
Summary
DesignCourse’s latest walkthrough by the creator demonstrates building an AI-powered landscaping SaaS using Claude Code + Nano Banana 2. The host emphasizes an active development phase with students following along, and highlights how AI-driven design helps him focus on core product development. He shares the initial UI that was AI-generated and explains how he used the Figma MCP server to brainstorm a fleshed-out interface. The video showcases an open-canvas-like UI, the integration of real video into the app, and practical UX tweaks to support prompts like “elevate the landscaping here” for seasonal and lighting variations. A concrete demo walks through uploading a second image, adjusting time, season, and fog, and iterating with prompts to enhance grass, trees, and even add an oval swimming pool with stamped concrete. The asset library—featuring over 500 vegetation and hardscaping elements powered by Google Image Gen 4—lets the user reference vines and other decor in context. Finally, the clip introduces a video feature that morphs between frames to illustrate before-and-after scenes, acknowledging some rough edges but underscoring how Claude-based workflows enable rapid feature iteration. DesignCourse positions this as a practical, taste-driven workflow for landscapers and DIY enthusiasts, with early access and a 30% discount available now. Expect future polish and broader demonstrations as the course progresses.
Key Takeaways
- AI-driven UI can pivot a project from rough concept to a fleshed-out interface quickly, reducing initial design bottlenecks.
- Using the Figma MCP server helped generate multiple main UI ideas, accelerating fleshed-out design decisions.
- Asset libraries (500+ vegetation/hardscaping items, image Gen 4 by Google) enable realistic, context-aware prompts like adding specific vines to a house exterior.
- The video feature demonstrates before/after storytelling by morphing frames in 1080p, illustrating how AI enhances visualization of design changes.
- Iterative prompts (e.g., changing time, season, fog) yield tangible improvements in imagery, such as healthier grass, leaves on trees, and configurable pools.
- The course emphasizes workflows and processes with Claude Code, aiming to teach developers how to build AI-powered apps efficiently.
- Early access pricing (30% off) invites designers and DIYers to experiment with AI-driven landscaping projects.
Who Is This For?
Essential viewing for designers and developers curious about building AI-powered SaaS like an AI landscaping app; ideal for landscapers or DIY enthusiasts who want to see practical AI-driven UI and asset workflow in action. The video also benefits students following DesignCourse’s ongoing Claude Code + Nano Banana 2 series.
Notable Quotes
""I’m going to show you how we’re going about building this from a highle perspective.""
—Intro framing that he’ll outline the build approach at a high level.
""The Figma MCP server helped me come up with a bunch of different ideas for the main UI and to really get it fleshed out.""
—Credits the Figma MCP server for ideation and UI fleshing.
""This is the initial UI. It’s ugly, whatever.""
—Honest admission about early design state before improvement.
""Over the weekend, though, it’s now time to really elevate this.""
—Shift from rough UI to a more polished concept.
""Over 500 different images of different vegetation and hardscaping… generated with image Gen 4 by Google.""
—Describes the asset library capabilities.
Questions This Video Answers
- how does Claude Code integrate with AI-powered UI design in real projects
- what is the Figma MCP server and how does it help UI ideation
- how can I use image Gen 4 by Google assets in landscaping AI projects
- how does the video feature in Claude Code animate before-and-after scenes
- what are practical prompts to improve AI-generated landscaping visuals in real-time
Claude CodeNano Banana 2DesignCourseCloud CodeFigma MCP serverimage Gen 4 GoogleAI landscapingasset libraryvideo featureUI prototyping
Full Transcript
Check this out everybody. This is so freaking fun. So right now, for most of you who don't know, I'm building a course. It's an active development in this early access period. So I have a bunch of students right now and we're all following along and I'm showing you how to use Cloud Code to build an AI powered SAS of some sort. In this case, it's a AI landscaping app. But other students are building other types of apps, maybe like tattoo visualization, um interior decorating. There's a bunch of other ideas. And what's really fun about this is I'm going to show you in this video today kind of how we're going about building this from a highle perspective.
Um, so I'm going to show you the main UI that I had AI generated. And one of the things that I've done intentionally from this course, which really deviates from what I used to do when I started a project, is I'm letting AI take care of all the design initially so that I can focus on the core product development and kind of get an an understanding of what's possible. So, this is the initial UI. It's ugly, whatever. So, over the weekend, though, it's now time to really elevate this. And so, I used and I actually made a video about this last week.
Um, the Figma MCP server helped me come up with a bunch of different ideas for the main UI and to really get it fleshed out. And so, I ended up with this uh UI right now. It's obviously it's still something that's, you know, I I'm still building it out. And it's basically an open canvas. Uh it's kind of like almost like a Figma open canvas of some sort. And I think that makes the most sense. So this is the backside of my house right now. Um what's really cool is I integrated video into this as well.
So just definitely check this out. This is so fun. So this is the backside of my house. And you know, let's say I'm interesting in improving the landscaping because it is garbage. I'm not a landscaper. I hate landscaping. and going to upload a secondary image which is basically kind of like the same kind of uh perspective except it's slightly shifted over. So if I show you right here, you'll see all I did was step over to the left a bit and take this angle right here. And you'll see why I did that. So let's say for instance, um this is going to be the after one.
Uh let's say for instance we want to make this better. So the first thing I'm going to do down here um notice it says time. So, if I click here, maybe we'll do morning, the season, maybe we'll do summer, and then maybe we'll make it foggy. All right. So, I'm going to change the UX of these. Uh, this is still a little bit of remnants left over from um AI. And I'm just going to say elevate the landscaping here and make the grass nice and healthy. A super simple prompt for this. All right. And here is a quick animation that kind of occurs when we're waiting for it to generate.
And here it is. Okay. [laughter and gasps] So yeah, it added some bushes, you know. I mean, overall, if we compare it against this and this, yeah, that is definitely elevated. It's way nicer. It minded um the foggy attribute. Um summertime, notice the trees actually have leaves on them. Super fun. But we could take it further than this and do other interesting things. For instance, add an oval swimming pool in the yard with stamped concrete. So we can work on this iteratively over each one. Uh, okay. Oval swimming pool right there. There we go. A little bit too close to that area.
Um, overall not too bad. Now, I also integrated in painting. So, if we wanted to do something like, okay, we can specify maybe just this entire portion of the house and we can tell it and reference a specific type of vine uh that we want it to integrate. We'll go to the asset library vines and maybe we'll choose these ones right here. All right. So, it's going to pass that into the context. And now I can come over here and say add a couple Clementous vines going up the house. Don't add too many. And integrate it realistically.
All right. So, this will be the last little demo before I show you the video feature, which is super cool. [laughter] Okay. Yeah, it's a little silly. You can get carried away obviously. Uh, but what's really cool about the asset browser, there's like over 500 different images of different vegetation and hardscaping and landscaping elements that was generated with image Gen 4 by Google. Okay, so now let's test out the video feature. This is so freaking fun. What we can do is take maybe the original right here and then also select the other one. Then we can go ahead and click on video.
Now again, this is not yet designed. This is all a vibe design right here. So, it definitely needs improvements. There's just too many options here. Um, but what's really cool is we can do a orbit left where we start off here with the start frame and then we end here in the end frame. I'm just going to leave it on natural morph. Um, we'll do 1080p, gradually build the walkway around the pool and fill it with water as the camera orbits. it will take care of the rest um of everything else and we should get a really cool pivot of our before and after.
All right, here it is. Let's check it out. Oh no. Wow, that's interesting. All right, so it is sometimes difficult to really control exactly, you know, how things will transition. It just decided to add all that kind of like that fog type thing that's going on in the background. But it's actually pretty cool. Um, I'll show you a couple another example that I did um with like my sister's house and it's just so super fun. And so, you know, building out feature by feature is something, you know, once you understand how to work with Claude and everything, it then just becomes a matter of your taste and how you want to see your project be built out.
Technically, achieving all this stuff is not really all that challenging anymore. Um, and so I'm trying to teach workflows and processes. So, that's what this course is all about. And, um, you can go ahead and take it now. Early access. Uh, there's 30% off. We're having super fun, a lot of fun with this. And I really just wanted to show quick update of like what we're building so far. This is super fun. I think there will be a lot of value in it for landscapers and also just home enthusiasts, diyers themselves. So, I'll be trying to promote this as well.
So, anyhow, I will see you all very soon with more videos. Goodbye.
More from DesignCourse
Get daily recaps from
DesignCourse
AI-powered summaries delivered to your inbox. Save hours every week while staying fully informed.









