# 159 Build STUNNING Websites with Claude Code + Google Stitch (full walkthrough)

# 159 Build STUNNING Websites with Claude Code + Google Stitch (full walkthrough) Speaker 2: Google Stitch is completely changing how websites get built and you don't need to know a single line of code to use it. Now, the problem is if you've ever tried to build a website with a coding agent, you know what happens. You get something a lot of times that looks AI-generated. You either get no images or there's weird spacing or like placeholder blobs everywhere. Not something you'd ever want to show a client. So I brought on Leon van Zyl who ran a web design company for over 10 years and now teaches hundreds of people how to build real applications with coding agents. He's going to walk you through his exact workflow from his design system all the way to the finished site. In just a couple of simple prompts, and if you stick around to the end, he'll show you how to generate custom AI images that actually match your brand's design system. You're going to love this one, so tune in and listen to Leon van Zyl. So Leon, tell us, what is somebody going to learn by the end of this episode? Speaker 1: Hey Corey, thanks for having me on your channel. You've been doing phenomenal work in the AI space. So one thing I've noticed and one challenge that people still have is to build sort of beautiful user interfaces for their web apps. Of course, there's a lot of little tools that we're aware of like, you know, certain skills and things like that. But in reality, when you're dealing with clients, there's a certain expectation from the client side for you to kind of show the design system and the concepts up front. And then you need a very reliable way of pulling that design system into your actual application. And of course, it needs to be robust and consistent. So, if you ever want to add more pages and components, that design system needs to be followed by your agent. So, what I'm going to show you, you know, during the session is a realistic workflow that you can use when dealing with clients to share the designs with them before you touch any code. We're going to show the prototypes to them to maybe get their feedback and then pull it into your application. And we'll go through everything, you know, using a coding agent to set up the design system for us, implement it, and we'll have a solid solution going forward. So we'll use Claude Code, we'll use Stitch, we'll touch on certain skills and MCP servers as well that can help us through this process. Speaker 2: Perfect. And Leon, does somebody need to know how to code to do this? Like, does somebody need any previous experience to do what we're about to show them? Speaker 1: Not at all. Not at all. You don't need any prior web design skills. You don't have to be a designer. You don't have to have coding skills, not at all. All you really need is a Google account to access Stitch, and you'll need access to some kind of coding agent, and it doesn't matter which one. It can be Claude Code, Cursor, whatever you prefer. Speaker 2: Awesome. Well, let's dive into your screen and see it in action. So really, we're going to be building a beautiful website over the course of this episode. So I'm excited to see it in action. Speaker 1: No problem. Let me just share my screen. All right then. So, what you're seeing here is not what we're trying to strive for. But what I'm trying to show you here is the type of result that you get from a large language model or, you know, for this example, I actually just asked Claude Code to build a website for my coffee roasting company called, you know, Ember and Oak. This was a one-shot prompt. I didn't iterate it on it at all. I really wanted to show you what something like Opus 4.6, as powerful as it is. This is the kind of result that you would get out of it. So, look, you know, it shows a few colors that don't look too bad, and maybe the font itself is not too bad either, but there are plenty of mistakes. You know, we've got, like, the ember and oak text is barely readable. You know, there's no images. We've got this little placeholder. It doesn't really look right. And when you scroll down, you see all of that sort of, you know, the trademarks of an AI design solution, you know. So, it's not really good enough for client work. But, you know, the subtle things that we can do to make this look a little bit And I'm just going to switch over to this example for a second. And this is what we'll try to build throughout this application. So, yes, this is maybe not an award-winning website at this stage, but... Speaker 2: Much better than the one we were just looking at. Speaker 1: Exactly. You know, the immediate thing that catches your eye is we've got an image of a person, you know, and there's a psychology around design there. You kind of want that contact, you know, you want to make eye contact with something on screen, you know, just having a smile and eyes and, you know, a human connection immediately helps. And, you know, as we scroll down, we see there are images on the pages, basically images everywhere. And that's something you don't really see when you're building something with a coding agent. Even if you had to use something like the front-end design skill, it will never give you images out of the box. It will just kind of try and come up with sort of the segments and the layout. But it will never give you images out of the box. You will kind of have to dive in, download images and plug it into the application somehow. But what this workflow does is it actually generates the images for you and you can just pull these images into the site. So it really is considering building an application that's got images embedded in it as part of the design. But also, these images are optimized for the web as well. We're not just generating massive AI images like PNGs and JPEGs and forcing them into the design either. These are all optimized for web. They can be cached. It's a super optimal little workflow that I'm going to show you. So, Corey, I don't know if you've got any questions at this point or can we just like jump into the workflow? Speaker 2: Yeah, let's jump in. I mean, right off the bat, this version looks significantly better than the first one. I mean, like you said, the one that you showed originally, it was so clearly AI-generated and it was, I mean, quite frankly, just boring and not something that I as a consumer would want to spend any time on. But the one, the second variation, the one that you've made using the workflow that we're going to see, I mean, much better, right? To your point, not like a, you know, A hundred out of a hundred award-winning website, but for 99 out of a hundred businesses, this is going to get the job done. So let's jump in. Speaker 1: Yeah, exactly. You know, it's really a matter of having something that you can iterate on. This is such a good foundation. And again, this was also a single prompt and I should probably have led with that as well. The difference is, you know, the only thing that's similar between these two solutions is in both cases, it was a single prompt to get to the solution. And now you have a really strong foundation where you can swap out the background images for whatever. If you don't like the parallax effect that this has, you can kind of see the text scrolls faster than the background. So that's called the parallax effect. And if you don't like these little animations, you can definitely swap things out and make it look way, way better. But there's definitely a massive difference. When I swap back to the first draft, this feels dead. Speaker 2: Right. Yeah, absolutely. Speaker 1: Yeah. So, all right, let's jump into this little workflow. All right. I'm just going to kill some of these sessions. They're not really too relevant. All right. So, this is a solution that's currently working. So, I'm just going to let that run in the background if we do have to go back to it. But I think the... Just as a starting point, so that we can build all of this out together. I don't just want to show you guys something at eye level and you don't walk away with any value from this. I really want to show you step by step how we can go through this process. And it's not that bad. I promise you it's actually super straightforward. So, this is our starting project. This is a vanilla Next.js app. So, I simply installed Next.js using npx create-next-app and it set up this vanilla project for us and if we run npm run dev, we can have a look at our current You can have a look at our current app. Nothing fancy. It's just a simple vanilla Next.js landing page. So we're going to modify this web app to represent our new business. Which is the Ember and Oak Roastery. Now, this website is Stitch. So, it's a Google product. You can sign in with your Google account and quite honestly, I don't think you pay for a thing because I've been using it quite a lot and I haven't paid a cent for it yet. So if you are new to Stitch, you can just go to this website stitch.withgoogle.com and you can start a new project. The idea behind Stitch is that you can give it a prompt. So you simply describe to Stitch what you're trying to build and it will create a design system for you and it will also create mock-up designs of the pages and components that you need. Now you can be as high level and vague as you want to be. So I've got a few examples here. Let's just switch over to web. You can use this to build mobile apps or to mock up mobile apps as well. But in our case, we're building a web app. So, you can create a really simple prompt or just pass a prompt like this. But I think we're going to be a little bit more specific. So, I'm just going to pass something like design a modern trendy website for a specialty coffee roastery called Ember and Oak. Then I am actually going to provide some information. Remember that when you're designing websites for clients, the client will have some kind of, you know, they'll have some kind of branding sheet or some design system or some guidance in terms of the color preferences, even secondary and primary colors and accent colors. They might even share a logo with you or something that I can help you figure out what sort of vibe they're going for and any fonts that they prefer. So if you can get that information from the client and then that's what we're passing into this prompt as well. I'm just calling it the brand vibe. Speaker 2: And you're using specific, so you're giving it specific fonts as well. Speaker 1: If it's available. So the workflow we're going for here is we're trying to, you know, I'm trying to showcase how you would typically interact with clients. And when a client approaches you to design a web app for them or their website, they will give you some kind of guidance. You know, even if it's just a logo, get something from them. So if you have this information available, try to add it into the prompt. And then it's just a shame I can't really fit everything into the screen. But now I'm just going to provide the requirements for the pages that I'm trying to create. This is simple. We're just going to focus on the landing page. So for the main page, we need some kind of Euro section. We've got some, you know, navigation sitting at the top and sticky just simply means that nav bar will be, you know, stuck at the top of the screen. If you don't have this information or you don't know how to prompt this, it's totally fine. Just try and give as much instructions as you can. So whatever you do have available, just try and, you know, throw it into the prompt at this stage. All right, so very simple stuff. I simply defined sort of the basic layout of the landing page and I explained what the nav bar should look like. So I'm going to simply run this. And Stitch is going to do two very important things. It's going to create the actual design system, which is a critical component to all of this. Design system is something that we can store in our project folder and we can instruct our agents going forward that whenever they create new pages, whenever they create new components, the agent needs to follow this design system to a T. And the design system includes everything. It's the typography, it's the fonts that need to be used, it's all the colors, it's all the color tokens that need to be used, any specific rules around spacing and borders, Everything goes into this design system. In fact, we can already see it every year. Speaker 2: So this is essentially the foundation that will hand to Claude Code. So instead of us going straight into Claude Code and saying, hey, build us a website and then having to iterate on everything, the font, the color, the branding, etc. It's like we come to Stitch first to kind of build that out first, and then we take what Stitch gives us, plug it into Claude Code, and then building the actual website itself is like 100 times easier. Is that kind of the thought process? Speaker 1: 100%. You're 100% correct. Like you mentioned, we haven't even touched the code yet. Now, you know, the way a lot of people go about this is they would start some kind of boilerplate project. They will then open up Claude Code and say, all right, Claude, I need you to use the front-end design skill or I don't know, you know, here's some guidelines on what I want. Go and build the UI. And then you sit there and you wait for 20 minutes for Claude to, you know, build some kind of mock-up for you. And then you realize that the design is actually not correct, so you scrap everything you did and you retry. Or even worse, you create multiple work trees, And in each work tree you try a different idea and then you just end up burning, you know, five times the amount of credit and it takes forever. So the idea here, and I mean you can already see how quickly we've iterated just on this. It took like maybe a minute or two and we already have a design system in place and we already have our landing page. And this is just a mock-up. It's not the actual code yet. But this will give us a really good idea of what this website could look like, what the landing page could potentially look like. And at this stage, we can make iterations. So we can simply chat with Stitch to ask it to make certain changes for us. In fact, I think I actually didn't press the button to update the fonts or something. It doesn't really matter. It's just applying the design system again. But this is really such an easy way, you know, just to kind of iterate on these different pages. And once we're happy with the landing page, we can move on to the next. We can... It's actually just... I'm just going to copy the menu page as well as the About Us page. I'll just place all of that into the chat. So I'm just detailing, you know, I also want a menu page with some items in it and I also want an about page with some items in it as well. Nothing too crazy. Speaker 2: And Leon, is the reason that we don't add all those pages at the beginning is because it's like, well, hey, first we want to make sure the homepage and the page under that look good first, and then we'll iterate on those. And once we feel like we have those in a good place, then we'll do the rest instead of doing all at once. Is that kind of what you're saying? Speaker 1: Exactly. So once you know that, you know, it's easier to iterate on a single page just to get that vibe, just to figure out the vibe that we're trying to go for. And once we're happy with this, we can kind of lock in this design system and just say, all right, then let's go in and generate the rest of the pages. And you'll see in a second, That one of the reasons we want to do that, sorry, if I go down we can see a page for our story. And then we're also, it's busy generating the remainder of those screens. The thing is if we just kind of tell it to generate 20 screens and we realize that we don't like the color scheme or we don't like the fonts, Stitch is going to take so much longer to now go and fix up the, you know, all of the different pages. So I would definitely recommend start with the landing page, figure out the vibe and all of those elements. Once you're happy, lock it in and generate the rest of these screens. Speaker 2: That makes a lot of sense because you probably, well, I guess with Stitch, it's essentially free, right? So it's not like you're worried as much about token burn here, but the concept applies. Yeah, it's time, right? If you're not burning tokens, you'd be burning time if you're having to iterate on every page, every time versus getting the homepage right first and then extrapolating that out to your other pages. So that makes sense. Speaker 1: Exactly. And so now we can see we've got our menu page and we've got our About Us. Of course, at this point, we can dive in and, you know, make tweaks to this. But the point is we can really quickly iterate on the design and find something that we like. Now, the reason I like this, the reason I like using this for client work is once I've done a little bit of work myself to refine this design, I can simply, let's go back, we can click on share. And we can enable sharing and then pass this to our client. So we can copy the link. We can share it with our client. And this will actually allow them to view these designs. And they can run Remix on the designs as well. So Remix will not delete the existing screens that we have here. It simply creates variations. So the client kind of has a say as well. You know, they can jump in, make certain edits and that you, well, you can decide how you want to go about it. But it's like, yeah, you want to easily share it with the client. Speaker 2: So if you're selling this as a service, like you said, it's like, you can, once you kind of get to this point in the workflow, it's like, all right, we've got a design kit created with Google Stitch. We've got an idea of what each of the pages are going to look like. Then I think it would make sense to share it with the client at this point, get their sign off before you go into Claude Code and finalize it. Speaker 1: Exactly. So at that point, the client has locked it in. They've confirmed that this is exactly the look and feel that they want to go for. So you're safe to spend the time to focus on building the actual app. All right. So let's assume then that the client approved this design. They're happy. We can go ahead and now build this into an actual working web app. Right, so let's then, sorry, let's just have a think about this. So Claude Code won't be able to view, well, you know, so there's a few ways of getting these designs into Claude Code now. We can right-click the design system and download it, and that will download it as a design.markdown file. So we could simply do that and then pull the design system into the project folder. Or for the landing page, there's a few options as well. For the pages, we can actually export. Where is this export button? It might be hidden behind this little recording thing down here. Okay. So, we can do that. So, we could try and export this as a PNG or we can actually have a look at the HTML code sitting behind this page. And then we could copy this and pass it to Claude Code and get Claude to try and implement the solution. But the more elegant way is to give Claude Code two things so that it can actually connect to Stitch directly. And Interact With Stitch, it can actually, you know, it can do everything you can with this project. It will be able to create projects. It can actually generate additional screens. It can pull down the assets that were generated by this as well. So Claude will be able to have full visibility of everything that's sitting in this project at the moment. So that's the route we will go. We're not going to manually pass anything to the project. We'll let Claude Code do all of the artwork for us. So, with that said, I am going to just link to a page so if anyone is interested to learn more about what I'm doing here. If you go to Stitch and you click on Docs, You can go to MCP, under the MCP section, you can go to Setup and Authentication. And this will teach you how to install the Stitch MCP server into your Claude Code instance and how to authenticate with it. So you do have to just set up an API key by following this instruction. So I can actually just open that page real quick. If you go down, you can create a new API key and simply copy it. Speaker 2: So this is what allows you to use Stitch within Claude Code natively, right? Unknown Speaker: That's all it is. Speaker 2: It's like a connector. Speaker 1: Exactly. It will provide all the tooling that Claude Code needs to connect to Stitch and to do the work for us. So let's just go down to... But they've got instructions for all the popular coding, agentic coding tools. So, they've got Gemini, Cursor, Anti-Gravity, VS Code, Claude Code. So, we'll be using Claude Code in this video, but obviously just find the tool that you want to use. Then you can copy this command. And back in our project, we can just paste that command into the terminal. Then we do have to replace this value here, this API key, with the API key that we copied from Stitch. Now, I am going to do something off-camera for a second. So, if you don't mind. Speaker 2: And so while you're doing that, again, just to reiterate to the audience, because I think there's a lot of confusion around like, well, what is an MCP server? Like, that sounds difficult or that sounds confusing. It's basically just a connector, right? If you set up the Google Stitch MCP server inside of Claude Code or Cursor or VS Code or wherever you're using, whichever agentic coding tool you're using, It just allows you to use Google Stitch inside that tool without having to physically go to the Google Stitch website. Like that's all that an MCG server means, right? Speaker 1: Exactly. It's a little connector. It's like a telephone line. It just connects your Claude Code instance to whatever external system it needs to talk to. So by giving Claude Code access to the Stitch MCP server, we're effectively giving it a direct line of communication to Stitch. So Claude can say, Hey Stitch, Leon is asking for the The design system, please can you send that to me and then I'll do whatever I need to do in the project using that. So I just did this off camera, but if you executed that command, It would set up the MCP server for you. I just have to manually do it because I don't want to share my API key for obvious reasons. Speaker 2: Fair enough. Speaker 1: But what we can do now is just start up Claude Code. I'll run it with dangerously skip permissions mode. And let's just ask, well, firstly, we can see if that MCP server is available. We can see that Stitch is connected. Which means that Connector is now active. And if we ask Claude, do you have access to Stitch? Claude will see if it's got access to any tools that will allow it to communicate to Stitch. And since that MCP tool is available, Claude is saying yes. So I've got access to a whole bunch of tools like creating projects, creating design systems. There's like a whole bunch of available tools that Claude can use now. Alright then. So now the cloth can actually interact with stitch. I am going to first instruct cloth to pull down that design system. So just to remind you. So, the first thing we want to pull down is this design system. So, this dude over here, because this is what's going to sort of create or lock in this design in our application. So, even if we ask Claude to add more components and pages down the line without using Stitch, Thought will know exactly what typography to use, what fonts need to be used. It will just understand what the site needs to look like going forward. Speaker 2: And that's key because I feel like a lot of times, especially if you're switching between projects or switching between sessions, it tends to forget. So by locking it in that one time, now anytime you go back to edit your site, you're not having to re-explain the fonts that you use or tell it again the colors that you use. Speaker 1: Exactly. That's something that keeps coming up in my school community as well, is people ...say that, you know, they've kind of stored the design system in the project, but whenever they extend the project with additional pages, the agent just kind of ignores it entirely. So, you know, it becomes a pain because then you have to maybe create sub-agents or set up a loop or something that will try and reinforce that design system, which isn't necessarily ideal. So what we're going to do now is this and I'm actually going to do something special for your channel. I'm going to enable fast mode. So this is going to burn through my credits really quickly. But in the interest of time, I'm going to enable this. And it's something I never use. And for anyone watching this, I wouldn't recommend it. Please do not enable fast mode if you are following along. This is going to cost me $30 for a million input tokens and $150 for output tokens. But because Corey is such a nice guy, I'm going to enable it for his audience. So, don't say I didn't do something nice for you. All right, let's do this. So, use the Stitch MCP to pull down the design system. And then store it in design.md. So this design.md, it is a convention. You don't have to use it. You can store it in whatever file you want. But the general convention for storing design systems these days is to create a design.md file. It's similar to the convention we have with agent memory where we have Claude and agents.md. So we're just creating a third file called design.md and all of this entire design system will simply be copied to that file. And I'll show you why in a second. Speaker 2: And that's what causes it not to forget, right? Speaker 1: Exactly. Speaker 2: The design component is confused. Speaker 1: Yeah. And for anyone confused by these memory files, if anyone has been wondering why do we have Claude.md and Agents.md, the sort of the open standard is that Agents.md is the memory file for pretty much any tool you can imagine, but Anthropic is just kind of Go against the grain and they've got their own memory file and it can be a pain because you know for every other agent you're updating the agents.md file. I'm just going to delete this standard stuff. And which means that whenever you make a change to the agents.md file, you kind of want to retrofit those changes over to the Claude.md file as well, which is not ideal. So the sort of cheat, the cheat code is just simply add this one liner in your Claude.md file. Just reference the agents.md and that's it. Now those two are paired. Speaker 2: And the way that I've always explained it or thought about it is that agents.md is essentially your system prompt for every coding agent that's not Claude Code. And then your Claude.md is your system prompt inside Claude Code. Like it's the same exact thing. It's just like you said, Anthropic makes theirs, Claude.md and every other agent decoding tool uses agents.md. That's the same system. Speaker 1: Yes, that's right. Speaker 2: So I've pulled everything in here. Speaker 1: Yeah, I'm just trying to check if I pulled down Source Stitch. I actually never even mentioned which project it was supposed to pull from. So I just so happened to use the correct... Speaker 2: Because you knew which one? Speaker 1: Yeah, so we were just lucky in this case. But if you are following along, definitely just give it the correct context. But if I compare these two next to each other, it's the exact same thing. So this is the design system that I manually downloaded from Stitch. But because we've added that connection between Cloud Code and Stitch, Cloud was able to tell Stitch directly to pass it the design system. So the only thing I forgot to include in my prompt was to say, you know, use, you know, just specify the specific project. Speaker 2: Great. Speaker 1: So in this case, it would have been The Amber and Oak website project. Okay, cool. So now we've got the design system in our application. The first thing I like to do is to force our agent to implement that design system going forward. So I'll just add a really simple instruction to the agents.nd file. I'll just call it design system. And we'll just add a simple instruction to say, Whenever creating components or pages, use the design system at design.md. And I'm actually going to flag this as a critical instruction. And that's it. So, your memory file shouldn't actually be complicated, by the way. Just keep it really, really straightforward. It should only really contain any important rules that you want to enforce. Historically, these files used to contain all sorts of crap like your file system and your project structure. That's totally unnecessary. These agents are good enough at exploring the code base. They can easily figure out what scripts are available from the package.json file. Just strip everything out. Only give it the instructions that it needs. Speaker 2: Great. Speaker 1: Right. So this simple instruction will force our Claude agent to follow this design system going forward. Right. So let's actually jump back into Claude. I'm going to reset it just so that this design system is pulled into its context now. And now, let me just find that page. Alright, so now that we've hooked up Claude to Stitch and we've now installed the design system and we've given our agent instructions to follow this design system going forward, I think we can now convert this landing page from Stitch. So this concept, this design, we're now going to convert this into an actual page in our application. And it's going to work. All of the menu buttons, everything's just going to work. Now again, if we were lazy, we could simply just copy the HTML code, We could then pass it to the agent and just say, replace the landing page with this. But we don't have to because we've hooked up Claude to Stitch. So, I am just going to pass a prompt. Apologies. Before we pass the prompt, I'm just going to copy the prompt just to show you what it's going to look like. Convert the landing page screen in the Ember Oak website design project. I just want to make sure I've got the project name correct. Ember and Oak website. Ember and Oak. Because I've got two now, so I just want to be really specific. Speaker 2: Right. Speaker 1: Alright, something like that. So we can give Claude this simple instruction and it's going to just know that it needs to go to Stitch to pull down everything it needs to know about recreating that page. But there's actually a really cool tip that I've seen to get even better results out of this. So it is optional, but I've seen it make a big difference, especially if you're working in, if you are working in Next.js or React apps, this does make a very big difference. We can search for a skill called, or we can just search for Stitch. Then we can search for this React components skill. And this will, so, you know, skills is just a way to give additional instructions to an agent. So, if we pass a prompt like this, the agent is going to do its absolute best to give us the result that it wants, but there's no harm in giving it additional instructions, you know, to kind of really, you know, the skill will kind of just give it this additional We're going to talk about feedback on how it's supposed to pull data from Stitch, what's the kind of information it needs to pull. It just kind of explains that you are able to pull down images as well and what reacts. Because remember, we're actually just converting an HTML page to React components. So it's a little bit technical. But this skill just kind of breaches that gap to explain in very clear terms how the agent should go about converting the Stitch design into something that React or Next.js can understand. And it follows best practices. So I am just going to open up a new terminal. I'm just going to press that command now. This is optional, by the way. So if this is a little bit confusing, don't stress about it. I'm sure that Claude will still do a really good job. But this is so easy to set up that, you know, it's just a single command that you run. Speaker 2: Yeah, it's like, why not do it? Especially if it's just a copy and paste. Speaker 1: Exactly, you know. Let's install it. So let's install this new skill in the Claude folder. And now... I am just going to restart Claude just to make sure that skill takes effect. Then I'm going to run our prompt again. And Claude should be smart enough to actually use the skill and use the MCP server to download everything it needs to understand how to recreate that landing page. And we are still in false mode, so this should be interesting. Speaker 2: Yep, so we see it did call that skill, React Components. Speaker 1: Yeah, there we go. So it's pulled in the skill. And while that's cooking, I can actually show you what that skill kind of looks like. So it's, you know, it's got a combination of scripts. It's got, you know, resources, examples. It's really got everything that the gold standard card. It's really got everything it needs to explain to the agent how to recreate these pages from the skill, from the Stitch designs. Speaker 2: Are there any other skills that you'd like to use inside this workflow, or is that kind of the main one? Speaker 1: I would stick to this for now. I might combine this with a front-end design skill from time to time, but you need to be comfortable giving very detailed prompts to get the agent to perform the way you're expecting it to. Sometimes less is more, and not overwhelming the agent is a good idea. Speaker 2: And so it's kind of built its own little plan here, right, of what it's going to do to actually implement the website designs that we created in Stitch. Speaker 1: Exactly. So there's a few interesting things happening here. Now this is going to go fast. It's going to set up the global design system. So this is really where the design system from Stitch is playing a big role. This is where it's storing the fonts that need to be used. It's the color tokens. Everything is going into this global.css file. It's using this mockdata.typescript file to store the data that's coming in from the actual page. So we can easily just, you know, replace the mock data with whatever we want. If you are building a website that needs dynamic data, so something that needs to, maybe your site needs to pull data from a database or some real-time source, you know, we can replace this mock data with something real-time as well. Speaker 2: Right. And so if we weren't in fast thinking mode, how long would this process typically take? 5-10 minutes? Speaker 1: So I did a dry run earlier today. It takes around about 10 minutes to go through this process. Speaker 2: And so do you ever use fast mode for anything else? Like, is there anything you would use it for or only if you were in a time crunch? Speaker 1: No, to be honest, this is the first time I'm using it. I'm trying to give you something unique. Speaker 2: Yeah, I appreciate that. I know it's expensive. I mean, for anybody, you know, in the audience, there's probably no reason to ever use fast mode unless you were in a time crunch in terms of minutes, like not hours or days. Speaker 1: It's totally unnecessary. I totally agree. Speaker 2: Now, have you done this? Have you gone through this with your own website or have you kind of just done this in appliance or what's been your workflow with this? Or I guess, how have you implemented this workflow specifically in your life and business? Speaker 1: So this is the workflow that I would use if I had to build websites for clients. I've used it for, basically I've used this in our school community. This has been the most common workflow that people have pointed out, like in my school community where they're actually building Pages for clients. The majority of the projects that I work on are internal dashboard projects, so they're not usually as sexy as this. And obviously, for my SaaS applications, I would kind of mock them out, like, using this process as well. Speaker 2: Right. Yeah, I agree. I think this workflow makes a ton of sense for anything that's going to be client facing or where the actual design is important. But I mean, I agree with you. Like most of what I've built or bytecoded myself has been just internal dashboard type projects or just like proof of concept to kind of show people what's possible. But agreed, if I was building something for a client or if I was selling a design, this is 100% the process I would go through. Or even if I wanted to update my own website and really touch it up and make it something that when people land on my website or clients or whoever, they look at it and they're like, oh, this is really professional or this is a legit business. Speaker 1: Yeah, well, just to give you a bit of history, this is something I do have a lot of experience in. I had a web design company for about 10 years. Wow, okay. Yeah, so it was mostly, man, this is going way back. But, you know, we initially did like Joomla websites and we moved over to WordPress, rest in peace Joomla. And, you know, so we went through the process with hundreds of clients in the past. And this is a very common workflow that you go through with clients when you're building designs for them. You kind of have to show the mock-ups beforehand because it all comes down to the time that you're investing into something that might potentially be scrapped. So the quicker you get that design out and get feedback from the client, the better. And there's usually a phase at the start where yes, you'll mock up the design, but once that's locked in, the client can't go and make changes afterwards to the design system. Now you're focusing on the copy on the website or you're focusing on backend logic. But if the client wants to go back and redesign the UI, there's a cost involved there. But this workflow is a normal, this is a traditional workflow. But in the past, this was all done by hand, right? So you would use Figma or some kind of design app to put all of this together. And it was time-consuming. And now we just build a mock-up within minutes. All right, cool. So, we've got our landing page apparently. So, let's actually check it out. Oops, let's just run this thing. Let's pull this up. And cool stuff. I just want to open it in the same browser as Stitch. Alright, so we can kind of do a side by side. And yes. So, this little chat window is in the way. I'm going to try and show you, but it looks like it's the same thing, you know. It's the same font that's being used. We've got a background image. It's sort of hard to see in the small design, but it looks like a, I don't know, like a, I don't know. Unknown Speaker: Copy and paste, I'm sorry. Speaker 1: Yeah. There's something at the bottom there. So it's the same sort of images. It just kept the color. It just didn't, you know, replace the images by any means. So there could be a few little issues here and there, but, you know, we can just keep prompting it to fix these issues. Speaker 2: But we do have the thing is this is a V1, like with very minimal effort aside from just generating the design brief and stitch. I mean, this is not a bad first run through. I mean, this is going to be better than 90% of existing websites out there, right? And obviously you would iterate on this and improve it, but it's still a really good start. Speaker 1: Exactly. And I say, we can now just go back to Claude to say, hey, actually you missed something or make a few edits, but yes, you can definitely reiterate on it. Something I do want to show you though is what I noticed is, well, there's actually a few issues with this design at the moment. It's nearly there. You know, we can prompt it just to fix spacing or... Oh, I see what the image. It is black and white. It's when you hover over it. Speaker 2: Oh, I see. Yeah. Speaker 1: All right. All right. So, I didn't expect that. All right. Cool. So, for the most part, it's accurate to the mock-up, but there are a few issues that I do want to resolve. Firstly, the image... Well, there's two images and they're both related to images. The resolution of the homepage image, this landing image, is not great. It's very pixelated. And that's actually by design. Even if I zoom in all the way on the Stitch design, you will notice that this image is pixelated as well. And that's because this is supposed to be a design concept. You are supposed to go and find a stock image or replace it with your own image. But I'll show you how you can use AI to actually replace this yourself. Then the second issue is that all of the images that the site is referencing are sitting online. These are actually hosted on some, I don't know, some Google server somewhere. So, it's a very expensive round trip. Every time someone goes to the website, we're going to download the images from some remote server, which is just slow and it's a waste of bandwidth. So, ideally, we want to optimize these images so that they're stored locally in our project folder and they use a different format. I think at the moment, these are PNG or JPEG images, so they're actually large. And all this really means is when people visit our website and they're on a slower, excuse me, and if they're on a slower internet connection, this website is going to take a longer time to load. So let's actually solve the second issue first. Excuse me. Alright, so what I'm going to do is say I need you to download the images for all pages from the, what do we call it, Ember and Oak Stitch Project. Store them in the public folder. So basically this public folder is where all the static assets are stored. So these, you know, all of the images and assets in this folder will actually be cached. So they get served to the client way faster. I saw them in the public folder and convert the images to WebP. So WebP, it's such a cool format. It can take an image that's like 200 kilobytes big and convert it into something that's like 20 kilobytes. Speaker 2: Oh, wow. Okay. Speaker 1: Yeah. So this is a much more efficient. Yeah. So the prompt itself is not that complex. But the magic it does behind the scenes, just to optimize the performance of the website is phenomenal. So Claude is now going to reach out to Stitch to say, hey, give me all of these images, right? So on all of these designs, this background image, this image, these, it's going to just say, well, give me back everything you have. And it's then going to convert it into Wave B, which is like a super, you know, super compressed, super optimized format. Corey, do you use Stitch for your designs? Speaker 2: So I haven't messed around with it yet myself. I used it a couple of weeks ago when they, I don't know if they re-released it or if they came out with like a new version of Stitch, but I remember it was getting a lot of buzz a few weeks back. So I popped in there just to, like, literally just mess around with it, create a simple design kit. I never did anything with it, but I will absolutely be using it to redesign my own website when I get around to doing that here soon. Speaker 1: It's fun. It's fun. You know, that's the thing. If it's for your own projects, you probably don't care too much. You wouldn't mind, like, you wouldn't mind changing the design, like, every month if you have to, you know. Speaker 2: Right. Speaker 1: But when it comes to client work, they, you know, that's the other thing. On larger client projects, they typically pay you at certain milestones. So, you know, they have a cost for the larger project. And then they would do payouts at certain milestones. And one of the milestones is usually when the design system is locked in. So, you know, you can't go through the pain of wide coding the entire website for them. And then, you know, you're proud of it. You're very impressed with the fact that you used skills and all of these cool little technologies that you show to a client who doesn't give a damn. And they have a look at it and they're like, no, that's not what we wanted. Speaker 2: Yeah, exactly. It makes sense to agree on that scope of work up front so that everybody's on the same page. Speaker 1: Exactly. Speaker 2: And so now it is going in there and downloading those images to the folder there in Claude Code and then converting them to WebP, like you said, and then essentially replacing the images on the server with these new WebP files. Is that right? Speaker 1: Exactly. So we can see it going through all these different files. And as it's downloading them, It's funny enough, these images are webby already. So it might be a waste of time or Claude is, I could swear these images are like JPEGs or PNGs. So it could be that it's just kind of converting them in a single step, which I suspect is happening. But sure, we can see all of these images being downloaded and being converted to WP. And I think in the interest of time, while this is going through, so while the agent is downloading these images, I'm going to just throw one more command at it. Oh, yes, we can see it actually just completed all tasks in like it's normal. Speaker 2: Oh, wow. Yeah, it just went through. Speaker 1: Oh, cool. So it's downloaded all of the images, update the pages and components to use these optimized images. All right, cool. So, that's basically how we can pull the images from this design system directly into our web app and optimize them. So, this page should load way, way, way faster. Now, the final thing I want to show you is how we can replace any image on this website with an actual AI-generated image. So, yes, you could go to a stock website like Pixels or, you know, whatever else and download an image and load it into here. But if you want something that's a little bit more unique, we can use something like Nano Banana Pro and generate an image that's unique to our site and it actually follows the design system as well. So, we can get really creative with it. So, for that, I'm not going to use Claude Code. As an added bonus, I'm going to pull up Cursor. And in Cursor, I'm going to switch over to Opus 4.6. And Cursor's actually got NanoBananaProbe baked into it. So, we can say, please generate an image. For our landing pages, yellow section, it should be of a female barista brewing coffee on the shelf in the Background. Sorry, man. There should be coffee bags with the, what do we call our brand? Speaker 2: Ember and oak. Speaker 1: Ember and oak branding on it. Right. Let's actually just do that for now. Speaker 2: Yeah, let's see what that gives us. I'm curious. And so I like how it is looking at that design system that you created earlier, right? It's not just going to go and generate a design. It's not just going to go and generate an image. It's going to look at our design requirements and specifications first. Speaker 1: Exactly. I'm glad you noticed that. And that is because of this rule that we put in the agents.nd file where we, you know, this very specific rule that tells it to follow the design, the critical, this critical step. So it even affects the images that it generates to make sure that even the images are in line with the vibe and the design system of the website. Speaker 2: I love that. Yeah. Speaker 1: It's really cool. It is really cool. So typically, I would replace all images on the dashboard or website with whatever gets generated by this. But in the interest of time, we'll just do the one. So, by the way, all of the images are now linking to the local images in our project. So, they're not pulling the images from the web every time. These images are all being served from the public folder now. Speaker 2: So, can we see those? Like, are those going to look any different to me and you or is it just how they are stored on the back end? Like, they're just going to be... Speaker 1: They will look and feel the exact same. It's just the way that they're stored. For local development, it won't make a big difference, but it's usually when you deploy your website to production, you get, you know, there's basically two impacts there. The first is on your user, you know, if they've got a slower internet connection, the page will take longer to load because you're downloading all of those image assets and they're huge. The second impact is on your actual VPS or your hosting company if they charge you for your bandwidth. You're actually going to reach your bandwidth limits even faster or you're going to pay for it. Let's have a look at this image. How cool is that? So we've got our barista. We've got our bags in the background with Ember and Oak on it. Even have the Ember and Oak logo. Speaker 2: That actually looks really good. Like that's way better than I expected. Speaker 1: How unique is that? So now we can say, replace the landing page image with this one. It actually converted the image to WebP already, which is really cool. So while that's cooking, let's actually pull this up and see if there's any difference. Speaker 2: And so basically, it's going to swap out the hero image on the existing website with the one that we just created, right? Speaker 1: Exactly. There we go. Speaker 2: Oh, nice. Speaker 1: Yeah. So, it's got a bit of a filter over it. So, we can probably reduce this filter. The image is a little bit hard to see. I think there might be some kind of filter over it. Can we make the image a bit more brighter and visible? And just to speed things up, I'll just use Composer too fast. So it should take a second or two and this image will be way more visible. But I think you kind of get the sense of it. It's just a very unique Look and feel through the page, especially when your branding is included. So obviously this is just a fake website. We don't have an actual logo. The agent tried its best to kind of mimic the, I don't know, maybe the font that we use or something. But you can definitely pass your logo to the agent as well. Just say, use this. This is what the logo actually looks like. Use it. Speaker 2: Right. Okay. Yeah. We see it. It updated itself automatically. And now it's, so now the font, like kind of the font, the roasted with intention, brewed with soul, like now that's a little harder to read, I feel like. Speaker 1: Yeah. So I would probably keep that filter on it, but I would reduce the opacity a little bit of this, your image, but I just wanted to kind of demonstrate the point, right? So you can get a high resolution image pulled into your page. And you can add any details like the logo and everything else that makes it really unique to your web app. So, Corey, I think from my side, that's everything I wanted to show. It's a very fun workflow. I think it's a very practical workflow. And it's something that you can use when dealing with actual clients. Speaker 2: Yeah, I love it. And I think the takeaway for me, Leon, is that, again, you don't need to know how to code to do this stuff. You can pretty much just And today, we're going to be talking about how you can use prompt, Claude Code or cursor, whatever tool you're using to make the changes needed, right? Like to swap out that image and to change the opacity of the image. Like we just told it to do that. It made the change. And if we need to tweak it further, we just tell it what to change. So this has been really valuable. And like you said, I mean, people can apply this to their own website if they want to beef up their own site. They could turn around and sell this as a service to clients and make this one of their portfolio offers. So Leon, this has been great. Where can people follow you? I know we'll obviously put your YouTube channel in the description and we'll have you as a collaborator on this video. So people should absolutely go subscribe to Leon. But where else can they kind of interact with you, Leon? Speaker 1: As you mentioned, I've got my YouTube channel. It's Leon van Zyl. So I teach people how to Build real-world solutions using coding agents and we cover everything from tools like Claude Code, Cursor, N8N. We, you know, dive into pretty much anything AI-related. So definitely check me out there. And I also have a school community if you want to dive in even deeper into building AI solutions. The community is called Agentic Labs. We're about 700, just over 700 members strong already, and it's a fantastic group of people. Everyone is willing to learn and help each other. So if you want to pick people's brain or share a problem that you're having, join the group. This is also how you can get direct access to me. So when you join this, This community, you can send me a DM. I'm very active in the conversations. So, you can definitely reach out to me there. We do have weekly Q&A sessions. So, every Wednesday, we've got a live Q&A. You can join. It's like a Zoom call. You can unmute yourself. You can talk to, you know, ask me anything, share ideas, whatever you want. And I also have several classrooms, including Claude Code. And I just released my agentic coding masterclass. And I'm quickly rolling out new videos. So there's like new videos coming out every day. And the cool thing about this masterclass is that it's interactive as well. So you learn new concepts and you actually get to play with an interactive presentation to learn how all of the stuff actually works. It's very practical as well. Speaker 2: That's so cool. I've never seen anybody do that, but that's really smart. Speaker 1: We do things different on my channel, man. We're not here to just talk at eye level. We're here to build. We practice what we preach. Speaker 2: Of course, as you should. So, you know, we'll have links to all of that in the description. And of course, like we said, go follow and subscribe to Leon on YouTube. And with that, Leon, appreciate your time and everybody in the audience. We will be back in a few days with a new video. Speaker 1: Thank you, Corey, for having me. It was a lot of fun. Congrats on the channel and I hope you'll invite me again. Speaker 2: Absolutely. Thanks, guys. Speaker 1: Cheers, cheers.