00:00:00So the updates never stop.
00:00:02Anthropic just released Claude Design,
00:00:05which now gives us an interface to create web apps,
00:00:09websites, pretty much whatever we want
00:00:11via the Claude interface.
00:00:13This is their version of Google Stitch.
00:00:16And as you can see from this demo video,
00:00:18it's all about giving you the ability to tweak everything
00:00:21from the macro to the micro with these designs.
00:00:23And we're not talking about just web apps,
00:00:25we're also talking about mobile designs as well.
00:00:27And it's kind of funny because when we talk about
00:00:28Anthropic and Claude Code,
00:00:30one of its bigness weaknesses is front end design.
00:00:32So to see that they're now coming out
00:00:34with a full fledged application
00:00:36that handles this weakness is pretty cool.
00:00:39So in this video, I'm gonna show you how it works.
00:00:41We're gonna do a quick demo
00:00:42so you can jump in there yourself.
00:00:43Now, Claude Design was created with Opus 4.7 in mind
00:00:46and it's available if you're on anything
00:00:49from the Pro Max to Enterprise.
00:00:51And this does everything from prototypes to mockups
00:00:53to PowerPoint presentations.
00:00:54And it's something we can export into things
00:00:57like Microsoft PowerPoint or send it to Canva.
00:00:59Now, one of the cool things about this is brand design.
00:01:01So you can give this a code base,
00:01:03say the code base of your website,
00:01:05and it will pull all of the brand assets from the website
00:01:09so it can match things like colors and typography
00:01:11to the design you're working on.
00:01:12So to get started, you just need to head to claud.ai/design
00:01:15and it will take you to a webpage that looks like this.
00:01:18Now, right away on the left, we have a few different options,
00:01:20prototypes, slide deck, you can use a template or other.
00:01:23Down here on the bottom, like I was talking about,
00:01:25we have the ability to create a design system.
00:01:27So if I go to set up design system,
00:01:29I can give it something like my company name,
00:01:33and then I can provide examples of my design system.
00:01:36You don't have to do this,
00:01:38but this will help if you already have something
00:01:40you're trying to match it to.
00:01:41So you can give it the link to your GitHub.
00:01:43You can actually drag the folder.
00:01:45So if you have the code base on your actual computer,
00:01:48you can drag it here,
00:01:49or you can just add the fonts, logos, and assets,
00:01:51as well as any other notes.
00:01:52So what I did is I just selected the folder on my computer
00:01:55with assets to my website,
00:01:57and then I just hit continue to generation.
00:01:59When you do this, especially if it's a larger code base,
00:02:01first of all, it's not going to upload the entire code base.
00:02:03It's gonna figure out which files actually make sense.
00:02:05And secondly, you'll get a pop-up window that says,
00:02:07"Hey, this can take 15 to 20 minutes,"
00:02:09as it goes through all your files.
00:02:11Now, if you wanna do something from scratch,
00:02:12you can totally do that as well.
00:02:13So we'll just start a new prototype.
00:02:16We'll call it Chase demo.
00:02:17We have two options.
00:02:18You have like just a rough wireframe,
00:02:20or we can go straight into a high fidelity mock-up.
00:02:23So we'll do the mock-up.
00:02:25That's gonna take you to this page.
00:02:26And again, definitely getting some stitch vibes here.
00:02:28So I'm gonna tell it,
00:02:29let's design an interactive dark theme graphic
00:02:31showing how culture flows between cities,
00:02:33a rotating globe with the cities connected by glowing path.
00:02:35This is the same thing they did in the demo,
00:02:37but I'm interested to see if what we get here
00:02:40actually matches the asset they showed us in the video,
00:02:43and what sort of differences we're gonna see.
00:02:45How much did they hype it up in their ad?
00:02:47So we're gonna go ahead and send it.
00:02:48And by the way, you can see here,
00:02:50we can also choose things like the model.
00:02:52You can attach stuff.
00:02:53You can actually do voice here and import whatever you want.
00:02:55So right away, it starts asking us some questions,
00:02:57which I really like.
00:02:58This is almost similar to plan mode inside of Claude code.
00:03:02So what kind of culture we think?
00:03:04Let's just do mixed globe style.
00:03:07Let's do, let's do this flow path.
00:03:13That looks cool.
00:03:14What do we want to do for color palette?
00:03:16Let's do multi-hue.
00:03:18And right away, I love the fact
00:03:20that we're now getting these prompts.
00:03:21If I go into stitched, I'm not really going to get this.
00:03:24If I go into other things, I'm not really gonna get this.
00:03:26Like one of the most powerful things inside of Claude code,
00:03:29and we've talked about this in other web design lessons,
00:03:31is having this back and forth
00:03:33to kind of figure out these blind spots in our plan.
00:03:37And the fact that it's asking me all these questions is huge.
00:03:39It's asking me quite a few.
00:03:40Even normal plan mode in Claude code only asks like three.
00:03:43So we'll drag to rotate.
00:03:45What city should we feature?
00:03:47Let's do top 10.
00:03:49How much UI?
00:03:50Let's do full dashboard.
00:03:53Overall mood.
00:03:54Let's do editorial.
00:03:58We'll keep with editorial.
00:04:00What should be tweakable?
00:04:02Ooh, we'll do flow color palette.
00:04:07I'll have it do three things.
00:04:08Let's continue.
00:04:09And then over on the left, once we answer those questions,
00:04:11it sets up its progress.
00:04:12Again, similar to what we would see in Claude code
00:04:15if we had it on plan mode and had it do stuff.
00:04:17And by the way, this is obviously something
00:04:19that you have to be on the web app to do.
00:04:22This isn't something that's available in the terminal
00:04:24for obvious reasons due to the graphical nature.
00:04:27And from what I'm reading,
00:04:29I don't think this is ever gonna be implemented
00:04:30into the desktop app, or maybe it will at some point.
00:04:33But as of right now, you have to do it through Claude.ai.
00:04:35Now, as this is building,
00:04:36let's talk about some of the questions you might have,
00:04:38which is like, how is this any different
00:04:39from me giving it this prompt right here
00:04:41into the chat window or pulling up Claude code
00:04:43and just saying, hey, I want you
00:04:45to build this interactive thing.
00:04:47Well, and having it just, you know,
00:04:48create some sort of web app out of that.
00:04:50The answer is, if we get super reductive, nothing really.
00:04:54Like, right, it's just writing code.
00:04:55It's gonna be the same thing.
00:04:56The difference is, and again,
00:04:58if you've done any sort of front end design in any capacity,
00:05:00even if it's just a simple landing page,
00:05:02you understand the power of being able
00:05:04to visually see these things and compare them.
00:05:05That's why, you know, Google Stitch is so cool
00:05:08because the awesome thing about Stitch
00:05:09isn't even necessarily design philosophy,
00:05:11although I think it's really good.
00:05:12It's the fact that I have a UI
00:05:13where I can visually see a bunch of options
00:05:15and edit it in this manner.
00:05:17And then when I like it, pull it into code.
00:05:18When I'm doing everything code first
00:05:20from a design perspective, it's tough.
00:05:22It's kind of janky.
00:05:23It's kind of hard to take a visual medium
00:05:26and put that into natural language,
00:05:28which gets turned into code,
00:05:29which gets turned into a visual and really nail it,
00:05:32especially at the beginning.
00:05:33Like, I need to see things visually.
00:05:34At least for me, I need to see options.
00:05:36And so having this is awesome.
00:05:38This is a great step forward for anthropic and Claude code
00:05:41because this has been a real weak point.
00:05:42That's why you see apps like Pencil
00:05:45and things like that becoming so popular
00:05:46because it gives you that visual medium
00:05:48to deal with these sort of things.
00:05:49And also quick note, like you can see down here,
00:05:51like these are full-fleshed applications.
00:05:53It's essentially prototyping.
00:05:55So you can have these things called APIs.
00:05:58You should be thinking this more,
00:06:00not just as like a visual design Canva thing.
00:06:03You should be thinking of this more
00:06:04in terms of like Google Studio,
00:06:05like Google AI Studio type deal.
00:06:07So here's what it came back with.
00:06:08Kind of went with editorial style.
00:06:10We can see the globe right here.
00:06:12I can drag it with the mouse.
00:06:14We can do the rotation speed, change glow intensity,
00:06:18change the palette.
00:06:19That's kind of cool.
00:06:21And then it kind of has like little write-ups over here.
00:06:25Now let's talk about being able to edit this thing.
00:06:27First of all, we have this little tweaks thing up here.
00:06:30So the tweaks just has to do with rotation speed
00:06:33and all that.
00:06:34I can leave comments, I can edit, I can draw.
00:06:37And then we can also do things like full screen
00:06:39to see what this would look like for real.
00:06:41That's kind of interesting in full screen.
00:06:42That looks much, much better actually.
00:06:44But let's say I wanted to make an edit to this thing.
00:06:46Obviously we could just go back into the omp window
00:06:49and prompt it.
00:06:50If I go to edit, I can get a lot more granular.
00:06:55This kind of reminds me of like cursors editor
00:06:58or even something like lovable.
00:06:59So I can actually select the individual cities themselves.
00:07:04If I select the globe at large, it'll bring it up here.
00:07:07And I can change things like the color.
00:07:11That looks hideous, the height and all that.
00:07:14So I have the ability to get very, very specific
00:07:16with what I wanna change, which again is great.
00:07:18Better than me saying in text,
00:07:19"Hey, I wanna change the size of this."
00:07:21Well, I can just select it in here and edit it that way.
00:07:24We could also do comments.
00:07:25So I can click on any particular thing.
00:07:27Same thing with edit, but instead of actually changing,
00:07:29"Hey, these specific numbers."
00:07:31I can click on the globe and leave a comment and be like,
00:07:34"Can we make the globe larger?"
00:07:37Send to Claude.
00:07:40And it creates a queue of comments.
00:07:41If you don't wanna send it to Claude right away,
00:07:43but at any point you can then send it to Claude
00:07:45and we'll start working.
00:07:46On top of that, we can also draw.
00:07:48So I can be like, "All right, well,
00:07:50I just want like a moon over here."
00:07:52Let's get a moon.
00:07:53I wanna see like Artemis 2 over here flying around.
00:07:56Stuff like that.
00:07:56Then over here, we also have the design file.
00:07:58So you can actually take a look
00:08:00at the code underneath the hood.
00:08:02And lastly, we have the ability to export
00:08:04and share this thing.
00:08:05So if I click export, I can download it as a zip.
00:08:07I can export it as a PDF, PowerPoint, send it to Canva.
00:08:11Or what's also super cool is I can hand this over
00:08:13to Claude code.
00:08:14And it gives me the command to bring this
00:08:15inside of Claude code, which is great.
00:08:17So that's where I'm gonna leave you for today.
00:08:18I know that was kind of down and dirty,
00:08:19but just kind of wanted to show you
00:08:21how to navigate this thing and what's possible.
00:08:23Definitely expect a deep dive in the next day or so,
00:08:26showing you how you can get the most out of this.
00:08:29As always, let me know what you thought.
00:08:31If you wanna get your hands on the Chase AI Masterclass,
00:08:33that's down in the pinned comments and I'll see you around.