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

Show Notes

I sit down with Leon van Zyl, who ran a web design company for 10 years and now teaches over 700 people how to build real applications with coding agents. We walk through his exact workflow for building professional, client-ready websites using Google Stitch for the design system and Claude Code for the build — no coding skills required. Leon shows the difference between a one-shot AI-generated site and what you get when you front-load the design system before touching code. By the end, you'll have a repeatable workflow for going from design concept to finished website — including custom AI images that match your brand.

Links Mentioned:

Google Stitch: https://stitch.withgoogle.com

Claude Code: https://docs.anthropic.com/en/docs/claude-code

Cursor: https://www.cursor.com

Next.js: https://nextjs.org

Stitch MCP Server Docs: https://stitch.withgoogle.com/docs/mcp

Stitch Skills: https://stitch.withgoogle.com/docs/skills

Timestamps

00:00 – Intro

00:06 – What you'll learn: design systems for client-ready websites

02:04 – Jumping into the screen share

02:25 – The problem: one-shot AI websites look terrible

03:52 – The Stitch workflow result: side-by-side comparison

07:32 – Starting from a vanilla Next.js project

08:50 – What is Google Stitch and how to get started

10:00 – Prompting Stitch with brand details, fonts, and colors

13:00 – Why design systems matter for coding agents

16:00 – Iterating on the homepage before building more pages

17:44 – Sharing Stitch designs with clients for approval

21:23 – Setting up the Stitch MCP server in Claude Code

23:18 – What an MCP server actually is (simple explanation)

25:56 – Pulling the design system into your project

28:47 – Memory files: Claude.md vs Agents.md explained

33:24 – Converting the Stitch design into a working website

35:06 – Installing the Stitch React Components skill

41:11 – When to use this workflow: client work vs personal projects

44:27 – Viewing the finished website vs the Stitch mockup

48:27 – Downloading and converting images to WebP for performance

53:46 – Generating custom AI images with Nano Banana Pro

58:14 – Final result with branded AI-generated hero image

01:00:48 – Key takeaways and wrap-up

FIND ME ON SOCIAL

X/Twitter: https://x.com/coreyganim

Instagram: https://www.instagram.com/coreyganim/

LinkedIn: https://www.linkedin.com/in/coreyganim/

FIND LEON ON SOCIAL

YouTube: https://www.youtube.com/@leonvanzyl

What is Build With AI?

Most AI podcasts talk about what's possible. Build With AI shows you how it's done, live. Each episode, host Corey Ganim brings on entrepreneurs and operators who share their screen and build real AI automations, workflows, and tool setups right in front of you. No boring slides. Nothing that hasn't been battle-tested. You'll watch actual implementations get built from scratch so you can follow along and do the same in your business. If you're a non-technical entrepreneur who wants to put AI to work without becoming a developer, hit play and build along with us.

Corey Ganim: So Leon, tell us what is somebody going to learn by the end of this episode?

Leon: Hey Cory, 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 are aware of, 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 upfront. 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 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. to kind of show the prototypes to them to maybe get their feedback and then pull it into your application. And we'll go through everything, ⁓ 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.

Corey Ganim: 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?

Leon: 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 Cloud Code, Cursor, whatever you prefer.

Corey Ganim: Awesome. Well, let's dive into your screen and see it in action. we're 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.

Leon: 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 for this example, I actually just asked Claude Code to build a website for my coffee roasting company called 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, 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. We've got the ember and oak text is barely readable. There's no images. We've got this little placeholder. blobs or whatever on the page, 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, there's subtle things that we can do to make this look a little bit better. And I'm just going to switch over to this example for a second. And this is what will...

Corey Ganim: Yeah.

Leon: try to build throughout this application. So yes, this is maybe not an award-winning website at this stage, but exactly, the immediate thing that catches your eye is we've got an image of a person, and there's that psychology around design where you kind of want that contact, you want to make eye contact with something on screen, just having a smile and

Corey Ganim: It's much better than the one we were just looking at.

Leon: eyes and a human connection, immediately helps. And 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, you simply don't, it won't ever give you images. out of the box, you know, 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 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 like pull these images into the site. So it really is considering a, you know, building an application that 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?

Corey Ganim: Yeah, let's jump in. mean, right off the bat, this, this version looks significantly better than the first one. 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 workload 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

Leon: Exactly.

Corey Ganim: 99 out of 100 businesses, this is going to get the job done. So let's jump in.

Leon: Yeah, exactly. 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, 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 of this as you can kind of see the 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. If I swap back to the first draft, this feels dead. Yeah, so all right, let's jump into this little workflow.

Corey Ganim: Right, yeah, absolutely.

Leon: I'm just going to kill some of these sessions. They're not really too relevant. All 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. And 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. We can have a look at our current app. Nothing fancy. It's just a simple vanilla. Next year is landing page. So we're going to modify this web app to represent our new business, which is the Ember and Oak Roast Tree. Now, this website is Stitch. So it's a Google product. You can sign in with your Google account and But 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, stitchstartwithgoogle.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 registry 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 guide, guidance. in terms of the color preferences, know, secondary and primary colors and accent colors. They might even share a logo with you or something that can help you figure out what sort of vibe they're going for and any fonts that they prefer. know, so if you can get that information from the client and then that's what we're passing into this prompt as well. Just in terms of, I'm just calling it the brand vibe.

Corey Ganim: you're using specific, so you're, you're giving it specific fonts as well to use, right? Right.

Leon: If it's available, then I the workflow we're going for here is we're trying to, um, you know, I'm to showcase how you would typically interact with clients. And when a client, uh, approaches you to the, 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 navigation sitting at the top. Sticky just simply means that navbar will be 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 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, it's 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. 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, has 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 over here.

Corey Ganim: 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, et cetera. It's like we do, 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 a hundred times easier. Is that kind of the thought process?

Leon: 100%. You're 100 % correct. the, you know, 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 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, work trees. And then in each work tree, you try a different idea. And then you just end up burning, you know, five times amounts 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.

Corey Ganim: Mm-hmm. Right.

Leon: 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 you to make certain changes for us. In fact, I think I actually gently pressed a 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, 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. can, it's actually just, I'm just going to copy the menu page as well as the about us page. I'll just paste all of that into the chat. So I'm just detailing, I also want the menu page with some. items in it and I also want an about page with some items in it as well. Nothing too crazy.

Corey Ganim: 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, 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?

Leon: Exactly. 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

Corey Ganim: Mm-hmm.

Leon: Sorry, if I go down, we can see a page for our story. And then 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 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.

Corey Ganim: Right. That makes a lot of sense because you probably, well, I guess with Stitch is essentially free, right? So it's not like you're worried as much about token burn here, but the concept applies. think. Yeah, it's, it's, 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.

Leon: It's full time. Exactly. 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 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 of those screens. So the client kind of has a say as well. They can jump in, ⁓ make certain edits and that you can decide how you want to go about it. But it's ideal, I can easily share it with the client.

Corey Ganim: So if you're selling. 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 clog code and finalize everything. Right.

Leon: 100%. Exactly, 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 So let's 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 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 Cloud Code and get Cloud to try and... and implement the solution. But the more elegant way is to give Cloud Code two things so that it can actually connect to Stitch directly and interact with Stitch. can actually 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 Cloud 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 Cloud Code do all of the hard work 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 set up and authentication. And this will teach you how to install the stitch MCP server into your Claude code instance and, 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.

Corey Ganim: So this is what allows you to use Stitch within Cloud Code natively, right? That's what, that's all an MCP is. It's like a connector.

Leon: Yes, this will teach exactly. It will provide all the tooling that Cloud Code needs to connect your stitch and to do the work for us. So let's just go down to... They've got instructions for all the popular coding, agentic coding tools. 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.

Corey Ganim: And so while you're doing that, again, just to reiterate to the audience, cause I think there's a lot of confusion around like, what is an MCP server? Like that sounds difficult or that sounds confusing. It's basically just the connector, right? If you, if you set up the, the Google stitch MCP server inside of cloud code or cursor or BS code or wherever you're using, whichever agentic coding tool you're using, it just allows you to use Google stitch inside that tool.

Leon: this.

Corey Ganim: without having to physically go to the Google stitch website. Like that's all that an MCP server means. Right.

Leon: Exactly. Exactly. It's a little connector. It's like a telephone line. It just connects your Cloud Code instance to whatever external system it needs to talk to. So by giving it this, by giving Cloud Code access to the Stitch MCP server, we're effectively giving it a direct line of communication to Stitch. So Cloud can say, hey Stitch, Leon is asking for the design system.

Corey Ganim: Right.

Leon: 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. But what we can do now is just start up Cloud Code. I'll run it with dangerously skip.

Corey Ganim: Fair enough.

Leon: 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. All right then, so now the cloth can actually interact with Stitch. I'm going to first instruct cloth to pull down that design system. So just to remind you. Right. 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 Lord to add more components and pages down the line without using Stitch, Lord 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. So.

Corey Ganim: 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.

Leon: Exactly. That's something that keeps coming up in my school community as well. It's people say that, you know, they've, they've kind of stored the design system in the project and, whenever they extend the project with additional pages, the agent just kind of ignores it entirely. So 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.

Corey Ganim: Yeah, we appreciate that.

Leon: 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 never did something nice for you. All right, let's do this. So use the Stitch MCP to pull down the design system.

Corey Ganim: We appreciate that,

Leon: 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.mdn, all of this entire design system will simply be copied to that file. And I'll show you why in a second.

Corey Ganim: And that's what causes it not to forget, right? The design principles at least.

Leon: Exactly, exactly. 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 going 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 of MD fall. 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 claw.md file as well, which is not ideal. So the sort of cheat, the cheat code is to simply add this one liner in our claw.md file, just reference the agents.md and that's it. So now those two are paired.

Corey Ganim: And the way that I've always explained it or thought about it is that agents dot MD is essentially your system prompt for every, you know, coding agent that's not Claude code. And then your Claude dot MD is your system prompt inside Claude code. Like it's the same, same exact thing. It's just like you said, Anthropic makes there's Claude dot MD and every other agent at coding tool uses agents dot MD. That's the same, same system.

Leon: Yes, that's right. So I just wanted to...

Corey Ganim: So I pulled everything in here.

Leon: 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 it just so happened to use the correct. 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.

Corey Ganim: It just knew which one.

Leon: Because we've added that connection between Cloud Code and Stitch, Cloud was able to tell Stitch directly to pass it to the design system. So the only thing I forgot to include in my prompt was to say, know, use, you know, specify the specific project.

Corey Ganim: Right.

Leon: So in this case, would have been. the Ember 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 does 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 and give it the instructions that it needs. So this simple instruction will force our Claude agent to follow this design session, 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. All right, 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 is design. We're not going to convert this into an actual page in our application. And it's going to work. All of the menu buttons, everything is 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. like apologies before before we 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 just 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.

Corey Ganim: Right.

Leon: 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 XJS or React apps, this does make a 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... 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 feedback on how it's supposed to pull data from Stitch. What's the kind of information that 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 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 a...

Corey Ganim: Mm-hmm.

Leon: 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. Oops, I'm just going to reset command now.

Corey Ganim: Right.

Leon: 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 the single command that you run. We'll install it.

Corey Ganim: Yeah, it's like, why not do it, especially if it's just a copy and paste.

Leon: Exactly, you know, let's install it. So this installed 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.

Corey Ganim: Yep, so we see it did call that skill React components.

Leon: 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. it's got a combination of scripts. It's got 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.

Corey Ganim: Are there any other skills that you'd like to use inside this workflow or is that kind of the main one?

Leon: I would stick to this for now. I might combine this with the 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.

Corey Ganim: 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.

Leon: Yeah. 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's going into this global.css file. It's using this markdata.typescript file just to store the data that's coming in from the actual page. So we can easily just 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 with some real time source, we can replace this mock data with something real time as well.

Corey Ganim: You Right. And so if we weren't in fast thinking mode, how long would this process typically take? Five, 10 minutes.

Leon: So I did a dry run earlier today. It takes around about 10 minutes to go through this process.

Corey Ganim: Okay. And so do you ever use a fast mode for anything else? Like, is there anything you would use it for only if you were in a time crunch?

Leon: No. Now, to be honest, this is the first time I'm using it. I'm trying to give you something unique.

Corey Ganim: ⁓ ever. Yeah, no, appreciate that. I know it's expensive. 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.

Leon: It's totally unnecessary. I totally agree.

Corey Ganim: Now, you done this? Have you gone through this with your own website or have you kind of just done this for clients or what's been your workflow with this? guess how have you implemented this workflow specifically in your life and business?

Leon: 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.

Corey Ganim: Mm-hmm.

Leon: And obviously for my SaaS applications, I would kind of mock them out like using this process as.

Corey Ganim: Right. Yeah, I agree. I think this, 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 by coded myself has been just internal dashboard type projects or just like proof of concept to kind of show people what's possible. But agreed. Like 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 like really touch it up and make it something that, you know, when people land on my website or clients or whoever, they look at it they're like, ⁓ this is really professional. This is, this is a legit business.

Leon: Yeah, I'll just. 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. 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.

Corey Ganim: ⁓ wow, okay.

Leon: 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 mockups 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, you'll mock up the design, but once that's locked in,

Corey Ganim: Right.

Leon: The client can't go and make changes afterwards to the design system. Now you're focusing on the, sort of 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. So you would use Figma or some kind of design app to put all of this together.

Corey Ganim: Right.

Leon: time consuming and now we just build a mock-up within minutes. Alright cool, so we've got our landing page apparently, so let's actually check it out. Oops, let's just run this thing. Now let's pull this up. and cool stuff. I just want to open it in the same browser as Stitch. All right, 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. It's same font that's being used. We've got a background image. It's sort of hard to see in a small design, but it looks like I don't know, I don't know, like coffee being poured. Yeah. There's something at the bottom there.

Corey Ganim: cup of some sort.

Leon: So it's the same sort of images. It just kept the color. It just didn't replace the images by any means. So there could be a few little issues here and there, but we can just keep prompting it to fix these issues. But we do have the...

Corey Ganim: Well, that's the thing is this is, this is a V1 like with very minimal effort aside from just generating the design brief and stitch. mean, this is not a bad first run through. 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.

Leon: Yeah. Exactly. Exactly. And I say we can now just go back to Claw 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. So it's nearly there. We can prompt it just to fix spacing or, ⁓ I see with the image, it is black and white. It's when you hover over it that the color comes.

Corey Ganim: ⁓ I see, yeah.

Leon: All right, so I didn't expect that. All right, cool. So for the most part, it's accurate to the mockup. But there are a few issues that I do want to resolve. Firstly, the image, home, well, there's two images, and they're both related to images. The resolution of the home page image, this landing image, is not great. It's very pixelated. And that's actually by design.

Corey Ganim: Hmm.

Leon: Even if I had to 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 this 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. it's going to, and all this really means is that 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.

Corey Ganim: Mm-hmm.

Leon: 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. store them in the public folder and convert the images to VapeP. So WebP is 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.

Corey Ganim: ⁓ wow, okay. So just so much more efficient.

Leon: Yeah, so this is a really, 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 it's 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, give me back everything you have. And it's then going to convert it into WebP, which is like a super ⁓ compressed, super optimized format. Corey do you use stitch for your designs?

Corey Ganim: 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.

Leon: 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 you don't, you wouldn't mind like, uh, change, you wouldn't mind changing the design like every month if you have to, you know, um, but when it comes to client work, they, you know, it's the other thing on larger client projects, you, you, they, they typically pay you at certain milestones.

Corey Ganim: Right. Mm-hmm.

Leon: So, you they have a cost for the, for the larger project. And then they, 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 vibe coding the entire website for them. And then, know, you proud of it. You very impressed with the fact that you use skills and all of these cool little technologies. Then you show it to a client who doesn't give a damn and they have a look at it and they're like, no.

Corey Ganim: Mm-hmm. And they don't like it. Right.

Leon: That's not what we wanted.

Corey Ganim: Yeah, exactly. It makes sense to agree on that scope of work upfront so that everybody's on the same page. And so now it's, it is going in there and downloading those images to the folder there and plot code and then converting them to web P, like you said, and then essentially replacing the images on the server with these new web P files. Is that right?

Leon: Exactly. 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 WAP.

Corey Ganim: Mm-hmm.

Leon: 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. ⁓ yes, we can see it actually just completed all tasks in like a single, single go. ⁓ cool. So it's downloaded all of the images, update the pages and components to use these optimized images.

Corey Ganim: ⁓ wow, yeah, just ripped through those.

Leon: 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 code 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 cursors actually got Nano Banana Pro 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? Amber and with the...

Corey Ganim: Ember an oak.

Leon: Timber and oak branding on it. Right, let's actually just do that for now. Let's just see what we can.

Corey Ganim: 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 an image. It's going to look at our design requirements and specifications first. Yeah.

Leon: Exactly. Exactly. I'm glad you noticed that. And that is because of this rule that we put in the hns.md 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.

Corey Ganim: I love that, yeah.

Leon: 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, they're now linking to the local images in our projects. So they're not pulling the images from the web every time. These images are all being served from the public folder now.

Corey Ganim: 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 backend? Like they're just going to be a bit more efficient.

Leon: They will look and feel the exact same. It's just the way that they, that they stored for local development. won't make a big difference, but it's usually when you, when you deploy your website to production, 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.

Corey Ganim: Mm-hmm.

Leon: a hosting company, if they charge you for your bandwidth, you're actually going to breach 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 Perista, we've got our bags in the background with Ember and Oak on it, even the Ember and Oak logo.

Corey Ganim: That looks pretty good. That actually looks really good. Like that's way better than I expected.

Leon: How unique is that? How unique is that? So now we can say, replace the landing page image with this. It actually converted the image to a P already, which is really cool. So while that's cooking, let's actually pull this up and see if there's any difference.

Corey Ganim: And so basically it's going to swap out the hero image on the existing website with the one that we just created, right?

Leon: Exactly, there we go. There we go. So it's got a bit of a filter over it, so we can probably reduce this, 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.

Corey Ganim: ⁓ nice.

Leon: 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, gives a very unique look and feel to 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.

Corey Ganim: basically reduce the darkness a little bit. Yeah.

Leon: your logo to the agent as well. Just say, use this. This is what the logo actually looks like. Use it. All right.

Corey Ganim: Right. Okay. Yeah. We see it updated itself automatically and now it's so now the font, like kind of the font, the roasted with intention, brewed with soul. now that's a little harder to read, I feel like. So it's probably like, we'd need a mix.

Leon: Yeah, yeah. So I would probably keep that filter on it, but I would reduce the opacity a little bit of this Euro 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.

Corey Ganim: Yeah. Right.

Leon: It's a very fun workflow. think it's a very practical workflow. And it's something that you can use when dealing with actual clients.

Corey Ganim: No, 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 prompt, clod 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,

Leon: Fuck you.

Corey Ganim: Like you said, I mean, people can apply this to their own website if they want to beef up their own site, or they could turn around and sell this as a service to clients and, uh, you know, make this one of their portfolio offers. So Leon, this has been great. Where can people follow you? Or 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?

Leon: 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, from tools like Claude code cursor, and then we ⁓ 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 the Gentic 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, 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. can talk to, know, ask me anything, share ideas, whatever you want. And I also have several classrooms, including Claude Code. And I just released my Agenda 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 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 this stuff actually works. So it's very practical as well. So...

Corey Ganim: That's so cool. I've never seen anybody do that, but that's really smart.

Leon: We do things different on my channel, We're not here to just talk at eye level. We're here to build. We practice what we preach.

Corey Ganim: Yeah, I love it. Yeah, 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. will be back in a few days with a new video.

Leon: Thank you Corey for having me. It was a lot of fun. Congrats on the channel. And I hope to be, I hope you'll invite me again.

Corey Ganim: Absolutely. Thanks guys.

Leon: Yes,