Transcript: Claude Design 2 HOUR COURSE (Beginner to Pro)

Cloud design is one of the most powerful design tools that I've ever used because it makes everything insanely consistent, branded, and professional. And all you have to do is use your natural language. So, in this master class, I'm going to take you from a complete beginner, maybe you've never even opened up Cloud Design before, all the way to an expert who can ship websites, videos, app demos, prototypes, whatever you want to do with Cloud Design. I'm going to show you guys the full process of me actually coming up with a company, building the branding, building the logo, building the guidelines, and then creating a pitch deck, a website, mobile app prototype, and a launch video. And we're

going to do all of this step by step in claw design, and it is super simple and it's a lot of fun. I'm also going to be throughout the video talking about how do you actually get your money's worth, and how do you make sure that you're not going through your cloud design session limit really quick. I've been playing around with this tool every day since it came out and I'm just going to be showing you guys everything that I know about how to get the most out of it. There's timestamps down below. Make sure you save this one so you can come back and jump around whenever you need. And let's not waste any time and just get straight into this video. Well, let's just go ahead and jump right in. So, Cloud Design, this is going to be super fun. What is it? It is basically a

separate product. So, it's almost like you've got your Cloud Chat, you've got co-work, you've got Cloud Code. This is a different app within sort of the anthropic ecosystem called Claw Design. And it's specifically made for people to work on designing things, whether that is websites or slide decks or, you know, prototypes. A lot of people when this was released was calling it the Figma killer. You can share design systems across your team. You can export designs from cloud design into cloud code or to Canva or as zips or as HTML. So we're going to be diving into all of that today. So we're going to be looking at sort of three different acts. Different

stuff going to be going on. We're going to be starting with foundations. So looking at what's actually going on inside of Cloud Design getting set up. We're going to do some builds. So I'm going to go through some real scenarios. We're basically going to set up a brand together. So, I'm going to show you guys how I ideated on a new brand, a new business, and then I used a combination of claw design and some other tools in order to really bring that brand to life. We're also going to be going over some really important habits and the ways that you can get the most out of claw design without burning through your session limit. Because the important thing about cloud design to note is that

it is a separate limit than your regular claude or claude code usage. You can see we've got our current session, we've got all models, we've got sonnet only, and then we have a claw design specific limit. So, we have to really be careful because we don't want to just blow through this if we're not using it efficiently. So, I'm going to talk a lot about that in this master class as well. And then we'll talk about what comes next. But this is going to be really cool. I'm going to take you guys on a full journey, like I said, of building a brand. So, anyways, just to get started off here, what is Cloud Design and what is Opus 4.7? So, here was the release

blog from Enthropic about Claude Design on April 17th, 2026. Today we're launching Claude Design, a new Anthropic Labs product that lets you collaborate with Claude to create polished visual work like designs, prototypes, slides, onepagers, and more. And you can even use it to create like animations and videos, which I'm going to show you of course today. But it is just really powerful. It's also being powered by their most capable vision model, which is their most recent model, Claude Opus 4.7. And once again, you're not starting from scratch because you can import your current brand assets, your current

websites, your current apps, and you can create design systems around those so that every single thing you build in the future feels branded with the colors, the font, everything. Collaborate with Claude to create polished visual work, a vision modelbacked design surface. And it's really interesting because this thing is pretty much powered by Opus 4.7. You have the ability inside of Claude Design to switch which model you use, which I'll talk about as well because you do want to be a little bit strategic. But obus 4.7 has the best vision and cloud design does something really cool where it basically validates and it looks and uses its eyes to see

what's going on on the page to make sure that it didn't mess anything up. Cloud design was released pretty much the day after Opus 4.7 was released which was pretty cool. And obviously if you're using Opus 4.7 it goes through tokens quicker. It's more expensive than using a model like Sonnet or Haiku. So you have to be strategic there. And something else that's pretty interesting is Creger left Figma pretty much right before the announcement of Claw Design. and Kger was on Figma's board and is now Enthropic's CPO. So, that's also kind of interesting to think about like where are these tools headed. But anyways, let's go ahead and get set up and figure

out what actually is going on. But first, let's just talk about how to get set up. So, you have to be on a paid plan for this. This is available for pro users, max users, and team and enterprise users as well. So, if you're on the free plan, you will have to upgrade in order to test out Cloud Design. You're also going to be getting more usage as your plan increases, obviously. So, if you're paying more per month, you're going to get more of that claw design usage as you can see right here. And I'm pretty sure that this is a weekly reset. So, if you hit the limit, you have to either wait until it resets, or you could go ahead and purchase some

extra usage, which would just be, you know, coming out of your actual balance. And as you can see, I've been using a ton of this extra usage because if you're not careful, you hit the limit pretty quick. But that has helped me learn what helps me, you know, manage that limit better. So, I'm going to be sharing all that with you guys today. Okay. So, let's actually go ahead open up Claude Design and let's start, you know, building a brand and I'll show you guys what I've been up to. So, if you're in your regular chat in Claude on the web, you'll see over here on this lefth hand side, we've got this little button that says design. So, that's what you're going to want to click on or you could just Google Cloud Design and that's going to pull up an actual separate app

which looks like this. And this is kind of the interface that we're going to be working out of for cloud design. Now, a few things you're going to notice. There's kind of this thing on the lefth hand side, which is how you launch a new project. You can see that we have prototype. We can choose between wireframe and high fidelity. We have slide decks that we can create. We have different templates or other. On the right hand side, we have all of my previous designs or design systems that I've built. We also have a bunch of examples to look through. So, organic loaders, we can take some inspiration from. We can look at text streaming. We can look at things like a globe and some shaders. So, there's ways right here to

basically just use this prompt and inject that into a project that you want to work on. And then of course you can look at your design systems which we will talk about as well because this is the first thing that I want you guys to do when you get into cloud design. Now building a design system is kind of token inensive but it is in the long run going to save you because then everything you build for example my AI automation society design system. Everything that I build will have this branding the logos the typography the colors. But you don't want to go crazy building like five different design systems. You just want to start with one and then iterate from there. So, if I

open up this design system real quick to show you guys what's in here is, like I said, everything about my UI, my um brand. So, it's got my website. It can look through, you know, the different fonts, the colors, the way that our buttons are, the way that our little banners are. And it knows everything about this website. And it used this to basically create typography. So, it knows our brand. It knows like, you know, when to use primary, when to use secondary. It also knows colors, so accents and gradients, our neutrals, also our primary colors. It understands spacing. So we have these little glows

behind buttons. We also like to have like you know different sizing and different types of shapes. And similarly with components which I think is awesome. Look it has all of these badges. It has all these tags. It understands what our buttons should look like, what our cards should look like. It understands all of this. And this is all translated into our websites, our videos, our slide decks, our you know landing pages, whatever we want to build. Now we don't have to repeat this. And that is why this is so awesome because this can be shared across your team. If you have, you know, if you're on a team plan, everyone in your

organization will be able to access this design system, which means consistent visuals, whether that's internally or externally, LinkedIn post, whatever it is, it will always be consistent, which is really important. You can also go ahead and download this as a zip, as a PDF, as an HTML, and you can put that into Cloud Code, or you can bring that into Canva, or you can even give it to ChatGBT's new image model. whatever you want to do with it, you can take this and bring it somewhere else. So, that is why this is the first thing that I want you to do when you get into Claude Design. So, let me show you guys how

we're going to set this up. What I did here is for my AI automation society design system, it was easy because I already had a brand. I was able to give it my logo. I was able to give it the GitHub repository of my website and my website URL and it was able to scrape through all the stuff that we already had existing and turn that into a brand design system. Now, if you're not in that boat and you're starting from scratch, then it's a little bit different because you have to figure out, okay, what is my design system? What are our colors? What are our typography? And what's the feel? So, that's kind of the scenario that we're going through today. So, what I did is I

came into Claude and I said, "Hey, I need to create a brand. I'm working on a project where I'm going to create a new brand, and we're going to create, you know, like a pitch deck, a logo, brand guidelines, website, all this kind of stuff. So, help me figure out a good brand concept that I can use so it feels consistent." So, this is basically just me brainstorming with Claude. And the reason I'm doing this in chat is once again because we don't want to eat through our claw design limit. We only want to use cloud design when we're actually ready, when we have an idea and we're ready to move forward with that plan. So don't ever brainstorm in claw design. There's just no point. You get

way more usage over here. So anyways, it starts to sketch out. It asks me some questions and it starts to give me a few concepts of like, you know, what the type will look like and what the logo could look like and, you know, the vibe and the colors. So it gave me a couple and I liked this one. So I I said, "Okay, cool. let's kind of move forward with Tally and let's let's build out some more of this brand. So I said, "Okay, let's run with Tally. I want you to build a brand around this. What's the product we're selling? Who does it appeal to? What's the mission? What's the offer?" And I just said, "Figure all of that out for me." Now, obviously, you're going to weigh in a little bit more if you're building a real business or if you've already got something in

the works, but this is just me showing you guys how we can ideulate with Claude. And what it did is it created this whole brand concept. So it created you know the product, the audience, it created some avatars as well, the mission, positioning, brand pillars, voice and tone. So a lot of like conceptual stuff about the brand and the promise. But then it also got into some important stuff down here like the visual identity. So we've got a color palette with four main colors and that's really important to give to our design system. Obviously it also went into some typography. So our primary font as well

as our secondary font and some other logic with like you know the way that we do our hierarchy in our hero section and different things like that. So if I was to give this concept to claw design it would build a really really nice website for us in one shot just because it already has so much info right here. And then after I created that I said yep let's ideulate on the logo as well. So how can it fit the overall vibe? And it gave me a few different options. It gave me this cross with the three or sorry, four tallies and then the fifth and the text. And it gave me a few other variations. I ultimately ended up saying

that I like this logo, but I like having the green um dot, the green period at the end of the word. So, I basically went with a hybrid of this and this. And then I basically asked for like a full typography, almost like a mini brand guidelines thing. So, it gave us this logo, it gave us this typography, and it just showed us what this could look like. So, the brand is really starting to come to life a little bit now, and we're probably in a much better spot to be able to actually create a design system out of this at this point. So, back in Cloud Design, I'm going to click

on design systems up here, and I'm going to go ahead and click on create a new design system. Now, real quick, just for context, let's take a look at where we're at as far as our usage. So, in Claw Design, we are at 4% of our usage, and I'm on the 20x max plan, so 200 bucks a month. Let's see how much this design system creation eats up out of our design. Now, it won't be as much as, you know, if you were importing a bunch of code bases because you can link in folders and files and GitHub repos. So, the more that you import right now, the

more usage it's going to take up, obviously, but still, let's just see what this does. So, company name and blurb. Well, the name of the company is Tally. And let's just take a look at what our blurb is going to be. I'm probably just going to go ahead and grab the mission of our company. So, I'm just going to grab this. Okay. Um, we don't have a GitHub repo at the moment. We don't have any code. We do have some assets to import. So, I'm going to go ahead and add the tally logo. And I also want to add this file. So, I'm actually just going to download this as um hopefully markdown. Yeah. So, we've got

our brand concept. And you can also see if you already had a Figma project that you wanted to bring over, you could import that right here. So, any other notes? For now, we're just going to leave it like this. I think the one thing that we might want to call out is we haven't built a website yet. So, we don't know what our buttons and what our feel is going to look like. So, if you wanted to add any notes about that, you could. So, I'm just going to add a real quick sentence. I'm going to say, "When we're building out assets, like, you know, a website or things like that, I want the buttons to feel very modern. I want them to have sort of like a slight

glow behind them, and I just want it to feel very polished." Now, that's not really a very good prompt. Like, that's pretty vague, but just adding a little bit more context there. And let's go ahead and click continue to generation. This will take about 5 minutes. So, I'm going to hit generate and I will check back in with you guys once we get this wrapped up. Actually, I lied. While this is loading, I did want to show you guys something else that you could look at doing. So, Chad GBT's new image model, image 2, is really solid. You know, you could have taken some of the um, you know,

information from here and some of the colors and stuff that we had built and you could also idiate with ChachiBT a little bit to see what those images or the logos and stuff could look like. So, I basically said, "Hey, I need a professional and minimalistic logo for this brand." I said what the brand is. I talked about the audience a little bit and sort of the palette and it gave me this as the first version, which is pretty cool. You know, we've got the little green mark right there. And then I also asked for more of an icon based one, and it gave me this. So, I didn't love this one. I really just like the actual tally marks that um Claude initially came up with. But that is

another thing to think about is that GPT image 2 is pretty solid at helping you build some of this stuff. And I'll show you something else as well which we will come back to later after we've sort of built out our website with this brand. But I actually just built my brand guidelines for AI Automation Society with GPT image 2. So I gave it the logo and I said, "Hey, this is basically like what our brand is. Here's some variations. Here's our color palette. Here's our typography." And it created this for me. Um, and it's really good. This is the actual official one that we're using internally. However, you can see it messed up some of the font. Now,

it is pretty good with text in general. Oh, you can see you can see all the other font is fine, but because it was trying to pull in robboto mono and was trying to pull in Monzerat, it messed it up a little bit. So, even when I said, "Hey, you know, that didn't work. Oops, I can't get out of this." Even when I said, "Hey, that didn't work." And I tried to have it do it again, it just didn't work. And honestly, I was like, "You know what? That's fine. I'm just going to throw this into Canva and I'm just going to go ahead and grab the fonts and just put it in myself." So, not a huge deal. It might have trouble with certain fonts, but as far as like the spacing and everything that did

here, this looks really good. So, like I said, we're going to do one of these with Tally, with the brand that we're building right now, a little bit later on in this video. So, don't panic if you're like, "How do you do this? I want to do this." It's going to be simple, and I'll show you. Okay. But looking back at our design system, we've got some stuff to look at here. So, Claude is still working, but you can start giving feedback. It's missing the brand fonts, which is totally fine. You could upload them if you want, but it's also going to be able to pull them out. As you can see down here, it's got type, but we see the brand mark. So, we have the mark, the word, and the tagline. You

can see this got a little bit messed up. The tally should be going across all four. Cloud design has been historically bad with logos. For some reason, it sort of re like it tries to change them a little bit, which is not great, obviously. So, I'm going to say no, that needs work. The logo is not appearing as it should. I dropped in a PNG of a logo and you should just keep it exactly as is. There's no reason to change that. So, that's a little feedback I'm going to do. Um, I'm also going to say everything else though looks good. the

colors and the font is fine, but the icon logo is not correct. So, we'll submit that. Um, same thing here. I mean, these all like from a color scheme perspective, I don't mind it, but it just doesn't look right. And this is something that, like I said, Cloud Design has been doing historically bad. Same feedback here. The logo has been changed. The colors look good, but the logo cannot be changed from the original PNG that I gave you. So, I'm going to shoot off that feedback as well. See, this one looks good. This is the actual logo that I believe we

uploaded. So, I'm going to go ahead and say this one does look good. These also look good. That's great. And I like the way that this looks as well. So, you're basically just going to keep going through this design system to make sure that all of these look great and the way that you actually want your brand to look. And definitely spend some time here because like I said, this is going to be your design. MD, your spec for everything that you build in the future, videos, promos, landing pages, everything. So, this is looking much better. I'm starting to become more confident in what we're building with this design system. So, I'm just going

to keep approving stuff or giving feedback and I'll check in with you guys once we have our finished design system. All right, so we're getting all of this pretty much finished up. And what you'll notice here is on the lefth hand side, we can see that Claude is verifying and this is it actually looking at what it built to make sure that everything looks all right. As you can see, it's kind of going down through the different elements. Now, this is for us to review. So, here it's even mocked up what a landing page could look like. And you can see that all of this feels very on brand. And we've got the textbased logo in the top left. And we can scroll down and see the way that it uses our

different colors with these little little cards and stuff like that. I think that this feels really nice. I love the way that this is looking. I'm going to say looks good. And I like this mobile app sort of preview. That looks good, too. And what it did is it created a bunch of these different things. So obviously our marketing for our like UI kit, right? But it came through and it also thought about the buttons, which I thought was cool. We've got these different buttons that it can use and the way that they highlight when they're, you know, when you put your mouse over it or when you click, it's got a bit of a drop shadow with a glow. We've also got these um input fields. We've got um icons. Where' the icons go?

Down here. We've got these that it's going to use. So, now we have just some really cool elements that we can always have consistent with our brand. So, all of this looks good. And I'm going to go ahead and say that we're good to move on. So, I've published this. I could make this my default if I want to. I'm not going to do that right now, but we could go ahead and now use this design system to build whatever we want. We can also click on design files up here at the top. And this is where we can see different assets like the things that we've uploaded, different previews that it's generated and different documents. And this is what we could go ahead and export. If we wanted to bring in a

design system and actually give it to a cloud code project, we could give it to Claude Code and then it would also be able to use the same design system. So that is where this is super powerful. Okay. So now if we go back to the home screen, you'll notice if we wanted to create a new project, we could click on our tally design system instead of our AI automation society design system. We could also go ahead and not use one if we want, but that's why we just built the tally one. But real quick, let's go ahead and go to my usage. We are at 10%. So on a $200 a month plan for Max, that design system took about 6% of my

session limit already. Now, that's really not too bad. Um, if you're on a pro, it's obviously going to eat more, but keep in mind, we didn't give it a ton. If you were giving it a whole codebase or GitHub repo to search through and scrape through, it would have eaten more. So, be selective about what you give your cloud design, you you saw how well it did with just markdown and a pretty vague idea. So, it really just needs, you know, key elements like the colors, the logo, the typography, and if you already have some buttons and things like that, you don't actually need to give it an entire GitHub repo unless there's really important info in there. So, think about that when you're

building your design system. Okay, so we kind of started to build our brand, right? We took a concept from Claude. We were brainstorming. We ideated a little bit. We created our logo. We created all that. And now we essentially have a design system. We have a a design MD that we could export anywhere and a design MD that we can use for any of our future projects. So, let's actually get started here. What do we want to build first? Well, we're going to go through the full journey. So, we're basically going to start with a pitch deck and then we're going to move into like a product landing page and then we're going to build a mobile app prototype and then we're going to go live with a launch video at the end. It's all going

to feel on brand and throughout the course of this video, we're going to really bring this brand to life by building all of these elements all in claw design. Real quick, guys, I know we're going over a ton of information in this video. So, what I wanted to do is break all of this down into a very simple PDF resource guide that you guys can use. And that way, you can reference that later if you ever need to look at some stuff I said about, you know, token management or prompting, things like that, rather than having to scrub through the video every time. So, if you want to access that completely free resource guide, then head to my free school community. The link for that is down in the description. I'll see you guys over there and let's get back to

the video. So, let's go ahead and get started with our pitch deck. I'm going to go ahead and open up this cloud design and I'm going to go to slide deck. I'm going to make sure to use the tally design system and I'm going to call this tally oops tally pitch deck. And we're going to go ahead and click create. Now, right here, what do we have? We have basically kind of a lovable like interface. On the right hand side, we have our preview. We also can see our files. We can do sketches and the left hand side is where we will chat with the

AI or we will leave comments and things like that. We will drop files in that sort of stuff. So it's really interesting for this use case. All I'm going to do is I'm going to drop in the brand concept markdown file which if you guys remember was basically just this markdown doc that we were looking at earlier that Claude generated and it has all the information about the business and sort of like the mission and the avatar. And all of this information is really all that I need in order to make this actual pitch deck. And if it has any questions, that's the thing is cloud design will also iterate with you and it

will ask you things to make sure that it understands your end goal. Now, one thing that I might recommend doing is if you're not very clear on what you want to be communicated in your pitch deck is don't waste time, like I said, brainstorming here. Go over to Claude and brainstorm in this environment. Say, "Hey, I want to build a pitch deck. Here's a little bit about, you know, information about my business. Help me lay out this pitch deck. help me understand the structure of it and then take that file or you know copy and paste whatever it gives you there and then bring that back into cloud design and move forward with the actual creation. So you can see the little inputs here are to make a deck we have

the tally design system and we also have the tally brand concept markdown file. Now I did realize though before I actually give this to cla design I maybe do want to do a little bit more market research. So I'm going to open up Claude again. I'm going to come into this chat where we already have all this context and I'm just going to ask it to help me structure that. So what I want to do now with tally is I want to create a pitch deck for an investor presentation you know and I want to basically explain what tally is and why I believe in it

and also look at the market and see why it is a good investment and why people might want to you know come on the tally team and the vision that we're pushing for you know we want to get them to be bought in. So with the brand concept spec that you already have for me, build on top of that with a pitch deck sort of structure and also do any research about the market and the strategy for actually getting tally to a place where it's starting to adopt a lot of users. So it started doing some research for me which is great but then it actually said that

it wanted to actually build the deck. So I had to stop it and I said you don't need to build the deck just give me markdown outline so that I can put this research into cloud design and then it can do it. So, I want you guys to be thinking about AI as a specialized tool. And even if you're using AI, meaning like Claude, how can you have a separate chat for each individual type of request? How can you make each session as specialized and specific as possible to give you better outputs? Because in this case, we're using Claude right now for the research and to create us like

the markdown outline, but then we're going to bring that into design to actually do the design. And I think even outside of the scope of this master class today, that's just a really important mindset when you're using AI tools. Okay, so now we have our pitch deck outline. This is pretty comprehensive. There's a ton of slides here and I'm just going to go ahead and copy this. And now what's cool is that was basically the heavy lifting. So the idea is hopefully that is going to make it so that cloud design doesn't actually eat as much of our session limit than it would have if we just dropped in, hey,

build me a pitch deck. So, I have dropped you in a tally-brand-concept markdown file and that just has some overall information about our business tally and you know like the mission and the positioning. And I'm also going to paste in some information about how we want to structure this pitch deck. You don't have to follow it to a tea, but there's a lot of important research and information in there that I want you to use in this pitch deck as if we're trying to convince investors to invest into our business. So, and when I just pasted in that stuff, it came through as

the text right here. So, I'm just going to clarify the 372 lines of pasted text that you see is the information about the pitch deck structure. So, I'm going to shoot this off and we're going to go ahead and see what we get. Um, if you guys are curious about how I'm able to just talk and the text appears, then check out the tool in the description. I'm using a tool called GLO and I'm actually a part of the GLO team now because it is significantly faster and more private than Whisper and I think that there's a lot more agentic stuff that we're going to be doing with it which I'm very excited about. So definitely go check out Glido. Windows

support is coming very very soon. So while this is running I also wanted to just bring your attention real quick to this stuff down here. So this is where you could change the model. You can see by default you're going to be on Opus 4.7. You could switch back to Opus 4.6. You could even use Opus 3. I don't think I I will. But you could also go to ha ha haiku and sonnet. And so for the most part when we're doing sort of like the initial planning and we're starting out I'm pretty much always going to be using opus 4.7 here when I'm maybe doing some tweaks and feedback later. That's where I would, you know, reduce the model to

sonnet or haiku for the little iterations and things. But especially once you've really nailed the way that you have your design system and the way that you like your landing pages or decks to be built, you could very likely get to a spot where you're just using sonnet all the time. Once you feel comfortable with the flow and with the outputs that you're getting, especially if you're using claude on the front to actually do the help with like strategy because you can use opus here and you can figure out the outline of what you want and then just say, "Hey, sonnet inside of claw design, take this information and just throw it on a deck

for me." And that's how you're going to be able to stretch your limit a lot farther. Okay, so this is done. I did do one round of feedback, but I want to show you guys why and I want to show you guys some other important things. So this was our prompt. It started to read everything and dig into it, right? It planned out the structure and then what happened is it started building it out and it was able to verify and look at stuff. So you can see here it says the verify agent check completed. Now what that means is it was looking at each slide visually to see what happened and it said okay let me fix slide six because there was this wrong and let me fix slide 10 because this was wrong. So

then it fixed them and you can see that it was able to run the verifier agent. Now I did have a little bit of feedback to give. So I said hey the logo is wrong here blah blah blah and once again it's able to view the stuff. So it took a screenshot it looked at it and then it was able to fix it. So that's super super cool. But now let's take a look at what we got. So we have tally money on the level. We've got the nice navy background with the regular font here and the logo. So, let's continue on. I'm going to use the arrow keys here. Most finance apps want to change you. Tally shows. Tally just shows you what's

happening. Okay. And you can see in the bottom left, we've got the logo, both the icon and the text, which is pretty nice. The category lectures, people don't want to lecture, they want a clear picture. 20 million mint active users at peak. More the replacements compete on more more AI, more features, more coaching. And about 50% of fintech app users churn within their first year. So then it goes over some converging trends. It goes over three things. Connect your bank, get your Sunday digest, run an affordability check. The weekly is the product. So there is some sort of mobile app here. Once a week,

Sunday morning, you get this sort of report. Interesting. Um, and as you can see, it's sort of going through the pitch. Now, obviously, we don't want this to be super wordy because this is a pitch deck. There's going to be someone speaking over all this stuff. So, we don't want it to be too distracting, but it's feeling very on brand. everything is consistent with our font, our colors, our logo, stuff like that. And then we get into some of this other stuff that Claude design wouldn't have probably done by itself. This is some of the research that regular Claude was able to pull in for us. So things about like the market and the gap. And basically, this

is where you start to convince the investors to invest. I thought this slide was really nice, a really nice visual interpretation of where Tally solves a gap that the current other tools don't solve. And I'm not saying that this is the best launch strategy for a SAS product. I'm not saying that this is even 100% accurate because I didn't, you know, I didn't validate this yet. I just built up this brand in like the past 10 minutes. But this is what it can start to do. It can start to tell a story for you. $8 a month, one plan, no tiers. How we get there. So phase one,

phase two, and phase three over the course of three years, it looks like. And from beta to $3 million ARR right here. So, as you can see, this is where you would also put in some information about the founder. We got the logo here changed. We got some other hires that are being planned. And yeah, for a first pass, I think that this is really, really good. Obviously, what you do here now is you would start to iterate a little bit. So, there's lots of ways that we can iterate. We can click on edit, and that would let us actually edit things ourselves. So, I could maybe

I don't want to call this a founding designer. Maybe we want to just call this the founding graphic designer. And I could go ahead and do that. And what's important here is when you make these changes, Claude applies them. But what this does is it helps you actually be more specific on your changes and it will save you session. It will save you tokens in the long run because if you wanted to prompt all this by natural language, you could, which is awesome, but there's more room for error there. Whereas here, we can actually click on the exact specific element that we want. We could change the sizing. We we could change the color and we can be more

specific by doing the actual edits. What else we can do is we can use the draw. So, let's say we don't want um I don't know, maybe we want this logo to be bigger. So, I would draw a circle around this. And then I could just type and say, I want this to be larger. And then I could send that off. And what that does is it injects that drawing. Oh, wait. It said it couldn't capture it. What happened? Okay, let me try that again. I could circle the logo down here. You can't see it because this thing covered it up. And then I could just say I want this to be larger. And

when I send that off, it basically injects that screenshot into the chat right here. And so it knows what I just circled and it sees the the comment that I left. It's a little bit buggy down here, unfortunately. And now we'll go ahead and actually implement that change. So it says the user circled the small tally mark inside the interesting. Okay, so that actually didn't work. It seems like Yeah, that didn't work here. The draw might be a little bit buggy right now. Keep in mind this is in research preview, so you might see a bug like that. I in the past have been using draw and it's been

working fine. But that's just another example of like maybe you don't even need to draw because if it's a specific element, just highlight it. You know, if I wanted this to be bigger, why don't I just grab this and make it bigger myself? You know, draw is probably more useful for something that doesn't actually have an actual like div tag or an actual element. So, let's say, you know, maybe we want to go to like the last slide and let's say this background was like a gradient or something. Maybe there's a really weird the the gradient's too dark right here. And I would circle this and say, "Hey, can you make this section a little lighter?"

That's probably a better use case of the draw compared to drawing around something that actually exists as an actual element. And what's what's cool here, kind of interesting, each one of these tally marks is its own individual component that we could change, which is kind of interesting. I could change the color of just this one if I wanted to. So, that is pretty nice. I'm not going to do that. I want to um make sure I don't do that change. But that's pretty cool. Now, that's a little bit annoying. There's not like a reset button, unfortunately. So, or like an undo. So,

if I wanted to change this back, I would have to grab the actual color from there and come into here and then change that. And now I could edit that and it would fix. But that was a little bit like I think that there should definitely be like an undo button. Or maybe I'm just missing that. And then we have the ability to add tweaks, which is pretty cool. Um, this basically just means that we could change the way that the slides actually look and we could do this rather than prompting. We could just do it in an interface. So, let me show you. This looks really nice. Um, there are some slides that might feel just a little bit bland though. So, I might

want to be able to add some more color or just a bit more of our brand feel on top. So, could you give me a couple different tweaks that I could play around with for this whole slide deck? And what I like about this is there are some moments where if you're not super creative, you might just feel kind of stuck. But what you can do is you can let Claw Design be the creative one. You can say, "Hey, give me a bunch of tweaks. Let me play around with things." And that will let you actually figure out what you like or what you don't like. Okay, so now we have our tweaks available. Meaning I can click on this toggle and we see some different things that we can change. So the first one

that we'll take a look at is the cover. We could go ahead and change it from default to bold mark, which means that this would be bigger and that would be bigger. We could also do word mark only, which would give us this. And I mean, I honestly like the bold mark. So, this was the default. I like how it's a little bit bigger like that. Now, let's take a look at what else we have. We have texture of the background. So, we could do a dot grid, which honestly, I'm not really seeing. I think the dots are just like they're very, very light. We could also do a hairline, which is kind of just like a graph paper background. I don't know if you guys can see. We've got like

that sort of grid, which adds a little bit of texture, which is nice. But my favorite honestly is this warm haze where we kind of got the green up here, a little bit of orange. And this I think just looks very very nice. It gives it some more depth. And I don't know if I would have thought to prompt Cloud Design to do this. So this is one of those scenarios where especially behind this app, I think that this warm haze looks really really nice. We've also got an accent. So we could do vivid green, which it looks like it just changes. All I saw was this thing. If I go default, that goes away. Vivid green adds that little hash mark or uh whatever that's

called. M dash. I don't know. Warm. I'm not really seeing what that's doing. Um maybe we have to go to like a different page to see what the warm would do. So, you definitely have to kind of click through to see what's actually going on. Or you could ask claw design as well, but um I I like the vivid green. So, we'll stick with that. And then we have the slide chrome. It can be default, it could be minimal, or it could be emphasized. And I'm really only seeing the difference here. So, um the slide number in the top left. Minimal takes that away. And emphasized makes it a bit of a darker color. And I think that for this sake, we want to just leave this on

default. I like it as default. So there's other tweaks we could add, of course, but right now, this is where we're sitting. And I like how we were able to just play around with a few different things and see what we like. So at this point, let's say we're good with the copy. We're good with the way this looks. We would go ahead and we could either present it right from here, or we could go ahead and, you know, invite our teammates to it. We could duplicate it. We could create a template. We could export it. We could give it to Claude Code. Whatever we want to do now with this pitch deck, we can do. Okay, so that was our first project that we did together. That was the startup pitch deck. Let's say now what

do we need is a product landing page. We are going to build out just a real simple onepage landing page for this product. But real quick before we do that, I want to do a quick usage check. Let's see where we are with our cloud design usage after setting up our design and building this pitch deck. We are now at 32% used. So just keep that in mind. But what we're going to do now is we're going to build a landing page. And the good news once again is we already have what we need for the most part because we have this whole brand concept guide.

And this is basically going to be a lot of the copy that goes into our website. So let's go back into cloud design. We're going to go we're going to start a new prototype. And what I want to show you guys is how the wireframing works. So I'm going to click on wireframe. I'm going to change this to our tally design system. And I'm going to call this our um landing page mockups because what we're going to do here is before we start designing and actually building our website, we're going to do a wireframe to see um kind of a canopy of different approaches,

different styles that we could take. So I'm going to click create and we're going to start to prompt this thing on what we want. So I'm going to do the same thing once again where I drop in the brand concept and I am going to just start to ideate here. I'm going to say, so we have a product called Tally, and that's the design system that you're looking at. I also just dropped in our brand concept markdown file, which is attached right there. And the point of this project is a wireframe project. I want you to give me a bunch of different concepts, a bunch of different mock-ups of how our landing page could be set up.

We will probably have a hero section. We will have um some specs. We will have our pricing. We will have some testimonials. You can fill all of this in with mock data. The point of this right now is to help me figure out the theme, the the style, how should the website feel, how should it look, you know, who are we appealing to, what is the journey of the website, what are the different colors, you know, dark mode or light mode, or how do we make it feel modern? How do we make it feel on brand? So, what I want is just a few different concepts so that we can actually take this wireframe into a different project

to build us our landing page. So, this step isn't absolutely crucial. If we dropped all of this into a regular highfidelity project and said, "Hey, build me a website." I'm very confident that it would look amazing. And I'm very confident that we could take the tweaks and change it the way we want. But sometimes it's nice to be able to look at a ton of different concepts. Maybe also when we're doing something like building a mobile app, we would want to do something like this as well. And what's nice here is it's going to ask us a lot of questions. So, how many distinct concepts should I sketch? Let's just go ahead and do three. Wireframe

fidelity. These are pre-esigned. How rough do you want them to be? Sketchy, handdrawn vibe, clean wireframe, midfi, or mix. I'm going to go ahead and do midfi. I think that's going to give us a better feel. What vibe, which vibes and directions should I explore? Um, I'll cover at least three. I'm just going to go ahead and say decide for me. I don't want to give the input there. I want it to be creative. Then it's also asking light or dark. We're going to go ahead and do mostly light with one dark concept. What stands

in for imagery app screenshots? Uh, I'm just going to go ahead and say decide for me once again. And beyond all of these, what else do we want? Probably FAQ, probably. Yeah, sure. A founder note, a comparison table would be great. Um, and a sample of the weekly privacy data. Yeah, sure. All of this stuff is good. So, you can see this is helping us get more refined on our goal. Now, of course, you could do this mockup section in a regular cloud chat. There's nothing wrong with that. It would do something very similar to what we did earlier,

right? where it was giving me these different mockups and giving us different visualizations of what we could do. And honestly, from a token perspective, that's your better call. But I definitely just wanted to show you guys what this wireframe can look like. And for the rest of these, I'm honestly just going to say decide for me for all of them so we can see what we're going to get with minimal input. So I'm going to shoot this off and let's see what we get. All right, so this has finished up. We've got three different styles. We've got the honest mirror, we've got the receipt ledger, and we've got quiet night. So, this basically gives us like a board, you know, kind of like a Figma

or, you know, even like a Google Stitch that we're able to like zoom in, pan around, and comment on things, edit things. So, let's just take a look at this first one. We've got kind of the light bone background. We've got a big hero section. Honestly, this interface is just a little bit like wonky. You see, if I open it up full screen, I'm able to like get in there a little bit because now I could actually scroll down and see the full journey of what's going on in the site. So, that's actually a lot better to be able to look at it like that. So here's that first one. We can see the hero section, the weekly. We can see the scope and like a comparison

table versus others, which is pretty cool. And then looks like a note from the the team, all that kind of stuff. And then if we go over to that last one, this was more of the dark mode. So this looks very similar to that first version, except for I think the only difference really is the dark mode. I mean, I think there's a few other changes, but this is basically something that we could now take into the next section to build our landing page. Let's see what's down here, though. We have what you're choosing between. We're choosing between the mode being light bone, light bone, or dark navy. We have a different type of voice, whether

that's, you know, editorial documentation or modern fintech. We've got imagery. We've got page length. And we've got different audiences that we're going towards. If you guys remember in our original spec over here, we had two different types of audiences. We had Sam and then we also had freelance Frankie. So, it's pretty cool that it was able to take that into account and it shows us which website is kind of appealing to which of our avatars. This one could feel preachy. This could feel cold. This could feel generic. So, we could continue to iterate on here and take one of these that we like into the

next section of actually building us a landing page. Now, to be honest, for this specific use case, I think that was probably a waste of my session limit. I think maybe this would have been better to do a wireframe for planning out like a full funnel, you know, maybe where you've got page one, page two, page three, and you know, like you're you're actually visualizing out the journey. I think that could have been more useful. I think also if you're designing like an actual desktop app or a mobile app, then doing a wireframe could have been better as well. We've used it actually for helping figure out like some of the branding for different logos and

different packaging. So, that was pretty helpful. But when it comes to just designing a landing page, I think you're probably better off to actually just do that in high fidelity right away. But I just wanted to show you guys that concept. So, what I did is I just exported this as HTML. So, if I just open this up, let's see what that looks like in HTML. So, it basically just gives us that exact thing that we could scroll through and look at. I wonder if it lets us still open that up. So, yeah, we basically just have this project now as HTML. But anyways, what I'm going to do now is we are going to just basically

start fresh. So, I'm going to switch over to a new one. We're going to do tally. We're going to do high fidelity. And this is going to be the tally landing page. So, that was a waste of time. That was a waste of my session. Let's see how much we actually used here. That used 41. I think we're at 34 before. So, it used about 7%. So, definitely a waste of 7% of my session, but I'm glad that I still showed you guys that. Okay, so let's go ahead and create this landing page. Now, what I want to do here, and what I'm going to show you guys is something pretty cool. I want to add a little bit of an animated element to the background. So,

what I went ahead and did is I took our logo and I went to cling and I went to make a video. I gave it a start frame as the bone background blank, the end frame as our logo, and then I basically said that I wanted to animate this. So, I said, you know, I'm not going to read this prompt, but if you guys want to read it, I will just kind of slowly scroll right here so you can see. But basically, what we get is this output where it looks like the actual logo is being kind of like handdrawn in and then the tally mark goes across. So, I thought this would be cool to have sort of like on the right hand side of the

hero section just kind of playing on an endless loop in the background. So, I've downloaded this and we're going to make sure that that is implemented into this part of the website. So, what I'm going to do is I'm going to go to my downloads. I'm going to grab that animation and I'm going to put that in right here. You can see it's being attached as tally animation.mpp4. It should already have access to our logos and everything else that we need. I'm also going to give it that brand concept doc because that has some important stuff about the positioning and the pricing. But before we actually build this, I do want to do one thing. I want to do a sketch. So, I'm going to click

on new sketch. I'm going to grab a square and I'm just going to give an overall kind of 16x9 landing page. So, this is the overall um site. So, this is our landing page. And the reason I'm doing this is because I want to align with Claude on the way that this is going to work before it actually starts trying to build. Because what I want to do is you guys saw this video, right? It is kind of a I think it's a square aspect ratio like one by one. So, I want this to appear on the hero section, but

I don't want it to be covered by text. So, what I'm going to do is try to do my best like 1x one ratio thing. And inside of that, I'm going to mark this as the tally animation.mpp4, which is what this shows up as on the left hand side right there. And then what we'll do is we'll grab another square and we can just make this one green. And this will actually be like the hero text section. So, I can just label this as the hero text. And maybe like if I do one more

hero subtext. And then um what I can also do is we probably want to have some sort of nav bar up top. So I'll just grab orange. And I'll just do this. And I'll go ahead and grab one more text. And I'll just say like the logo can go in the top left corner. And then maybe we have like a um nav sections. And then maybe on the right hand side we have like a um call to action over here. So now I'm able to s sort of give it just a better rough outline of what we want. And the sketch

is being referenced down here right there. Sketch, you know, April 29, 2026, napkin, whatever. So at this point, I feel more comfortable about giving it a plan that it's able to kind of more of one shot. So I'm going to start talking here. Okay. So we want to design a landing page for Tally, which is our product. I've given you a sketch attached in this chat and that's kind of the way I'm imagining this hero section at least looking for our website. I'm imagining a navbar up the top. I'm

imagining hero text and hero subtext on the left side of the screen and I'm imagining the tally animation.mpp4 on the right side of the hero section. But what's important is that the tally animation the color is the bone color. So, I want the whole background of the site to be bone, at least for the hero section, so it looks like it naturally and seamlessly fits in to the rest of the hero section. So, we'll also have hero text, we'll have hero subtext. And then, as we scroll down, I want you to

design the other sections of this site using our tally design system and using the tally brand concept markdown file that I gave you. You can fill all of this in with mock data at the moment. Um, and if you have any questions, feel free to ask. So, that is what I'm going to do for the initial prompt. We're going to shoot that off. We're using Opus 4.7 and I'll check in with you guys when we get any questions or if we have some sort of PC. All right. So, here's what we got. I think it looks pretty nice. I can sort of tell that the color

of the background doesn't perfectly match the color of, you know, the video background. You know, it's a little bit off, but for the most part, it's not bad. What we could do is we could actually make sure we get the exact hex codes and match them if we wanted to really be seamless. But as a first pass, the concept, I like the idea of having this animated and it got it right based on my sketch. You know, the hero text, the subtext, we've got the video over here, we've got the nav bar with the logo, the nav, and the CTAs over here. So, that looks all very nice. As we scroll down, we start to get some

elements now that cloud design built in itself without me having to ask. So, we've got like connects via plaid, 256-bit encryption, readon access, no data resold, iOS and Android. Some nice things that we want on a sliding banner. We have four steps. None of them are homework. So, we can see connect to bank. I like how it shows the average setup time. So, how easy it is to actually get this stuff plugged in and set up. I really like with the sample weekly, we can see that it says like Sunday 27th, but as we scroll, this stays locked, but this keeps moving. And that gives it sort of like a dynamic

feel, which I really like. You can also see that it's throwing in our green accent, which is really nice. And as we continue to scroll down, we get more green accents. We get more copy here. I do think it would be nice to maybe switch up the color. Like if this one was navy and then this one was bone and then this one was navy again just to give a bit more of like, you know, structured sections, but I like the way that this navy one looks. Sort of like that, right? Like I like the the difference there. And I like this call to action with the actual logo and this button sticks out really nice. So as a first pass, I think that this looks

really really good. Now, same thing I'm going to do here is say, "Hey, I like this. Give me a bunch of tweaks. Let's play around with some stuff." Okay, so we got these tweaks back. Now, I would zoom this in a bit more. Um, I guess I'll do this much. But the reason I didn't was cuz earlier I was this zoomed in and the video was going down there. So, let's do 125%. But anyways, we can do some tone things. So, right now the background is warm to match the video. We could also switch this to dark. And obviously, that would change the video. So, that's why I don't want to do that. So, we'll go back to warm. Um, for texture, we can do subtle noise. I don't

really see too much of a change there. It's a bit too subtle. We could do a dot grid. Once again, I'm not sure how much of a change I'm seeing there. We could do ledger lines. I'm definitely seeing those ledger lines. And it's interesting because if you can tell, it doesn't look like those are fixed to a section. They kind of are like an absolute ledger line, which kind of adds a lot of like 3D depth, which I think is kind of cool. We can also do graph paper or we could do paper fiber. I kind of like the paper fiber. And that really shows the depth. Okay. Yeah. Let's say I like the paper

fiber. Texture strength. Okay. Here's where we could make that stronger or weaker. So, if I go back to like the dot grid now, we can definitely see the dot. Actually, you know what? I might like the dot more. I like the strong dot background. So, we'll stick with that. We could add a vignet. Uh, I don't really think we need that. Okay. So, for the hero layout, we could do split. We could do stacked. We could do video left. I don't like that. We're going to stick with split. The headline font, we could go nope. I like the sands. Headline size, we could change. We could change the text right here. So, money on the level or it could just be

money. Yay. Um, we could change the video frame. So, none hairline border corner ticks card plate. I'm just going to leave this as flush. I think that that looks the best. An ornament dot. What is an ornament dot? Let's turn that off. Okay. So, ornament dot. It's basically just like a a caption of what we're seeing. I'm going to leave that there. We can also get into what the accent should be. So, for like these colors up here, if I changed this to a different color, it would change that. However, I did like the default. So, I'm not sure if I'm going to be able to get that perfect where it was. It was right

about there. We could change the intensity. The tally mark watermark. Where is that? I assume that's going to be somewhere down here, right? Like, where is there going to be currently a watermark? Ah, I found it right here. That's pretty cool. You see how as you as you scroll down, you see this in the background. I mean, I think that's awesome. I'm gonna leave that ledger numerals. So, I'm assuming each section has some sort of number. Right here you can see three and that gets turned off. I'm going to keep that on. And then we can do, you know,

we can change the sections. So the sample weekly, if I turn that off, it just completely removes that section. But all of these I like. So those are the tweaks that we were able to make. And if we wanted even more, we could go ahead and ask for more. But I think that this looks really solid as just a first pass. I'll go ahead and click on present. And I'll do it in this tab so we can get the full screen experience. Now, there is a bit of a gap here, and I think that it should probably be more flush like this. But that'd be a really easy fix. We would be able to do the edits, or we'd be able to do the draw, and we'd be able to iterate in order to make this better. But yeah, I like the

feel of it. You know, for basically a oneshot prompt, maybe, you know, two or three iterations, we're already at a spot where this is really good. It feels on brand. It matches our pitch deck. It matches our brand guidelines. And anytime we wanted to make another subpage or, you know, a certain promotion or a different landing page, we would be able to keep this style. And I really like this watermark, how it only stays on that background. If we go into navy, we don't get it, but it comes right back. I think that adds a lot of depth and a lot of texture that I really actually enjoy on this site. So, at this point, if we wanted to be able to take

this and push that onto our live domain, we would basically take this, we would export it to Cloud Code. So we would just copy this command into cloud code and then we'd push it onto our GitHub and then push that into Verscell or we could just export it as HTML or we could download this product as a zip and get that onto a Verscell or you know wherever we want to host that however we want. And I'm not going to show you guys that right now. Um later in this video there's going to be a section where we do another full build and we actually get it into cloud code and we push it. So if you want to see that how that works right now just kind of scrub over

to that section and then you can hop back. But there's so many different things you can do here with this sort of website. So the video that you're going to watch later, I actually do a live build of this website which is kind of similar, right? We have an animated video on this right hand side. You can see with that and then we scroll down and we get the different elements that fit our brand. And then I also built this website kind of the same feel, right? And we've got this was built once again in claw design. And then we also did this one which I've iterated upon a little bit, but I was able to use um

cloud design to put a video in the background. And this one is more of a parallax scrolling effect rather than having it be an endless loop. And it's just as simple as saying, "Hey, I want to have this video be on the background. I want it to be parallax scrolling. I want it to be smooth. As the user scrolls down or scrolls up, the video should play in that order." And we have these 3D dynamic sort of glass morphism cards as well. And I was able to pull some inspiration for all of this kind of stuff from a few different sites that I wanted to show you guys real quick. So the first one is motion sites. This one has a lot of cool backgrounds and

elements that are animated. And this is actually the exact one I pulled inspiration from for my AI automation society website. And you can actually just copy the prompt and give that prompt to claude design and it will recreate it for you. So I could have copied this prompt and I could have said, "Hey, build me this website but use our tally design spec." and it would have just done it. It would have been super cool. We would have obviously had to give it a background video to play, but it could have just done that. Um, and then there's also tons of other ones as you see which you can use for inspiration. There's also other sites

like godly website which has basically an endless scroll of more inspiration. There's also something like awards with three W's. There are tons of different sites you can use for inspiration. And then when you really want to get more granular, you can use something like 21st.dev which has a bunch of components. So if I go to the components, we can see that we have like announcements and you could pull an individual element by copying the prompt and put that into your website. You could also get some animated backgrounds like these pills or like you know that background path or these different like

animations and things. You could also grab borders and buttons and you know different things that you want to put. So once again all of this kind of stuff is going to be good for you to go get some inspiration from. And the coolest part about all of this, you know, agentic coding and AI website building is that these are all basically just prompts. You can copy them and put them straight into your own site. So definitely look at some of these sites and play around with how they work. Okay, so real quick before we move on to the next section, which is going to be building a mobile app prototype. Let's

just build a quick brand guidelines for this for this brand. So this project is super trained on our website and our guidelines. So, what I'm going to say is, can you please output just a textbased version of these brand guidelines? I want you to include things like the logo and the spacing and the font and the colors and the typography and just be as specific as you can about the way that the buttons are, about the way that the accents work. Give me a full text breakdown of everything that's important to know about the guidelines

for design when it comes to this specific brand. And so the reason that I'm doing this is because I want to be able to take this guidelines in text and give that to OpenAI GBT image 2 and have it create us one of those brand guideline docs that you saw earlier like when we did this for AI automation society. Now, what you could do if you don't want to do this in your design session limit, which is probably wise, would be to export this as, you know, a zip or HTML or export this in some way where you can see all of the individual

elements because, as you know, in the files, this is what everything is. This is what we need in order to make the actual uh brand guidelines. So, if you exported this as a zip and then you had Claude analyze it or you had OpenAI analyze it and then turn that into a design guidelines um you know PDF, then that would work just as well. But for the sake of the demo, I'm just going to do this in complete natural language just because right now it's a bit quicker. And let's go ahead and do a quick cloud design usage update. We are at 51% used so far after the first demos

that we've been working on today in this video. All right. So, it came back with a pretty large breakdown here. Let me just go ahead and go all the way to the top and copy this. You can see this is very, very holistic. It really didn't skip anything. I'm going to go ahead and copy all of this. I'm going to bring this over to ChatBT. I'm going to click on create image and I'm going to paste this in. And then I'm also going to grab the tally logo, the text or sorry, the icon one which is right there. And I'm grabbing the textbased version of the

logo. And yeah, I think we should be good. I'm just going to say I've attached two logos, the icon version and the text version, and then I've attached the brand guidelines um in text. And what I want you to do is create me um basically a one pager for the tally brand guidelines. So, I'm going to shoot that off and hopefully we get something back on the first pass that we don't have to fix. But if we do have to fix some font stuff, it's not a huge deal. All right, so here's what we got for tally. You can see that it decided to make it vertical instead of or yeah,

vertical instead of horizontal, which is completely fine if we wanted to change it to landscape. We could. I don't necessarily need to right now, but let's go ahead and take a look at this. So, we have the logo up top. We've got um the icon. We've got the word mark, the name, we have the logo here with spacing, which all looks good. So far, as I'm looking through all of the text, nothing seems to be off. I like how it has the don't, you know, don't has it says don't recolor, don't remove the period, don't do this, don't rotate, don't do that. We've got all of our color scheme stuff.

So, bone, we've got navy, we've got the the green signals. It's also giving us some different mapping things here. We've got the typography, which all looks good, I think. Berkeley Mono, um, free substitute. There's maybe a little thing off right there, but it's not too bad. And we also have this secondary font which all looks good. We've got spacing and layout and we've got UI and icons right there. So, um you may not like this, you may not. You may want to iterate on it a little bit. But

I think that this is pretty incredible that you can just generate this that quickly. If you needed to make some custom tweaks, you could take this into Canva and change a few things. Or of course, right here, you could say, "Hey, I want this to be, you know, less wordy or make it landscape or whatever you want to do here." But this image model is really good at building stuff like this. And you might be asking, okay, well, why would I even do that if I already have like my design system in cloud design? And it's a good question because you can, you know, export the design system and you can give it to cloud code or even codeex or whatever

you want. But maybe, you know, sometimes it's just nice to have an internal one-page document that you can just look at and kind of get some inspiration from or even maybe you need to send it to an external vendor or a designer or something like that. So, it's nice to have and it also takes like 2 minutes, so why not? But let's go ahead and move on to this next um section. So, what we're going to do now is we've done a pitch deck. We have created our landing page and now we want to build a prototype of the mobile app. So, this is another scenario where I'm going to be doing the brainstorming inside of actual

cloud rather than in cloud design. So, I said literally just this. Give me a full spec for a mobile app. I want this to be a requirement doc and I want to turn this textbased request into a live highfidelity breakdown of how the app should look and feel. So it gives us all of this information. You can see this is a massive massive doc. I mean this is pretty large. It's pretty comprehensive. So I'm assuming that this is going to have a lot of data. Now this is going to use a bit more input tokens on the way

in in order to you know have cloud design process it. But I think that it's worth it because those input tokens are not as as expensive as Claude outputting tokens and going down the wrong path. So we're going to go ahead and just skip the wireframe. In this case, we're going to go high fidelity. We're going to call this tally app layout. Actually, we're just going to go tally app design. And I'm also going to make sure I say that this is for a mobile app, not for a desktop app. We're going to make sure that we switch our design system to tally design system.

And let's go ahead and get started. So, I'm going to first of all just paste in that whole spec, which was 804 lines. And I think that's basically it. I mean, I think I'm just going to say I just dropped you in 804 lines of a mobile app spec and you already have access to our tally design system. Go ahead and build this out. If there's any questions that you have about this, then feel free to shoot. Otherwise, I will check in with you when you're done. So, that is my amazing prompt engineering that you guys just witnessed or heard. And now I'll

check in with you guys when something interesting happens. All right. So Claude does have some questions for us. How much of the spec should I build? I want to do all screens, I think. Yeah, let's just go all screens. Presentation format design canvas. All screens laid out side by side in iOS frames. I like that. How interactive should this be? Yeah, I want this to be interactive. Variations and tweaks. Light and dark mode toggle. Two to three layout takes of this. variations of everything. Uh, [1:00:06] yeah, let's just go for a lot of those. Should the ask sheet actually think wire to claude natural language in real answer out? I can wire it to call Claude with context about a fake user or just hardcode clever answers to the suggestion chips. We're going to just go ahead and hardcode stuff for now, but it's nice because this is kind of giving you a nice idea of what could happen once you actually build out the back end of this app. How real should the fake data feel? We're just going to go with, yeah, reasonable is fine. How many insights on the weekly? Three is good. [1:00:36] Flowchart, visual treatment. So, I think you guys understand the points of how this works. It's going to help get very clear on the vision before it starts building. Okay, so this just came back. You can see the agent is still going through and verifying to make sure that everything is looking all right, but we've got all of these tasks have been done. So, let me just kind of go over here and zoom out a little bit and we can take a look at what we have on this board. You can see that this is a full mockup of all of the different kind of like scenes and sections that we'd be having in this app. And what else is cool is you can see that the verifier agent apparently found something and [1:01:06] it's fixing what it found. So, let's just still continue to go and look through this. So, each of these individual components, we could go ahead and move around. It looks like we could also open them up full screen if we wanted to scroll down. And you can see that they're interactive. So, I know this might be a little tough. Let's actually just open this up full screen in this tab. So, what's really cool is as we open them up, we're not just being able to look at them, but we can actually click on the buttons. You can see that we could come in here and type. We could use this button, which asks about like what we can afford, which is pretty cool. We can open up one of these [1:01:37] expenses, and we can see the different elements of design throughout the app and how this would actually function. We could mark this as cash. We could hide from totals. This is pretty nice. We can also switch between the different sections. So, here's home. Here's flow. We can see how these aren't actually functional right now, but that's what the way the buttons would work. But we can expand all this stuff, which is just really awesome. We also have a dark mode, and then we also have one that's already open on the weekly. Let's see what else we got down here. We have the onboarding flow. So, I don't know if there's too much to scroll through here, [1:02:07] but basically, you get started with an honest look at your money and then you connect your bank account and then there's three quick questions to answer. As you can see right here, one notification a week. You can allow notifications. That looks really nice with a little drop shadow. And then it basically starts organizing everything and setting up your app. It's also giving me some variations for the actual hero. Now, what you'll notice here is that the app is pretty bland. Like, it's basically the um the bone color all the way throughout, which I don't really love. I mean, it has a nice polished feel and the elements look decent, but I [1:02:38] don't love how bland and how dry the whole site feels. But this is super cool. All of the different elements that it's able to show us on this app, especially considering we basically just gave it one prompt. It's even showing us what the notifications would look like on their iOS device. And we can see some more dark mode uh changes down here. So, once again, I'm really going to heavily lean on Claude Design's creativity and the tweaks feature. I think that these look really good. From like a structural point of view, I like these, but what I've noticed as I scroll down, as I [1:03:09] scroll through, is that it's very bland. You know, the onboarding feels very dry. the home variations of the hero section. Everything about it is just very bone. There's not many accents. There's not much um you know, depth. It doesn't feel very dynamic. Could you just upgrade this a little bit? You know, make some polished changes. Give it some more texture and give me a bunch of things that we can tweak in order to play around with what we want the final design of this app to look like. Awesome. So, we got a few things that we can play around with here as far as tweaks go. Um let's start with the [1:03:39] accent color. So, we've obviously got green as the main. We could also do terra. We could do amber. We could do indigo. We could do rose. I mean, I think green probably fits the best with the accent. So, we'll keep that as green. We could use the accents more. So, quiet, medium, or loud. I think that I like medium. It's got a bit of a little bit of a like gradient within the text. We could add some more texture, whether that is paper or grain. Hero scale could be increased or decreased. I think big is fine. The tally mark I really do like. Um, you can see right [1:04:10] here in the background, we've got like the tally. It's not really being spaced the right way. Like if it it was shifted over a little bit more. I think that that would look good, which we could obviously tweak. The card style lifted flat paper. Let's go somewhere where we can actually see those cards. Uh I found one where it's talking about the cards right here. So these can be flat, they can be lifted, or they can be paper. It's kind of hard to tell actually like that, but you can sort of see the difference when you're zoomed out a little bit more. I like lifted for sure. Subscriptions can be either plain right here or it can be a bar. And I like the bar better. So, there's lots of little [1:04:40] things that we can tweak, but also let's say we wanted to change a few things like pretty specifically. So, I'm going to try the draw function again. I'm going to go ahead and draw right here and basically just say the, you know, iPhone time and battery are covering up some of the UI, which is not good. So that's one of those where I don't think this is a specific element that we would have been [1:05:10] able to edit ourselves or or move and drag. So using the draw here should hopefully work better. You can see that this has been applied with our circle there. Um but I guess it actually designed these elements as part of this mockup, but it didn't realize that it shouldn't probably have them overlap, which is interesting. The other thing is the watermark. You know, I really do like this, but it just feels like it is kind of off the edge of the page. So I'm going to give some feedback about that, too. But they really need to fix this bug. When you draw and you start typing to give feedback, you like can't see the [1:05:41] actual note. It gets stuck down there and that's pretty annoying. So, I just made a couple tweaks. You can see it was able to fix this issue right here. It also fixed the logo and bumped it over to the left a little bit more. And you can definitely tell that after that first iteration, it's been, you know, spruced up a little bit. Like the onboarding, I think, looks better. It has a little bit more depth and it feels more polished, but there's still a long way to go. And you know, it's going to take more than 30 minutes to actually design a full app. And I'm not going to be able to show you guys that in this master class because iteration is the name of the game because even as you [1:06:11] start to develop the back end and as you, you know, actually put, you know, your first 500 to a,000 users going through, you're still going to be making changes. You're still going to be getting feedback and changing things. Like for example, if I was clicking in here through the settings, first of all, I don't like that icon for settings. I don't know why it wouldn't just be a gear. And also, like these things are coming through wrong. Like they're all out of bounds. the toggle's out of bounds, the text is out of bounds. So, there's a lot of little bugs and things like that that we're still going to need to fix. But when you think about how much context we just dumped in to claw design, you know, like 800 plus lines [1:06:42] and we get this to start and now we just have to actually take the time to QA and go through and make those changes. But this is really starting to bring something to life. If you think about where we started at the beginning of this video, we basically just had a very very vague idea and now we have, you know, our pitch deck, our website, and we're starting to bring the app concept to life. And also, honestly, most of the app, I think that the dark mode looks better. I think that the green is a little bit more dynamic here. And I think that the shadows and like the watermark, and I think that other elements will just actually kind of [1:07:12] appear in a more aesthetic way throughout the rest of the app. So, I'd probably from here, you know, maybe take these dark mode concepts and I'd keep iterating on this version of the app. But this is another good example of showing you how Claude Design is able to give you all of these different mockups on a board. Let's do another quick check on our actual usage here. All right, so after everything that we've done so far today, we are at 85% of our cloud design limit has been used up. Okay, so let me walk you guys through a different [1:07:42] journey real quick of what I did when I first hopped into cloud design. So I built my design system for AI automation society and then I was able to have it help me build the AIS website. And then from there I pretended, okay, what if we're having a promotion for um you know like a first agent type of workshop. So then I used that design spec and I gave it some information about this promotion which is a fake promotion but I gave it information and it built me this landing page which feels exactly like our website which was great, right? I think if I wasn't zoomed in weird, it would it would format a little bit better. But [1:08:13] then we had this landing page which feels exactly like our website. And then from there, I was like, "Okay, cool. What else can we do here? Let's actually make a release video for this promo." So then I threw that into here. And look what we got. If I start this from the beginning, I mean, this is really impressive. We've got animations. We've got motion graphics. What if you could build an agent this weekend? Your first AI agent. The bar comes in in an animated way. There's a scrolling banner at the bottom. These load in really nice. And we also have this little terminal style animation which is super cool. We [1:08:43] see text coming in and we see all these animations and elements coming in. Now all of this is actually, you know, it has all the context of the website. So it was able to make this accurate. But also this is definitely something you could throw on your socials in order to promote this, you know, promotion. So what we're going to do now is the fourth and final thing that we're doing as far as this live build is we're going to make a launch video for Tally. Now, when I did this one that you guys just saw, all I did was I just told it to do it and it just animated the HTML. But what we're able to do to make this even [1:09:13] better is we're able to use something called hyperframes, which I've actually made a lot of videos about on my channel so far, cloud code and hyperframes, to create animations that look like this. I mean, it's basically just being able to use the AI to write the HTML and then have it animated and be able to have it rendered. So, like for example, this launch video from Hey Jen, who created hyperframes was built in Claw Design using hyperframes, you know. So, if we just click through here, you can see the way it's able to animate stuff. It's it's amazing. So, all we have to do is go grab this skill right here, which I [1:09:43] will link in the description of this video, and I'm just going to go ahead and download this raw file. This is going to download it as markdown. You can see cloud design hyperframes. So, we're going to go into cloud design. We're going to open up a new project. I'm going to click on from template and I'm going to click on animation. This is going to be tally launch video and we're going to change the design system of course to tally design system and we're going to create that. Now what I'm going to do is I'm going to grab that skill right there. So that markdown file and I'm basically just going to say the goal [1:10:15] of this project is to you know make an animation. I want you to make a launch video for tally. So you have tally design system. I'm also going to give you the tally brand concept which I just dropped in as another markdown file. And then you have the claw design hyperframes markdown file which is going to teach you how to actually create the motion graphics and render out this animation or this sorry animated video. So that's what we want. We're targeting a landscape video. We're hoping for maybe, you know, 20 to 30 seconds of [1:10:45] fast-paced information. The ultimate goal is to announce tally announce what it does and um you know at the end a big call to action for people to sign up and start their free trial. So that's what I want you to do here. So that is my prompt and I'm going to go ahead and shoot that off. We'll see if we get any questions but otherwise I will just show you guys that finished output and see what it looks like. Okay, so we got a 25se secondond video. Let's give it a quick watch. Tally money on the level. No budget, no goals, no envelopes. [1:11:15] No coach, no streaks, no pep talks. It just shows you what happened. Little swirl out animation. I like that. Um, weekly. Can I afford a $400 jacket? Yes, but tight. Rent hints in 8 days. $8 per month or 72 bucks a year tally. Okay, so it's nice. I like the CTA at the end. It feels on brand obviously, but it's very bland, right? Like it's not very engaging. I wish there were more dynamic elements and claw design with hyperframe should be able to make things a little bit more dynamic. So, [1:11:45] we're going to definitely make some iterations here. The logic of all this is good, but let's make this more fast-paced. Let's keep our audience's attention. Let's make it engaging. Let's add certain elements, you know, more animations, more motion graphics. There should be more going on on screen than just a couple bullet points coming up. That's boring. Tell a story here. Make this exciting. You know, it's a big day. We're launching an app and we are inviting people to be a part of the journey. And so that's what I think is so cool [1:12:15] about all this kind of stuff is as humans, we're very good at knowing what we want and we're knowing when we don't like something, but we don't always know the vehicle to get there. So what you just saw me do is as if I was talking to like, you know, a human video editor or someone like that, right? like I'm telling the end goal and I'm just hoping that Claude Opus 4.7 is able to understand and translate my request of like more engaging, tell a story. I'm hoping that it's able to translate those kind of highle vague ideas that are a little bit more emotional into something [1:12:46] objective into actual code that we can render out. So, let's see what we get back. All right, so the agent is still verifying, but let's go ahead and give it a watch. Wow. I mean, that's already much better. That was pretty cool. I like that. An app that doesn't try to change you. It just shows you what happened. Very nice. I like that fade out. I still like this scene. Can I afford a $400 jacket? Yes, that's way more engaging. Found a few. You forgot. Okay, so there's a little bit of an issue with like the pacing on some of [1:13:16] the stuff. It's very quick, but overall, I mean, that is so much better. And another small small issue is it keeps doing this thing with the logo. If you guys saw here at the end, that logo isn't right. and it keeps doing with this with tally. So, that is one of the major flaws I've noticed with claw design so far is it messes up the logo. Luckily, with my AIS logo, it's just the letters AIS and it never messes that up. But, if your logo is more of an icon and there's some like delicate detail things in there like the slash, it might mess it up, which is kind of annoying. But, usually when you correct it, it's able [1:13:46] to fix it, but it does use more tokens to do that. But I mean, at this point, can you imagine and think about how long would this have taken you to hand this off to a designer or for you to go ahead and animate yourself? Like that is incredible. And all I had to do was say, "Tell me a story." So, I love this. And at this point, what do you do? So, you can't actually export this. You can't render it right here as an MP4. But, you've got options. You could hand it off to Cloud Code, and Claude Code could render it. You could do the same thing with a zip file or the HTML. But, you [1:14:16] know, also for like a 25second video, you could also just make this full screen and then just screen record it. Like that's also an option you have. So, I'm sure at some point they're going to add like a native MP4 render in this platform. But right now, you've got a couple other options if you actually want to be able to use the um video. But I absolutely love that the first couple seconds. I love that animation. That is just a scroll stopper for sure. Now, another pretty important thing to be aware of is how Claude actually uses your tokens. Right here you can see it says start a new chat to save 110,000 [1:14:47] tokens of context. This uses your rate limits more effectively. So if you were to want to keep iterating and iterating and iterating, it probably would be smarter to, you know, export that HTML and open up a new project and continue to make some changes there because we've talked so much in here that this is going to pollute this window and it's going to make us use more and more of our session. So that is just something that you want to keep in mind. If you're planning on iterating on a certain project like over and over and over and shooting more messages and more messages and more messages, that would also be a [1:15:17] reason why people are finding that they're just running through their limit in, you know, like 20 minutes or something. And I want to show you guys something else that's really cool. So we're using a tool called hyperframes, right? So hyperframes is kind of the framework that we just gave Cloud Design to understand how to create these HTML graphics and stuff. Without Hyperframes, Cloud Design could still do it, don't get me wrong, but Hyperframes just has a lot of elements and makes it a little bit better. So, Hyperframes has a really cool catalog where you can look through different things and you could just copy [1:15:47] the code into Cloud Design. So, we've got like a follow notification, we've got a Mac OS notification, we've got all these things, we've got different transitions like a chromatic radial split, we've got a crossworp morph, we've got a glitch, we've got all these different elements that we can pull in. And what's really cool is that claw design can search the web and it can look at GitHub repos and it can do stuff like that. So what I did is I pulled in this one called the app showcase where we have three different mobile phones come out and there's some sort of animation within each and all I literally did was I took the URL of this [1:16:17] exact website, this page we're looking at. I gave it to Claude and it fetched it. So it looked at the page, it browsed the GitHub repo and it was able to pull those elements in and then I told it to add another scene in this video. If you guys remember, it was 25 seconds, now it's 30 seconds. So, it came through and it iterated on the way that the phone needed to go in there. I had to prompt it one more time to fix it. But now, if we go about halfway through and I'll play this. Watch this new scene that we just got with the mobile phones right here. Your money in your pocket. [1:16:47] All of those phones animate and we get a little bit of a bounce with a glow. So, it was just a really nice animation and a really cool scene that I was able to add in here super easily because I was able to leverage one of those cataloges that already exist. even maybe if I didn't copy in that code or the URL and have Cloud Design pull it, then that catalog still has a lot of good stuff for inspiration. So, I definitely wanted to show you guys that Cloud Design can fetch pages, can search the web, and that catalog has some pretty cool gems in there. So, now we have our launch [1:17:18] video. I I swear I didn't plan this, but those four builds, including setting up the design MD or the design system, took about 95% of my claw design. So, almost all the way, we were still able to get pretty far. Obviously, none of that is like perfectly polished to the point where we'd go live with everything, but it just gives you a little bit of an idea of how far that will get you. But, I mean, in the past, you know, couple hours or so, we were able to take absolutely nothing. You know, a very rough idea of a brand, and we turned that into an actual concept, an actual [1:17:48] business idea, a logo, brand guidelines, a design spec. We built a pitch deck, we built a landing page, we built a mobile app prototype, and we built a launch video. all with our natural language inside of cloud design. Now from here, what else do I want to talk about? So four moves that compound. The first one is to reference don't describe. So give real screenshots of things, give real um specific advice. You know, highlight the elements you want to change, make the changes yourself, draw things, add the tweaks. Being as specific as possible [1:18:18] with your prompting is what's going to help you. And that's also why maybe doing a lot of your planning inside of regular claude and then bringing that refined plan into cloud design is going to help you out a lot. We've also got don't use defaults. You know, that's where you get the AI slop. And that's why we have things like, you know, front-end design within cloud. We have all these other things that we can do, but if you're not giving it your own spin on the copy, your own design system, obviously, then it's going to feel way more generic. And that's what leads us into number three, which is to just do the design system first. Don't go build five, but build one, build it [1:18:50] well, and share it with your team so that everything feels consistent. And you can obviously iterate on that. If later you have a different type of button that you want to switch out, just switch it out in your design system. If you end up changing your logo or your colors, just switch it out. And then what I would say is to iterate in chunks. I found it best that if you try to make Claude make like five changes in one prompt, it kind of loses track of those and it doesn't do a great job. So iterate one feature at a time. So let's talk about some limits. What's going on [1:19:20] here? Obviously, the more you pay, the more usage you're going to have. So if you would have been on pro or max 5x and you were trying to follow along with exactly what I did in this master class, you would have hit your limit much quicker than I did because I'm on the $200 a month plan. Now, a lot of people are complaining about how fast they're eating up their limits. Here's what some people are saying. I burned 80% of my weekly pro budget on one web page. 95% of my quota is gone after a single design system iteration. And yes, I will admit the usage is a lot less than I would have hoped. But there are a lot of [1:19:50] things to play with, a lot of levers to pull. I've already talked about a lot of these throughout the whole video. You know, talking about little things that we could do. I also don't know why this is referencing me. I did not tweet that. But anyways, those are a lot of the tips that I went over and I didn't even show you guys how you can switch the model. You know, we didn't do anything besides Opus 4.7 so far, but you can definitely play around with Sonnet and Haiku to make little tweaks as well. Now, I'm about to hop into a different segment where I do another live build and I talk about some other things as well. And at the end of that, we go into some more stuff about how to make your session [1:20:20] last even longer, but a lot of the stuff that I've shown, like I said, is just the mindset shift of cloud design is separate usage. So, only use cloud design if you specifically need cloud design. So, when not to use cloud design? Well, if your work falls into these buckets, you might just burn your quota and it's just not worth it. So, here are some things that I listed down here. But what else I was thinking about too is, you know, when you get to the point where cloud design has been used up, well, you can move that into cloud code, of course, because you can take that design spec, bring that into cloud [1:20:52] code, and now you're just burning through a different session. So, you're not even eating into any of the cloud design limit. And sometimes you might get to a point where there's something that actually would be easier to iterate upon in a manual way. So for example, let's say this was a static site, right? Um or let's say you were trying to create like some sort of poster or a PDF. If you were wrestling with claw code trying to get the logo to look right on here, why not just do that in Canva? You know, why not just replace that in Canva? Because it would take you five seconds whereas here it would take [1:21:22] you probably a few minutes and it would also take you it would eat tokens, right? So, like AI is great and you want to use it, but sometimes it's just easier and quicker to just go do it manually. And if you get to a spot where you can already export it to PowerPoint and make your tweaks or export it to Figma or Canva, then just do it. So, from here, what I want you guys to think about is when does cloud design fit into your workflow and what elements do you already have that you can use cloud design to make better or make more consistent. So, pick a real artifact that you want to ship. Write your own design or your design guidelines. And [1:21:54] then after you've done some iteration inside of Cloud Design, then bring it somewhere else. Bring it to Cloud Code, bring it to, you know, Figma, whatever you want to do. Now, this last section that we're about to hop into is going to be another live build, but this time at the end, we're actually going to bring it into Cloud Code. We're going to sync it to a GitHub repo, and we're going to have that automatically sync to Verscell so we can put that on a real domain. So, from a design perspective, it's very similar to what we've been doing throughout the, you know, earlier in this video, but at the end, we're adding on some extra elements if you want to make these things live. And then once [1:22:24] again, I'm going to cover some other things about how to make your session last longer. So, I'll see you guys over in this next section. So, in just 20 minutes, I was able to transform my AI Automation Society website from this to this where now as I start to scroll, we go on this journey. We go through this scene where we have these different cards that pop up and you can see they're kind of 3D. They're interactive. And as we keep scrolling, we're going more through the journey. We've got this next slide. We keep going here. We've got this one. Everything you need to master a automation. And you can see that this is a much more interactive and polished feel than the way that it used [1:22:54] to be. We've got the final call to action to join the movement. And you can see we've kind of went through the journey of like an evolution of technology, which I just think was super super cool. And what you'll notice is I was able to take the brand feel and the vibe and the colors and all of the copy and I was able to just move it over really easily. So it has all the same important information, but it's just a much more interactive feel. And then 20 minutes later, I was able to do the exact same thing with my personal website. Here you can see it's got sort of like dark vibes. It's got a bunch of statistics. It's got different things that I'm up to. And I just kind of [1:23:24] transformed it to be a little bit more dynamic. You can see it's me sitting on some floating island in the middle of space and I'm working on a computer. But as we scroll down, we have the same elements. We have the same copy. We have the same feel, but now it just has a lot more depth and it just feels a lot more polished. So what I'm going to show you guys today is how we set up websites like this using claw design. We can have different elements. We can have different feels and everything is designed in a way that is just way more engaging and professional. And I've been trying a lot of different things here. You can see I've already eaten through my design quota and I've already spent [1:23:54] over $200 in extra usage just playing around with the stuff. So, not only am I going to show you guys the tips and the tricks that I've learned, but I'm also going to go over some important stuff like how do you actually not drain your limit faster and how do you get the most out of what you're doing here. I don't want to waste any time today. Let's just go ahead and get straight into the video. All right. So, I'm about to show you guys everything you need to do step by step to take an idea from your brain onto an actual website and deployed so that other people can actually view it and access it. Okay, so let's say you want to transform a website. All you would really want to do is if this has [1:24:24] some sort of codebase in GitHub or Cloud Code or wherever this actually lives, you can basically just grab that GitHub repo or you can grab the folder with all the contents and just give it to Cloud Design. So, that's kind of like the first method. The other method is what if you just have an idea and what if you just need to build a website from scratch? Well, let me show you what I'm doing here inside of actual Claude chat in order to give us an example to build together today. So, I said, I want to build a website using Claude design and I'm looking for some inspiration on the type of website that I should build. What is the product or service that we're offering and what should the hero [1:24:54] section and actual copy be like? Help me basically build a brand and I, you know, give me the spec for this. So, we came up with this idea of having a nightly windown drink, one scoop of magnesium glycinate, blah blah blah, but the brand is called LOL. And it gives me the positioning and the voice, visual identity, and what the site should look like. So, that's awesome. And then I come back and I say, "Cool. I want to create a video that will play in the background of the hero section, and it will just be on an endless loop. I need the video to fit the vibe, and I want it to have a wow factor so that when people go to the website, they're like, "Oh, wow. This is, you know, professional." [1:25:25] There should not be any text, but it should also have room where we could insert a block for the hero text and the subtext. So, what I'm asking it for is an image prompt for the background and then a video prompt to animate that. So, it spits out an image prompt right here. So, basically the theme, the concept is a dark ceramic mug with a warm liquid inside and then just kind of having that be, you know, steaming in the background, which would give it a nice feel and it will fit the vibe of like, you know, sleepy time tea or whatever this is supposed to be. So, it gives me the image prompt and I'm going to go over to key.ai. AI. I'm using Nano [1:25:56] Banana 2. So, I drop in the image prompts right here. I make sure that it's a 16x9 ratio. And then I get this image, which as you can see is basically just a mug with some sort of liquid. This is where we put the hero text and the subtext, which is nice. And then it's steaming. And then I take this image and I go back into a different tab in Key and I go to Cance 2.0. And I put that image in as the first frame and the last frame. And I go ahead and I grab that prompt down here for the video prompts in order to animate the image. [1:26:26] The key thing here is that the camera isn't moving. It's basically just a still frame or a still video of this coffee or whatever it is being animated. So here's what this looks like. As you can see, it's just steaming and it looks really nice. Now imagine this is the background of a website when you've got text over here. Could look pretty nice. Okay, so now we have those initial elements. I'm going to open up claw design and I'm going to go ahead and do a new prototype and we're going to start with a highfidelity prototype. I'm not going to use a design system because in this case we're kind of starting our own new brand and maybe we can build a [1:26:56] design system around this later but for now I'm just going to go ahead and say none and we're going to call this LOL website because that's the name of the brand. So I'm going to hit create. What it's going to do is it's going to spin up this little lovable like interface. If we wanted to we could start with a sketch over here. So, we could literally come in here and say, "Okay, um, you know, here's going to be our website. This is where Oh, I wanted another square. This is where we're going to have like the main video." So, it'll be the background of the hero. And I could come in here and say like [1:27:26] this is the um hero background video. And then we want another box over here which will be like the hero text and subtext. Hero text. And then I'll come down here and just say hero subtext. We could also probably want like some sort of navbar up top. So this is like, you know, the logo might be over here. Oops, that's not how you spell logo. And then we could also have like, you know, shop or something like that. And so this [1:27:57] is just a way for us to sort of visually get on the same page as Claude. And then of course, you can see down here it would be looking at the sketch. So let's just go ahead and keep this for now. Obviously, if you have a better vision, you can put some more time and attention into this. You could also lay out the rest of your site down here, too. Um, and then you can add like notes and stuff, but for now, let's just leave it like that. And what I'm going to do now is I'm going to drag in that actual MP4 that we got from Seance. You can see it's uploading the file and it's right here. Now, this was an 8second video. It's not going to let you upload videos [1:28:27] that are like 30 seconds long. There's a cap and I believe it's around 30 or 40 megabytes. So, just keep that in mind. I've gotten away with uploading 15-second videos. I tried a 20 second video and it worked. But just keep that in mind. So now what I want to do is Claude already did all the hard heavy lifting for us. You know, if I come back all the way up here, it basically gave us the brand and all of this stuff with a visual identity, the different sections, the footer, and you can see that it also has like, you know, colors and stuff. So I'm going to take this. I'm going to go back into cloud design and I'm just going to paste that in. And [1:28:57] that gets pasted in as like a little bit of an artifact because it was a long bit of text. So now I just explain what I wanted to do. Hey Claw design, I've given you a couple things. I've got a sketch which is just my basically idea for the hero section. There's going to be a lot of little sections beneath which you will be on your own to figure out what that should look like. I've given you the sleep background.mpp4. This is a video that I want you to be playing on an endless loop in the background and you should see that the hero text will be on the left side compared to that. And then I pasted in [1:29:28] 23 lines of text, which is kind of the brand identity, the feel for the website, and how you should write the copy. And just go ahead and write all the copy for for now. We can make tweaks later. Okay. So, I'm going to paste that in and go ahead and shoot that off. If you guys are curious about how I'm doing voice to text, check the description for the tool. Um, I'm using extra usage, by the way. But, it's going to start to build this out and if it has any specific questions for us, it will come back and it will ask those questions. But right now, it looks like it's just going to run. And also keep in mind this is right now using clawed obus 4.7. So [1:30:00] honestly like the planning phase I like to use obus 4.7. If we wanted to later make some iterations and we wanted to do other things we could bump the model down. But keep in mind this is going to use opus 4.7 which is the most expensive model that is publicly available to us right now. But I love how we still have the feel of of claude over here because it's telling us what it's thinking. We can see what it's doing. It makes a to-do list. So it's very easy for us to just check in on how how it's going and where we are. It's creating a design system here. here. So, we've got kind of a color palette. We've got text right here. And it's honestly best practice, especially when you're getting used to cloud design, to just watch what it's [1:30:31] doing and go ahead and stop it if it's going down the wrong path. Because if it's going down the wrong path, it's going to build stuff and that's going to use a lot of your session limit. So, you might as well stop it and kind of refresh or recorrect it before it wastes all that time. Now, while this is running, I want to show you guys the way that I was able to get some other inspiration. There's this really cool site called motionsits.ai. And shout out to my guy Aiden. He showed me the site and I was like, "This is awesome." So the way this works is you can basically look at backgrounds and you can look at actual other sites for inspiration. So [1:31:02] what you'll notice here, if you guys remember my version of AI Automation Society, so this website where we have this kind of scene in the background and as we scroll through, we have these visual cards. It's like a journey for the POV of the actual end user. I was inspired by this one. So if I open this up, you can see this is a scroll journey. It's got these 3D dynamic elements in the cards and I was able to literally just copy this prompt and I gave this to Claude Design and I said, "Hey, this is a cool concept. I want you to replace the background image with or sorry, not the background image. I want [1:31:32] you to replace the background video with this background video." And I dropped in mine and I said, "I want you to update all of the copy and the brand colors and feel to my brand." And then I gave it in like a design system. So that's basically all I had to do to turn my a automation society into this. And there's so many other ones. Most of these are free. I am on the paid plan, which is literally just 99 bucks for for life. So, that's pretty cool. But some of these are going to be premium, some of these are going to be free. But like I said, you basically just find the ones you like, find the ones that fit your brand, hit copy, give that to Claw [1:32:04] Design, and it will recreate it. And then you're able to just tweak from there. And then if I go to backgrounds, you can see that there's just a bunch of backgrounds that we can look at. So, for some reason, it's not registering that I'm a premium member. Um, but either way, let's say we really like this background. I could copy this and if I open up a new tab and paste that in, it basically just gives me that animation which I could obviously go ahead and download and then display behind the text on my website, behind the different sections on my website. Considering that most of the stuff here is free, head over to motion sites and just play around. It's going to give you some inspiration and there's a lot of cool [1:32:34] elements in here that you can work in. So, also like if you guys remember my Nate Herk one, I'm sitting here on a floating island and I'm working on who knows what and I was inspired by some of these. You know, this one was kind of an abyss. This one was someone working. So, I'm not necessarily recommending you just copy these elements and put it on your site. You certainly can, but this is just a good way to sort of get a little creative and get some inspiration. Okay, but we are back in Claw Design now. And what we have is we have our first iteration, which I mean this looks awesome. Like this text LOL, this text right here. This all feels [1:33:04] very on brand. We can see here that as we scroll down, the image is a little bit dynamic or sorry, not the image. I keep saying image. The video is a little bit dynamic. I think this all looks I mean just amazing. It feels very on brand. We keep going down and we can see we get some background. We get some context as far as like what the product the the problem that it solves. And this is incredible. Just once again, all of this was generated by Claude. The idea, the design, the prompts, not the actual images and videos, but the prompts. And I I love this. Now, what's really cool [1:33:34] about this and a great way to save tokens is that you can just iterate right here. You know, if you put this prompt into Cloud Code, you would maybe get something that visually looks like this. But in order to go back and forth and make tweaks, you would have to like take some awkward screenshots or you would have to be very specific. But right here, what we can do is we can add comments. I could basically just click on something and we can change how it works. So, for example, the how it works button. Let's say I wanted to make this a different color. Maybe like the gold color. Go ahead and make this button the color of the comma in the hero text. [1:34:05] Make it a gold accent. And so now I can just say, "Hey, send this to Claude." and it gets the exact comment about the exact element that I was referring to. So, it's not going to get confused. We can also do edits straight in line. So, if I came here and I was like, "Okay, I don't want this mdash. That looks very AI." I could just delete it and then I could just close that out and it's going to make that change for us because I was just able to edit it right there. So, I can change the text. I could even, you guys noticed, change the size. So, if I wanted this all to be a little bit smaller, I could just come into here and I could just go, "Okay, make that 15 or make that 10." And it's going to change [1:34:36] it right in real time. And then Claude just makes the change for us. You can also draw. So like right here, let's say I don't love the way that the video just kind of ends so abruptly. I can just kind of make a circle around this. And then I can type and just say I don't like how this ends so abruptly. Add a transition overlay or gradient so it feels smoother. And I shoot that off by hitting send. Now, when I do the drawing [1:35:07] thing, the little comments get stuck down there. So, sometimes it's hard to see. That's just kind of a UI bug. Once again, this is in research preview, so little kinks will get ironed out. But that's a really nice feature to be able to just draw. Okay, so you can see that that button changed colors. I like that. Everything else that we have changed has been changed. And it hopefully, you can see it added a little line here. So, that's not exactly what I wanted. I would iterate a little bit. I was kind of hoping for sort of like a gradient transition, but either way, at least it knew exactly what I was referring to. Okay. So, anyways, at this point, we [1:35:37] would read through all the copy and we would iterate. And like I said, I think that this looks pretty solid. But now, if you are not someone who's creative, you might be like, "Okay, what do I even add?" If you are someone who's creative, you're probably going to have a lot of features that you want to add. And at that point, you'll iterate, make some changes, make some prompts. But let's say you just want to know what else is possible, and you want to see what Claude can come up with. Watch this. You come into here. This is a really great iteration one. I want to see what else is possible. I want to see how this website could be improved. So, just add a bunch of things that I can tweak and [1:36:07] put those on there for me. Different colors, different sliders, different panels, and just give me a bunch of things to play with. And this is one of the biggest benefits and things that I love about Cloud Design, even compared to other, you know, website builders, is that we have this tweaks panel right here. Right now, we have none, but it's going to add a bunch of tweaks that we can just play with in real time. And that way, we're able to see, okay, I love this, don't like this so much. and it has helped me feel a lot more creative in times when I'm kind of sitting there lacking inspiration. Real quick, guys, I know we're going to be going over a lot of information today. [1:36:38] So, I'm going to throw in everything that we're talking about here, all of the different things to keep in mind into a free resource guide that you can access for completely free by joining my free school community. As you can see, join the free community. This will take you to a automation society. you will go into the classroom and inside of the all YouTube resources you will be able to find everything the document that I'm referring to and I'm also going to include basically the zip file of this website if you guys want to extract it and understand how it works and how the scrolling animations work you can dive into it and you can let Cloud Code or Claude design dive into it but it's really quite simple like I said I [1:37:08] basically just said hey here's the video but instead of just playing it I want you to only associate each frame with like a scroll position so that as I scroll down or up the video goes forward or reverses so anyways let's get back to the video Okay, so our tweaks are here. And you can see on this right hand side, we have a ton of things that we could play with, which is just going to be so cool. So, let's start up at the top. We have a palette. So, this was the default. We could also go to more of a blue or more of a brown and more of a green or whatever these is. I I'm sure you guys can't tell a ton, but the colors here are changing. Now, you can [1:37:38] see more. The background is changing. We can get sort of like a green. We can get more of a brown. We have more of a light mode here. So, this would let you play around with what you think fits the brand the best. And obviously I don't like this because the hero looks weird. So we could tweak that. I kind of like the brown. But anyways, what else? We have the accent hue. So we can change this. You see how the hue was kind of like a gold? We can change this to see what other colors might look good with our main color scheme. For now, I really like the default, which was kind of over here, more of like a golden bronze. So we'll keep it there. We have the text as well. So I could switch this around, or [1:38:09] sorry, not the text, the font. And I could play with different fonts to see what I actually like. And we can see where else it changes. So it looks like this is changing kind of the primary font everywhere. This is kind of more of a secondary, but this is changing the main text everywhere. We could also see the headline slider. So this can make it bigger or smaller. We can play around with the way that it wraps and everything. So that's nice. The headline could be right and all uppercase. It could be lowercase, which actually I like. I'm going to keep it all lowercase. And then we can change the actual text right here. Of course, the hero layout we could play around with. Obviously I don't want it centered. We [1:38:39] want it left aligned because we made the video that way. So we're going to keep that. But hopefully you guys are starting to understand what I'm talking about now. We have sort of like this overlay we can play around with. We have the video dim that we can play around with. I'm sure you guys unfortunately you can't really see. I wish that they could move like I wish you could drag this tweak slider anywhere, but I'm sure that'll come. We have something called section rhythm, which I probably have to scroll down to see what that is. Okay, so this is basically just like the gaps between the sections. So we could make that smaller or larger. We have the ritual card style. I'm not sure where the rituals are. Here they are. So flat, bordered, or big numerals. I think I [1:39:11] like the big numerals. So, yeah, I'm sure you guys get the point by now. We're able to just play around with the tweaks. And of course, we could just hit reset, which would reset everything. So, there's really nothing to lose here. Actually making tweaks and then saving those changes is going to save you more time and also more of your session limit than if you're just having a conversation back and forth with Claude because we all know how that can go if you just shoot off prompt after prompt after prompt after prompt. Because also think about the fact that if you were doing this in cloud code and you had all these tweaks that you wanted to play with, this is basically like, hey, I wonder what it would look like if the background was blue and then you would [1:39:42] have to go submit the prompt. Cloud code would change the background. It would put it on a local host and then you'd look at it and be like, I actually don't like that. So then you would have to like revert back to the old version. And so that could potentially be two prompts. Whereas here, we can see so much stuff and test it out in a way that doesn't actually make us send more prompts and send more prompts. Now, one thing I noticed is I don't think there's like a revert button. In lovable, you can just like revert back to previous prompts, which is nice. I don't see that here. But once again, this ability to do tweaks saves us from having to do a lot of reverts because we can say, hm, I [1:40:13] wonder what it might look like if the font was changed or I wonder what it might look like if the spacing between sections was smaller. And then if you don't like it, it's as simple as just not doing it. So once you're good with the tweaks, you just turn that off. If you made any changes, it would just go ahead and start making those changes for you. And now what's awesome is you have this project set up. Whether you're doing this in cloud design or in cloud code, you can keep iterating because you understand the idea of how do you get a dynamic element like this or how do you do one of those scroll things where you just tell it that as you're scrolling [1:40:43] you want it to, you know, play the frames backwards or forwards. So let's say we have this that we love and maybe down here we want to have like maybe a video of someone's sleeping. That would be really creepy. But but now if you basically just break the website into sections. So, hero section. Okay, cool. Section one. What can we do to section one to make this cool? Maybe we just add like a dynamic background where there's like shooting stars or something like that. And then section three, maybe we have like a little dynamic video of someone stirring coffee, you know? We can just kind of keep taking it section [1:41:14] by section and that way it's not so overwhelming of, oh my gosh, I have to build a whole website. Just take it section by section and just use these principles. use Claude to help you think of okay for section two help me figure out like right here where what type of video should I have or what type of elements should I have and then okay cool make me the prompts and then I'll go into key and I'll make the the images I'll make the videos and then I'll bring them back into claude and you'll just keep iterating and I think you'll find that it's really really fun you have the fundamentals you understand how the tool works and now you keep going but now [1:41:45] you're at the point where let's say you're good with this website you know you could also click on present you could open it up you could make sure it feels good. You can make sure the buttons are linking to the right spots. And then what do you do next? Well, what we want to do is we want to get this into cloud code so we can push it into a GitHub repository and so that we can push that GitHub repository to Verscell. So, if that makes no sense to you at all, I'm going to explain it all. So, don't worry. What we're going to do first is we're going to click on share and we're just going to go ahead and download this project as a zip file or a zip folder. So, I'm going to download as zip. You could also just hit hand off to [1:42:16] cloud code which would give you a command. You would copy this, give it to Cloud Code, and then it would be able to pull everything in. Today, this morning, I've been having issues with this command. It's been getting a 404 error. So, it's worked in the past. This will probably work by the time you see this video, but that's also an option. But the other option is you just grab the zip file. All right. So, here is that zip file. I'm going to go ahead and extract all. And I actually want to place this into a folder. So, I've already created a folder on my desktop, and it is called LOL website. So, I'm going to click into the LOL website, and I'm going to select that folder to [1:42:46] extract it into. It kind of sounded like I was saying LOL website as if website was a wrapper like LOL website. But now we have LOL website and this is the folder that we want to open up inside of Cloud Code. So here I am. I'm using it in the VS Code IDE and I'm going to go ahead and open up that project. Okay. So now that we are in here, we're going to open up Cloud Code and we're going to get started. You can see basically over here what we have is we have the background video, we have scraps which was our sketch and we have the uploads and we have the HTML. So this is [1:43:16] basically our full project from Claude Design, but now it's inside of Claude Code. And I'm literally just going to say, "Hey, this is a website project for our brand called LOL. All I want you to do is push this to a GitHub repository. Push it to a private repository and call it whatever you want." And because I've already used GitHub with my cloud code, it's going to be able to just push it and it's going to be able to create that repo. But if you've never done this before, all you want to do is go to github.com. It's free to create an account. You're going to log in and then [1:43:46] basically you just need to connect this to your cloud code. So if you ask cloud code to connect it, it'll say sure just let me pull up the authorization page. You'll have to sign in and now cloud code can talk to your GitHub, push changes, create repositories, things like that. And then the second piece of this is you're going to need to create an account at Verscell. So Versell is basically just a place for you to host and deploy your web apps and your websites. So it should look like this. And when you sign up for Versell, you can sign up with your GitHub account, which makes it super easy because then you can just sync a GitHub repo to [1:44:16] Verscell because if you think about it, when you have a GitHub repository, all this is basically is is its folders and its files and its code. And GitHub stores them. So what you need to do is you need to get that code somewhere on the web. And that's what Versell does. And there you go. Super easy. I didn't have to do anything. It says your website is now a GitHub repo. I can follow this link to open it up. And this is the actual repository that we just pulled in from Cloud Design. Now, honestly, before we push this, we probably should have made sure that it worked. So, make sure that the website actually works as expected and open it [1:44:47] up in a local host for me to view. Now, I'm actually glad that I had to do this because you you'll notice I said local host. So, what does that mean? Local host is just a local host that will basically display our website. And so, if this comes back with something like localhost 3000, if you tried to give someone that URL, it wouldn't open up for them. it would open up whatever they have running on their own local host 3000 which could be nothing. I actually saw some funny tweets where it was like a beginner getting into cloud code saying look at this awesome web app I built and they sent out the local host [1:45:17] URL and everyone was um obviously they couldn't open it. So here is the local host. It opened up our website. You can see we have the video playing. We have all of the text coming in dynamically. So everything is basically being transferred over from cloud design over to cloud code seamlessly. No issues. And now that this is actually a GitHub repo, let's connect this to Verscell to put it on the web so that I could actually give you a URL and you could view my website. So back in Verscell, you guys are going to be shocked at how easy this is. You click on add new. You click on add new [1:45:47] project. And then right here, because I'm signed in with my GitHub repo or my GitHub account, I basically just click on this website and I say import. It's looking through my projects. It's going to pull in this project. And then I basically just say deploy. This will take maybe 60 seconds and then it'll give us an actual URL for our website. Now, the cool part about this is if you ever make changes to your site, you basically now have a practice environment and a real environment. So, if I'm on my local host here, you know, and I'm working inside of Claude Code and I'm doing things, basically what [1:46:17] happens is I can make changes and I can iterate, but only I will see these changes. So if I wanted to change the copy or if I wanted to change the background video, but then once we're good with those changes, I come back into here and I say, "Hey, cloud code, push all of these changes to GitHub." And then when the changes come to GitHub and they come over here, Verscell automatically grabs that and deploys it to the live site. So you have a very clean separation between what you're practicing with and changes that you might want to make and then saying, "Hey, cool. We love this. Push that [1:46:47] public." And then Versell will grab it and then it will be live in like 30 seconds later. So anyways, congratulations. You just deployed a new project on Verscell. I'm going to go ahead and click on continue to the dashboard. And now we have an actual domain. So this is a, you know, lol-eite.cell.app. And if I open this up, aha. Okay. So when I open this up, it says 404 not found. So what do we do here? You go back into cloud code and you say, so I just pushed that to GitHub and then I synced that to Verscell to host it on [1:47:17] the web. And when I opened it up, it gave me this error message. What does this mean? How do I fix this? Do you need any more info from me in order to actually help me fix this? It was able to find the cause right away. Forcel serves this from the root of your repo by default, but the repo has a different path instead. So that's why it can't find anything. So the fix is it needs to rename LOL website to index.html. And then look, it pushed those changes to GitHub. So if I now go to the GitHub repo, which was this one, and I give this a refresh, we should see here that [1:47:47] we have two commits, which means that we've made two different pushes. So we've made a change and then what happens if I go back to Verscell. So back here you can already see the website is now rendering properly. And if I also click on deployments, we can see once again that we have a change that was made 1 minute ago which was renaming to index.html. So now I could click on this domain and I can see that we actually have our real site just the way that we saw it on our local host and everything should be coming through properly because we've made that fix. Now, one other quick thing I wanted to talk about when it comes to actually deploying your site is that you built [1:48:18] this to be optimized for a laptop or for a, you know, a computer. So, if you come into your site on the local host before you deploy it and you hit F12 or you just open up your developer console, you can click this button right here to switch to mobile view. So, this is actually what we'd be seeing if I open up the site on mobile, which obviously is not good. So, you would need to go back and iterate a little bit and tell Cloud Code to optimize this for mobile. Maybe we want the image to be or I keep saying image. Maybe we want the video to be kind of down here instead. Or maybe [1:48:49] we just want the font to be displayed in one line and then have more stuff down here. So that is something to think about. You need to be thinking about how will this actually look if I'm on a mobile device compared to if I am on my computer or even like a tablet and stuff like that. So the point being cla and cloud code don't automatically optimize for mobile. But if you tell it you need to optimize for mobile, it will certainly help you figure out the way to restructure it. And you can do all that without having it actually impact the way that it appears on the web on your [1:49:19] computer version. So just something else I wanted to make sure you guys were aware of. And you can see right here that we're using averell.app domain. So if you wanted to change this, you would just have to bring in your own custom domain. It takes maybe 5 minutes and you can just talk to Claude to figure out how to do that. It's super simple. But let's hop into some of this other stuff now and dive a little bit deeper into how to get the most out of cloud design. So cloud design is its own product. It it kind of feels like what they did with Cloud Co-work, how they basically packaged up different workflows and different functionality into something that's a little bit more accessible, you [1:49:50] know, cuz everything that Cloud Design does, you could easily do in Cloud Code, but not everyone wants to. And they're keeping all of this in the same environment. It's built on top of Claude Opus 4.7 which has much more advanced vision capabilities than the previous models did. But of course, the Opus 4.7 model does come at a bit of a cost. So keep that in mind. You can build prototypes, you can build slides, you can build landing pages, animated promos, so much stuff with design. Obviously today we mainly looked at websites, but there's a lot you can do. And in order to use it, you have to be on a paid plan. You cannot be on a free [1:50:21] plan. So let's talk about the 2meter system. First of all, Cloud Design has its own weekly quota. So, if I go back into my usage, you can see you have a current session for your plan. You have all models, you have sonnet only, and you have your own claw design usage. And this is what I blew through pretty quick. And so, what do the burn rates look like? People have been complaining that they're getting their session eaten up really quick. So, if you're on 20 bucks a month after one big website and one big design system, you might already be almost done. If you're on the max five times plan, then you're going to have, you know, maybe four to five [1:50:52] series prompts and you might be able to, you know, hit the limit pretty quick. And then if you're on the 20x plan, which I'm on, I was able to build probably a few different video projects and a few different websites. And then I started to get really close to the end of my limit. So what actually drains your limits the fastest? Well, there are a few things. First of all, if you do every single thing with 4.7, then you're obviously going to be eating more tokens than if you were on Sonnet or even Haiku for some very minor changes. I personally haven't done this myself. I've haven't really jumped into the wireframes. I always just started with a [1:51:22] um high fidelity, but I have seen some people on X talking about that if you do the wireframe first, you're able to basically convert it better to high fidelity with less iteration. And obviously that makes sense. I mean, if you're in cloud code, I always talk about how the planning phase is so important. So get clear on your idea, give as much context up front as far as like a sketch and you know, maybe like that clawed spec that we saw earlier in the live example. This information was able to make it so much easier for Cloud Design to build what we wanted on the first try rather than having to iterate [1:51:52] so much because that's where you're going to burn a lot of tokens. Also, setting up a design system without a URL. In general though, design systems will eat a lot. So, if I go back to the um app and I go into like creating a design system, which if I went right here, what this does is it lets you set up a system for your brand. So your name, you can put in a GitHub repo, you can put in other folders, other files and other logos and assets and it will create you basically a template so that if you ever want to make anything, videos, slides, websites, you can create [1:52:23] it with that brand. So for example, I made one with AI automation society, which is what you see right here. So every time I use this design system, it's going to make everything with that typography, with those colors, with that background, the color scheme, all that kind of stuff. Now, when you create a design system, once you put in all this information, it has to ingest it and it has to create that actual spec. And this can eat a decent amount of tokens because it's going to take like 10 to 15 minutes. Now, what's interesting is if you actually export this, you can put that into cloud code and you can get all of that value already. If you come into [1:52:53] your design system, you can see the type of information that's in here. You can iterate on it, but you can actually go ahead and share this with your team. But you could also just download this as a zip and then you could give that zip to Cloud Code, sort of like we did earlier. And now you could say, "Hey, this is the design system for AI automation society. Help me build some other stuff." And you could do that then in cloud code as well. It's really nothing new. The whole concept of having like a design system or design MD. It's not a new concept. It's just kind of the way that it's packaged up here in Cloud Design makes it a lot easier. And then of course, like I showed you guys, the ability to tweak stuff in the canvas. We talked [1:53:24] about this, right? being inside of a project and using tweaks and using, you know, the comments and the edits. That's going to be more precise and it's going to give Claude a better idea of what you actually want to change. So then it doesn't go down the wrong path and waste your time and your session. And then just think about the fact that you might get into some really really long threads. Um, I haven't proven this for a fact, but just based on the way that Claude uses tokens, what I found is that if you are in a project, right, and it's getting really, really long and you're still not getting where you want, maybe you want to export this and then open up [1:53:55] a fresh session and you're kind of not really starting at square one again. You're iterating upon something that's already been built and you're making some changes, but now you have fresh context because this is likely all starting to pollute the context window and it might be leading to some rot and it might be leading to tokens becoming uncashed and then you're basically just processing them again. So that's something to keep in mind. Now you could also come in here and do a /cle and it says hey cleared. We're ready for the next instruction. So that's something else to also play around with but I can't say with certainty that that actually clears all of this from the [1:54:25] context window. I haven't seen for sure yet. So okay. Okay, so best practices to stretch limits. We kind of already talked a lot about that. I just showed you guys the zip export when you're zipping either your actual project or a design system. We talked about model by stage. So maybe you can use Opus 4.7 at the beginning to plan a little bit or when you need some really legit changes, but switch over to Sonnet 4.6. I was on Sonnet 4.6 for um a lot of a different build and it was able to generate the video and it was able to create the animations and create the slide decks and it was working just fine. I think at the end of the day like Sonnet 4.6 is [1:54:56] really good and if you are super clear and super specific about what you want, then you can probably get a lot of the way done with Sonnet 4.6. So, it's definitely worth testing out. And then some other real quick tips, one visual dimension per prompt. So, don't try to throw in a mega prompt with, hey, change XYZ, ABC, D, E, F, and G. Now, I know that some people might disagree with this because sometimes in cloud code, you want to send off one big prompt so that it can create its to-do list and it can start to iterate. But what I found here is that when I ask for multiple [1:55:27] different big changes in one prompt, it only actually does like one or two of them well and the rest of them just kind of get disregarded. So, I've found more success and when I talk about being efficient with my prompting, I found more success doing one main big change per prompt. It's also good to do negatives. So, tell it what you don't want. Tell it if you don't want these fonts or if you don't want these color schemes. That way, you don't have to correct it later. You can also reference real things. So saying something like linear 2023 with higher density rather than just saying, "Hey, make this clean or make this minimalistic." Obviously [1:55:57] pointing and commenting on things and drawing on things and then asking for prototypes, flows, demos. And then of course you can go ahead and export that entire HTML, you could export it to Figma, you could export it to Canva, you could export to PowerPoint, you can get it out of there and then make the tweaks you need to if you don't actually need to use Cloud Design for things that you could do pretty easily and pretty quickly by hand. So some other things to keep in mind, file uploads. So, I have been able to upload MP4s like you guys have seen. I've been able to edit some videos, but there is a cap. And I think [1:56:27] it might be 30 megabytes, it might be 40, it might be a little more, but if you try to go and upload like a 5-minute video, it's probably not going to let you. There also might have just been a bug because this is in research preview and because everyone's using it. But for the most part, you can upload lots of different assets. And the more things that you're able to upload right away, the more context it's going to have and the less you're going to have to repeat yourself and fix things. And then here are just some other quick limitations to flag. Not going to read all these off because I feel like I've hit on a lot of these already, but take a quick pause if [1:56:57] you want to look at this. And like I said, that free doc that I drop in the community will have a lot more of this kind of stuff as well. All right, so that is going to do it for today. Now, what you can do next is watch this video right up here where I talk about other website hacks and specifically in cloud code. Because what might happen is if you burn through your limit in cloud design, but you want to keep iterating, you want to keep building, just do what I showed you, export your cloud design project, get it into cloud code, and now you can just keep working on cloud code because you have more usage. And then just wait till your usage resets on design and then take it back into [1:57:28] design. But that is going to do it for today's master class. I hope that you guys enjoyed. And if you did, please give it a like. It helps me out a ton. Don't forget to join my free school community if you want to check out the resource guide from this video as well as every other free resource that I've ever given out on YouTube. Once again, that is completely free to join. So, go ahead and consider subscribing if this helped and check out a ton of the other videos on my channel where I break down very similar stuff. So, as always, I appreciate you guys making it to the end of the video, and I will see you all in the next one. Thanks everyone.