00:00:00Claude design is the best thing to happen
00:00:01to your front end work since skills came onto the scene.
00:00:05But if you don't know what you're doing,
00:00:06you will run through your entire usage quota
00:00:09before you can get a landing page up.
00:00:11But this Claude design masterclass
00:00:12will help solve that problem
00:00:14as I show you which features are actually worth your time.
00:00:17On top of that, we will do a head-to-head test
00:00:19with normal Claude code versus Claude design.
00:00:22And we'll talk about some of the interesting use cases
00:00:25that go beyond simple landing page work.
00:00:27This is an awesome tool and we have a lot to cover.
00:00:30So let's hop in.
00:00:31So Claude design is Anthropix response to Stitch from Google.
00:00:35And just like Google Stitch,
00:00:37it gives us the ability to create a bunch of visual mockups
00:00:40for our web apps, mobile apps, and even slide decks.
00:00:43To access Claude design, it has to be on the web app.
00:00:45So claud.ai/design.
00:00:47It's not available in Claude code
00:00:48and it is not available on the desktop app.
00:00:51And speaking of limitations,
00:00:52one big limitation we need to call out right away
00:00:54is the usage limits.
00:00:56It has its own weekly limit and it's the same limit
00:00:59whether you're on Pro, Max 5, or 20X.
00:01:02And this thing is a resource hog,
00:01:05especially if you use a certain tool
00:01:08we will talk about later in this video.
00:01:10But even with those limitations,
00:01:11Claude design is a huge leap forward
00:01:14when it comes to front-end design work with Claude.
00:01:17Things like the tweak system make it very easy to see
00:01:20how different changes would adjust the overall feel
00:01:23of your web app.
00:01:23Stuff like edit allows you to very quickly get into the weeds
00:01:28and change things on a granular level
00:01:30without relying on text prompts.
00:01:31But if you wanna stick with the comment system,
00:01:33we can do that.
00:01:34They have an actual comment button
00:01:35where I can select individual parts of the web app
00:01:39and leave comments that either go straight to Claude code
00:01:42or get added to a comment queue for other members of my team
00:01:46to add their thoughts because this is very collaborative.
00:01:48You can share these designs with other people
00:01:50and you can all work on the same thing from different places.
00:01:53I can draw on the app to show what I want changed.
00:01:56I can very easily see the presentation in full screen.
00:02:00And most importantly,
00:02:02I can very easily export this to Claude code.
00:02:05And this design visual forward setup makes it so much easier
00:02:09to get the sort of front-end outputs you want
00:02:11instead of being purely inside of Claude code
00:02:13and having to do this code dev server refresh back the code
00:02:18dynamic we've had for a long time.
00:02:19But to get the most out of this tool,
00:02:21there are some things you got to know.
00:02:22So we are gonna first start with front-end design work
00:02:25for a web app, which is what most people are looking for.
00:02:29And we will also show what Claude code would have given us
00:02:33versus Claude design.
00:02:34So you can kind of see what we're getting here
00:02:37and if this is even worth it.
00:02:38But before we do that, a quick word from our sponsor, me.
00:02:42So we just released the Claude code masterclass
00:02:44instead of chase AI plus.
00:02:45And it is the number one way to go from zero to AI dev,
00:02:48especially if you don't come from a technical background.
00:02:51And lately we've been focusing on our agentic OS system
00:02:54inside of the masterclass,
00:02:55where we use Claude code as an engine
00:02:58and we supplement it with obsidian for memory,
00:03:00with GWS to attach our entire Google suite.
00:03:03And then with this foundation,
00:03:05attaching any and all customized skill packs,
00:03:09we can come up with that makes sense for our use cases.
00:03:12And we even talk about how to package that all
00:03:14and sell it to clients.
00:03:15So if that is something you're interested in,
00:03:17definitely check it out.
00:03:18It's inside of chase AI plus,
00:03:19there will be a link in the pin comment.
00:03:21So let's talk Claude design and your web app,
00:03:24because there's a few decisions we need to make
00:03:26before we even start prompting this thing.
00:03:28And now I'm gonna be moving all over the screen
00:03:31during this video, so bear with me.
00:03:32Now, first question we're gonna ask ourself is,
00:03:35are we going to use a design system?
00:03:38So here for me, you see none
00:03:40and you see an agentic OS design system.
00:03:42Yours, we'll say none at first.
00:03:44If we wanna create a design system,
00:03:47we're gonna come up here
00:03:48and we're gonna go to design systems.
00:03:50So you probably won't have anything here
00:03:52and you will hit create.
00:03:53Now, what is a design system?
00:03:56Well, essentially it's like a visual template
00:04:00that you can apply to any project you create down the line.
00:04:03So if you have specific fonts, you use specific logos,
00:04:07specific anything, even if it's just like a general mood,
00:04:10you can do that here.
00:04:11This is where you set that up.
00:04:12So you don't have to repeat yourself
00:04:13for every single project.
00:04:15If you have some sort of like through line
00:04:17from a design visual standpoint.
00:04:20So you enter your company name
00:04:21and then you provide examples.
00:04:23Now, these examples can be code.
00:04:25So I can link a GitHub repo.
00:04:27I can drag a folder into here.
00:04:29I can upload files.
00:04:30I can add fonts, assets, whatever.
00:04:33This is where you define your brand.
00:04:36Now, caveat.
00:04:39This is what I was talking about when I was saying token hog.
00:04:42And by token hog, I mean running a design system
00:04:45will A, take somewhere between five and 15 minutes
00:04:47'cause it ingests everything, kind of depends on the size.
00:04:50And B, this will take about 20 to 25% of your usage
00:04:55right off the rip.
00:04:56So understand that, don't come in here thinking,
00:04:57oh, the first thing I'm gonna do
00:04:58is just rip off like five design systems.
00:05:00Absolutely not, absolutely not.
00:05:02Do one if you know what you wanna do
00:05:05and I'll show you what it sort of looks like
00:05:07as we set that up.
00:05:08But don't do any more than that.
00:05:09At least not now until they up the limits
00:05:11which they probably will in the future.
00:05:12So resource hog, resource hog, resource hog,
00:05:16don't get screwed by this.
00:05:17Now, if you do wanna do this,
00:05:19you're just gonna fill this all out
00:05:20and then you'll hit continue to generation
00:05:21and a pop-up box will show something like,
00:05:24hey, this is gonna take five to 15 minutes.
00:05:26Once it completes ingesting all those assets,
00:05:29you will get something like this
00:05:30where it asks you to review the draft design system
00:05:33it came up with.
00:05:34What I fed it was the code for my agentic OS dashboard
00:05:38that I showed you a little bit earlier.
00:05:40It's got kind of this clod color theme.
00:05:43It's got specific text font, all that.
00:05:45So this is what I fed it,
00:05:46was essentially this sort of visual.
00:05:48And it came back with all of this.
00:05:49So, hey, this looks good.
00:05:53This looks good.
00:05:53Hey, look at that mascot.
00:05:54Looks kind of familiar.
00:05:55That looks good.
00:05:57Voice goes through all the colors.
00:05:59So it gets down in like very, very like nitty gritty
00:06:03of like, okay, like what do you want these colors to be?
00:06:06What do you want the cards to look like?
00:06:07It's very specific.
00:06:08It's really nice.
00:06:09And again, very reminiscent of Stitch.
00:06:11Very, very reminiscent of this sort of thing.
00:06:14And so I went ahead and approved everything.
00:06:16It's saying it's missing brand font.
00:06:17So if I had specific fonts I always wanted to use,
00:06:20I can upload them as well.
00:06:21And at any point I can come back here
00:06:23'cause it kind of broke down all the component stuff,
00:06:26click on it, and then take a look and edit it as needed.
00:06:30And just like what you will see later
00:06:31with the actual landing pages and the slide decks
00:06:33and all that, we can share this, right,
00:06:36to a team or whatever, or I can export it.
00:06:39Like PowerPoint PDF, we can send it to Canva, HTML,
00:06:42clod code, really, really easy, just one click away.
00:06:44Also, we have the actual design files.
00:06:46So I can look inside here and see everything that's going on,
00:06:50the actual HTML files and all that themselves.
00:06:52So there's a lot you can customize and play around here.
00:06:55It is not a black box at all where it's like,
00:06:57well, I hope clod design came up with something good.
00:06:59Who knows what's going on underneath the surface?
00:07:01No, you have insight.
00:07:03Like this is all code.
00:07:04Like this is a cool way for it to make code
00:07:06and we can take that code into our own local machine
00:07:09at any moment.
00:07:10We're not stuck here.
00:07:11And so to bring it back to clod design and web apps,
00:07:13that's the first question we're answering.
00:07:15Are we gonna use a design system?
00:07:16Is this something in the same vein visually
00:07:18of what we've done in the past?
00:07:19And more importantly,
00:07:20did you even create a design system at all?
00:07:22Have you given up your 20% of your weekly tokens
00:07:25to the anthropic gods and already even have this option?
00:07:28Now for this demo, we're just gonna stick with none.
00:07:30So we're all operating on the same sheet of music.
00:07:32The next question becomes, hey,
00:07:33do I wanna do a wireframe or do I wanna do high fidelity?
00:07:37Chances are you'll wanna do high fidelity.
00:07:39So you can see what it's actually going to look like.
00:07:41But again, hey, if you wanna do wireframe,
00:07:43you can always go back and forth.
00:07:44You aren't stuck to one or the other.
00:07:45But for this, we'll do high fidelity.
00:07:47So we'll call this CD demo and we're going to create.
00:07:50Then it's gonna bring us here and ask us for context.
00:07:53So do you have that design system or just a screenshot
00:07:56or a code base or a Figma file?
00:07:58Regardless, if you are starting from scratch at step zero,
00:08:01or if you have a code base,
00:08:03you wanna feed it something, ideally.
00:08:05If you have a code base, like we talked about,
00:08:07you've already been working on an app, give it to this.
00:08:09Give it to clod design.
00:08:10It's gonna work better.
00:08:12But even if you aren't and you're starting from zero,
00:08:14I highly suggest at a minimum,
00:08:16you go out there in the world
00:08:18and you find some sort of inspiration you like,
00:08:20whether that's from dribble or awards or godly websites,
00:08:23anything, right?
00:08:25Starting from a blank slate and expecting clod design
00:08:27to do all the heavy lifting,
00:08:28'cause I bet your prompt will suck.
00:08:30Just understand the less context you give it,
00:08:33the higher chance you have a regression to the mean.
00:08:35So just understand that going in.
00:08:36We have the ability to do sketches.
00:08:38So, you know, we can actually draw on here
00:08:40and be like, okay, here's our image.
00:08:44I want the text over here.
00:08:48And then I want the hero image.
00:08:53Hero image over here.
00:08:59And then let's do scrolling banner.
00:09:10We'll give it something,
00:09:12even if it's some brilliant piece of art like this.
00:09:15And you can do a lot more than just that.
00:09:16We can switch the pen, right?
00:09:18We can put in text.
00:09:19I can put in different, like, I can add sticky notes.
00:09:21So there's a lot to do here.
00:09:25And from here, you just gotta prompt the thing.
00:09:28You also have the ability to change up the model.
00:09:30Opus 4.7 is what I would suggest,
00:09:33because especially if you're adding stuff like screenshots,
00:09:35Opus 4.7 has the highest fidelity
00:09:37and the highest resolutions for the screenshot.
00:09:403X what you are getting with Opus 4.6.
00:09:42So now let's give it a prompt.
00:09:44I'm saying building landing page for Argus,
00:09:46a social media intelligence platform
00:09:48that helps creators spot trending topics
00:09:49in their niche before they blow up.
00:09:51That's a layout, you know,
00:09:53pretty much mirroring what you wrote here.
00:09:55So that is as lame of a prompt as we can give it.
00:09:58Basic SaaS type thing.
00:10:00So let's see what it comes up with.
00:10:02And here's what Claw Design came up with,
00:10:03with a very minimal prompt and no context outside of us
00:10:06just scribbling on the page.
00:10:08And it's this, which I think is decent for a first pass.
00:10:13In terms of usage, usage alert, 4%.
00:10:16Took 4% of our total weekly usage
00:10:18to gen up this landing page.
00:10:20And here's what Cloud Code gave us
00:10:21with the exact same prompt,
00:10:22using the front end design skill as well.
00:10:25Not bad.
00:10:26I mean, some minor things we can rip on right away,
00:10:28which is like, hey, the text is cut off here and here.
00:10:32There's not as much wrong on this one.
00:10:35Text does get kind of overlapped here.
00:10:39It shows rising now down here,
00:10:41which also kind of overlaps, but pretty close.
00:10:45I mean, to be honest,
00:10:46I like the design one a little bit more,
00:10:47but I could see someone liking this one
00:10:49a little more as well.
00:10:50So first pass, not a massive difference.
00:10:52So why use Claw Design?
00:10:54Where does it begin to pull away?
00:10:55Well, it begins to pull away
00:10:56when we begin talking about variations
00:10:59and being able to iterate.
00:11:00And you see that right away with tweaks.
00:11:03So the ability for me to do this is a big thing.
00:11:07Me being able to change the headline very quickly
00:11:10or see the ticker.
00:11:13And we can expand upon this as well.
00:11:16So I wrote increase the amount of tweaks aggressively.
00:11:18I wanna be able to play around with this as much as possible.
00:11:20So let's see what it comes back with.
00:11:22All right, so now we can see it added way more tweaks
00:11:26for us to mess with.
00:11:27And what was the usage rate?
00:11:30Adding all these tweaks added 7%.
00:11:32So you can see that just from adding a landing page
00:11:36and like 14 tweaks, we've already used up, what is that?
00:11:39About 11% of our total.
00:11:40Now, I think the tweaks is important.
00:11:43I talked earlier in the intro,
00:11:44like what are the features we actually want to hone in on
00:11:47when it comes to Claw Design?
00:11:48'Cause when we just did the one shot,
00:11:49it wasn't crazy different than what I got
00:11:51with the front end design skill.
00:11:52Well, these tweaks and the ability to mess
00:11:55with all these things and these subtle changes quickly,
00:11:59right, that is really the power of Claw Design.
00:12:02So I'm gonna zoom out a little bit
00:12:03so we can see the tweaks in action a little bit better,
00:12:05but I can do everything now from the palette to the accents,
00:12:10corner radius, background grid, no background grid,
00:12:14fonts, emphasis, headline differences, layout switches, right?
00:12:19This is the power here.
00:12:21The power isn't like, oh, it can one shot the UI design
00:12:23and the UI design off the rip is so good.
00:12:25No, it's the fact that I can actually iterate very quickly,
00:12:29very quickly, this is, think of how fast I'm doing this
00:12:33and think about how fast it would take
00:12:34to run through all of this inside of Claude code.
00:12:36I mean, we can even change the niche
00:12:39of what like social media thing it's looking at
00:12:41in this image from AI and tech to gaming, to finance.
00:12:46Thank God I can adjust the ticker speed
00:12:47'cause this thing was flying, but yeah, this is awesome.
00:12:52This is part one and I think there's two things.
00:12:54Well, actually there's a few more than that,
00:12:56but tweaks I think is the number one value add from design
00:12:59because it's all about visual iteration.
00:13:01And in my opinion, the second most impactful feature
00:13:04of Claude design is the variance of the web pages.
00:13:07So tweaks is very micro, right?
00:13:09Like we're talking like colors, we're talking accents,
00:13:11we're talking fonts, but what if I want variations
00:13:14of the landing page as a whole, like go crazy with it.
00:13:18I'm not talking about a different font,
00:13:19I'm talking about a completely different design
00:13:21and I wanna be able to see them stacked up.
00:13:23Again, just like I can do with stitch.
00:13:25I wanna be able to do this.
00:13:26Well, we can do that inside of Claude design
00:13:28and it's really easy.
00:13:29We're just going to prompt it to do exactly that.
00:13:32So I prompt the design and said,
00:13:33can you now create two more variants of this landing page
00:13:36that I can click between that are wildly different styles,
00:13:39suggest a different variant styles to me first.
00:13:42So it came back with six different options for me.
00:13:44We can do terminal Bloomberg, terminal style,
00:13:48hypermaximal editorial, brutalist, synthwave, soft pastel,
00:13:53or print newspaper.
00:13:56Let's go, yeah, kind of like one and two.
00:13:59So I'll say, let's do one and two
00:14:03and obviously keep the current layout up as well.
00:14:08So Claude design finished up with a variant.
00:14:10So here's the editorial one, the one we started with.
00:14:13We now have a terminal option.
00:14:18As well as a editorial maximal option,
00:14:21which kind of interesting, something different.
00:14:24Now, if you don't tell it to,
00:14:25it's only going to do the tweaks for the original.
00:14:28So when you do these variants,
00:14:30I think the general workflow should be,
00:14:33is you first start with the variants.
00:14:35So on a macro level, you're thinking, okay,
00:14:37I kind of wanna go in this direction.
00:14:39And then once you choose one of these macro ones,
00:14:42say we decided to stick with what we like,
00:14:44then you would go into the very aggressive tweak stage.
00:14:47So you can kind of see everything
00:14:49and drill down on what you want.
00:14:51Because with the way the usage is set up now,
00:14:54if you go macro and you say,
00:14:56I don't want just three options.
00:14:57I want four, five variants and I want tweaks on all of them.
00:15:00You're just gonna burn through your usage.
00:15:02Because adding these two variants, maximal and terminal,
00:15:04that was an extra 5%.
00:15:05So that brings up to about,
00:15:07I think we're at 17% now for landing page,
00:15:11two variations of landing page plus tweaks.
00:15:13And I know I keep harping on the usage,
00:15:14but for a lot of people, this is a big deal
00:15:16and it should be.
00:15:17I think down the line,
00:15:18this will probably change the whole usage thing,
00:15:19but just have it in mind.
00:15:20And so with these two things by you in tandem,
00:15:23this variance into tweaks,
00:15:26is it allows us to get to a 80% solution, a 90% solution.
00:15:31Now I can get even more hyper-focused on this.
00:15:35We can go up here like I showed you in the beginning.
00:15:37We can do edits.
00:15:39So I can like click on this top header.
00:15:42I can change the opacity.
00:15:43I can change the width, the color, all that stuff.
00:15:45So we can get really, really specific if we want to,
00:15:47but the real power comes from hitting that 90% solution,
00:15:50being like, okay, I like the editorial first one.
00:15:54I like the emphasis being on the mark,
00:15:55being a, that ring looks terrible, being a mark.
00:15:59I like this specific subhead, this headline, whatever.
00:16:04And then be like, all right, we're gonna go with that.
00:16:05We'd like the tweaks.
00:16:06Now let's knock out the rest of the landing page,
00:16:09'cause this is just the hero section.
00:16:11And then what you do is you then export this to Clod Code.
00:16:14You hand this off to Clod Code.
00:16:15When I click this, you have a few options.
00:16:17You can download the zip or you just copy this command
00:16:20and you bring it inside of Clod Code.
00:16:22And I think this sort of workflow is infinitely faster
00:16:25than being here, which is what Clod Code gave us
00:16:28with the same exact prompt.
00:16:29I mean like, okay, all right, Clod Code,
00:16:32let's mess with the color now.
00:16:35Let's do a few variations.
00:16:36Let's mess with the headline now and do a few variations.
00:16:39That can take hours versus this took minutes.
00:16:44And at least for me, like I need to see things
00:16:47and I need to see a bunch of options
00:16:48before I actually see what I like.
00:16:50And better yet, chances are once I see something,
00:16:53I might change it.
00:16:54'Cause to be honest, if they're seeing this,
00:16:54I kind of like super vertical one.
00:16:56Maybe we do some sort of icons here or whatever.
00:16:58Like I just want to iterate.
00:17:00I just want to see different stuff.
00:17:02So those are the two biggest best practices I can give you
00:17:05when it comes to the web app portion of this.
00:17:08Macro, right, ask for variations.
00:17:11And then micro, ask for more tweets.
00:17:13The one thing we didn't do here,
00:17:15and we'll show that in things like the slide deck
00:17:18and things like that,
00:17:19is asking it to essentially run through its own plan mode.
00:17:22So we gave it the prompt and right away,
00:17:24it spit this out at us.
00:17:25What we could have done instead and say,
00:17:26hey, I kind of want to do a plan mode with you.
00:17:28I want you to ask me a bunch of questions.
00:17:30And it will instead run you through
00:17:32a significant amount of questions,
00:17:33like five, eight, 10 questions about like,
00:17:35okay, what do you want here?
00:17:36What do you want there?
00:17:37What do you want there?
00:17:38That way you don't have to do as many iterations
00:17:40and ultimately it saves you usage.
00:17:42And I went through this same sort of flow
00:17:44when I was creating the front end
00:17:46for my agentic OS dashboard.
00:17:47You can see up here,
00:17:48this is what I originally started with.
00:17:51And then I was able to kind of go through
00:17:52all these different options.
00:17:53I eventually landed on this one, the cockpit one,
00:17:56although I thought about doing this one with the cool sprite.
00:17:58And then I just brought this version back in the Claude code
00:18:01and then made minor adjustments on the margins
00:18:03and actually like hooked it up.
00:18:04So it was a proper web app.
00:18:06Now let's do Claude design and slide deck.
00:18:08So we'll run through this a little faster
00:18:09because a lot of the fundamentals that we went over
00:18:13when it comes to web apps also apply to slide decks as well.
00:18:16So I won't belabor these points.
00:18:17And this time we will show off the design system at work.
00:18:21And remember that system is based upon the visuals
00:18:24from our agentic operating system.
00:18:26So we're gonna go ahead and hit create.
00:18:27And what do we see?
00:18:28The same setup as before.
00:18:30And something asking you to provide context,
00:18:32whether that's screenshots, code bases or Figma files.
00:18:35Now, the only context we are going to give it
00:18:37is the design system that's already there.
00:18:39As well as a prompt saying,
00:18:41we want a slide deck that talks about the differences
00:18:45between Claude design and Google stitch.
00:18:48And I had Opus 4.7 in another window with Claude code,
00:18:53come up with the prompt.
00:18:54So I had to do a web search.
00:18:55Okay, here's sort of the differences between the two.
00:18:57Now at the end, I wrote before you build anything,
00:19:01ask me whatever questions you have.
00:19:02So we're on the same page.
00:19:05So in a sense, we're almost like forcing it to do
00:19:07kind of like a plan mode.
00:19:08And so you see this populating here.
00:19:10Again, you can have this like forced plan mode
00:19:12totally occur when you do web apps as well.
00:19:14Just make sure you put it in the initial prompt.
00:19:16So who's this deck for?
00:19:18Let's say it's for a public talk.
00:19:20We'll say, we'll keep it short and sweet.
00:19:24Put it at six, we'll do five minutes.
00:19:28We'll do five slides.
00:19:30We'll do slightly opinionated, title style, center piece.
00:19:34We'll say only two by two positioning map.
00:19:37Call up price, yes.
00:19:39And then we'll just go through the rest of these.
00:19:43No notes.
00:19:44And so all in all, it asks us one, two, three, four, five,
00:19:47six, seven, eight, nine, 10, 11, 12, 13, 14, 14 questions.
00:19:52Plus, you know, a little catch all down here,
00:19:56which I really like.
00:19:58Again, Cloud Code's plan mode sometimes will do,
00:20:00I feel like at most, you know, a few,
00:20:03like two iterations of four questions each.
00:20:05So this is great.
00:20:06And here's a look at the slide deck.
00:20:07I put it in full screen and for reference,
00:20:10this took 5% of our usage.
00:20:12So about 1% per slide.
00:20:15So we got the title page, little footnote about the deck
00:20:19being generated by Cloud Design.
00:20:22We got the numbers, you know, where they land.
00:20:26Well, got sort of a graph showing where they land
00:20:30in terms of cost.
00:20:31Obviously, Cloud Design being way more expensive.
00:20:34Field report.
00:20:37And then gives us sort of a,
00:20:38hey, here's a little chart showing
00:20:40what you should use for what use case.
00:20:43So I think the slide deck looks pretty sick,
00:20:45to be honest with you.
00:20:46But more importantly than that,
00:20:48it stuck with the design system.
00:20:49This agentic OS that the whole design system was built on
00:20:53is definitely reflected in the deck.
00:20:55These two things look like they came from the same place.
00:20:59And just like with the web app,
00:21:00we can go through the same workflow.
00:21:03This was the original it gave us.
00:21:05Now we can ask for macro variants and say,
00:21:07okay, did we actually want to stick with, you know,
00:21:09our design system?
00:21:11Or do we want to go an entirely different direction?
00:21:13Okay, we see, you know, two, three, four different variants.
00:21:16All right, let's hone it on one.
00:21:17And now let's bring in the tweaks
00:21:19and really fine tune this thing.
00:21:20And that's sort of how I think
00:21:22you should approach the slide deck.
00:21:23Same way we approach web apps.
00:21:24Now for reference, here is the slide deck
00:21:27that Cloud Code produced us.
00:21:29I gave it the exact same prompt
00:21:31and I created this from the same directory,
00:21:34the agentic OS system live.
00:21:36So it had full access to the same design system,
00:21:38so to speak.
00:21:39On top of that, I also asked it to ask me question.
00:21:42It only asked me seven.
00:21:43And the questions, to be honest, weren't as good.
00:21:46They're a bit more surface level
00:21:47in terms of like, well, slide count.
00:21:49And what do you want the aspect ratio to be
00:21:51versus what we saw in the design?
00:21:52And I think that's reflected in overall,
00:21:55a much more bland output.
00:21:57And I'm kind of surprised it wasn't closer
00:22:00in terms of visual style compared to what design gave us.
00:22:02I mean, it's not bad.
00:22:05I mean, the colors are close, the text is close,
00:22:07but I mean, let's be serious.
00:22:10This kind of blows it out of the water
00:22:12if we're gonna be honest.
00:22:13Lastly, let's talk about mobile app design.
00:22:15And you have two options here.
00:22:17One, you're going straight mobile.
00:22:19You're not doing any web app stuff.
00:22:21And it's pretty simple.
00:22:22You're just gonna do what we did with the web app portion
00:22:25at the beginning of this video.
00:22:26And you're just gonna say at the beginning,
00:22:28this is for a mobile app.
00:22:29Make sure the visuals reflect that.
00:22:32But if you're taking a web app
00:22:33and you then wanna translate that into a mobile platform,
00:22:35it's pretty simple.
00:22:36While we could stay here in this prompt window we're at,
00:22:40in fact, all right, now show it to me in mobile.
00:22:42It probably makes more sense to have a separate project
00:22:45with the exact same stuff going on.
00:22:46But now we have a clear delineation
00:22:48between the web app we're working on versus the mobile.
00:22:51And so to do that, you're just gonna come to the top right
00:22:53where it says share.
00:22:54And then you're gonna hit duplicate project.
00:22:57Once you do that, it'll take you to a page like this.
00:23:00But if you go back to the homepage,
00:23:02we can now see that there is a CD demo remix.
00:23:05And that remix is the duplicated project.
00:23:08And so now I'm just going to prompt it and say,
00:23:10can you show me the same design in a mobile format?
00:23:13And here's the mobile versions it gave us.
00:23:15It went ahead and created variants of all three.
00:23:18I didn't specify that, but it did it.
00:23:19So it gave us essentially nine mock-ups
00:23:21and total cost was 5% of usage.
00:23:25So same flow as usual.
00:23:27It gave us the macro right here.
00:23:29So we would pick which one we liked,
00:23:30obviously be whichever one you decided for your web app.
00:23:32And then from there, we would say,
00:23:34hey, I like the editorial one.
00:23:36Now bring up a bunch of tweaks so I can really nail this.
00:23:38But truth be told,
00:23:39if you got everything set up on the web app version,
00:23:42chances are you already did the tweaks.
00:23:44So there shouldn't be too much
00:23:47you need to change at this point.
00:23:48But there's always a little,
00:23:51you always run into issues when you go from standard web app
00:23:53to a mobile design.
00:23:55But like you see here, really easy to do,
00:23:57just a single prompt.
00:23:58So that's where I'm gonna leave you guys for today.
00:23:59I hope I was able to eliminate the differences
00:24:02between Claude Design and Claude Code,
00:24:04especially highlighting the features
00:24:06that really make us our money inside of Claude Design,
00:24:09that being tweaks and that being the variants.
00:24:11And really what it buys us is iteration speed.
00:24:15I can go through a ton of different versions
00:24:17of whatever I'm trying to create
00:24:19so I can finally land on something I like.
00:24:21And once I do that,
00:24:22then I pull it into the Claude Code ecosystem.
00:24:25And I hope I was able to make the usage costs
00:24:27a little more clear by calling out the percentages we lost
00:24:31after every single iteration and creation.
00:24:33So as always, let me know what you thought.
00:24:35Definitely be on the lookout for more Claude Design material
00:24:38because I think this is a super cool tool.
00:24:40Make sure to check out Chase AI+
00:24:42if you wanna get your hands on the Claude Code Masterclass,
00:24:45and I'll see you around.