WEBVTT
00:00:01.919 --> 00:00:05.839
The blank page used to be where creative work began.
00:00:06.000 --> 00:00:11.039
Now, if you use Claude Design, it might begin with a blank prompt box.
00:00:11.279 --> 00:00:15.679
A marketer can prototype an internal tool without waiting for engineering.
00:00:15.919 --> 00:00:22.000
An operations team can transform a clunky spreadsheet into an interactive decision-making experience.
00:00:22.320 --> 00:00:28.399
Or just a sales leader can turn scatter notes into a polished customer presentation.
00:00:28.640 --> 00:00:36.960
Clawed design is becoming less of a visual novelty and more of a bridge between an idea and a working artifact.
00:00:37.200 --> 00:00:46.799
And if you haven't used Claude Design or maybe you haven't been keeping up, then today's AI at work on Wednesday is definitely for you.
00:00:46.960 --> 00:00:56.479
Today we're separating the genuinely useful capabilities in Claude Design from the features that merely look impressive in a demo.
00:00:56.960 --> 00:00:58.479
So let's get into it.
00:00:58.640 --> 00:01:02.079
If you're new here, well, here's the big picture.
00:01:02.560 --> 00:01:12.959
Claude Design is more than image generation, it's a complete design system, an editable canvas, and real handoff from idea to execution.
00:01:13.120 --> 00:01:17.920
Uh, some big updates also landed that I think have kind of flown under the radar.
00:01:18.079 --> 00:01:25.200
Uh, in June, Anthropic brought in connected brand, direct editing, and a better connection with Claude Code.
00:01:25.359 --> 00:01:34.560
And then just in the last couple of hours, uh, Anthropic actually added public publishing, better exports, and practical workflow fixes.
00:01:34.640 --> 00:01:37.359
And we're gonna show you a little bit of all of those things.
00:01:37.519 --> 00:01:41.200
So stick with us for the next 25 or so minutes.
00:01:41.280 --> 00:01:43.599
And here's what you're gonna learn on today's show.
00:01:43.760 --> 00:01:49.120
You're gonna know what claw design is and what actually changed in June and July.
00:01:49.280 --> 00:01:54.159
You're gonna see how the workflow runs from design system to editable output.
00:01:54.319 --> 00:02:02.000
And I'm gonna give you at the end our very five best practices shown live here for getting the best results.
00:02:02.560 --> 00:02:04.000
All right, let's get into it.
00:02:04.159 --> 00:02:05.519
Welcome to Everyday AI.
00:02:05.599 --> 00:02:06.799
My name's Jordan Wilson.
00:02:06.879 --> 00:02:13.120
And if you're new here, well, we do this every single day, whether I'm in Chicago or traveling like I am today.
00:02:13.280 --> 00:02:23.039
This is your unedited, unscripted daily live stream podcast and free daily newsletter helping business leaders like you and me keep up with all of the nonstop AI updates.
00:02:23.280 --> 00:02:24.879
I tell you what matters, what doesn't.
00:02:25.039 --> 00:02:27.680
You use that information to grow your company and your career.
00:02:27.840 --> 00:02:34.639
Uh, so if you haven't already, please make sure to go sign up for our free daily newsletter at your everydayai.com.
00:02:35.039 --> 00:02:37.520
All right, so Claude Design.
00:02:37.599 --> 00:02:44.080
I think when it first was launched, there was rightfully so a lot of talk and a lot of hype around it.
00:02:44.319 --> 00:02:48.400
Since then, though, I haven't seen hardly anything.
00:02:48.639 --> 00:02:58.719
And here's the reality: I think when Claude Design came out, it was I I won't say a novelty because it definitely gave great um outputs and great designs.
00:02:58.879 --> 00:03:06.319
But where it was when it was first announced and where it is today, that's just two completely separate stories.
00:03:06.479 --> 00:03:27.120
And it's actually kind of a bad thing that all the updates that Enthropic have made to Claude Design have largely gone unnoticed because there was the kind of initial hype and the big splash of the initial launch of Claude Design, which when it came out, it was so slow, it was so token intensive, and now those things are actually much better.
00:03:27.280 --> 00:03:35.599
I actually wanted to demo Claw Design when it first came out, but for a live demo, and you know, just so everyone knows, I'm on a$200 max plan.
00:03:35.759 --> 00:03:42.400
You know, in a lot of my early testing when Claude Design first came out, I couldn't even complete one basic design.
00:03:42.639 --> 00:03:48.879
Uh I hit my rate limits uh in with a$200 above the plan, and it was way too slow.
00:03:49.039 --> 00:03:55.039
So luckily, Anthropic has fixed those things, and we'll actually be able to look at a thing or two uh here live.
00:03:55.280 --> 00:03:57.840
So uh yeah, let's just do it live.
00:03:58.000 --> 00:04:01.120
So uh for our live stream audience, you'll be able to see this.
00:04:01.199 --> 00:04:02.800
Let me know if you have my screen.
00:04:02.960 --> 00:04:04.719
Uh for our podcast audience.
00:04:04.879 --> 00:04:11.120
Yeah, on Wednesdays, we do uh kind of our AI at work on Wednesdays, which is normally kind of like a hands-on demo.
00:04:11.280 --> 00:04:13.680
Sometimes they go really well, sometimes they don't.
00:04:13.759 --> 00:04:25.519
But either way, you can always check out the video version of the podcast on our website at your everydayai.com, or you can just check out the show notes of the podcast and we will directly link you to that page.
00:04:25.759 --> 00:04:29.519
All right, so let's go ahead and uh give this a try.
00:04:29.680 --> 00:04:35.839
And yes, if you're wondering, Claude Design did make my normal uh live stream um uh art here.
00:04:36.000 --> 00:04:39.360
So normally I do that, but today it was Claude uh Design.
00:04:39.519 --> 00:04:44.399
So, all right, let's make sure I get the correct window here before we get started.
00:04:44.560 --> 00:04:49.680
Um, and just so you know, you do need to have a paid plan for Claude Design.
00:04:50.480 --> 00:04:53.199
And it is available now, which is great.
00:04:53.279 --> 00:04:56.480
Uh, it is available via desktop and uh on the web.
00:04:56.639 --> 00:05:01.360
Whereas previously it was only available uh via the web.
00:05:01.600 --> 00:05:11.839
So now I am in my Claude account on the web, and the design is a dedicated tab, usually in the lower left-hand corner of your you kind of UX.
00:05:12.000 --> 00:05:13.040
So that's what I'm gonna do.
00:05:13.120 --> 00:05:14.720
I'm gonna go and click on that.
00:05:15.199 --> 00:05:28.000
And let me quickly walk you through what you have here, um, kind of in the main home screen of Claude Design, because there's a lot of different things you can design.
00:05:28.160 --> 00:05:31.199
Uh, right, starting with the templates, I think is always a good idea.
00:05:31.360 --> 00:05:46.480
The templates that Claude suggests are mobile app design, slides, documents, wireframes, animation, UI mockups, resume, 3D object, research, HTML email, uh, color and type pairing, diagram, flyer.
00:05:46.560 --> 00:05:52.879
Uh, so I wouldn't quite think of this like a Canva or something like that, right?
00:05:53.360 --> 00:06:02.319
Because it's not really where you're gonna click a template and then you're gonna have like a draggable, you know, whyzy wag what you see is what you get interface.
00:06:02.399 --> 00:06:03.600
It's not really like that.
00:06:03.759 --> 00:06:14.800
Think of all the power of Claude um helping you design things and being able to iterate in Nash uh natural language along the process.
00:06:15.040 --> 00:06:16.800
So um let's go ahead.
00:06:17.040 --> 00:06:18.639
I have an example here.
00:06:18.720 --> 00:06:26.800
Uh, but first let me talk about some of the functionality uh regardless of which of these slides or which of these templates you may choose.
00:06:27.199 --> 00:06:30.160
So you can start with different types of inputs.
00:06:30.319 --> 00:06:35.920
You can attach a file, uh, you can attach a folder on your computer, uh, you can connect your GitHub account.
00:06:36.000 --> 00:06:37.920
I have my GitHub accounts connected.
00:06:38.000 --> 00:06:51.360
So, you know, if you are kind of you know vibe coding different apps for yourself or for your team, uh, you can actually um connect it directly with Claude Code and um GitHub, which makes the process much easier.
00:06:51.600 --> 00:06:55.759
Um you can also upload a Figma file, which is a little newer.
00:06:56.000 --> 00:06:58.079
Uh, you can create an entire design system.
00:06:58.240 --> 00:07:05.360
I'm not going to be doing that, but that's how you can, you know, similar to if you have used Canva before, you kind of have a brand kit that's very similar.
00:07:05.519 --> 00:07:09.199
Setting up a uh design system is much more robust than a brand kit.
00:07:09.279 --> 00:07:13.839
So it's more than just about, you know, colors and and typography.
00:07:14.000 --> 00:07:19.199
It's really just every single element that makes a good design great.
00:07:19.360 --> 00:07:21.839
So those are different starting points.
00:07:22.160 --> 00:07:28.079
And then you can, uh, like I said, create a template uh or you can uh work with a code base.
00:07:28.160 --> 00:07:30.240
Um, but in this case, I'm doing none of these.
00:07:30.319 --> 00:07:32.000
I'm just gonna start with a prompt.
00:07:32.160 --> 00:07:33.600
So I'm gonna get this going.
00:07:33.759 --> 00:07:36.319
I am gonna use uh what am I gonna use?
00:07:36.480 --> 00:07:40.879
I'm trying to think what we can actually get to in a live demo, uh, already being eight minutes in.
00:07:41.040 --> 00:07:45.600
I wanted to use, okay, let's use Fable, uh, but we're only gonna go medium.
00:07:45.680 --> 00:07:49.279
So hopefully it should be a little fast, and hopefully I won't hit my limits.
00:07:49.519 --> 00:07:50.160
All right.
00:07:50.480 --> 00:07:52.319
So my prompt here is very simple.
00:07:52.560 --> 00:08:00.560
I said, I want to reimagine the user interface user experience for each episode page on the everyday AI website.
00:08:00.720 --> 00:08:08.079
Please give me three different examples, and then I left a link to um yesterday's show.
00:08:08.319 --> 00:08:08.879
All right.
00:08:09.279 --> 00:08:16.720
So the great thing here, if you've never used Claude Design, is it should feel pretty familiar to anything Claude.
00:08:16.959 --> 00:08:21.199
So even though it is in kind of its own dedicated interface, right?
00:08:21.279 --> 00:08:25.040
You're not using this in the the normal, you know, Claude chat bot.
00:08:25.199 --> 00:08:27.040
Clawed design is its own section.
00:08:27.199 --> 00:08:32.559
It should be very familiar if you've used Claude or any just AI tool, if I'm being honest.
00:08:32.720 --> 00:08:35.200
So, right away we are greeted with questions.
00:08:35.279 --> 00:08:41.519
And this is actually the big unlock that I think makes Claude Design really worth using.
00:08:41.679 --> 00:08:43.120
Um, even for me, right?
00:08:43.279 --> 00:08:46.000
I use um claw design not a ton.
00:08:46.080 --> 00:08:54.720
I do use it sometimes, but I lean a little bit more heavily into the combination of GPT images too inside codex and also Google Stitch.
00:08:54.879 --> 00:09:00.480
But one thing that Claude uh Design does better than both of those is exactly what you're seeing now.
00:09:00.559 --> 00:09:04.559
And this is kind of like the we'll call it the visual onboarding process.
00:09:04.799 --> 00:09:12.080
So before I get started, Claude comes back and asks me uh about a handful of questions on what it wants me to do.
00:09:12.159 --> 00:09:19.919
So before it just starts designing anything, based on my prompt and based on what it found on the website, it's going out and doing these things.
00:09:20.000 --> 00:09:21.919
And it says Claude has some questions.
00:09:22.159 --> 00:09:27.519
So uh I'm gonna go through these quickly, but it says quick questions before I design three episode page concepts.
00:09:27.679 --> 00:09:30.159
So it says primary goal of the episode page.
00:09:30.240 --> 00:09:31.360
What should a visitor do?
00:09:31.519 --> 00:09:34.399
And the good thing here is I don't have to type to Claude.
00:09:34.480 --> 00:09:34.960
I don't.
00:09:35.200 --> 00:09:36.000
I have the option.
00:09:36.080 --> 00:09:43.759
There's another box where I can type something, but for the most part, looking at my request, it went and looked at the episode page as well.
00:09:43.840 --> 00:09:48.080
Uh I can look at that by looking at kind of the chain of uh chain of thought to see what it did.
00:09:48.320 --> 00:10:07.600
It's asking me very, very specific questions based on my prompt and the work that it did, which this right here, sometimes I'll literally just do this part in claw design and use whatever it takes uh and then take it into uh you know, into GPT images too, um, or into Google Stitch.
00:10:07.759 --> 00:10:14.240
So sometimes for me, it's just worth going through this process because it's like you're working with a professional designer.
00:10:14.399 --> 00:10:19.600
You go in there with a brief and you're like, This is what I want, and they're gonna look at it and be like, Well, are you sure?
00:10:19.679 --> 00:10:21.360
Or did you think about all these things?
00:10:21.519 --> 00:10:27.120
Whereas you know, some of the other systems I think don't do a good job at this, which is where I think claw design really thrives.
00:10:27.279 --> 00:10:28.879
All right, so let's go answer the questions.
00:10:28.960 --> 00:10:33.519
This is primary goal of the episode page, and I can collect uh select multiple of them.
00:10:33.679 --> 00:10:40.559
So I'm gonna say um the main goals are to listen and watch the episode and to explore more episodes.
00:10:40.639 --> 00:10:47.279
So, yeah, if you didn't know every single episode, all 800 and I don't know what we're on, 830 some episodes that we have.
00:10:47.440 --> 00:10:56.559
Each one has a dedicated episode page on our website, and you can go watch the video version or listen to the podcast version, and there's a lot of writing, uh written content on there as well.
00:10:56.799 --> 00:10:58.960
All right, so next it says visual direction.
00:10:59.039 --> 00:11:08.080
So I can keep the everyday AI branding, which is interesting because it found yellow in navy, which we don't have yellow in navy.
00:11:08.320 --> 00:11:12.639
Um, so that was a little error, but not a big deal because I could correct that if I needed to.
00:11:12.799 --> 00:11:17.039
But I'm just gonna say for this one, evolve the brand fresher but recognizable.
00:11:17.279 --> 00:11:19.840
All right, it said how should audio video be handled?
00:11:20.000 --> 00:11:23.200
I'm gonna say be um, I actually don't know.
00:11:23.279 --> 00:11:28.480
It's saying uh a big sticky player up top, floating mini player that allows scroll.
00:11:28.639 --> 00:11:33.759
Um, I'm just gonna say decide for me because some of these things that'll give you great options and you can select multiple.
00:11:33.919 --> 00:11:38.080
A lot of times I'll ultimately just say decide for me, or I'll just type a little note.
00:11:38.240 --> 00:11:39.519
All right, transcript treatment.
00:11:39.600 --> 00:11:41.919
I'm gonna say collapsible expandable section.
00:11:42.080 --> 00:11:43.840
What content matters most?
00:11:44.000 --> 00:11:46.720
Um, so I'm gonna say, oh, this is a good one.
00:11:46.799 --> 00:11:51.600
I'm gonna say the topics I actually don't know.
00:11:52.879 --> 00:11:56.559
So I'm gonna say um I'm gonna type in this one.
00:11:56.639 --> 00:12:02.960
I'm gonna say watching the video or listening to the podcast itself.
00:12:03.919 --> 00:12:08.720
All right, and then it says design for desktop first, mobile first, both equally, decide for me.
00:12:08.799 --> 00:12:21.679
I'm gonna click decide for me, and then it said vibe of the three explorations, uh, three safed variations on one direction, one safe, one evolved, one wild, three very different directions or decide for me.
00:12:21.759 --> 00:12:25.200
Uh, I'm clicking the one safe, one evolved, and one wild.
00:12:25.360 --> 00:12:28.720
And then in this uh this part here, which I love.
00:12:28.799 --> 00:12:31.519
I don't think Claude Design did this when it was first released.
00:12:31.679 --> 00:12:35.440
At this point, it's asking me for brand assets or screenshots.
00:12:35.600 --> 00:12:38.639
I'm not gonna go through and do that, uh, but that's nice they have that.
00:12:38.720 --> 00:12:42.799
And then it says anything you hate about the current page or must keeps.
00:12:43.039 --> 00:12:46.639
And I'm just gonna say uh it feels too busy, all right.
00:12:47.759 --> 00:12:49.440
All right, I'm gonna click go.
00:12:49.600 --> 00:12:55.679
So now we have Fable Five on medium setting going through and uh cooking this up.
00:12:55.759 --> 00:13:05.679
And I do already have some examples of this done, which um I'm gonna hopefully uh over the next you know five or ten minutes, it's gonna build it itself.
00:13:05.840 --> 00:13:11.600
So the cool thing here, as our live stream or video audience can see, it's gonna build it live.
00:13:11.759 --> 00:13:24.000
All right, so uh I can already see it's starting on uh design 1A, which it says is the safe version, the cleaned up refresh with a similar struction and current brand tidied up.
00:13:24.159 --> 00:13:28.960
All right, so the cool thing is as it goes along, I don't have to wait for it to be done.
00:13:29.039 --> 00:13:38.639
And luckily, it is much faster than it used to be because when they first launched this, it was super popular, it went viral and it was painfully slow for the first couple of weeks.
00:13:38.799 --> 00:13:47.360
So slow, in fact, that even though I wanted to really use it, I literally couldn't between the limits and just how slow it was, but it's much better and faster now.
00:13:47.519 --> 00:13:57.440
So, a couple of other things to keep in mind as we kind of watch uh Claude design here live, is there is also an annotate button.
00:13:57.600 --> 00:13:59.840
So there's a comment button up top.
00:13:59.919 --> 00:14:05.679
Um, I can click that, I can click on any single element that I want to and have it change it.
00:14:05.759 --> 00:14:08.320
So, yeah, I don't have to wait for it to finish.
00:14:08.480 --> 00:14:11.279
I can do that kind of as we go along.
00:14:12.240 --> 00:14:19.519
Um, so like like I said, keep in mind, even though it is faster, it is still not super fast, right?
00:14:19.679 --> 00:14:29.440
Especially if you have used a similar product, I'd say the the closest product in terms of features and functionality is probably Google Stitch, which I absolutely love.
00:14:29.600 --> 00:14:31.759
Google Stitch is much faster.
00:14:31.840 --> 00:14:40.799
Um, but I think Claw Design, just through that onboarding process, ultimately, if I was to use the exact same prompt um in the three different versions, right?
00:14:40.879 --> 00:14:57.360
If I were to use it in Claw Design, uh Google Stitch in a combination of just you know codecs using GPT image uh and then codex itself to build everything, I think ultimately, if I were to zero shot this, give a prompt and nothing else, I think claw design is probably gonna do the best.
00:14:57.519 --> 00:15:06.399
Not because it's the best at designing something, but actually it's just the best at building that bridge and actually asking you some of those important questions.
00:15:06.639 --> 00:15:07.039
All right.
00:15:07.120 --> 00:15:14.480
So as Claude keeps going, let's go back to our slides and talk real quick about some of the basics.
00:15:14.799 --> 00:15:22.159
So Claude Design launched in April, and for the most part, there weren't a lot of at least public updates until this summer.
00:15:22.399 --> 00:15:28.879
So in June, uh they announced the design systems and direct editing and the Claude Code Sync, which is huge.
00:15:29.120 --> 00:15:38.799
And uh this uh in July so far, they've announced public artifacts, new export options, uh, and some workflow fixes.
00:15:39.440 --> 00:15:49.039
So to zoom out again, don't think of Claude Design as an image generator, don't think of it as a Canva replacement either.
00:15:49.200 --> 00:15:58.320
I think, like I said earlier, the best way to think and to use Claude Design is to use natural language or any inputs that you currently have.
00:15:58.399 --> 00:16:12.559
So uploading, you know, maybe you have a mock-up that you designed in uh Canva and you want to turn it into uh a wireframe, you want to turn it into a mobile app, or maybe you just have some inspiration that you've collected throughout the internet and you have some screenshots of those things.
00:16:12.720 --> 00:16:26.639
Um, where I think you get the most, even for non-technical non-designers, where you get the most out of it is just moving from that idea or a starting point of a screenshot or a design to at least an artifact that works, right?
00:16:26.879 --> 00:16:30.399
Um, so it's I think it's really about breaking it into three systems.
00:16:30.559 --> 00:16:34.159
I say it's your brief, it's the system itself, and then the artifact.
00:16:34.240 --> 00:16:39.600
So going through clawed design, going through the goal, the audience, the content, and the layout, then the system, right?
00:16:39.679 --> 00:16:43.440
That's your brand rules, your assets, and your components that you upload.
00:16:43.600 --> 00:16:46.799
In this case, in my demo case, I didn't do any of that just for speed.
00:16:46.960 --> 00:16:50.080
And then last is the artifact, what you actually want it to design.
00:16:50.240 --> 00:16:53.679
So that can be a prototype, a deck, animation, one pager, etc.
00:16:54.559 --> 00:16:59.039
Um, and the great thing is just the amount of control that you have throughout the process.
00:16:59.200 --> 00:17:12.559
So even though it is time consuming, the combination of being able to not just upload assets before you start, but also when Claude comes back and asks you questions, the ability to um iterate and also upload new files there.
00:17:12.640 --> 00:17:16.720
And then as you go along, there is just a ton of different control.
00:17:16.880 --> 00:17:21.920
And then actually, when we're done as well, I'll show you some other things that you can do besides annotation.
00:17:22.079 --> 00:17:23.599
And then the handoff, right?
00:17:23.680 --> 00:17:30.400
You're not just left with an HTML file, and you're not just left with, you know, something that you export.
00:17:30.480 --> 00:17:32.960
There's a lot of different options as well.
00:17:33.440 --> 00:17:42.319
So, you know, you can publish it as an artifact, uh, you can, you know, as a PNG, as an HTML file, as a zip, right?
00:17:42.480 --> 00:17:43.839
I've as a PowerPoint.
00:17:44.160 --> 00:17:51.680
The other cool things is you like I said, uh, you can now send it directly into Claude Code, which there's some caveats sometimes.
00:17:51.839 --> 00:17:56.799
Um, in in my experience, it seems like it just sends in an HTML file.
00:17:56.880 --> 00:17:59.359
Uh, maybe there's something I'm not doing correctly there.
00:17:59.440 --> 00:18:05.759
Uh, but the other thing that I really like is you can send a project straight into Canva or you can send it straight into gamma as well.
00:18:05.920 --> 00:18:13.279
So maybe if you do have a lot of your, you know, images or just other um, you know, maybe you're just more comfortable like me.
00:18:13.440 --> 00:18:24.559
I usually work in Canva a ton, you know, being able to start something uh and going through that design iteration process with Claude Code and then being able to finish it in Canva uh is a real unlock for me.
00:18:24.720 --> 00:18:32.480
Um so then, like I said, being able to publish it, export it as HTML, uh MP4, yes, Claude does create videos.
00:18:32.720 --> 00:18:34.799
Are they uh Claude Design?
00:18:34.960 --> 00:18:35.920
Are they great?
00:18:36.160 --> 00:18:37.359
No, they're not.
00:18:37.599 --> 00:18:48.000
Um, you know, you can actually get much better uh kind of video out of Claude if you're using uh, you know, an MCP for like remotion or something like that.
00:18:48.160 --> 00:18:59.519
So um that was actually the thing I was most shocked by when Claude Design came out because I don't even think they mentioned that you could do animations and videos, and then I was like, wait, you can do animations and videos, uh, which is really cool.
00:18:59.680 --> 00:19:08.000
But you know, ultimately, Claude Design just really helps you work faster, uh, you know, and then stay consistent with the built-in brand systems.
00:19:08.880 --> 00:19:15.839
So let's go ahead and skip forward here um and talk about the best way to get started.
00:19:16.240 --> 00:19:25.039
Um I didn't do this, but you're always gonna have best, the best, best um results when you do import your own system.
00:19:25.200 --> 00:19:25.519
All right.
00:19:25.680 --> 00:19:30.880
And the the great thing is, is you can actually create that in another clawed design file.
00:19:31.039 --> 00:19:34.720
You can say, I don't have a design system, or you might say, like, what the heck is that?
00:19:34.880 --> 00:19:38.880
But essentially, that's gonna define to a T, right?
00:19:39.039 --> 00:19:47.680
Even down to things like rounded corners, spacing, you know, you know, typography, height, all these different things that you really want control over.
00:19:48.000 --> 00:19:53.920
Because the thing that people need to understand, generative AI ultimately is generative, right?
00:19:54.079 --> 00:20:02.799
So um that means you could go and run the exact same prompt inside claw design, even if you have a brand kit, and you're gonna get wildly different things each time.
00:20:02.880 --> 00:20:17.680
So the tighter that design system is, it actually, I won't say it restricts the nature of a generative engine, but it does just give it much stricter, uh essentially prompt adherence requirements that it's not gonna go and create these very different things.
00:20:17.839 --> 00:20:24.079
So if you do need something that you reproduce, let's say every week, you know, like or like me, right?
00:20:24.160 --> 00:20:26.160
Like every single day, right?
00:20:26.240 --> 00:20:30.000
I create slides inside of uh Canva, right?
00:20:30.079 --> 00:20:31.839
For me, it's easier to do it that way.
00:20:32.000 --> 00:20:39.680
Yes, I could just hand that off to Claude Design uh or to you know codex with uh GPT image and create PDFs.
00:20:39.839 --> 00:20:42.799
It's still for me, that's a way I learn, right?
00:20:42.880 --> 00:20:49.440
I I like to put things on the page and you know, rearrange slides, rearrange bullet points that helps me present a little bit better.
00:20:49.599 --> 00:20:55.759
As an example, maybe my presentation today isn't as good because I handed that off to Claude Design.
00:20:56.960 --> 00:21:05.119
All right, let's go ahead and skip and talk a little bit here that it's much different than Canva or Figma.
00:21:05.200 --> 00:21:18.160
All right, so I already talked about some of the differences, but kind of the strengths with Claude Design and how it's different from a typical non you know chat interface design tool is it's conversation first, right?
00:21:18.240 --> 00:21:23.759
And then being able to ground your design in the design system that you upgrade.
00:21:23.920 --> 00:21:29.359
And then the huge unlock, right, is then being able to send this straight into Claude Code itself.
00:21:29.599 --> 00:21:37.039
So in the same way, again, I think probably the single closest competitor to Claude Design is Google Stitch.
00:21:37.119 --> 00:21:40.079
So, in the same way, you can do a similar thing in Google Stitch.
00:21:40.160 --> 00:21:41.920
Uh, it uses nano banana.
00:21:42.000 --> 00:21:46.480
So that's a big unlock with um you know Google Stitch versus Claude Design.
00:21:46.640 --> 00:21:50.640
A big downside of Claude Design is it's not an image generator, right?
00:21:50.799 --> 00:21:59.759
Claude itself does not generate images, it can, you know, kind of create you know some nice typography and it can give you good designs, but ultimately the best design.
00:22:00.079 --> 00:22:02.240
And obviously has images, right?
00:22:02.319 --> 00:22:13.039
So you're not going to see that um in uh Claude Design, where you obviously can get that a little bit more easier in Google Stitch or you know in Canva and Figma.
00:22:13.359 --> 00:22:15.039
You do get more of that, you know.
00:22:15.200 --> 00:22:16.799
Here's all my brand assets.
00:22:16.880 --> 00:22:19.519
I can easily drag them in, move them around.
00:22:19.680 --> 00:22:22.480
That's not really what Claude Design is set up for now.
00:22:22.640 --> 00:22:26.160
Although I do assume that Anthropic may kind of add some of those more.
00:22:26.319 --> 00:22:37.039
What you see is what you get features in the future as they continue to add and actually pick up steam in um updating Claude Design.
00:22:37.359 --> 00:22:41.839
But yeah, this is just very strong for exploration and repeatable first drafts.
00:22:41.920 --> 00:22:51.759
Whereas, you know, Canva Figma, this is more just for manual creation and collaboration, uh, you know, deeply uh deeper publishing or product design workflows, and it's just stronger.
00:22:51.920 --> 00:22:57.759
Uh, I think Canva or Figma are stronger when precision in multiplayer editing is needed.
00:22:58.480 --> 00:23:06.400
All right, so let's just go ahead and get straight into our five best practices, and then we're gonna wrap and look at our final design.
00:23:06.480 --> 00:23:10.799
And I'm gonna show you some of the things that you can do once you have finished your design.
00:23:11.039 --> 00:23:14.799
So, five best practices for working with Claude Design.
00:23:14.960 --> 00:23:17.680
Number one, start with the audience and the outcome.
00:23:17.839 --> 00:23:21.759
Tell Claude who it's for and what they should do next, right?
00:23:21.839 --> 00:23:36.000
So whether you do that just typing, uh, whether you give it an example of your current audience, whatever it is, always giving Claude the example of your audience and the outcome is going to help uh Claude Design come back with those better questions.
00:23:36.160 --> 00:23:38.319
Those questions that it asks you, right?
00:23:38.480 --> 00:23:40.960
Sometimes they're just very design specific.
00:23:41.039 --> 00:23:59.680
And that was probably more of the example that I gave here because I didn't go through um and do give the audience in the outcome because I wanted to give a very beginner-friendly, you know, not having to be a novice uh, you know, at Claw Design to get uh some of the outputs, but it's always best to start with the audience and outcome.
00:23:59.839 --> 00:24:02.319
Number two, provide real source material.
00:24:02.400 --> 00:24:06.480
So, my example, I give a URL, but it's always gonna be better if you upload.
00:24:06.559 --> 00:24:09.119
If you currently have a brand guideline, upload that.
00:24:09.279 --> 00:24:12.559
If you have images, upload those things, uh data, right?
00:24:12.640 --> 00:24:22.079
If you're creating an app, uh what like whatever it is, you should always be providing real source material first, as much information as you can give Claude Design up front.
00:24:22.160 --> 00:24:24.880
It's gonna save you a lot of time going back and forth.
00:24:25.039 --> 00:24:27.680
Next, build one section at a time.
00:24:27.920 --> 00:24:32.400
Approve the structure first, then you can refine the visuals and the wording.
00:24:32.559 --> 00:24:40.960
So, yeah, let's just say that you're you want to design an entire um an entire um workflow for a new app, right?
00:24:41.200 --> 00:24:42.799
Work on one section at a time.
00:24:42.960 --> 00:24:48.160
Don't just give a broad prompt to Claude and say, Hey, I want an entire app.
00:24:48.319 --> 00:24:49.440
Break it down into pieces.
00:24:49.519 --> 00:24:58.880
In the same way that you, you know, used to think of, you know, think step by step used to be one of those, you know, keywords for you know the prompt engineering days of 2023.
00:24:58.960 --> 00:25:03.680
Uh, I think thinking like that and using Claude Design like that is going to give you better results.
00:25:03.839 --> 00:25:11.759
Number four, give specific revision instructions, say exactly what to keep, remove, emphasize, or visually change.
00:25:11.920 --> 00:25:17.599
And I think it does make it easier in claw design doing that with the kind of comment or annotate feature.
00:25:17.680 --> 00:25:22.160
And then last but not least, number five, export and inspect everything.
00:25:22.319 --> 00:25:27.759
All right, especially if you are ultimately pushing this out as code, uh, right?
00:25:27.839 --> 00:25:38.640
If you miss, you know, something simple, like in an example that I did, I used Claude Code or sorry, Claude Design for a project that I was building in Codex.
00:25:38.880 --> 00:25:45.839
Uh, this was before the GPT-5.6 update, where I think uh, you know, OpenAI got much better at front end design.
00:25:45.920 --> 00:25:55.200
But before that, you know, I was using Claude uh design a lot to uh you know start before I gave a project to Codex to build.
00:25:55.359 --> 00:26:01.200
And you know, one thing I noticed is you know, I went through and I'm like, okay, yeah, this this looks good from Claude.
00:26:01.279 --> 00:26:04.079
Let me go ahead and export this over to Codex and start building.
00:26:04.240 --> 00:26:15.279
And then I realized, you know, going back and looking at things like typography spacing, uh, you know, looking at, you know, making sure all corners were consistently rounded across different elements.
00:26:15.440 --> 00:26:29.440
You know, there are some certain details that I should have either better prompted in Claude design, or before I kicked that over to Codex, I should have been a little bit more um had had my inspector eye on versus just a vibe, right?
00:26:29.519 --> 00:26:33.359
The vibe was this looks great, and you know, codex did a great job with it.
00:26:33.440 --> 00:26:37.680
But if I would have inspected it, I could have saw that there was some minor flaws.
00:26:38.160 --> 00:26:44.079
All right, so let's go ahead, let's see how we did in our five designs.
00:26:44.160 --> 00:26:47.759
All right, I did give it a good, what, about 15 or so minutes.
00:26:47.920 --> 00:26:50.880
So hopefully, hopefully it's done, but we'll see.
00:26:51.759 --> 00:26:58.319
All right, so I am now um back in Claw Design.
00:26:58.400 --> 00:27:03.680
I'm gonna zoom out for our live stream audience here, and I do uh let me scroll down.
00:27:03.839 --> 00:27:05.599
It did say it's done.
00:27:05.839 --> 00:27:10.160
So see exactly how long, I don't know how long it worked.
00:27:10.319 --> 00:27:13.759
Um, but the good thing is is we have three different designs.
00:27:14.000 --> 00:27:16.880
So as I zoom out here, we can kind of see them.
00:27:17.039 --> 00:27:27.359
Uh the the canvas, if if if you've ever used something like Figma, um, it is very um easy to use because you can edit the design directly, right?
00:27:27.440 --> 00:27:29.920
So in this first example, it gave me a headline.
00:27:30.000 --> 00:27:41.759
If I want to change the headline, you know, you do have some elements of kind of like a what you see is what you get editor, because you can click on anything and you can, you know, edit it just as you're typing, um, right.
00:27:41.839 --> 00:27:45.680
But it's not a true, you know, being able to move things around.
00:27:45.839 --> 00:27:49.279
Um, you can, but it's ultimately going to break your design, right?
00:27:49.359 --> 00:27:54.480
Like I can, you know, resize this embed, but it's not the full embed, right?
00:27:54.640 --> 00:27:59.440
A lot of times it's easier to make these edits either just chatting to Claude.
00:27:59.519 --> 00:28:00.960
So there is an edit mode.
00:28:01.119 --> 00:28:01.519
All right.
00:28:01.680 --> 00:28:15.279
So if you're in edit mode, that's where you kind of have that granular control and you can click on anything and change it live, or you can just stay in kind of chat mode and you can describe the changes that you want Claude Design to create and it'll do that.
00:28:15.519 --> 00:28:19.440
Or uh you can go up and go into comment mode.
00:28:19.599 --> 00:28:28.000
So in there, I can, you know, essentially click on any single element and just then leave a comment and send to Claude.
00:28:28.079 --> 00:28:33.759
So essentially, there's like three and a half different ways that you can iterate on the design.
00:28:33.920 --> 00:28:35.599
Some are better than others.
00:28:35.759 --> 00:28:40.559
Um, and it it does ultimately depend on what you're trying to do with this, right?
00:28:40.640 --> 00:28:42.400
Is this just a deck, right?
00:28:42.480 --> 00:28:46.079
If it's if it's a deck, maybe it's just best you change it here.
00:28:46.240 --> 00:28:49.759
Um, is it something that you're coding in Claude Code?
00:28:49.920 --> 00:29:02.160
If so, maybe you use the comment or the annotation, or you just chat to Claude Code, especially if you're not a strong coder, you could look at some of the the more technical uh iterations and you might look at it and be like, wait, I don't even understand, right?
00:29:02.319 --> 00:29:03.920
Even some of the design stuff.
00:29:04.160 --> 00:29:06.000
Yeah, I mean it's super helpful, right?
00:29:06.079 --> 00:29:07.680
So let me get out of comment mode here.
00:29:07.759 --> 00:29:11.759
Uh, I'm gonna go into edit mode and I'm gonna click on this main element.
00:29:11.920 --> 00:29:18.079
So, in the first um iteration that it gave me, uh, this is kind of 1A, the safe one.
00:29:18.240 --> 00:29:19.440
I can click on any element.
00:29:19.519 --> 00:29:25.119
And if you know the basics of like web design, um, it's gonna give you all of these options as well.
00:29:25.279 --> 00:29:32.160
So I, you know, all your divs, uh, you know, your H1 tags, all these different things in the same way.
00:29:32.240 --> 00:29:35.279
If you are familiar with web design, it's gonna give you those things.
00:29:35.359 --> 00:29:42.880
So I can go and kind of use some of these tools manually that, you know, in a web design interface, right?
00:29:42.960 --> 00:29:51.200
If you've used like WordPress or Squarespace or Wix or something like that, you do also have kind of that option to edit as well.
00:29:51.599 --> 00:30:01.119
All right, so those are some of the more uh technical aspects, but let's just go ahead and kind of zoom out and ultimately see how did Claude Design do?
00:30:01.519 --> 00:30:06.319
All right, so this first um, the first episode page was the safe one.
00:30:06.400 --> 00:30:11.279
Uh, it said it's familiar structure, the current brand tidied.
00:30:11.519 --> 00:30:16.000
Like I said, this didn't really nail my current brand because it didn't properly bring in the colors.
00:30:16.160 --> 00:30:17.519
It said that it was yellow.
00:30:17.680 --> 00:30:18.880
That was not correct.
00:30:19.119 --> 00:30:23.920
But in terms of how this laid it out, I actually really like it.
00:30:24.079 --> 00:30:38.319
You know, it has the video front and center, uh, it has chapter markers on the right hand side, it has like an up next section on the on uh right under the chapters, key takeaways, quick buttons to listen on Spotify, Apple, and Amazon.
00:30:38.559 --> 00:30:43.359
So, overall, I mean, this is much better than our current website design, right?
00:30:43.440 --> 00:30:46.799
I'll I'll show everyone that for our live stream audience, right?
00:30:46.880 --> 00:30:54.559
I mean, we built this originally like four years ago, so you know, our current website design, it's super busy, right?
00:30:54.640 --> 00:30:56.799
It's this dark mode with white font.
00:30:57.200 --> 00:31:00.880
You know, personally, I think when we launched it, I was like, this is good enough.
00:31:01.039 --> 00:31:03.440
Um, you know, I didn't really care as much.
00:31:03.599 --> 00:31:06.319
Now looking back at it, I'm like, this is super busy.
00:31:06.480 --> 00:31:12.400
So, I mean, just in that example, and I remember our team spent a lot of time when we initially put this together.
00:31:12.640 --> 00:31:18.640
Part of it is, you know, design trends change, uh, and even web design capabilities change.
00:31:18.799 --> 00:31:21.839
You know, changing certain things on here used to take a long time.
00:31:22.000 --> 00:31:26.640
I could export this as HTML and get it up on the site, you know, pretty quickly.
00:31:26.799 --> 00:31:30.000
I'm not actually gonna do that, um, but it's possible.
00:31:30.319 --> 00:31:32.160
All right, let's look at option B.
00:31:32.319 --> 00:31:33.839
Option B is evolved.
00:31:34.000 --> 00:31:42.799
This is uh, it says the editorial daily briefing feel, uh, a serif recap, uh, synced chair uh chapter player.
00:31:42.960 --> 00:31:47.359
Uh so a little bit different, but it essentially made the video uh a little bit smaller.
00:31:47.519 --> 00:31:49.920
It does have definitely more of an editorial feel.
00:31:50.079 --> 00:31:52.319
Live stream audience as I go along, which one do you like?
00:31:52.400 --> 00:31:53.759
Do you like one A so far?
00:31:53.920 --> 00:31:54.960
Do you like one B?
00:31:55.119 --> 00:31:57.680
So far, I like this one B version a little bit better.
00:31:57.839 --> 00:31:59.359
It makes the video a little smaller.
00:31:59.440 --> 00:32:03.279
I don't think the video would need to be super huge, right?
00:32:03.839 --> 00:32:08.880
The the value of this podcast, I don't think, is necessarily the uh what I'm showing on video.
00:32:09.039 --> 00:32:14.960
Aside from Wednesday episodes, which obviously the video is important, but otherwise, you know, it's just kind of my my notes on the screen.
00:32:15.119 --> 00:32:23.839
Uh, so option B looks pretty good, uh, you know, similar, similar overall style, but let's go to option one C, which is wild.
00:32:23.920 --> 00:32:27.920
So here it says dark broadcast console, full blade player.
00:32:28.000 --> 00:32:30.319
There's a ticker and a live feel.
00:32:30.400 --> 00:32:33.039
Uh, so I don't hate this one, right?
00:32:33.279 --> 00:32:34.480
It has a ticker at the top.
00:32:34.640 --> 00:32:41.599
Yeah, this to me looks like you're, you know, I don't know if you're watching, you know, ESPN Live or something like this.
00:32:41.759 --> 00:32:48.079
This looks like a live broadcast, you know, 100% of the focus is on this full bleed episode video.
00:32:48.319 --> 00:32:58.000
Um, you know, lex less of an uh of an emphasis on the actual written content, uh, summaries, uh, chapter takeaways, those kind of things.
00:32:58.160 --> 00:33:03.519
This is like if you're just gonna want to digest as much video as possible.
00:33:03.759 --> 00:33:04.160
All right.
00:33:04.240 --> 00:33:05.519
So that's the process.
00:33:05.680 --> 00:33:09.440
Like I said, um, everything else up here, being able to leave the comments.
00:33:09.519 --> 00:33:23.759
So let's just say um, you know, I can click this bar and I can say, you know, make the bar uh you know neon blue so it stands out more, right?
00:33:23.839 --> 00:33:27.440
All I have to do, click that, send a send a clawed code.
00:33:27.519 --> 00:33:30.720
Um, and then you can see down here it's already working on that.
00:33:30.880 --> 00:33:35.119
So without having to redo the whole design, that's just a very quick way to iterate.
00:33:35.200 --> 00:33:36.319
And it's already done, right?
00:33:36.480 --> 00:33:49.519
So bless up that you know, claw design is actually faster now and you can't just iterate on small things because yeah, when it first came out, doing some simple uh iterations like that used to be a lot more time consuming, but now it's it's done, right?
00:33:49.599 --> 00:33:52.880
And I, you know, can go through and change things just like that.
00:33:53.039 --> 00:33:56.960
Um, there is a tweaks section, which is very similar.
00:33:57.119 --> 00:34:06.880
Um, I don't even fully you know understand this tweaks section up here, but you can just click the ideas and it's just gonna give you different ideas based on what it created, anyways.
00:34:07.039 --> 00:34:13.760
All right, then last, there are some presentation options you can present in uh Claude Design as well.
00:34:13.840 --> 00:34:16.480
Uh, we already went through the editing and then the sharing.
00:34:16.559 --> 00:34:23.440
So uh I can publish this as an artifact, um, a PNG, an HTML or a zip file.
00:34:23.519 --> 00:34:30.639
I can send it to Claude Code, uh PowerPoint, uh Canva, Gamma, video, or PDF.
00:34:30.800 --> 00:34:34.159
And then I can also share this link with my team.
00:34:34.320 --> 00:34:37.440
All right, so that is a wrap, y'all.
00:34:37.599 --> 00:34:52.159
A lot to cover, but overall, I think the thing to uh keep in mind, even though clawed claw design, right, the big downside is there's no image generation, right?
00:34:52.239 --> 00:35:00.400
And I think most great designs obviously have images, which at least for me and my purposes is maybe one reason I don't use it a lot.
00:35:00.559 --> 00:35:18.639
So, yes, you can obviously upload images, but at least when my mind is thinking, you know, I'm going to vibe a design, I don't necessarily always want to uh you know create my own assets or bring in my own assets or uh you know, for me, I love using Google Stitch for this.
00:35:18.719 --> 00:35:29.599
Um, a big unlock that people don't realize is you know, inside codecs using uh GPT image, and just you know, I have a skill that can create an entire deck, including images on the inside.
00:35:29.760 --> 00:35:39.280
But I think where claw design really thrives is getting it from idea to actually a working artifact on screen, and it does a really good job.
00:35:39.360 --> 00:35:44.159
And obviously, the more time and care you put in, the better the results are gonna be.
00:35:44.320 --> 00:35:47.119
So that's a wrap for today's AI Working Wednesday.
00:35:47.199 --> 00:35:49.679
Now you know the basics of Claude Design.
00:35:49.840 --> 00:35:52.800
If you want to see more on Claude Design in the future, let me know.
00:35:52.960 --> 00:35:54.639
And also, what was your favorite design?
00:35:54.800 --> 00:35:59.280
I think I kind of liked 1B, although that wild version was kind of fun to look at.
00:35:59.440 --> 00:36:00.960
All right, so thank you for tuning in.
00:36:01.039 --> 00:36:04.000
If you haven't already, please go to your everydayai.com.
00:36:04.079 --> 00:36:04.800
Thanks for tuning in.
00:36:04.880 --> 00:36:07.360
We'll see you back tomorrow and everyday for more everyday AI.
00:36:07.440 --> 00:36:08.480
Thanks, y'all.
00:00:01.919 --> 00:00:05.839
The blank page used to be where creative work began.
00:00:06.000 --> 00:00:11.039
Now, if you use Claude Design, it might begin with a blank prompt box.
00:00:11.279 --> 00:00:15.679
A marketer can prototype an internal tool without waiting for engineering.
00:00:15.919 --> 00:00:22.000
An operations team can transform a clunky spreadsheet into an interactive decision-making experience.
00:00:22.320 --> 00:00:28.399
Or just a sales leader can turn scatter notes into a polished customer presentation.
00:00:28.640 --> 00:00:36.960
Clawed design is becoming less of a visual novelty and more of a bridge between an idea and a working artifact.
00:00:37.200 --> 00:00:46.799
And if you haven't used Claude Design or maybe you haven't been keeping up, then today's AI at work on Wednesday is definitely for you.
00:00:46.960 --> 00:00:56.479
Today we're separating the genuinely useful capabilities in Claude Design from the features that merely look impressive in a demo.
00:00:56.960 --> 00:00:58.479
So let's get into it.
00:00:58.640 --> 00:01:02.079
If you're new here, well, here's the big picture.
00:01:02.560 --> 00:01:12.959
Claude Design is more than image generation, it's a complete design system, an editable canvas, and real handoff from idea to execution.
00:01:13.120 --> 00:01:17.920
Uh, some big updates also landed that I think have kind of flown under the radar.
00:01:18.079 --> 00:01:25.200
Uh, in June, Anthropic brought in connected brand, direct editing, and a better connection with Claude Code.
00:01:25.359 --> 00:01:34.560
And then just in the last couple of hours, uh, Anthropic actually added public publishing, better exports, and practical workflow fixes.
00:01:34.640 --> 00:01:37.359
And we're gonna show you a little bit of all of those things.
00:01:37.519 --> 00:01:41.200
So stick with us for the next 25 or so minutes.
00:01:41.280 --> 00:01:43.599
And here's what you're gonna learn on today's show.
00:01:43.760 --> 00:01:49.120
You're gonna know what claw design is and what actually changed in June and July.
00:01:49.280 --> 00:01:54.159
You're gonna see how the workflow runs from design system to editable output.
00:01:54.319 --> 00:02:02.000
And I'm gonna give you at the end our very five best practices shown live here for getting the best results.
00:02:02.560 --> 00:02:04.000
All right, let's get into it.
00:02:04.159 --> 00:02:05.519
Welcome to Everyday AI.
00:02:05.599 --> 00:02:06.799
My name's Jordan Wilson.
00:02:06.879 --> 00:02:13.120
And if you're new here, well, we do this every single day, whether I'm in Chicago or traveling like I am today.
00:02:13.280 --> 00:02:23.039
This is your unedited, unscripted daily live stream podcast and free daily newsletter helping business leaders like you and me keep up with all of the nonstop AI updates.
00:02:23.280 --> 00:02:24.879
I tell you what matters, what doesn't.
00:02:25.039 --> 00:02:27.680
You use that information to grow your company and your career.
00:02:27.840 --> 00:02:34.639
Uh, so if you haven't already, please make sure to go sign up for our free daily newsletter at your everydayai.com.
00:02:35.039 --> 00:02:37.520
All right, so Claude Design.
00:02:37.599 --> 00:02:44.080
I think when it first was launched, there was rightfully so a lot of talk and a lot of hype around it.
00:02:44.319 --> 00:02:48.400
Since then, though, I haven't seen hardly anything.
00:02:48.639 --> 00:02:58.719
And here's the reality: I think when Claude Design came out, it was I I won't say a novelty because it definitely gave great um outputs and great designs.
00:02:58.879 --> 00:03:06.319
But where it was when it was first announced and where it is today, that's just two completely separate stories.
00:03:06.479 --> 00:03:27.120
And it's actually kind of a bad thing that all the updates that Enthropic have made to Claude Design have largely gone unnoticed because there was the kind of initial hype and the big splash of the initial launch of Claude Design, which when it came out, it was so slow, it was so token intensive, and now those things are actually much better.
00:03:27.280 --> 00:03:35.599
I actually wanted to demo Claw Design when it first came out, but for a live demo, and you know, just so everyone knows, I'm on a$200 max plan.
00:03:35.759 --> 00:03:42.400
You know, in a lot of my early testing when Claude Design first came out, I couldn't even complete one basic design.
00:03:42.639 --> 00:03:48.879
Uh I hit my rate limits uh in with a$200 above the plan, and it was way too slow.
00:03:49.039 --> 00:03:55.039
So luckily, Anthropic has fixed those things, and we'll actually be able to look at a thing or two uh here live.
00:03:55.280 --> 00:03:57.840
So uh yeah, let's just do it live.
00:03:58.000 --> 00:04:01.120
So uh for our live stream audience, you'll be able to see this.
00:04:01.199 --> 00:04:02.800
Let me know if you have my screen.
00:04:02.960 --> 00:04:04.719
Uh for our podcast audience.
00:04:04.879 --> 00:04:11.120
Yeah, on Wednesdays, we do uh kind of our AI at work on Wednesdays, which is normally kind of like a hands-on demo.
00:04:11.280 --> 00:04:13.680
Sometimes they go really well, sometimes they don't.
00:04:13.759 --> 00:04:25.519
But either way, you can always check out the video version of the podcast on our website at your everydayai.com, or you can just check out the show notes of the podcast and we will directly link you to that page.
00:04:25.759 --> 00:04:29.519
All right, so let's go ahead and uh give this a try.
00:04:29.680 --> 00:04:35.839
And yes, if you're wondering, Claude Design did make my normal uh live stream um uh art here.
00:04:36.000 --> 00:04:39.360
So normally I do that, but today it was Claude uh Design.
00:04:39.519 --> 00:04:44.399
So, all right, let's make sure I get the correct window here before we get started.
00:04:44.560 --> 00:04:49.680
Um, and just so you know, you do need to have a paid plan for Claude Design.
00:04:50.480 --> 00:04:53.199
And it is available now, which is great.
00:04:53.279 --> 00:04:56.480
Uh, it is available via desktop and uh on the web.
00:04:56.639 --> 00:05:01.360
Whereas previously it was only available uh via the web.
00:05:01.600 --> 00:05:11.839
So now I am in my Claude account on the web, and the design is a dedicated tab, usually in the lower left-hand corner of your you kind of UX.
00:05:12.000 --> 00:05:13.040
So that's what I'm gonna do.
00:05:13.120 --> 00:05:14.720
I'm gonna go and click on that.
00:05:15.199 --> 00:05:28.000
And let me quickly walk you through what you have here, um, kind of in the main home screen of Claude Design, because there's a lot of different things you can design.
00:05:28.160 --> 00:05:31.199
Uh, right, starting with the templates, I think is always a good idea.
00:05:31.360 --> 00:05:46.480
The templates that Claude suggests are mobile app design, slides, documents, wireframes, animation, UI mockups, resume, 3D object, research, HTML email, uh, color and type pairing, diagram, flyer.
00:05:46.560 --> 00:05:52.879
Uh, so I wouldn't quite think of this like a Canva or something like that, right?
00:05:53.360 --> 00:06:02.319
Because it's not really where you're gonna click a template and then you're gonna have like a draggable, you know, whyzy wag what you see is what you get interface.
00:06:02.399 --> 00:06:03.600
It's not really like that.
00:06:03.759 --> 00:06:14.800
Think of all the power of Claude um helping you design things and being able to iterate in Nash uh natural language along the process.
00:06:15.040 --> 00:06:16.800
So um let's go ahead.
00:06:17.040 --> 00:06:18.639
I have an example here.
00:06:18.720 --> 00:06:26.800
Uh, but first let me talk about some of the functionality uh regardless of which of these slides or which of these templates you may choose.
00:06:27.199 --> 00:06:30.160
So you can start with different types of inputs.
00:06:30.319 --> 00:06:35.920
You can attach a file, uh, you can attach a folder on your computer, uh, you can connect your GitHub account.
00:06:36.000 --> 00:06:37.920
I have my GitHub accounts connected.
00:06:38.000 --> 00:06:51.360
So, you know, if you are kind of you know vibe coding different apps for yourself or for your team, uh, you can actually um connect it directly with Claude Code and um GitHub, which makes the process much easier.
00:06:51.600 --> 00:06:55.759
Um you can also upload a Figma file, which is a little newer.
00:06:56.000 --> 00:06:58.079
Uh, you can create an entire design system.
00:06:58.240 --> 00:07:05.360
I'm not going to be doing that, but that's how you can, you know, similar to if you have used Canva before, you kind of have a brand kit that's very similar.
00:07:05.519 --> 00:07:09.199
Setting up a uh design system is much more robust than a brand kit.
00:07:09.279 --> 00:07:13.839
So it's more than just about, you know, colors and and typography.
00:07:14.000 --> 00:07:19.199
It's really just every single element that makes a good design great.
00:07:19.360 --> 00:07:21.839
So those are different starting points.
00:07:22.160 --> 00:07:28.079
And then you can, uh, like I said, create a template uh or you can uh work with a code base.
00:07:28.160 --> 00:07:30.240
Um, but in this case, I'm doing none of these.
00:07:30.319 --> 00:07:32.000
I'm just gonna start with a prompt.
00:07:32.160 --> 00:07:33.600
So I'm gonna get this going.
00:07:33.759 --> 00:07:36.319
I am gonna use uh what am I gonna use?
00:07:36.480 --> 00:07:40.879
I'm trying to think what we can actually get to in a live demo, uh, already being eight minutes in.
00:07:41.040 --> 00:07:45.600
I wanted to use, okay, let's use Fable, uh, but we're only gonna go medium.
00:07:45.680 --> 00:07:49.279
So hopefully it should be a little fast, and hopefully I won't hit my limits.
00:07:49.519 --> 00:07:50.160
All right.
00:07:50.480 --> 00:07:52.319
So my prompt here is very simple.
00:07:52.560 --> 00:08:00.560
I said, I want to reimagine the user interface user experience for each episode page on the everyday AI website.
00:08:00.720 --> 00:08:08.079
Please give me three different examples, and then I left a link to um yesterday's show.
00:08:08.319 --> 00:08:08.879
All right.
00:08:09.279 --> 00:08:16.720
So the great thing here, if you've never used Claude Design, is it should feel pretty familiar to anything Claude.
00:08:16.959 --> 00:08:21.199
So even though it is in kind of its own dedicated interface, right?
00:08:21.279 --> 00:08:25.040
You're not using this in the the normal, you know, Claude chat bot.
00:08:25.199 --> 00:08:27.040
Clawed design is its own section.
00:08:27.199 --> 00:08:32.559
It should be very familiar if you've used Claude or any just AI tool, if I'm being honest.
00:08:32.720 --> 00:08:35.200
So, right away we are greeted with questions.
00:08:35.279 --> 00:08:41.519
And this is actually the big unlock that I think makes Claude Design really worth using.
00:08:41.679 --> 00:08:43.120
Um, even for me, right?
00:08:43.279 --> 00:08:46.000
I use um claw design not a ton.
00:08:46.080 --> 00:08:54.720
I do use it sometimes, but I lean a little bit more heavily into the combination of GPT images too inside codex and also Google Stitch.
00:08:54.879 --> 00:09:00.480
But one thing that Claude uh Design does better than both of those is exactly what you're seeing now.
00:09:00.559 --> 00:09:04.559
And this is kind of like the we'll call it the visual onboarding process.
00:09:04.799 --> 00:09:12.080
So before I get started, Claude comes back and asks me uh about a handful of questions on what it wants me to do.
00:09:12.159 --> 00:09:19.919
So before it just starts designing anything, based on my prompt and based on what it found on the website, it's going out and doing these things.
00:09:20.000 --> 00:09:21.919
And it says Claude has some questions.
00:09:22.159 --> 00:09:27.519
So uh I'm gonna go through these quickly, but it says quick questions before I design three episode page concepts.
00:09:27.679 --> 00:09:30.159
So it says primary goal of the episode page.
00:09:30.240 --> 00:09:31.360
What should a visitor do?
00:09:31.519 --> 00:09:34.399
And the good thing here is I don't have to type to Claude.
00:09:34.480 --> 00:09:34.960
I don't.
00:09:35.200 --> 00:09:36.000
I have the option.
00:09:36.080 --> 00:09:43.759
There's another box where I can type something, but for the most part, looking at my request, it went and looked at the episode page as well.
00:09:43.840 --> 00:09:48.080
Uh I can look at that by looking at kind of the chain of uh chain of thought to see what it did.
00:09:48.320 --> 00:10:07.600
It's asking me very, very specific questions based on my prompt and the work that it did, which this right here, sometimes I'll literally just do this part in claw design and use whatever it takes uh and then take it into uh you know, into GPT images too, um, or into Google Stitch.
00:10:07.759 --> 00:10:14.240
So sometimes for me, it's just worth going through this process because it's like you're working with a professional designer.
00:10:14.399 --> 00:10:19.600
You go in there with a brief and you're like, This is what I want, and they're gonna look at it and be like, Well, are you sure?
00:10:19.679 --> 00:10:21.360
Or did you think about all these things?
00:10:21.519 --> 00:10:27.120
Whereas you know, some of the other systems I think don't do a good job at this, which is where I think claw design really thrives.
00:10:27.279 --> 00:10:28.879
All right, so let's go answer the questions.
00:10:28.960 --> 00:10:33.519
This is primary goal of the episode page, and I can collect uh select multiple of them.
00:10:33.679 --> 00:10:40.559
So I'm gonna say um the main goals are to listen and watch the episode and to explore more episodes.
00:10:40.639 --> 00:10:47.279
So, yeah, if you didn't know every single episode, all 800 and I don't know what we're on, 830 some episodes that we have.
00:10:47.440 --> 00:10:56.559
Each one has a dedicated episode page on our website, and you can go watch the video version or listen to the podcast version, and there's a lot of writing, uh written content on there as well.
00:10:56.799 --> 00:10:58.960
All right, so next it says visual direction.
00:10:59.039 --> 00:11:08.080
So I can keep the everyday AI branding, which is interesting because it found yellow in navy, which we don't have yellow in navy.
00:11:08.320 --> 00:11:12.639
Um, so that was a little error, but not a big deal because I could correct that if I needed to.
00:11:12.799 --> 00:11:17.039
But I'm just gonna say for this one, evolve the brand fresher but recognizable.
00:11:17.279 --> 00:11:19.840
All right, it said how should audio video be handled?
00:11:20.000 --> 00:11:23.200
I'm gonna say be um, I actually don't know.
00:11:23.279 --> 00:11:28.480
It's saying uh a big sticky player up top, floating mini player that allows scroll.
00:11:28.639 --> 00:11:33.759
Um, I'm just gonna say decide for me because some of these things that'll give you great options and you can select multiple.
00:11:33.919 --> 00:11:38.080
A lot of times I'll ultimately just say decide for me, or I'll just type a little note.
00:11:38.240 --> 00:11:39.519
All right, transcript treatment.
00:11:39.600 --> 00:11:41.919
I'm gonna say collapsible expandable section.
00:11:42.080 --> 00:11:43.840
What content matters most?
00:11:44.000 --> 00:11:46.720
Um, so I'm gonna say, oh, this is a good one.
00:11:46.799 --> 00:11:51.600
I'm gonna say the topics I actually don't know.
00:11:52.879 --> 00:11:56.559
So I'm gonna say um I'm gonna type in this one.
00:11:56.639 --> 00:12:02.960
I'm gonna say watching the video or listening to the podcast itself.
00:12:03.919 --> 00:12:08.720
All right, and then it says design for desktop first, mobile first, both equally, decide for me.
00:12:08.799 --> 00:12:21.679
I'm gonna click decide for me, and then it said vibe of the three explorations, uh, three safed variations on one direction, one safe, one evolved, one wild, three very different directions or decide for me.
00:12:21.759 --> 00:12:25.200
Uh, I'm clicking the one safe, one evolved, and one wild.
00:12:25.360 --> 00:12:28.720
And then in this uh this part here, which I love.
00:12:28.799 --> 00:12:31.519
I don't think Claude Design did this when it was first released.
00:12:31.679 --> 00:12:35.440
At this point, it's asking me for brand assets or screenshots.
00:12:35.600 --> 00:12:38.639
I'm not gonna go through and do that, uh, but that's nice they have that.
00:12:38.720 --> 00:12:42.799
And then it says anything you hate about the current page or must keeps.
00:12:43.039 --> 00:12:46.639
And I'm just gonna say uh it feels too busy, all right.
00:12:47.759 --> 00:12:49.440
All right, I'm gonna click go.
00:12:49.600 --> 00:12:55.679
So now we have Fable Five on medium setting going through and uh cooking this up.
00:12:55.759 --> 00:13:05.679
And I do already have some examples of this done, which um I'm gonna hopefully uh over the next you know five or ten minutes, it's gonna build it itself.
00:13:05.840 --> 00:13:11.600
So the cool thing here, as our live stream or video audience can see, it's gonna build it live.
00:13:11.759 --> 00:13:24.000
All right, so uh I can already see it's starting on uh design 1A, which it says is the safe version, the cleaned up refresh with a similar struction and current brand tidied up.
00:13:24.159 --> 00:13:28.960
All right, so the cool thing is as it goes along, I don't have to wait for it to be done.
00:13:29.039 --> 00:13:38.639
And luckily, it is much faster than it used to be because when they first launched this, it was super popular, it went viral and it was painfully slow for the first couple of weeks.
00:13:38.799 --> 00:13:47.360
So slow, in fact, that even though I wanted to really use it, I literally couldn't between the limits and just how slow it was, but it's much better and faster now.
00:13:47.519 --> 00:13:57.440
So, a couple of other things to keep in mind as we kind of watch uh Claude design here live, is there is also an annotate button.
00:13:57.600 --> 00:13:59.840
So there's a comment button up top.
00:13:59.919 --> 00:14:05.679
Um, I can click that, I can click on any single element that I want to and have it change it.
00:14:05.759 --> 00:14:08.320
So, yeah, I don't have to wait for it to finish.
00:14:08.480 --> 00:14:11.279
I can do that kind of as we go along.
00:14:12.240 --> 00:14:19.519
Um, so like like I said, keep in mind, even though it is faster, it is still not super fast, right?
00:14:19.679 --> 00:14:29.440
Especially if you have used a similar product, I'd say the the closest product in terms of features and functionality is probably Google Stitch, which I absolutely love.
00:14:29.600 --> 00:14:31.759
Google Stitch is much faster.
00:14:31.840 --> 00:14:40.799
Um, but I think Claw Design, just through that onboarding process, ultimately, if I was to use the exact same prompt um in the three different versions, right?
00:14:40.879 --> 00:14:57.360
If I were to use it in Claw Design, uh Google Stitch in a combination of just you know codecs using GPT image uh and then codex itself to build everything, I think ultimately, if I were to zero shot this, give a prompt and nothing else, I think claw design is probably gonna do the best.
00:14:57.519 --> 00:15:06.399
Not because it's the best at designing something, but actually it's just the best at building that bridge and actually asking you some of those important questions.
00:15:06.639 --> 00:15:07.039
All right.
00:15:07.120 --> 00:15:14.480
So as Claude keeps going, let's go back to our slides and talk real quick about some of the basics.
00:15:14.799 --> 00:15:22.159
So Claude Design launched in April, and for the most part, there weren't a lot of at least public updates until this summer.
00:15:22.399 --> 00:15:28.879
So in June, uh they announced the design systems and direct editing and the Claude Code Sync, which is huge.
00:15:29.120 --> 00:15:38.799
And uh this uh in July so far, they've announced public artifacts, new export options, uh, and some workflow fixes.
00:15:39.440 --> 00:15:49.039
So to zoom out again, don't think of Claude Design as an image generator, don't think of it as a Canva replacement either.
00:15:49.200 --> 00:15:58.320
I think, like I said earlier, the best way to think and to use Claude Design is to use natural language or any inputs that you currently have.
00:15:58.399 --> 00:16:12.559
So uploading, you know, maybe you have a mock-up that you designed in uh Canva and you want to turn it into uh a wireframe, you want to turn it into a mobile app, or maybe you just have some inspiration that you've collected throughout the internet and you have some screenshots of those things.
00:16:12.720 --> 00:16:26.639
Um, where I think you get the most, even for non-technical non-designers, where you get the most out of it is just moving from that idea or a starting point of a screenshot or a design to at least an artifact that works, right?
00:16:26.879 --> 00:16:30.399
Um, so it's I think it's really about breaking it into three systems.
00:16:30.559 --> 00:16:34.159
I say it's your brief, it's the system itself, and then the artifact.
00:16:34.240 --> 00:16:39.600
So going through clawed design, going through the goal, the audience, the content, and the layout, then the system, right?
00:16:39.679 --> 00:16:43.440
That's your brand rules, your assets, and your components that you upload.
00:16:43.600 --> 00:16:46.799
In this case, in my demo case, I didn't do any of that just for speed.
00:16:46.960 --> 00:16:50.080
And then last is the artifact, what you actually want it to design.
00:16:50.240 --> 00:16:53.679
So that can be a prototype, a deck, animation, one pager, etc.
00:16:54.559 --> 00:16:59.039
Um, and the great thing is just the amount of control that you have throughout the process.
00:16:59.200 --> 00:17:12.559
So even though it is time consuming, the combination of being able to not just upload assets before you start, but also when Claude comes back and asks you questions, the ability to um iterate and also upload new files there.
00:17:12.640 --> 00:17:16.720
And then as you go along, there is just a ton of different control.
00:17:16.880 --> 00:17:21.920
And then actually, when we're done as well, I'll show you some other things that you can do besides annotation.
00:17:22.079 --> 00:17:23.599
And then the handoff, right?
00:17:23.680 --> 00:17:30.400
You're not just left with an HTML file, and you're not just left with, you know, something that you export.
00:17:30.480 --> 00:17:32.960
There's a lot of different options as well.
00:17:33.440 --> 00:17:42.319
So, you know, you can publish it as an artifact, uh, you can, you know, as a PNG, as an HTML file, as a zip, right?
00:17:42.480 --> 00:17:43.839
I've as a PowerPoint.
00:17:44.160 --> 00:17:51.680
The other cool things is you like I said, uh, you can now send it directly into Claude Code, which there's some caveats sometimes.
00:17:51.839 --> 00:17:56.799
Um, in in my experience, it seems like it just sends in an HTML file.
00:17:56.880 --> 00:17:59.359
Uh, maybe there's something I'm not doing correctly there.
00:17:59.440 --> 00:18:05.759
Uh, but the other thing that I really like is you can send a project straight into Canva or you can send it straight into gamma as well.
00:18:05.920 --> 00:18:13.279
So maybe if you do have a lot of your, you know, images or just other um, you know, maybe you're just more comfortable like me.
00:18:13.440 --> 00:18:24.559
I usually work in Canva a ton, you know, being able to start something uh and going through that design iteration process with Claude Code and then being able to finish it in Canva uh is a real unlock for me.
00:18:24.720 --> 00:18:32.480
Um so then, like I said, being able to publish it, export it as HTML, uh MP4, yes, Claude does create videos.
00:18:32.720 --> 00:18:34.799
Are they uh Claude Design?
00:18:34.960 --> 00:18:35.920
Are they great?
00:18:36.160 --> 00:18:37.359
No, they're not.
00:18:37.599 --> 00:18:48.000
Um, you know, you can actually get much better uh kind of video out of Claude if you're using uh, you know, an MCP for like remotion or something like that.
00:18:48.160 --> 00:18:59.519
So um that was actually the thing I was most shocked by when Claude Design came out because I don't even think they mentioned that you could do animations and videos, and then I was like, wait, you can do animations and videos, uh, which is really cool.
00:18:59.680 --> 00:19:08.000
But you know, ultimately, Claude Design just really helps you work faster, uh, you know, and then stay consistent with the built-in brand systems.
00:19:08.880 --> 00:19:15.839
So let's go ahead and skip forward here um and talk about the best way to get started.
00:19:16.240 --> 00:19:25.039
Um I didn't do this, but you're always gonna have best, the best, best um results when you do import your own system.
00:19:25.200 --> 00:19:25.519
All right.
00:19:25.680 --> 00:19:30.880
And the the great thing is, is you can actually create that in another clawed design file.
00:19:31.039 --> 00:19:34.720
You can say, I don't have a design system, or you might say, like, what the heck is that?
00:19:34.880 --> 00:19:38.880
But essentially, that's gonna define to a T, right?
00:19:39.039 --> 00:19:47.680
Even down to things like rounded corners, spacing, you know, you know, typography, height, all these different things that you really want control over.
00:19:48.000 --> 00:19:53.920
Because the thing that people need to understand, generative AI ultimately is generative, right?
00:19:54.079 --> 00:20:02.799
So um that means you could go and run the exact same prompt inside claw design, even if you have a brand kit, and you're gonna get wildly different things each time.
00:20:02.880 --> 00:20:17.680
So the tighter that design system is, it actually, I won't say it restricts the nature of a generative engine, but it does just give it much stricter, uh essentially prompt adherence requirements that it's not gonna go and create these very different things.
00:20:17.839 --> 00:20:24.079
So if you do need something that you reproduce, let's say every week, you know, like or like me, right?
00:20:24.160 --> 00:20:26.160
Like every single day, right?
00:20:26.240 --> 00:20:30.000
I create slides inside of uh Canva, right?
00:20:30.079 --> 00:20:31.839
For me, it's easier to do it that way.
00:20:32.000 --> 00:20:39.680
Yes, I could just hand that off to Claude Design uh or to you know codex with uh GPT image and create PDFs.
00:20:39.839 --> 00:20:42.799
It's still for me, that's a way I learn, right?
00:20:42.880 --> 00:20:49.440
I I like to put things on the page and you know, rearrange slides, rearrange bullet points that helps me present a little bit better.
00:20:49.599 --> 00:20:55.759
As an example, maybe my presentation today isn't as good because I handed that off to Claude Design.
00:20:56.960 --> 00:21:05.119
All right, let's go ahead and skip and talk a little bit here that it's much different than Canva or Figma.
00:21:05.200 --> 00:21:18.160
All right, so I already talked about some of the differences, but kind of the strengths with Claude Design and how it's different from a typical non you know chat interface design tool is it's conversation first, right?
00:21:18.240 --> 00:21:23.759
And then being able to ground your design in the design system that you upgrade.
00:21:23.920 --> 00:21:29.359
And then the huge unlock, right, is then being able to send this straight into Claude Code itself.
00:21:29.599 --> 00:21:37.039
So in the same way, again, I think probably the single closest competitor to Claude Design is Google Stitch.
00:21:37.119 --> 00:21:40.079
So, in the same way, you can do a similar thing in Google Stitch.
00:21:40.160 --> 00:21:41.920
Uh, it uses nano banana.
00:21:42.000 --> 00:21:46.480
So that's a big unlock with um you know Google Stitch versus Claude Design.
00:21:46.640 --> 00:21:50.640
A big downside of Claude Design is it's not an image generator, right?
00:21:50.799 --> 00:21:59.759
Claude itself does not generate images, it can, you know, kind of create you know some nice typography and it can give you good designs, but ultimately the best design.
00:22:00.079 --> 00:22:02.240
And obviously has images, right?
00:22:02.319 --> 00:22:13.039
So you're not going to see that um in uh Claude Design, where you obviously can get that a little bit more easier in Google Stitch or you know in Canva and Figma.
00:22:13.359 --> 00:22:15.039
You do get more of that, you know.
00:22:15.200 --> 00:22:16.799
Here's all my brand assets.
00:22:16.880 --> 00:22:19.519
I can easily drag them in, move them around.
00:22:19.680 --> 00:22:22.480
That's not really what Claude Design is set up for now.
00:22:22.640 --> 00:22:26.160
Although I do assume that Anthropic may kind of add some of those more.
00:22:26.319 --> 00:22:37.039
What you see is what you get features in the future as they continue to add and actually pick up steam in um updating Claude Design.
00:22:37.359 --> 00:22:41.839
But yeah, this is just very strong for exploration and repeatable first drafts.
00:22:41.920 --> 00:22:51.759
Whereas, you know, Canva Figma, this is more just for manual creation and collaboration, uh, you know, deeply uh deeper publishing or product design workflows, and it's just stronger.
00:22:51.920 --> 00:22:57.759
Uh, I think Canva or Figma are stronger when precision in multiplayer editing is needed.
00:22:58.480 --> 00:23:06.400
All right, so let's just go ahead and get straight into our five best practices, and then we're gonna wrap and look at our final design.
00:23:06.480 --> 00:23:10.799
And I'm gonna show you some of the things that you can do once you have finished your design.
00:23:11.039 --> 00:23:14.799
So, five best practices for working with Claude Design.
00:23:14.960 --> 00:23:17.680
Number one, start with the audience and the outcome.
00:23:17.839 --> 00:23:21.759
Tell Claude who it's for and what they should do next, right?
00:23:21.839 --> 00:23:36.000
So whether you do that just typing, uh, whether you give it an example of your current audience, whatever it is, always giving Claude the example of your audience and the outcome is going to help uh Claude Design come back with those better questions.
00:23:36.160 --> 00:23:38.319
Those questions that it asks you, right?
00:23:38.480 --> 00:23:40.960
Sometimes they're just very design specific.
00:23:41.039 --> 00:23:59.680
And that was probably more of the example that I gave here because I didn't go through um and do give the audience in the outcome because I wanted to give a very beginner-friendly, you know, not having to be a novice uh, you know, at Claw Design to get uh some of the outputs, but it's always best to start with the audience and outcome.
00:23:59.839 --> 00:24:02.319
Number two, provide real source material.
00:24:02.400 --> 00:24:06.480
So, my example, I give a URL, but it's always gonna be better if you upload.
00:24:06.559 --> 00:24:09.119
If you currently have a brand guideline, upload that.
00:24:09.279 --> 00:24:12.559
If you have images, upload those things, uh data, right?
00:24:12.640 --> 00:24:22.079
If you're creating an app, uh what like whatever it is, you should always be providing real source material first, as much information as you can give Claude Design up front.
00:24:22.160 --> 00:24:24.880
It's gonna save you a lot of time going back and forth.
00:24:25.039 --> 00:24:27.680
Next, build one section at a time.
00:24:27.920 --> 00:24:32.400
Approve the structure first, then you can refine the visuals and the wording.
00:24:32.559 --> 00:24:40.960
So, yeah, let's just say that you're you want to design an entire um an entire um workflow for a new app, right?
00:24:41.200 --> 00:24:42.799
Work on one section at a time.
00:24:42.960 --> 00:24:48.160
Don't just give a broad prompt to Claude and say, Hey, I want an entire app.
00:24:48.319 --> 00:24:49.440
Break it down into pieces.
00:24:49.519 --> 00:24:58.880
In the same way that you, you know, used to think of, you know, think step by step used to be one of those, you know, keywords for you know the prompt engineering days of 2023.
00:24:58.960 --> 00:25:03.680
Uh, I think thinking like that and using Claude Design like that is going to give you better results.
00:25:03.839 --> 00:25:11.759
Number four, give specific revision instructions, say exactly what to keep, remove, emphasize, or visually change.
00:25:11.920 --> 00:25:17.599
And I think it does make it easier in claw design doing that with the kind of comment or annotate feature.
00:25:17.680 --> 00:25:22.160
And then last but not least, number five, export and inspect everything.
00:25:22.319 --> 00:25:27.759
All right, especially if you are ultimately pushing this out as code, uh, right?
00:25:27.839 --> 00:25:38.640
If you miss, you know, something simple, like in an example that I did, I used Claude Code or sorry, Claude Design for a project that I was building in Codex.
00:25:38.880 --> 00:25:45.839
Uh, this was before the GPT-5.6 update, where I think uh, you know, OpenAI got much better at front end design.
00:25:45.920 --> 00:25:55.200
But before that, you know, I was using Claude uh design a lot to uh you know start before I gave a project to Codex to build.
00:25:55.359 --> 00:26:01.200
And you know, one thing I noticed is you know, I went through and I'm like, okay, yeah, this this looks good from Claude.
00:26:01.279 --> 00:26:04.079
Let me go ahead and export this over to Codex and start building.
00:26:04.240 --> 00:26:15.279
And then I realized, you know, going back and looking at things like typography spacing, uh, you know, looking at, you know, making sure all corners were consistently rounded across different elements.
00:26:15.440 --> 00:26:29.440
You know, there are some certain details that I should have either better prompted in Claude design, or before I kicked that over to Codex, I should have been a little bit more um had had my inspector eye on versus just a vibe, right?
00:26:29.519 --> 00:26:33.359
The vibe was this looks great, and you know, codex did a great job with it.
00:26:33.440 --> 00:26:37.680
But if I would have inspected it, I could have saw that there was some minor flaws.
00:26:38.160 --> 00:26:44.079
All right, so let's go ahead, let's see how we did in our five designs.
00:26:44.160 --> 00:26:47.759
All right, I did give it a good, what, about 15 or so minutes.
00:26:47.920 --> 00:26:50.880
So hopefully, hopefully it's done, but we'll see.
00:26:51.759 --> 00:26:58.319
All right, so I am now um back in Claw Design.
00:26:58.400 --> 00:27:03.680
I'm gonna zoom out for our live stream audience here, and I do uh let me scroll down.
00:27:03.839 --> 00:27:05.599
It did say it's done.
00:27:05.839 --> 00:27:10.160
So see exactly how long, I don't know how long it worked.
00:27:10.319 --> 00:27:13.759
Um, but the good thing is is we have three different designs.
00:27:14.000 --> 00:27:16.880
So as I zoom out here, we can kind of see them.
00:27:17.039 --> 00:27:27.359
Uh the the canvas, if if if you've ever used something like Figma, um, it is very um easy to use because you can edit the design directly, right?
00:27:27.440 --> 00:27:29.920
So in this first example, it gave me a headline.
00:27:30.000 --> 00:27:41.759
If I want to change the headline, you know, you do have some elements of kind of like a what you see is what you get editor, because you can click on anything and you can, you know, edit it just as you're typing, um, right.
00:27:41.839 --> 00:27:45.680
But it's not a true, you know, being able to move things around.
00:27:45.839 --> 00:27:49.279
Um, you can, but it's ultimately going to break your design, right?
00:27:49.359 --> 00:27:54.480
Like I can, you know, resize this embed, but it's not the full embed, right?
00:27:54.640 --> 00:27:59.440
A lot of times it's easier to make these edits either just chatting to Claude.
00:27:59.519 --> 00:28:00.960
So there is an edit mode.
00:28:01.119 --> 00:28:01.519
All right.
00:28:01.680 --> 00:28:15.279
So if you're in edit mode, that's where you kind of have that granular control and you can click on anything and change it live, or you can just stay in kind of chat mode and you can describe the changes that you want Claude Design to create and it'll do that.
00:28:15.519 --> 00:28:19.440
Or uh you can go up and go into comment mode.
00:28:19.599 --> 00:28:28.000
So in there, I can, you know, essentially click on any single element and just then leave a comment and send to Claude.
00:28:28.079 --> 00:28:33.759
So essentially, there's like three and a half different ways that you can iterate on the design.
00:28:33.920 --> 00:28:35.599
Some are better than others.
00:28:35.759 --> 00:28:40.559
Um, and it it does ultimately depend on what you're trying to do with this, right?
00:28:40.640 --> 00:28:42.400
Is this just a deck, right?
00:28:42.480 --> 00:28:46.079
If it's if it's a deck, maybe it's just best you change it here.
00:28:46.240 --> 00:28:49.759
Um, is it something that you're coding in Claude Code?
00:28:49.920 --> 00:29:02.160
If so, maybe you use the comment or the annotation, or you just chat to Claude Code, especially if you're not a strong coder, you could look at some of the the more technical uh iterations and you might look at it and be like, wait, I don't even understand, right?
00:29:02.319 --> 00:29:03.920
Even some of the design stuff.
00:29:04.160 --> 00:29:06.000
Yeah, I mean it's super helpful, right?
00:29:06.079 --> 00:29:07.680
So let me get out of comment mode here.
00:29:07.759 --> 00:29:11.759
Uh, I'm gonna go into edit mode and I'm gonna click on this main element.
00:29:11.920 --> 00:29:18.079
So, in the first um iteration that it gave me, uh, this is kind of 1A, the safe one.
00:29:18.240 --> 00:29:19.440
I can click on any element.
00:29:19.519 --> 00:29:25.119
And if you know the basics of like web design, um, it's gonna give you all of these options as well.
00:29:25.279 --> 00:29:32.160
So I, you know, all your divs, uh, you know, your H1 tags, all these different things in the same way.
00:29:32.240 --> 00:29:35.279
If you are familiar with web design, it's gonna give you those things.
00:29:35.359 --> 00:29:42.880
So I can go and kind of use some of these tools manually that, you know, in a web design interface, right?
00:29:42.960 --> 00:29:51.200
If you've used like WordPress or Squarespace or Wix or something like that, you do also have kind of that option to edit as well.
00:29:51.599 --> 00:30:01.119
All right, so those are some of the more uh technical aspects, but let's just go ahead and kind of zoom out and ultimately see how did Claude Design do?
00:30:01.519 --> 00:30:06.319
All right, so this first um, the first episode page was the safe one.
00:30:06.400 --> 00:30:11.279
Uh, it said it's familiar structure, the current brand tidied.
00:30:11.519 --> 00:30:16.000
Like I said, this didn't really nail my current brand because it didn't properly bring in the colors.
00:30:16.160 --> 00:30:17.519
It said that it was yellow.
00:30:17.680 --> 00:30:18.880
That was not correct.
00:30:19.119 --> 00:30:23.920
But in terms of how this laid it out, I actually really like it.
00:30:24.079 --> 00:30:38.319
You know, it has the video front and center, uh, it has chapter markers on the right hand side, it has like an up next section on the on uh right under the chapters, key takeaways, quick buttons to listen on Spotify, Apple, and Amazon.
00:30:38.559 --> 00:30:43.359
So, overall, I mean, this is much better than our current website design, right?
00:30:43.440 --> 00:30:46.799
I'll I'll show everyone that for our live stream audience, right?
00:30:46.880 --> 00:30:54.559
I mean, we built this originally like four years ago, so you know, our current website design, it's super busy, right?
00:30:54.640 --> 00:30:56.799
It's this dark mode with white font.
00:30:57.200 --> 00:31:00.880
You know, personally, I think when we launched it, I was like, this is good enough.
00:31:01.039 --> 00:31:03.440
Um, you know, I didn't really care as much.
00:31:03.599 --> 00:31:06.319
Now looking back at it, I'm like, this is super busy.
00:31:06.480 --> 00:31:12.400
So, I mean, just in that example, and I remember our team spent a lot of time when we initially put this together.
00:31:12.640 --> 00:31:18.640
Part of it is, you know, design trends change, uh, and even web design capabilities change.
00:31:18.799 --> 00:31:21.839
You know, changing certain things on here used to take a long time.
00:31:22.000 --> 00:31:26.640
I could export this as HTML and get it up on the site, you know, pretty quickly.
00:31:26.799 --> 00:31:30.000
I'm not actually gonna do that, um, but it's possible.
00:31:30.319 --> 00:31:32.160
All right, let's look at option B.
00:31:32.319 --> 00:31:33.839
Option B is evolved.
00:31:34.000 --> 00:31:42.799
This is uh, it says the editorial daily briefing feel, uh, a serif recap, uh, synced chair uh chapter player.
00:31:42.960 --> 00:31:47.359
Uh so a little bit different, but it essentially made the video uh a little bit smaller.
00:31:47.519 --> 00:31:49.920
It does have definitely more of an editorial feel.
00:31:50.079 --> 00:31:52.319
Live stream audience as I go along, which one do you like?
00:31:52.400 --> 00:31:53.759
Do you like one A so far?
00:31:53.920 --> 00:31:54.960
Do you like one B?
00:31:55.119 --> 00:31:57.680
So far, I like this one B version a little bit better.
00:31:57.839 --> 00:31:59.359
It makes the video a little smaller.
00:31:59.440 --> 00:32:03.279
I don't think the video would need to be super huge, right?
00:32:03.839 --> 00:32:08.880
The the value of this podcast, I don't think, is necessarily the uh what I'm showing on video.
00:32:09.039 --> 00:32:14.960
Aside from Wednesday episodes, which obviously the video is important, but otherwise, you know, it's just kind of my my notes on the screen.
00:32:15.119 --> 00:32:23.839
Uh, so option B looks pretty good, uh, you know, similar, similar overall style, but let's go to option one C, which is wild.
00:32:23.920 --> 00:32:27.920
So here it says dark broadcast console, full blade player.
00:32:28.000 --> 00:32:30.319
There's a ticker and a live feel.
00:32:30.400 --> 00:32:33.039
Uh, so I don't hate this one, right?
00:32:33.279 --> 00:32:34.480
It has a ticker at the top.
00:32:34.640 --> 00:32:41.599
Yeah, this to me looks like you're, you know, I don't know if you're watching, you know, ESPN Live or something like this.
00:32:41.759 --> 00:32:48.079
This looks like a live broadcast, you know, 100% of the focus is on this full bleed episode video.
00:32:48.319 --> 00:32:58.000
Um, you know, lex less of an uh of an emphasis on the actual written content, uh, summaries, uh, chapter takeaways, those kind of things.
00:32:58.160 --> 00:33:03.519
This is like if you're just gonna want to digest as much video as possible.
00:33:03.759 --> 00:33:04.160
All right.
00:33:04.240 --> 00:33:05.519
So that's the process.
00:33:05.680 --> 00:33:09.440
Like I said, um, everything else up here, being able to leave the comments.
00:33:09.519 --> 00:33:23.759
So let's just say um, you know, I can click this bar and I can say, you know, make the bar uh you know neon blue so it stands out more, right?
00:33:23.839 --> 00:33:27.440
All I have to do, click that, send a send a clawed code.
00:33:27.519 --> 00:33:30.720
Um, and then you can see down here it's already working on that.
00:33:30.880 --> 00:33:35.119
So without having to redo the whole design, that's just a very quick way to iterate.
00:33:35.200 --> 00:33:36.319
And it's already done, right?
00:33:36.480 --> 00:33:49.519
So bless up that you know, claw design is actually faster now and you can't just iterate on small things because yeah, when it first came out, doing some simple uh iterations like that used to be a lot more time consuming, but now it's it's done, right?
00:33:49.599 --> 00:33:52.880
And I, you know, can go through and change things just like that.
00:33:53.039 --> 00:33:56.960
Um, there is a tweaks section, which is very similar.
00:33:57.119 --> 00:34:06.880
Um, I don't even fully you know understand this tweaks section up here, but you can just click the ideas and it's just gonna give you different ideas based on what it created, anyways.
00:34:07.039 --> 00:34:13.760
All right, then last, there are some presentation options you can present in uh Claude Design as well.
00:34:13.840 --> 00:34:16.480
Uh, we already went through the editing and then the sharing.
00:34:16.559 --> 00:34:23.440
So uh I can publish this as an artifact, um, a PNG, an HTML or a zip file.
00:34:23.519 --> 00:34:30.639
I can send it to Claude Code, uh PowerPoint, uh Canva, Gamma, video, or PDF.
00:34:30.800 --> 00:34:34.159
And then I can also share this link with my team.
00:34:34.320 --> 00:34:37.440
All right, so that is a wrap, y'all.
00:34:37.599 --> 00:34:52.159
A lot to cover, but overall, I think the thing to uh keep in mind, even though clawed claw design, right, the big downside is there's no image generation, right?
00:34:52.239 --> 00:35:00.400
And I think most great designs obviously have images, which at least for me and my purposes is maybe one reason I don't use it a lot.
00:35:00.559 --> 00:35:18.639
So, yes, you can obviously upload images, but at least when my mind is thinking, you know, I'm going to vibe a design, I don't necessarily always want to uh you know create my own assets or bring in my own assets or uh you know, for me, I love using Google Stitch for this.
00:35:18.719 --> 00:35:29.599
Um, a big unlock that people don't realize is you know, inside codecs using uh GPT image, and just you know, I have a skill that can create an entire deck, including images on the inside.
00:35:29.760 --> 00:35:39.280
But I think where claw design really thrives is getting it from idea to actually a working artifact on screen, and it does a really good job.
00:35:39.360 --> 00:35:44.159
And obviously, the more time and care you put in, the better the results are gonna be.
00:35:44.320 --> 00:35:47.119
So that's a wrap for today's AI Working Wednesday.
00:35:47.199 --> 00:35:49.679
Now you know the basics of Claude Design.
00:35:49.840 --> 00:35:52.800
If you want to see more on Claude Design in the future, let me know.
00:35:52.960 --> 00:35:54.639
And also, what was your favorite design?
00:35:54.800 --> 00:35:59.280
I think I kind of liked 1B, although that wild version was kind of fun to look at.
00:35:59.440 --> 00:36:00.960
All right, so thank you for tuning in.
00:36:01.039 --> 00:36:04.000
If you haven't already, please go to your everydayai.com.
00:36:04.079 --> 00:36:04.800
Thanks for tuning in.
00:36:04.880 --> 00:36:07.360
We'll see you back tomorrow and everyday for more everyday AI.
00:36:07.440 --> 00:36:08.480
Thanks, y'all.
