Claude Design 2 HOUR COURSE (Beginner to Pro)

Claude 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

professional. And all you have to do is use your natural language. So, in this masterclass, I'm going to take you from a complete beginner, maybe you've never even opened up Claude Design before, all the way to an expert who can ship

websites, videos, app demos, prototypes, whatever you want to do with Claude Design. I'm going to show you guys the

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 Claude 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 Claude 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, Claude Design. This is going to

in. So, Claude 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 Claude chat, you've got co-work, you've got Claude Code. This is a different app within

Code. This is a different app within sort of the Anthropic ecosystem called Claude 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 Claude Design into Claude 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 Claude 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

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 Claude Design and some other tools in order to really bring that brand to life. We're also going to be going over

life. We're also going to be going over some really important habits and the ways that you can get the most out of Claude Design without burning through your session limit. Because the

important thing about Claude 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

usage. You can see we've got our current session. We've got all models. We've got

session. We've got all models. We've got

Sonnet only. And then we have a Claude 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

masterclass 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 Claude Design and what is Opus 4.7? So, here

was the release blog from Anthropic 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 one-pagers and more. You can even use it to create like

more. 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

everything. Collaborate with Claude to create polished visual work, a vision model-backed 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, cuz you do want to be a little bit strategic. But Opus

4.7 has the best vision. And Claude

Design does something really cool where 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. Claude 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

strategic there. And something else that's pretty interesting is Krieger left Figma pretty much right before the announcement of Claude Design. And

Krieger was on Figma's board and is now Anthropic's CPO. So, that's also kind of

Anthropic's CPO. So, that's also kind of interesting to think about like where are these tools headed. 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,

this. This is available for pro users, max users, and team and enterprise users as well. So, if you're on the free plan,

as well. So, if you're on the free plan, you will have to upgrade in order to test out Claude 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 Claude 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

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

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 left-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 Claude 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 Claude Design. Now, a few things you're going

Design. Now, a few things you're going to notice. There's kind of this thing on

to notice. There's kind of this thing on the left-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

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

shaders. So, there's ways right here to basically just use this prompt and then 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 Claude Design. Now,

building a design system is kind of token intensive, 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

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

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

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

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 at it. It has all of these

awesome. Look at it. It has all of these badges. It has all these tags. It

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

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

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 posts, 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 Claude Code, or you can bring that into Canva, or you can even give it to ChatGPT's new image model. Whatever you want to do

image model. Whatever you want to do with it, you can take this and bring it somewhere else. So, that is why this is

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

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

system? What are our colors? What are

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

stuff. So, help me figure out a good brand concept that I can use so it feels consistent." So, this is basically just

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 Claude Design limit. We only

want to use Claude 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

plan. So, don't ever brainstorm in Claude Design. There's just no point.

Claude 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 ideate with Claude. And what it did is it

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

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 us some important stuff down here like the

visual identity. So, we've got a color

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

that. So, if I was to give this concept to Claude 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 ideate

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

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

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

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

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

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 Claude Design,

this point. So, back in Claude Design, I'm going to click on design systems up here. And I'm going to go ahead and

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 Claude Design, we are at 4% of our usage. And I'm on the 20X Max plan,

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

obviously. But still, let's just see what this does. So, company name and blurb. Well, the name of the company is

blurb. Well, the name of the company is Tally. And let's just take a look at

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.

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 field's 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

could. So, I'm just going to add a real quick sentence. I'm going to say,

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

very modern. I want them to have sort of a 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

prompt. Like that's pretty vague. But

just adding a little bit more context there. And let's go ahead and click

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,

ChatGPT's new image model, image two, is really solid. You know, you could have

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 ideate with

built. And you could also ideate with ChatGPT a little bit to see what those images or the logos and stuff could look like. So, I basically said, "Hey, I need

like. So, I basically said, "Hey, I need a professional and minimalistic logo for this brand." I said what the brand is. I

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

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

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 two 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 two.

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

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

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 Roboto Mono and was trying to pull in Montserrat, it messed it up a little bit. So, even when I said, "Hey, you

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 it did here, this looks really good. So, like I said, we're

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,

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

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,

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

down here. It's got type. But we see the brand mark. So, we have the mark, 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. Claude

Design has been historically bad with logos. For some reason, it sort of re

logos. For some reason, it sort of re like it 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,

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. It just doesn't look right. And this is something that like I

right. And this is something that like I said, Claude Design has been doing historically bad. Same feedback here.

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.

I'm going to shoot off that feedback as well. See, this one looks good. This is

well. See, this one looks good. This is

the actual logo that I believe we uploaded. So, I'm going to go ahead and

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

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,

future. Videos, promos, landing pages, everything. So, this is looking much

everything. So, this is looking much better. I'm starting to become more

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

feedback. And I'll check in with you guys once we have our finished design system. All right. So, we're getting all

system. All right. So, we're getting all of this pretty much finished up. And

what you'll notice here is on the left-hand side, we can see that Claude is verifying. And this is it actually

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

look like. And you can see that all of this feels very on brand. We've got the text-based logo on 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

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

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

this. I could make this my default if I want to. I'm not going to do that right

want to. I'm not going to do that right now. But we could go ahead and now use

now. But we could go ahead and now use this design system to build whatever we want. You can also click on design files

want. You 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

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 Claude 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

system. So, that is where this is super powerful. Okay. So, now if we go back to

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

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

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 code

ton. If you were giving it a whole code base or GitHub repo to search through and scrape through, it would have eaten more. So, be selective about what you

more. So, be selective about what you give your Claude Design. You You saw how well it

Claude Design. You You saw how well it did with just markdown and a pretty vague idea. So, it really just needs,

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

right? We took a concept from Claude. We

were brainstorming. We ideated a little bit. We created our logo. We created all

bit. We created our logo. We created all that. And now we essentially have a

that. And now we essentially have a design system. We have a a design.md

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

design.md that we can use for any of our future projects. So, let's actually get

future projects. So, let's actually get started here. What do we want to build

started here. What do we want to build first? Well, we're going to go through

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 Claude Design. Real quick, guys. I know

Claude Design. Real quick, guys. I know

we're going over a ton of information in this video. So, what I wanted to do is

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

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 scroll 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

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

the video. So, let's go ahead and get started with our pitch deck. I'm going

to go ahead and open up this Claude design and I'm going to go to slide deck. I'm going to make sure to use the

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

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

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 Claude 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

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 Claude design and move forward with the actual creation. So, you can see the little

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 Claude design, I maybe do want to do a little bit more market research. So, I'm going to open

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

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

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 Claude design and then it can do

it." So, I want you guys to be thinking

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? Cuz in this case, we're using

outputs? Cuz 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. I

think even outside of the scope of this masterclass today, that's just a really important mindset when you're using AI tools. Okay, so now we have our pitch

tools. Okay, so now we have our pitch deck outline. This is pretty

deck outline. This is pretty comprehensive. There's a ton of slides

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

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 Claude 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,

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

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 T, 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, 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

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

description. I'm using a tool called Glydo and I'm actually a part of the Glydo team now because it is significantly faster and more private than Whisper and I think 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

about. So, definitely go check out Glydo. Windows support is coming very,

Glydo. Windows support is coming very, very soon. So, while this is running, I

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.

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 Haiku and Sonnet. And so, for the most part,

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 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

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

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 Claude 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,

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 is our

important things. So, this is our prompt. It started to read everything

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 verify agent. Now, I did have a little bit of

agent. Now, I did have a little bit of feedback to give. So, I said, "Hey, the logo's wrong here, blah blah blah."

And once again, it's able to view the stuff. So, it took a screenshot, it

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

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

Sunday morning. You get this sort of report. Interesting. Um and as you can

report. Interesting. Um and as you can see, it's sort of going through the pitch. Now, obviously we don't want this

pitch. Now, obviously we don't want this to be super wordy because this is a pitch deck. There's going to be someone

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

solve. And I'm not saying that this is the best launch strategy for a SaaS product. I'm not saying that this is

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

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

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

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

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

that change. So, it says, "The user circled the small Tally mark inside the Interesting. Okay, so that actually

Interesting. Okay, so that actually didn't work. It seems like yeah, that

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

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

something. Maybe there's a really weird that 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

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 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

bit annoying. There's not like a reset button, unfortunately, so or like an undo. So, if I wanted to change this

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

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

stuck. But what you can do is you can let Claude design be the creative one.

You can say, "Hey, give me a bunch of tweaks. Let me play around with things."

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

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,

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

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.

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 Claude 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.

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

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

would do. So, you definitely have to kind of click through to see what's actually going on or you could ask Claude 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 can 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

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 can

this looks. We would go ahead and we can 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

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

together. That was the startup pitch deck. Let's say now what we need is a

deck. Let's say now what we need is a product landing page. We are going to build out just a real simple one-page 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 Claude 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

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 Claude 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

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

looking at. I also just dropped in our brand concepts 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 mockups 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

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?

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 high-fidelity 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-designed. How rough do you want them

pre-designed. How rough do you want them to be? Sketchy hand-drawn vibe, clean

to be? Sketchy hand-drawn vibe, clean wireframe, mid-fi, or mix. I'm going to go ahead and do mid-fi. I think that's going to give us

mid-fi. 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

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 lights or dark.

We're going to go ahead and do mostly light with one dark concept.

What stands in for imagery? App

screenshots.

Um 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, 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 mockups section in a regular Claude 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

call. But I definitely just wanted to show you guys what this wireframe can look like. And for the rest of these,

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

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

different styles. We've got the honest mirror. We've got the receipt ledger.

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

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

hero section. Honestly, this interface is just a little bit like wonky. I 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 this 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

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 a note from

cool. And then looks like a 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

landing page. Let's see what's down here though. We have what you're choosing

though. We have what you're choosing between. We're choosing between the mode

between. We're choosing between the mode being light bone, light bone, or dark navy. We have a different type of voice,

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

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

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 you're actually visualizing out the journey. I think that could have been

journey. I think that could have been more useful. I think also if you're

more useful. I think also if you're designing like an actual desktop app or 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

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, 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

as HTML. But, anyways, what I'm going to do now is we're going to just basically start fresh. So, I'm going to switch

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.

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%

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 Kling, 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 a hand drawn 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.mp4.

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. So, I'm going to click on new sketch. I'm going to grab a square, and

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

site. So, this is our landing page. And the reason I'm doing

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

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 1x1. So, I want this to appear on

like 1x1. 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 1x1 ratio

thing. And inside of that, I'm going to

thing. And inside of that, I'm going to mark this as the Tally animation.mp

animation.mp 4, 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

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 navbar 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 sort 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 29th, 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

our website. I'm imagining a navbar up the top. I'm imagining hero text and

the top. I'm imagining hero text and hero subtext on the left side of the screen, and I'm imagining the tally animation.mp4

animation.mp4 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 the 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

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 POC. All right. So, here's what

we got. I think it looks pretty nice.

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

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

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.

subtext. We've got the video over here.

We've got the navbar 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 Claude design built in itself without me having to ask. So,

we've got like connects via plaid, 256-bit encryption, read-only 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 a 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 what 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

really like. You can also see that it's throwing in our green accent, which is really nice. And as we continue to

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

structured sections. But, I like the way that this navy one looks, sort of like that, right? Like I like the the

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

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

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.

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

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

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 depth. Okay. Yeah, let's say I like the paper fiber. Texture strength. Okay,

here's where we can make that stronger or weaker. So, if I go back to like the

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.

background. So, we'll stick with that.

We could add a vignette.

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 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 sans.

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

card plate. I'm just going to leave this as flush. I think that that looks the

as flush. I think that that looks the best. An ornament dot. What is an

best. An ornament dot. What is an ornament dot? Let's turn that off. Okay,

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

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'm I

think that's awesome. I'm going to leave that. Ledger numerals. So, I'm assuming

that. Ledger numerals. So, I'm assuming each section has some sort of number right here. You can see three, and that

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 I'll 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 one-shot 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

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 the site. So, at this point, if we

the 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 Claude Code, so we would just copy this command into Claude Code, and then we'd push it onto our

GitHub, and then push that into Vercel, or we could just export it as HTML, or we could download this product as a zip and get that onto a Vercel or, you know, wherever we want to host that, however we want. And I'm not going to show you

we want. And I'm not going to show you guys that right now. I'm later in this video, there's going to be a section where we do another full build and we actually get it into Claude Code and we push it. So, if you want to see that how

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

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

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

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,

right? And we've got this was built, once again, in Claude Design. And then

we also did this one, which I've iterated upon a little bit, but I was able to use um Claude 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 a simple as saying,

loop. And it's just a simple as saying, "Hey, I want to have this video be on the background. I want it to be parallax

background. I want it to be parallax scrolling. I want it to be smooth. As

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

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

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

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

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

three W's. There are tons of different sites that 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

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

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

site. So, definitely look at some of these sites and play around with how they work. Okay, so real quick, before

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 text-based 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

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 GPT-2 and have it create what's 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

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 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

quicker. And let's go ahead and do a quick Claude 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 ChatGPT. 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 text-based

there. And I'm grabbing the text-based 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

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

deal. All right, so here's what we got for Tally. You can see that it decided

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

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 wordmark, 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 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

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,

like this. And you might be asking, "Okay, well, why would I even do that if I already have like my design system in Claude Design?" And it's a good question

Design?" And it's a good question because you can, you know, export the design system and you can give it to Claude Code or even Codex or whatever you want. But maybe, you know, sometimes

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 it maybe you need to send

from. Or even it 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

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

app. So, this is another scenario where I'm going to be doing the brainstorming inside of actual Claude rather than in Claude Design. So, I said literally just this, "Give me a full spec for

mobile app. I want this to be a

mobile app. I want this to be a requirement doc, and I want to turn this text-based request into a live high-fidelity 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,

massive doc. I mean, this is pretty large. It's pretty comprehensive, so I'm

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 Claude 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 going to just go

layout. Actually, we're going to just go Tally app design. And I'm also going to make sure

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

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

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 yeah, let's just go for a lot of those. Should the ask sheet actually

those. Should the ask sheet actually think? Wire to Claude, natural language

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 hard code clever answers to the suggestion chips. We're going to just go ahead and

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 the uh reasonable is fine. How many insights on the weekly? Three's good. Flow chart

the weekly? Three's good. Flow chart

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 mock-up 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

app. And what else is cool is you can see that the verifier agent apparently found something and it's fixing what it found. So, let's just still continue to

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 expenses and we can see the different elements of design throughout the app and how this would actually function. We can mark this as

actually function. We can mark this as cash. We can hide from totals. This is

cash. We can 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,

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, 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

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

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 it has a nice polished

love. I mean it it has a nice polished feel and the elements look decent, but I don't love how bland and how dry the whole site feels. But this is super cool. All of the different elements that

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 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

dynamic. Could you just upgrade this a little bit? You know, make some polished

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

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 accent color.

So, we've obviously got green as the main. We could also do terra. We could

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

accents more. So, quiet, medium, or loud. I think that I like medium. It's

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

is fine. The tally mark I really do like. Um you can see right here in the

like. Um you can see right here in the background we've got like the tally.

It's not really being spaced the right way. Like if it was shifted over a

way. Like if it was shifted over a little bit more, I think that that would look good, which we can obviously tweak.

The card style, lifted, flat paper.

Let's go somewhere where we can actually see those cards. Aha, 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 can be a bar and I like the bar better. So,

there's lots of little 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

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 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 mock-up, 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

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 actual note. It gets stuck down there and

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 masterclass because iteration is the name of the game.

Because even as you start to develop the back end and as you, you know, actually put, you know, your first 500 to 1,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

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

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

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 Claude design, you know, like 800 plus lines, 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

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

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 these different mock-ups on a board. Let's do another quick check 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 Claude design limit has been used up. Okay. So,

let me walk you guys through a different journey real quick of what I did when I first hopped into Claude design. So, I

built my design system for AI Automation Society. And then I was able to have it

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

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 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,

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

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.

bottom. These load in really nice.

And we also have this little terminal style animation, which is super cool. We

see text coming in and we see all of 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 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, Claude 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

rendered. So, like for example, this launch video from HeyGen, who created Hyperframes, was built in Claude Design using Hyperframes. You know, so if we

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 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 it's Claude Design Hyperframes.

So, we're going to go into Claude Design. We're going to open up a new

Design. We're going to open up a new project. I'm going to click on from

project. I'm going to click on from template, and I'm going to click on animation. This is going to be Tally

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 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 Claude 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

we want. We're targeting a landscape video. We're hoping for maybe, you know,

video. We're hoping for maybe, you know, 20 to 30 seconds of fast-paced information. The ultimate goal is to

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 25-second video. Let's give it a quick

watch.

Tally, money on the level.

No budget, no goals, no envelopes.

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 hits 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

end. It feels on brand, obviously, but it's very bland, right? Like it's not very engaging. I wish there were more

very engaging. I wish there were more dynamic elements. And

dynamic elements. And Claude Design with Hyperframes should be able to make things a little bit more dynamic. So, we're going to definitely

dynamic. So, 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

more fast-paced. Let's keep our audience's attention. Let's make it

audience's attention. Let's make it engaging. Let's

engaging. Let's 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 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 high-level vague ideas that are a little bit more emotional into something 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 the stuff. It's very quick, but overall,

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 Claude 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,

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 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

love this. And at this point, what do you do? So, you can't actually export

you do? So, you can't actually export this. You can't render it right here as

this. You can't render it right here as an MP4, but you've got options. You

could hand it off to Claude Code, and Claude Code could render it. You could

do the same thing with a zip file or the HTML. But, you know, also for like a

HTML. But, you know, also for like a 25-second 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

um video. But I absolutely love that the first couple seconds. I love that animation. That is just a scroll

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 tokens of context.

This uses your rate limits more effectively." So, if you were to want to

effectively." So, if you were to want to keep 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

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

right? So, Hyperframes is kind of the framework that we just gave Claude Design to understand how to create these HTML graphics and stuff. Without

Hyperframes, Claude Design could still do it. Don't get me wrong, but

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 the code into Claude 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 cross warp

radial split. We've got a cross warp morph. We've got a glitch. We've got all

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

pull in. And what's really cool is that Claude 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

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

within each. And all I literally did was I took the URL of this 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 all 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

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.

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 catalogs that already exist. Even maybe

if I didn't copy in that code or the URL and have Claude Design pull it, then that catalog still has a lot of good stuff for inspiration. So, I

definitely wanted to show you guys that Claude Design can fetch pages, can search the web, and that catalog has some pretty cool gems in there. So, now we have our launch

in there. So, now we have our launch video. I I swear I didn't plan this, but

video. I I swear I didn't plan this, but those four bills, including setting up the design MD or the design system, took about 95% of my Claude 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 business

idea, a logo, brand guidelines, a design spec. We built a pitch deck. We built a

spec. We built a pitch deck. We built a landing page. We built a mobile app

landing page. We built a mobile app prototype. And we built a launch video.

prototype. And we built a launch video.

All with our natural language inside of Claude Design. Now, from here, what else

Claude Design. Now, from here, what else do I want to talk about? So, four moves that compound. The first one is to

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

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 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 Claude 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 Claude. We

have all these other things that we can do. But if you're not giving it your own

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 well, and share it with your team so that everything feels consistent. 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 here?

some limits. What's going on 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 masterclass, 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

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 webpage. 95% of

my quota is gone after a single design system iteration." And yes, I will

system iteration." And yes, I will admit, the usage is a lot less than I would have hoped. But there are a lot of things to play with, a lot of levers to pull. I've already talked about a lot of

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 last even longer. But a lot of the stuff that I've shown, like I said, it's just the mindset shift of Claude design is separate usage. So, only use Claude

separate usage. So, only use Claude design if you specifically need Claude design. So, when not to use Claude

design. So, when not to use Claude design? Well, if your work falls into

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

here. But what else I was thinking about too is you know, when you get to the point where Claude design has been used up, well, you can move that into Claude code, of course, because you can take

that design spec, bring that into Claude code, and now you're just burning through a different session. So, you're

not even eating into any of the Claude design limit. And sometimes you might

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 Claude 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

know? Why not just replace that in Canva because it could take you 5 seconds, whereas here, it would take 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

do it. So, from here, what I want you guys to think about is when does Claude design fit into your workflow? And what

elements do you already have that you can use Claude design to make better or make more consistent? So, pick a real artifact that you want to ship. Write

your own design.md or your design guidelines. And then, after you've done

guidelines. And then, after you've done some iteration inside of Claude design, then bring it somewhere else. Bring it to Claude code. Bring it

else. Bring it to Claude code. Bring it

to, you know, Figma, whatever you want to do. Now, this last section that we're

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 Claude code. We're going to sync it to a

Claude code. We're going to sync it to a GitHub repo, and we're going to have that automatically sync to Vercel 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 again, I'm

things live. And then, once 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

section. So, in just 20 minutes, I was able to transform my AI Automation Society website from this to this. We're

now, as I start to scroll, we go on this journey. We go through this scene where

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

they're interactive. And as we keep scrolling, we're going more through the journey. We've got this next slide. We

journey. We've got this next slide. We

keep going here. We've got this one, everything you need to master AI automation. And you can see that this is

automation. And you can see that this is a much more interactive and polished feel than the way that it used 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

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

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 transformed it to be a little bit more dynamic. You can see it's me

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

computer. But as we scroll down, we have the same elements. We have the same copy. We have the same feel. But now it

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 Claude design. We can have different elements.

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

things here. You can see I've already eaten through my design quota and I've already spent 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

doing here? I don't want to waste any time today. Let's just go ahead and get

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

it. Okay. So, let's say you want to transform a website. All you would really want to do is if this has some sort of code base in GitHub or Claude code or wherever this actually lives, you can basically just grab that GitHub repo or you can grab the folder with all

of the contents and just give it to Claude design. So, that's kind of like

Claude 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

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

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

we're offering? And what should the hero section and actual copy be like? Help me

basically build a brand and I don't, you know, give me the spec for this."

So, it came up with this idea of having a nightly wind-down drink, one scoop of magnesium glycinate, blah blah blah. But

the brand is called Lull 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

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.'

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

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. I'm using

Nano Banana 2. So, I drop in the image prompts right here. I make sure that it's a 16 by 9 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

steaming. And then I take this image and I go back into a different tab in Key and I go to SeeDance 2.0 and I put that image in as the first frame and the last frame, and I go ahead and I grab that

prompts down here for the video prompts in order to animate the image. The key

thing here is that the camera isn't moving. It's basically just a still

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

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 Claude

elements. I'm going to open up Claude design and I'm going to go ahead and do a new prototype and we're going to start with a high-fidelity 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 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 Lull

none. And we're going to call this Lull website because that's the name of the brand. So, I'm going to hit create.

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

interface. If we wanted to, we could start with a sketch over here. So, we

could literally come in here and say, "Okay. Um

"Okay. Um you know, here's going to be our website. This is where Oh, I wanted

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

video. So, it'll be the background of the hero.

And I could come in here and say like this is the um hero background video. And then we want another box over

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

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 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

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

stuff. But for now, let's just leave it like that. And what I'm going to do now

like that. And what I'm going to do now is I'm going to drag in that actual MP4 that we got from SeeDance.

You can see that it's uploading the file and it's right here. Now, this was an 8-second video. It's not going to let

8-second video. It's not going to let you upload videos that are like 30 seconds long. There's a cap and I

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.

and stuff. So, I'm going to take this.

I'm going to go back into Claude design and I'm just going to paste that in. And

that gets pasted in as like a little bit of an artifact because it was a long bit of text. So, now, I just explained what I wanted it to do. "Hey

Claude design, I've given you a couple things. I've got a sketch, which is just

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

look like. I've given you the sleep background.mp4.

background.mp4.

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

for now. We can make tweaks later.

Okay, so I'm going to paste that in.

I'm going to go ahead and chew 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 actually 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

questions. But right now it looks like it's just going to run. And also, keep in mind, this is right now using Claude Opus 4.7. So, honestly, like the

Opus 4.7. So, honestly, like the planning phase, I like to use Opus 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

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 it 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, so we've got kind of a color palette, we've got text right here. And it's honestly best practice,

here. And it's honestly best practice, especially when you're getting used to Claude design, to just watch what it's doing. And go ahead and stop it if it's

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 re-correct it before it wastes all that time. Now, while this is running, I want

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 motionsites.ai, and shout out to my guy Aiden. He showed me the site and I was

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, 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

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 Oh, sorry, not the background image. I want you to replace the

image. I want you to replace the background video with this background video." And I dropped in mine. And I

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 AI 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 Claude 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

member. Um but either way, let's say we really like this background. I could

copy this. 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

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

around. It's going to give you some inspiration, and there's a lot of cool elements in here that you can work in.

So, also, like if you guys remember my Nate Hurk one, I'm sitting here on a floating island and I'm working on who knows what. And I was inspired by some

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

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

inspiration. Okay, but we are back in Claude 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 very on brand.

We can see here that as we scroll down, the image is a little bit dynamic Oh, sorry, not the image. I keep saying image. The video is a little bit

image. The video is a little bit dynamic. I think this all looks I mean,

dynamic. I think this all looks I mean, just amazing. It feels very on brand. We

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

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 about

this. Now, what's really cool 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 Claude 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

comments. I could basically just click on something, and we can change how it works. So, for example, the how it works

works. So, for example, the how it works button. Let's say I wanted to make this

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 uh in the hero text. Make

it a gold accent. And so now I can just say, "Hey, send this to Claude." And it gets the exact comments 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 em dash. 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 it

that 10. And it's going to change 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

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

smoother." And I shoot that off by hitting send. Now, when I do the drawing

hitting send. Now, when I do the drawing thing, the little comments get stuck down there, so it's sometimes it's hard to see. That's just kind of a UI bug. Once

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

line here. So, that's not exactly what I wanted. I would iterate a little bit. 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

referring to. Okay. So, anyways, at this point, we 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

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

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

improved. So, just add a bunch of things that I can tweak, and 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 Claude 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, 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

school community. As you can see, join the free community. This will take you to AI 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

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 Claude Code or Claude Design dive into it. But it's

really quite simple. Like I said, I 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 see more. The background is changing. We can get sort of like a

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

that. I kind of like the brown. But

anyways, what else? We have the accent hue. So, we can change this. You see how

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

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 Oh, 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

like. And we can see where else it changes. So, looks like this is changing

changes. So, 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 can also see the headline

everywhere. We can also see the headline slider, so this can make it bigger or smaller. We can play around with the way

smaller. We can play around with the way that it wraps and everything, so that's nice. The headline could be written all

nice. The headline could be written all uppercase, it could be lowercase, which actually I like. I'm going to keep it all lowercase. And then we can change

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

with. Obviously, I don't want it centered. We want it left aligned,

centered. We 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

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

sections. So, we could make that smaller or larger. We have the ritual card

or larger. We have the ritual card style. I'm not sure where the rituals

style. I'm not sure where the rituals are. Here they are. So, flat, bordered,

are. Here they are. So, flat, bordered, or big numerals. I think I like the big numerals. So, yeah, I'm sure you guys

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 Claude 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 have to go submit the prompt, Claude

code would change the background, it would put it on a local host, and then you'd look at it and be like, "Ah, I actually don't like that." So, then you would have to like revert back to the old version. And so, that could

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

prompts. Now, one thing I noticed is I don't think there's like a revert button. In Lovable, you can just like

button. In Lovable, you can just like revert back to previous prompts, which is nice. I don't see that here. But once

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, "Hmm, I wonder what it might look like if the font was changed. I wonder what it might look

changed. I wonder what it might look like if the spacing between sections was smaller." And then if you don't like it,

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

you. And now what's awesome is you have this project set up, whether you're doing this in Claude design or in Claude 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, 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 sleeping.

That'd be really creepy, but but now if you basically just break the website into sections, so here's section. Okay, cool. Section one. What

section. Okay, cool. Section one. What

can we do to section one to make this cool? Maybe we just add like a dynamic

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 by section, and that way it's not so overwhelming of, "Oh well, my gosh, I have to build a whole website." Just take it section by

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 you're at the point where

going. But now 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 could 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

next? Well, what we want to do is we want to get this into Claude code so we can push it into a GitHub repository and so that we can push that GitHub repository to Vercel. 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 this as zip.

You could also just hit hand off to Claude code, which would give you a command. You would copy this, give it to

command. You would copy this, give it to Claude 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

this command. It's been getting a 404 error. So, it's worked in the past, this

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

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 lol website, and I'm going to select that folder to extract it into. It kind of sounded like I was

it into. It kind of sounded like I was saying lol website as if website was a rapper, like lol website. But now we have lol website, and this is the folder that we want to open up inside of Claude

code. So, here I am, I'm using it in the

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're in here, we're going to open up Claude code, and we're going to get started.

You can see basically over here 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 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

want." And because I've already used GitHub with my Claude 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 basically you would just need to connect this to your Claude code. So, if you ask Claude code to connect it, it'll say, "Sure, just let me pull up the authorization page." You'll have to sign in, and now

page." You'll have to sign in, and now Claude 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 Vercel. So, Vercel

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 Vercel, you can sign up with your GitHub account, which makes it super easy because then you can just sync a GitHub repo to Vercel.

Because if you think about it, when you have a GitHub repository, all this is basically is is it's folders and it's files and it's code, and GitHub stores them. So, what you need to do is you

them. So, what you need to do is you need to get that code somewhere on the web, and that's what Vercel 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 Claude 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 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. 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 localhost:3000, which could be nothing. I actually saw some funny

nothing. I actually saw some funny tweets where it was like a a beginner getting into Claude code saying, "Look at this awesome web app I built." And they sent out the localhost

built." And they sent out the localhost URL, and everyone was um obviously they couldn't open it. So, here is the localhost. It opened up our website. You

localhost. 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

dynamically. So, everything is basically being transferred over from Claude design over to Claude code seamlessly, no issues. And now that this is actually a GitHub repo, let's connect

this to Vercel to put it on the web so that I could actually give you a URL and you could view my website. So, back in Vercel, you guys are going to be shocked at how easy this is. You click on add new, you click on add new 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 localhost here, you know, and I'm working inside of Claude code and I'm doing things, basically what happens is I can make changes and I can iterate, but only I will see these changes. So, if I wanted to change the

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, Claude code, push all of

these changes to GitHub." And then, when the changes come to GitHub and they come over here, Vercel 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 public." And then Vercel will grab it, and then it will be live in like 30 seconds later. So, anyways,

congratulations, you just deployed a new project on Vercel. 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-website.vercel.app.

lol-website.vercel.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

found. So, what do we do here? You go

back into Claude code and you say, "So, I just pushed that to GitHub, and then I synced that to Vercel to host it on 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. Vercel

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

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

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 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 Vercel? 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.

index.html.

So, now I can click on this domain, and I can see that we actually have our real site just the way that we saw it on our localhost, 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 this to be optimized for a laptop or for a, you know, a a computer. So, if you come into your site

computer. So, if you come into your site on the localhost 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 Claude code to optimize this for mobile. Maybe we want the image to

for mobile. Maybe we want the image to be or sorry, I keep saying image. Maybe

we want the video to be kind of down here instead, or maybe 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 Claude design and Claude 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 computer version. So, just something else I

version. So, just something else I wanted to make sure you guys were aware of. And you can see right here that

of. And you can see right here that we're using a dot versel.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

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 Claude design. So,

Claude design is its own product. It it

kind of feels like what they did with Claude Co-work. How they basically

Claude Co-work. How they basically packaged up different workflows and different functionality into something that's a little bit more accessible, you know, cuz everything that Claude design does, you could easily do in Claude Code, but not everyone wants to. And

they're keeping all of this in the same environment. It's built on top of Claude

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

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 plan. So, let's talk about the two meter

plan. So, let's talk about the two meter system. First of all, Claude design has

system. First of all, Claude 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 Claude design usage.

And this is what I blew through pretty quick. And so, what do the burn rates

quick. And so, what do the burn rates look like? People have been complaining

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

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 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 I

honestly that makes sense. I mean, if you're in Claude Code, I always talk about how the planning phase is so important. So, get clear on your idea,

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 Claude spec that we saw earlier in the live example. This information was

able to make it so much easier for Claude design to build what we wanted on the first try rather than having to iterate so much cuz 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

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 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

minutes. Now, what's interesting is if you actually export this, you can put that into Claude Code and you can get all of that value already.

If you come into your design system, you can see the type of information that's in here. You can iterate on it. But, you

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 Claude 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 Claude Code as well. It's really nothing new. The whole

well. It's really nothing new. The whole

concept of having like a design system or a design MD, it's not a new concept.

It's just kind of the way that it's packaged up here in Claude 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

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 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 uncached and then you're basically just processing them again. So, that's something to keep

them again. So, that's something to keep in mind. Now, you could also come in

in mind. Now, you could also come in here and do a {slash} clear and it says, "Hey, cleared. We're ready for the next

"Hey, cleared. We're ready for the next instruction." So, that's something else

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 context window. I haven't seen for sure yet. So,

window. I haven't seen for sure yet. So,

okay, so best practices to stretch limits. We kind of already talked a lot

limits. We kind of already talked a lot about that. I just showed you guys the

about that. I just showed you guys the zip export. When you're zipping either

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 the different builds 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 really good. And if you are super clear

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, DEF, and G." Now, I know that some people might disagree with this

because sometimes in Claude 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 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

per prompt. It's also good to do negatives. So, tell it what you don't

negatives. So, tell it what you don't want. Tell it if you don't want these

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

real things. So, saying something like linear 2023 with higher density rather than just saying, "Hey, make this clean." or make this minimalistic.

clean." or make this minimalistic.

Obviously, 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 it to PowerPoint. You can get it out of there

PowerPoint. You can get it out of there and then make the tweaks you need to if you don't actually need to use Claude design for things that you could do pretty easily and pretty quickly by hand. So, some other things to keep in

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 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

flag. Not going to read all these off cuz I feel like I've hit on a lot of these already. But, take a quick pause

these already. But, take a quick pause if 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

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 Claude Code. Because

what might happen is if you burn through your limit in Claude design, but you want to keep iterating, you want to keep building, just do what I showed you.

Export your Claude design project, get it into Claude Code, and now you can just keep working on Claude Code because you have more usage. And then just wait till your usage resets on design and then take it back into design. But, that

is going to do it for today's masterclass. I hope that you guys

masterclass. I hope that you guys enjoyed. And if you did, please give it

enjoyed. And if you did, please give it a like. It helps me out a ton. Don't

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

similar stuff. So, as always, I appreciate you guys making it to the end of the video and I will see you on the next one.

Thanks everyone.