Vollständiges Transkript anzeigen (27.722 Wörter)
This is what Claude Design generated on the first try, and this is where we ended up. Same AI, same project, and the difference wasn't just a better prompt. It was the design process. In this video, I will show you exactly how I took a generic, AI-generated landing page and turned it into a polished professional design. We'll create a reusable design system, use it to refine every section of the website, bring everything into Claude Code to build the final website, and then reuse that same design system to generate brand assets like menu and social media posts. If you ever felt that AI-generated websites all have the same generic look, this workflow will completely change how you design with AI. So let's get started.
All right, so I have my Claude open. Now, currently, I'm using just regular Claude and chat. And here, as you can see, I built a huge prompt for my next project that actually I want to show you how to do in this video. And basically, because I'm lazy and I don't want to like write this whole huge prompt by myself, I told Claude in a few words what exactly I want to build. And I asked it to create a detailed prompt in markdown file. After my prompt, I got this MD file with a detailed description of how this project should look like and how it should work. I have downloaded the MD file. I want to go to design mode. And since I'm using a desktop app, my Claude design is already available here on the bottom. So I just click on it, and it opens a new window, and I'll just write implement, and I will use my markdown file that I got previously, and I will be using Opus. As you can see, the latest version of Claude Design includes different templates. Now we can create documents, animations, UI mockups, research, resume, all of those things. This is super crazy, and tested them out, and the results are pretty good. But for this demonstration, we're not going to be using any templates, and we're not going to be using design systems. So this is important because I want to see what we're going to get just from one prompt in markdown file, and then we'll work with the design system a little bit later. And I'll be using model Opus 5 for this task. So let's run and let's see what we're going to get.
All right, so we got the result, and for most of the people, probably it would look okay, but if you have a designer's eye or you're a professional designer, you will probably understand that this looks a bit generic. We have some SVG kind of style illustrations, but let's see how it works. So, I'll click start building, and here I can choose the size of the pizza, and we can see that the calculator is working. Let's have the large one. The crust is not changing. Okay, but let's add some sauce. Let's add garlic. Oh, nice. Yeah, this is pretty cool, and what about cheese? Can we like drag drag and drop? No, we can't do it. And for the meat, oh yeah, this is pretty cool. Yeah, we can we can put the pepperoni and bacon. This is funny. And we can like put some grilled chicken, Italian sausage. Yep, I think this looks good. And for the veggies, let's put some artichoke. Oh yeah, it looks good. All right, so let's click preview. Oh nice, it has this sort of like preview your pizza and we can confirm. All right, for the new one. So, well, not exactly what I was expecting, but I think it looks fine. What we can do now, we can update it and make it look more professional in terms of design, to make it more interesting. And for that, I'll will go to Pinterest. And in Pinterest, I already search for fun website design, and here what I got. So of course you can go to Mobbin or any other inspiration tools. And what I need to find, I need to find an image of a website that I will use for the inspiration. We're not copying anyone's work. We're just using it for inspiration. And I kind of like this one. I like this typography. I think this one looks good or even this one. Yeah, this one is nice. So I will just download it. So now what I want to do, I want to create a design system to update my project. And for that, I need to go back to my project. And I guess this is like the most powerful thing that exists in Claude design because you can create really cool apps and website websites outside of the cloud design and I think it works pretty good. For example, like I love Cursor and it worked like 80% of my time in Cursor. But in Cloud Design, the most powerful tool I believe is this design system creation tool. So, let's try to create one. We select this design system over here, using this drop-down and we click on this little icon, Create Design System. And here in this little window we'll use Create here. In this pop-up we can actually connect our GitHub project, for example, if you have an existing project and you want to use it and create a design system from it, this will be really useful. Or you can link code base from your computer or Figma file or you can use visual assets. Of course, I will be using visual assets. So I will just drag and drop this image over here and here we can actually give it a name of our project, and I want to call it Pizzalio. Let's do it this way. Let's create and let's generate right now.
All right, so it's done and as you can see, this design system is so huge and has a lot of things in it. So that's why I'm saying that design systems from Cloud Design are perfect and the best ones. And as you can see, there is like navigation, but let's just scroll and we can see there is some information about the fonts. Uh, we can see that information about the numbers. This is the the structure of the design system. And it even has these sort of like references and ideas and this looks already super cool, right? The colors, blobs and shapes, the word mark, this is like the logo, brand colors, looks pretty good for an animation, different elevations, corners and radius's, this is like super cool. This would take me like a few days to build, if I could do it in Figma, for example, and here you can see even the landing page sort of like style. And even now, it looks much more interesting, right? Let's go back to our file that we worked on earlier. So let's open this, it's a website and as you can see, I'm ready running my limits, but let's try see what's going to happen if we apply the newly designed design system. And for that we need to press this little plus icon over here and pick the design system and now we need to use the design system over here, our Pizzalio and let's click done, and we'll write a prompt. So this is going to be our prompt. Update the website design layout using the design system. Hero screen should be full viewport, add parallax on scroll animations with pizzas and ingredients, so this is what I want to do. And here you can see I hit my limit and this sucks. And I just wanted to take this moment to remind you that if you want to learn more about Cloud Design or AI design workflows, be sure to check out the links in description below to my one-to-one sessions and subscribe to my newsletter.
All right, so it's done and we can see the updates. First of all, we can see the full screen layout. We can see the custom cursor, very popular. And now it looks even better. Uh first of all, we can see the parallax. We can play around with it in tweaks, so we can use like two and we can see the movement faster. Uh of course again we can change the colors, but I like this set. Also, added this horizontal scroll section. I love this part where it's all on tomato color background. Uh pretty cool. And here some animations and here we can see like the the calculator and it is is looking much better and we can add everything as we used to. So this is pretty cool. We see some animations for text and this one is like super cool, full screen footer. One more thing that I did, I went to chatGPT and created some images really fast. Here's the images that I got generated. What I want to do, I want to add these three images of people inside of our design layout and also I want to replace this um illustration of pizza with the real photo of a pizza. So let's see what's going to happen.
All right, so it's almost done and as you can see we have some really nice updates. We have a pizza larger, much larger. The parallax is working and the images look much better. And we can see the slides animations over here which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here, and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do. I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first layout that we got that was super generic. But again let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send.
All right, so the menu is ready. Look at it, it's beautiful. Uh it's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the slight animations, we see the parallax and the images look much better. And we can see the slides animations over here, which are pretty nice. This is our builder and these animated as well. We can see this guy now, really nice here and the footer is pretty big. Uh in any case we can go and fix this, but remember that Cloud Design takes a lot of tokens and what I recommend to do, I recommend you to if you're happy with like the layout, the design layout, and I think this looks much better than the first uh layout that we got that was super generic. But again, let me know in the comments what you think about this. We can send this to our Claude code. Let me go to Let me share it again, share. More formats and apps. And here we can choose Claude code. And we can send it to Claude Code. So it's a local agent or we can have a web session that is going to be on our cloud or in our GitHub or we can save it locally. Or we can download it as a zip file and open it for example in cursor. So we just copied it and now we go to our Claude and we go to Claude Code. And let's create a new folder. Here it is, so this is our local folder, I just created it. I pasted the prompt that I got from Claude Design and the only thing that I want to go for Sonnet 5 because I don't want to spend any more tokens on this and it should be fine because we have the designs in the Cloud Design. So let's wait for Claude Code to create this landing page and it's going to be much cheaper. But for now I want to go back to my Cloud Design. I want to create a menu design layout for the cafe Pizzalio. And I'm using my design system here. And what I can use again I can use something like let's use just Document. Let's run the prompt and it should create a menu in the same style that we had here. It asks me different questions and what I want to do for example I want to have a single page. I want to have pizzas, drinks, and salads. How many items, let's use 20 for example. Let's use no photos, only styles. Let's do the draft and that's it. Let's send. All right, so the menu is ready. Look at it, it's beautiful. It's really simple one, but it is using our design system and it is similar to the website that we have. So I believe this is super cool and it saved me a few hours of work of course. And what else we can do? So basically, now we have a website for this project, we have a menu, and now what we can do, we can do a few Instagram posts. Let's put this image and create a few Instagram design layouts using photo attached. And let's run and see how it's going to work. Again, we're using design system of our project so so it should be in the same style as the menu and the website. And here are several posts, from the design point of view they're really simple and I would really work with them a little bit more, but again for most of the people who are not designers, I believe this is going to be like huge, this is super cool. And the most important thing is that we have our design system consistent everywhere in our posts and our website and in our menu. And now let's see what we got with Cloud Code. We turned our designs from Cloud Design into code right now and I did some um updates with it because I wanted to like fix and polish the hero section. Uh but other than that let's preview it in our browser. So as you can see, uh this is the file that I got and this is the project and this is the folder and this is the project's folder. So as you can see, everything is in code now. Uh and yep, so it looks pretty good, we see the
Video
Video
Video
