Claude Design - Figma Is Dead  🔗 **Source:** [Claude Design - Figma Is Dead](https://www.youtube.com/watch?v=iaASVi-cFGk) All right, this is our first live thing that we're doing. My name is Tyler Moore and who are you? My name is Emmanuel. I'm a website designer. Yeah. >> And I saw I saw a a Tyler Moore video in 2015 and I'm I'm still stuck here. Here we are. Now we're friends. We're buddies. And if you guys want to be our buddies, too, you could go to atyler.com/live and you guys can join in, too, which would be crazy cuz you just pop up right here. And we'll be like, oh >> What's this? Is this streaming to YouTube right now at the same time? No. No, but Okay, so it's live it's live on tyler.com. Yeah, it will be live soon, but I I made this program right here. You could see it and um I'm still programming it. Or the AI is still programming it. I don't know. We're programming it together. The AI is doing most of the programming. >> Yeah, for sure. >> [laughter] >> I'm just like, why is it broken? All right, today we're discussing uh Claude's new design uh feature. It came out just today, so obviously we're not experts in it. We're the only people that uh will not lie to you on YouTube. Everyone else hypes things up too much, but we're going to do it live and we're going to see if it's good or not. So, we can go to claude.ai/design. So, this is their new design. Have you played with this? It only came out a couple hours ago. I imagine not. >> No, I haven't I have not used it at all. I saw a video on X showing like um what it does, which I thought it was interesting because they they had said that they had updated Claude to be really good at um graphics and um graphs and charts. So, I guess they expanded that further and now it's like really good at from what I saw it's really good at like presentations. Which would be nice because I've used it I've used it to make uh presentations for like invoices and like proposals and things like that. And it's it's pretty good. It took a lot of prompts to get it to look good, so I'm hoping that maybe this makes it like really good and like interactive right from the beginning. That's what I think it's going to do. I played with it a little bit. It's pretty cool. Let's check out this video. Sign in to confirm I'm not a bot. Okay. Um well, that's not going to work. Let's see. >> [laughter] >> Does this work? Oh, man. Okay. Claude design. Mm. Look at all these YouTubers. They're like, "It's insane. Oh my god, it's over. Design. Woo." That's what we don't want to be. Um >> [laughter] >> Let's see if we can get the video. No, we can't even get it. I can't I Googled it and it's not even in search results. >> Yeah. Uh Uh but if you go if you go to claude.ai/design, it looks like it's there. Okay. Well, we'll just, you know, Well, that's right. Yeah. Let's see. Let's just Let's just build something. >> Okay. Let's skip this. Okay, let's just build something. I built two things, a yoga website and a game. Um but let's build something Let's build something else. What do you want to build? >> what is it because my understanding was that it is like to design like uh decks and slides and that kind of stuff. Like how what what is the difference between this and like Claude code like designing something with Claude code? What did they explain? >> to give you a little bit more control over your designs and it's supposed to be like a Figma killer. So, if we look at Figma stock today, it's gone down 6% and over 6 months it's gone down 66% and that's because tools like Claude did a bunch of design, but now it's gone down 6% in a day because they're thinking this is just going to destroy them and not use it at you know, they're not going to use Figma at all. So, it's supposed to be a Figma replacement. And then you can import your design into the Claude code or Claude desktop and start building it from there, which I I did. So, I'll give you a couple examples. So, here's one real quick. I said I sketched this out and this [clears throat] is really good. I obviously went to art school. Um >> Cool. So, is this is this part of Claude or you making it somewhere else? >> this is part of Claude, so you can say you can just start drawing like you want, you know. That's so good. And then so the logo is up here, navigation here, some text, a hero image, and a and a button. Uh this is new. And then we can see we have the logo up here, navigation, text, image, button. And then I'll ask you more things and then you can change it all like that. The cool thing Yeah, go on. >> It shows the image and everything? It shows the image and everything. Yeah. And it got it from Unsplash before I didn't want to make an image with for me. I'm like, no. Put in an image. Uh it was like, "Do you want an image placeholder?" I'm like, come on. Just put the real But it doesn't generate an image. It gets it from Unsplash. So, Anthropic or Claude, they never they don't have an image generator. They don't have >> like Google does or or Open AI does. Um But yeah. So, the cool thing about this is uh that's different than just Claude code is that you can draw on things, so you can click draw and you can say, "Oh, change this. Change this." Um something easier I found with the whole, you know, 20 minutes I've been experimenting with this is you can press Yeah, an expert super expert. You can press comment and then so you can comment on all these. So, you can say maybe I don't know. What do we want to comment? We want this to be Fahrenheit. Make this Fahrenheit. So, it's like instead of having to go instead of having to do a prompt, it's almost like they have their own visual builder into whatever it's developed. And it it's and it's generating I would assume that it it's like generates the visual builder for you. So, like depending on what you're building, it's like, "Okay, this is like these tools that you need for this project." And they'll just Yeah, the super cool thing is this tweaks. So, it asked me when I was generating this, "What tweaks do you want?" And then and then I was like, "Oh, colors and typography." So, you can open this tweaks and then you can change this tweaks thing here. Got you. And this is in the browser or is this a file on your computer? This is in the browser, but and they made it like a bold variation. But you can export this and then it just gives you a I'll show you. Um Yeah, I wonder is it going to export like whatever version you're on or what? >> this command Oh, okay. and then you put it into Claude desktop or Claude code. Claude code Claude desktop code or Claude code. Um And then you can take this off and then but we can also edit it, which is cool. So, if you edit it, you can go here. You can go Thanks, Spider-Man. Wow, that's a that's amazing because normally in Claude code you'd have to once you have the design how you want it, if you want to edit it, you'd have to tell like, "Hey, change the heading to this." Exactly. >> Now you can just click the heading. It's almost like You can change the color, too, over here. It's like, "Oh, I want to do the brown." And then it has all the options over here like the Yeah. That's amazing. Listen, I I was not using Elementor anymore, but this is just like way better. This is like if you want to use Elementor, this is like you have those tools still if you want to if you want to get in there and like adjust this one thing without having to like explain it. Right. You can just go in there and it's like the best of both worlds. I think it's really cool. And then you can say, "Present this in a new tab." Opens up a new tab and you can see it. Um Yeah. So, I think that's pretty cool. Does it you know, I wonder if And then of course over here you can make all of your changes. Can it pull Can it pull um from a URL? So, like for example, Yeah. >> a like uh if I give you that link for the the grooming website that's really old, do you think it would Let's try it. Okay, let me let me find >> I made a I made a retro jumper, too. This has sound, also, but I'm just busy. You can jump over things. I like the trees are backwards. >> [laughter] >> And then you can jump under things somehow, but uh yeah. It has cool sound, too, though. I know you can't hear it, but Um >> That's awesome. And how long did that take to make? Uh not long. I mean, I 10 minutes, maybe. But the cool thing is you can draw on this. You can be like, you know, make this not say game over and whatever. And then, you know what I mean? Yeah, it's it's more interactive versus just prompting. You can just scribble on it cuz that that is something that I had to do already like for some of the design stuff I would have to draw on a piece of paper and then upload and be like, "This is the layout. Like this is how it goes." But now you can just be like, "Put this square up here and put that thing under this thing." And then they have a they have a sharing thing, which I thought worked on like for everyone, which would be cool cuz like customers like clients could be like, "Oh, I want like this this this this." But it just says teammates. I thought that'd be cool, though. Uh maybe they don't >> can share it out you can share it as a >> teammates. I don't know what that means. Yeah. I think you just share it as like a present presentation, I guess. Oh, cool. I don't really care. >> That's it. I I would imagine that's like if they have a Claude account, they open it like in their Claude account. Yeah. Well, where's my internet? There it goes. Okay, yeah. Uh Yeah, so okay, what do you want to try? Obviously, we're new to this. >> So I can set up a design system right here. I don't know what that means. >> So what I think that would be good if you have if you're working with like a really big brand and they want to have like, well, I need to know all the colors, I need to know all the fonts, I need to know all the >> Why why would we redo this? >> [laughter] >> Honestly, this is a AI could never build this. >> [laughter] >> AI yeah, AI wouldn't build. AI would just like, no. AI AI see like if this is the this is a human. Human only. Only only a human can make >> Every character was human entered with this one. >> [laughter] >> Obviously. Clearly. Clearly. >> So this website it's beautiful, you know, like they have the dog as the logo and then they have a home button with a cat. And then another dog. Yeah. The fact this website's from 2010, I think. Um and the fact that it still works, like it's not like if this was a WordPress website from 2010, it would be broken. It would not work. >> Yeah, exactly. >> This this still works. So that has to count for something. Okay, so do we want to redesign this, yeah? Or Yeah, let's just tell Claude, hey, just we're doing some pro bono work. We need to help this business fix their website. And I want to see just what it spits out and then how this design tool lets us like tweak it after that. Okay, do we look are we creating a design system? No, I think we're just doing a project. And high-fidelity or wireframe it wants to know. High-fidelity, just give me the finished product. >> wireframe would just be like the basic building blocks without it like filled out. High-fidelity is like a real real website. Finished. All right, what is this called? This is called Furs going to fly. Furs going to fly. Furs >> Oh, yeah, it's going to fly right now. >> Okay, so we create this. Oh, look, it says slide deck right here. Did you see that? Yeah, so I wonder if if it would just turn the website into like slides or like it'll just generate a PDF of the website. >> deck is like for presentations and stuff. I don't know. Right, I think it'll get confused. It'll it'll maybe it'll or maybe it'll just get the website and be like, okay, if you were like presenting this website, how would you do it? And then it'll turn that into a slide deck, which could be useful because um like if you're an agency and you build a website and you want to like present it to the customer in like a more elaborate way, it could generate a deck for you where like, well, look, this is what we thought about and this is why this is this way and whatever. Yeah, it'd be pretty cool. All right, so design screenshot. >> we finish here, we should click that and see what happens. >> Yeah, for sure. Attach codebase. What does attach screenshot mean? Okay, it actually wants me to attach a screenshot. No. Attach codebase. No, I think I'm just going to put it in the URL. >> Just type yeah, just type redesign this website and the link. That's what I would do in Claude code. >> Right, exactly. >> So let's I want to see how it's done. >> So that it's modern. Also that it is modern and looks amazing. That's how I talk to my Claude. Right, like just do make no mistakes. Make no mistakes. Make client happy, please. >> [laughter] >> So sometimes what it'll do to me is it'll say that it can't go to the website because it's not secure. And I wonder if this is going to >> Oh, interesting. >> if this is going to power through or if it's going to come back. If it says it's not secure, you should be able to save website as HTML and then upload it. And then we'll see if Oh, okay, it's asking us stuff. Nice. Okay, um okay, do we want it to be warm and friendly, premium boutique, playful and charming, bold and editorial? Or something else. Nice. So talking about Claude design, I think it's nice that it's generating like a little onboarding for us. >> Yeah, it's so cool. It's like a custom onboarding, too, for you. >> Yeah, so even before it creates the website, it creates which is nice because it it saves time if you if you don't know exactly what you're going to explain. Like if if you're more beginner, you're not clear on what you want. Or you're working with a client, it kind of gives you like a easy way to you know, sometimes it's hard for people to be creative without any guidance. So this is kind of super nice that it gives you a custom onboarding here. >> Yeah. I wish Claude had an affiliate program. Right. >> [laughter] >> All right. >> Uh look Warm and friendly? Uh playful and charming, hand-drawn, illustrative. That would be cool. Playful and charming. Oh, that's that's pushing it, I think. Let's do that one. Yeah. Yeah, I want to I want to see how it's going to do the hand-drawn stuff. >> Color direction? 1 2 3 4 5. We could do the the one before the last one and that way it keeps the the the light green blue >> This one? from the original. So yeah, Is that the original one was? Oh, yeah. Yeah, it's like a blue. Do you think it got it from there? I would imagine so. >> Single long scrolling page with micro interactions, full multi-page, or online booking flow. Oh, jeez. Uh what do you decide? >> let's do a multi-page. >> Yeah, agreed. >> Just a >> I hate the one-pagers. It's you know, sometimes I ask it to make a website and it it always defaults to a one-pager. And it's like nobody wants this. I need it separate. >> Nobody wants it. What should the site emphasize? Okay, what does it emphasize now? Professional grooming It just the grooming >> Like a grooming service. Okay. >> Oh, wait, go back go back go back. Here? I think we need to emphasize that right there. You see the you see the $10 nail trims? Where? On the left-hand side. >> Yeah. Ooh. >> Yeah, and then under that, very important, we got to emphasize those two things. I don't know if you're joking or not, but I'm put it. No, I'm not No, don't don't. >> [laughter] >> Just let it decide. Let let the AI decide. >> service and pricing. We need to we need to be able to monetize this video. >> [laughter] >> All right, um imagery, stripe placeholders. We'll do that. I would say decide for me. Like No, I don't want placeholders. This is what I told it last time, like get real images. Oh, then then then write that. You done? >> Okay, instead of placeholder, so no real images. I mean, come on. What one thing that I do now with Claude code is I have a I have a folder a Word document that's all my API keys. Oh, smart. >> and I just I just put that folder into the terminal and I'm like, here's my API keys, don't ask me for them. Every API key has like a title, like Unsplash API, this API, that API. Go into this file, get the API that you need and and build the thing, you know? That's cool. Uh but I don't think I don't think the desktop or this might not have that integration yet. What should be tweakable? Okay, so you know that pop-up tweakable thing? Right, like the like your own little personal toolbar of the things that you want to um Yeah. Nothing or decide for me? >> I think I think it'd be cool to shift through color palettes. But you know, sometimes I wonder if choosing more things to be tweakable also kind of like locks in the design. Like, well, we want to tweak this, let me not go too crazy with this, so. Right. Can you leave it unchecked? Can you just like not decide not >> yeah, not checked. Typography, Phil. Editorial, I don't even know what that means. What does that mean? Editorial? Okay, uh decide for me. Hero concept, bold watermark. Wordmark. Oh, like what one big bold word? >> Hero concept. The concept that I would have done that I told you about, I don't know if it can do this. I know I could I could >> We could have sketched it. Would be like the hero section with like the dog kind of like leaning over it. Uh my camera has a >> [laughter] >> zoom lens. Is that the tiny? The tiny camera? >> This Is it called the tiny? No. >> No, it's called the Osmo. Osmo. The Osmo tiny though. It is tiny. So maybe it is. I think it's called the Osmo tiny. I have it, too, so right here. I'm not using it. Oh, it's right there. Um Yeah, so that's kind of was my idea, like having the dog pawing over the hero section almost like jumping out. So I wonder how close we can get to that. Yeah, I think that'd be hard for right now. Yeah, it would be difficult. Uh The way I would do it is I'd have like I'd use like Nano Banana to generate the dog image with a PNG background and then have that on the right-hand side of the hero section. It can't make a PNG. I'm going to say a few variations I can toggle. That's cool. >> Right. A book booking form or no? Uh no, I don't think we need that. >> complicated. Copy, keep their copy, just tighten it up. Uh no, their copy is too too tight as it is. Rewrite with warmer modern voice? Yeah, rewrite this. Okay. Definitely. >> Or should I make it more Is it too much stuff? Um okay, whatever. Uh maybe I shouldn't make it more uh What am I trying to say? Minimal? Uh Or it's fine. Mm, it's fine. Make it uh yeah, just you can put like clear and to the point. There you go. That's what Put a high SEO ranking, number one spot Google. >> [laughter] >> Nice to have, testimonial. Should we do Do they have testimonials? Yeah. Okay, whatever. Do we want any of these? I wonder if you wrote in there um if you wrote in there the dog thing if it would do it. Uh let's do something. Let's do Oh, oh, you could put in Let's do um write in there scrolling testimonial banner with made up testimonials. And I want to see how cuz Claude Code does those really good. They're like a little stripe and they scroll through the screen and it looks really nice and I wonder if this will do it. scrolling testimonial banner with made up testimonials >> testimonials Yeah, you could put You could say a scrolling review banner and then scrolling review Yeah, yeah, it's the same thing. test banner with made up testimonials. Okay. Oh, yeah. Continue? Continue. All right. See, we could have started with a sketch, have that dog there. That'd be hard though because it can't make transparent ones. Right. That Yeah, for for that I'm usually probably What I would have done is use Nano Banana separately in a separate tab and be like create this, which I think you can upload a sketch into Nano Banana. And uh Right. We can see if um it would be hard. Like I'd have to I think if we found a There must be photos of dogs looking out of windows and stuff. Yeah, yeah. The dog paws. Cores block fetching. Oh, no. >> [snorts] >> Uh-oh, what's going on? Oh, it's I think it's the Uh what is it? I don't know. Ooh, what is it doing? Made me a style sheet, but it created top bar. Yeah, cuz I I think it's doing the same thing we're doing on your computer where it creates all the the JS files and CSS files and all that stuff. Uh and I wonder The Napkin Sketch tool lets you draw freehand. Let's see how long it takes. This uh probably 5 to 6 minutes on Claude Code. And I do it. >> yeah, it's going to take a while. It's taking a while. Okay, we can talk about uh something that I I saw today. Um they were This guy's uh made a video about this thing called Elementor atomic elements. Have you heard of that? Mm-mm. Should I look it up? Elementor Uh yeah, you can look it up. It's not good. >> [laughter] >> You can look it up. It's a complete waste of time. Yeah, so it's like uh they're making it more developer-friendly. So, now you can add like CSS tags and attributes to the elements. Okay. >> And it's just like I feel like Who wants to do that though? Yeah, who wants to do that? Like Uh just like when they switched from sections to containers. Like I get that it's supposed to load better or whatever. But it's like I feel like it's more work. Yeah. Well >> And I think You think you can add a class and then that way you assign a class to all the buttons and then you can change them You can change the class settings and then it changes all the buttons that are in that class. Like We're going backwards. Like you're you're making it Like you're making it more technical. You ever see You ever see um You ever see uh >> [clears throat] >> Where are we going [laughter] with this? You ever see Back to the Future? He goes He goes to the future and he starts like playing a video game and he's like super good at it and then the the little kid says You mean you have to use your hands? That's like a baby's toy. >> [laughter] >> It's like >> Oh, that's funny. It reminds you of like Elementor like you have to do it yourself like with classes and stuff. That's like Yeah, that's the thing and >> toy. Cuz the the whole point of Elementor was like, "Okay, you're not technical. So, like this tool will help you just visually build it." But now, if I am technical enough to assign classes and all this kinds of all these kinds of things, then why am I using I would just I would just be building a website. Yeah, but you know the crazy thing is all of these nerds, you know, I like if you ever go to Hacker News. You ever go to Hacker News? Probably probably not. Um but they're all like super mad at the LLMs and like, "No, you're taking the joy out of like programming. You're taking the joy out of coding and you know." They all hate it. "Oh, it can't do this. It can't do that." And it's just like uh they want to do it by hand because imagine you spent your entire life learning how to code, you know, 20, 30 years and then the computer can do it. You know, it kind of sucks. And they have like they cope. They cope. They're coping. >> Yeah, let me tell you when when I first started using Claude, it was a little bit jarring because I was like, "Oh my god, this it generated this thing that is like so good. And like I'm going to use it. But I'm like this would have taken me so long to do. And it kind of made me feel like, "Oh my god, I've been wasting Like I've been wasting my time." And then I was like, "Well, you know, like this didn't exist you know, 2 years ago." It's like It's not like I It's not like I I could have used this. But it was like it was like it drawing to see such a like something that was so close to being like complete that I knew was like a month of work in like 5 minutes. It was like whoa. Wha- I can't process what I'm seeing here. Yeah. >> And I think one of the most exciting things once you like absorb like what it can do and um I would keep trying I would keep trying to ask it to do things that I thought, "Oh, that's too complicated. It can't do that." Yeah. And then like it just does it perfectly. I always have to like I always have to go back and like, "Oh my god, wait, it can do that." Like I'm always surprised like, "Oh, I'm going to do this manually." And I'm like, "Oh, wait, no. It could do that." So So, let me give you a perfect example. One thing that I do for almost all of my customers is whenever they send me the the images um I have to compress them cuz they're like large files. >> Yeah, that's what I know. Okay, okay, wait, wait because I have I'm redoing the Pocket Watch guy, but all these images are PNG and I wanted to ship fast. So, I was like you know, I don't want to recompress them, but if you go to the Light Speed score, it's like 5 megabytes on this entire Right. Right. Right. Okay. Yeah. So, go. Tell me. So, I didn't know this, but the Mac has a built-in tool or function in preview >> Yeah, I guess you can get you can get to it through preview, but but it's not really what you do in preview when you come when you resize the image. It's something else. It just has the ability to Well, I'll show you Can you show me your your desktop cuz there's like a million things that you can do on your Mac that I I just did I didn't know. Like bring up a bring up any image on your um Okay, I just did that one. >> it's a if it's an image if it's like a simple image, it would be better. Like a simple graphic. Uh well, I have a watch image. Would that work? Uh yeah, yeah, actually yes. That might be perfect. Okay, right click on the watch image. Oh, just right click on it without open? Yeah, yeah, right right click on the watch watch image. >> All right, yeah, okay. Yeah, it's huge. It's like yeah. Click where it says quick actions. quick actions Click where it says uh remove background. No, for real? What? It does it instantly. >> What? Isn't that crazy? Wait, when did they add that? >> It I did it I don't know. I [laughter] just saw it the other day and I was like, "What? I'm going insane here." I go to like four websites that just remove [laughter] the background and I have to pay for the for the high resolution version. That's crazy. Well, there's a there's another tool that's not there. It's like internal to the Mac through like it's like an image processing script that the Mac has. Mm. Anyways, you get a folder of pictures. You tell Claude, "Compress these images." It just does it in like 2 seconds. >> Oh, wow. Like it doesn't have to upload or anything. It just runs it through like a script that the Mac has. >> And it it just um it just it just creates a copy of the file that's like 70% smaller. That's Cuz what I what I used to have to do was like upload them all to like a image compressor website and then re-download them. Um Something else that I do a lot uh I don't know if you know this one. Did it Oh, did it finish? Okay, let's see. Okay, let's open this in Oh, no, let's just keep it here. All right. I mean, it looks much better. Where is the pictures? But Oh, look. That's cool. Let me open this in a new tab. >> That's close. >> Let me open this in a new tab so that you can see it. I mean, it looks so much better than this. Uh Yeah, okay, let's see. Let's see. Okay, it looks good. This is already such an improvement. I mean, it's so good. It's a little bit too minimal. I think it didn't really capture the uh images how you asked it to, right? No, it didn't. I wonder what uh What? See, how would you Does it give you Now, where does it give you the option to kind of give it the feedback? What? How do I exit out of here? Oh, just escape. Never never. Um okay, so yeah, what do you want changed now? Um yeah, it's >> Overall it's not too Oh, we have the tweaks. We have the tweaks. Here's the tweaks. >> Okay, let's see. What options do you get on the tweaks? Uh Okay, do you want it to be split photo? That's kind of cool. Interesting. Okay, that's fun. It's a little bit more whimsical. >> Fur is going to fly. That's not good. Uh Too much. You like this one? That one's probably the best, maybe. Yeah. What are the color palettes? You got barely they barely Oh, that was kind of cool. They messed up on here, but You know, I'm not seeing the blue. We Didn't we choose one that had blue? Did it use the blue? Tweak >> for anything? No, did we use the blue? I can't remember. Compact. Okay, the tweaks are okay. I mean, I didn't even ask for tweaks. But, what's your overall thing? If this is for a client, what would How would you want it to be actually? >> I would feel like it's it's a little bit too plain and the hero section is like too boring. All right. Send. All right, we'll wait for that to work. Let's see what Hacker News had to say about it. Now, these people are usually Uh you got the YouTubers on one side that are just like super happy, everything's going to be amazing. And then you got Hacker News on the other side where everything is doom and gloom and everything sucks. And then we got us in the middle. Um What are they saying? Oh, god. >> Wow, this website looks like I know, it's probably this. >> right? Uh they're saying a bunch of boring and too much Stuff. This won't replace Figma or designers. They say, but they're crazy. They're crazy. It will. >> Well, here here's I think it's going to replace a lot because the same it's going to replace I would say the the entire mid-level to to low level end of the market. Like unless you're like a big brand that's going to pay like a team of designers to go and like make the make the button and make the face >> you're you're going to get destroyed by somebody who is who's not doing all of that and can move way faster. Yeah, and also um what's going to happen is uh By the time you get there, the I'm sure the tools will get This is the worst the tools will ever be. Exactly. >> The tools will get good enough to to the point where >> And who can move faster, Claude or Figma? Like, it's obvious. Okay, hang on. I'm going to I'm going to send you something right here. Are you ready for this? This isn't good for design. But, it is good for design. That's crazy. Like, if you read a blog If a beginner reads a blog and's like, "This is not good for design." This is This is a million times better than this. A a billion. And and and here's what I think. I think whatever tool lets me get my idea from my mind outside of my mind the fastest, that's the best tool. Right. >> Like Like, okay, I can sit here for 2 hours and make the page with Elementor or I can just explain the page and then the AI can get it 80% right and then I can explain it again and it gets to 90 and then I can explain it again and it gets to 99 and then, you know, 6 minutes later I have what I wanted. Yeah. Which is what I Which is what Claude is doing. Exactly. But, what do you do while you wait for the AI? You have to open up another terminal and then start >> use another AI to How many do you do at once? Oh, yeah, tell me tell me. Usually the most I'll have is like four. And then I get the the What I notice is I'll start putting the prompts into the wrong one even though I have them color-coded. And then I'll start breaking the >> [laughter] >> I'll start breaking the websites. You know what I started doing to make it more organized and I hate to even say this No, I don't hate to say it, but um I started using Oh, can you see this new screen? It's black screen. >> Uh yeah. Yeah, yeah. I started using this um I don't know if it's too big. >> Is this What is it What am I looking at? This is the Claude desktop. Hold on. Hold on. Let me Let me go to the other screen. One second. Sorry. Okay. I started using this because look, I have my father-in-law's website. I have this program that we're using right now. I have the tyler.com in it like tabs it all and then it's just kind of it actually is easier. >> Can you switch between them and then like put in a prompt? Yeah, yeah, exactly. You put a You put a prompt in here and then here >> is it Is it essentially like a bunch of terminals open? Exactly. All the terminals open just organized over here. Oh, wow. Yeah, because I have >> And And then they have different things where you can like do things and you can click on a file and you can actually edit the file if you want to. Is there Is there any limitation on this versus versus just having it raw in the terminal? Um >> Like is there Have you Have you hit any wall where like you can't >> But, so this is identical to typing into the terminal. It still goes into the files. It still do everything. >> Ident- identical. Identical. So, this is the Claude desktop app and you can like chat or you can do code work or you can do this and I just stay in code. >> I I don't know if they fixed this yet, but it I think it doesn't have memory, right? Between code and chat like you can't be on the chat asking about your code, right? >> But, I wonder now cuz it's like in the same I've tried it and the last time I checked it doesn't They're like separate memories. I wish it did because sometimes I just want to talk about a project and I don't need work on it. I need to like ideate on it. Sometimes I Uh I tell it to make me like a PRD? Is it PDR? PRD? Meaning? What's that? A product requirement document. Like I Mm. I tell it Like I have a conversation with it. I'm like, "All right, now make me a PRD." And then it makes me like all of the steps and the user flow and everything that I've been discussing with it into one document and then I just copy it over and I like paste it into the into the code. >> Got you. And that way it doesn't it doesn't miss any of It like tells you the steps that you have to go through. >> Exactly. And all the code and the scaffolding and, you know, whatever the >> [laughter] >> good it should do. Yeah. >> [snorts] >> Yeah, this I mean, it's amazing what what you can do with it. Yeah. It's crazy. Okay, so And then um What happened here? All right, let's see. Uh-oh. Let me in a new tab. Oh. Oh. Ooh. What did it do? Uh Where pet Where pets come to Where pets come to fluff. Sparkle. Sparkle. >> [laughter] >> Beam. And this is kind of fun, though. >> This is fun. >> [laughter] >> Look at the little little >> is up here. This is cool. Like the >> derpy star. Uh I kind of I kind of like this idea. I kind of like I kind of like that the that it made like a little mouse SVG and it's like all wonky. Uh Yeah. Or this >> And the star [laughter] the star is all like It's like >> [laughter] >> I wonder if it did it I wonder if it did it on purpose to be fun or if it just couldn't >> [laughter] >> Yeah, what is this? Is this a dog? I think it's a mouse. >> No, it has to be a dog. >> It's got to be a dog. Why would they have [laughter] a mouse? It looks like a mouse to me. It's got a paw back there. >> Okay, okay, okay. Oh, that's funny. Um All right. Yeah, it's not showing up here. >> It's still going. It's still editing. It says editing the CSS. Oh, it's checking its work. Okay, hang on. Let's give it Let's give it a chance. Maybe it needs a little bit more time. And uh Did it make the same pages? Let's see. We had our services, gallery >> Oh, oh my god. Look, it made the services pages and stuff, though, too. Now, did it create the same services or did it make up like Did it actually go and read the website? >> Well, what do we have on the services? For example, we should have like uh Jeez, I can't even look at the website. >> treatment like flea treatment. We have cat cat grooming. No, I don't see flea treatment. I think it didn't go through all the pages. Like it didn't You got to >> have It might have not recognized the navigation, frankly. >> [laughter] >> This is kind of navigation. It might have been Well, there's like four images here of a dog here. I don't know if that's the navigation. Uh this is cool, though. I like the way this would be set up. Oh, the Bento grid. Well, it did have a gallery. See, now in a perfect world what I would want is for it to pull the images from the customer's website and plug them into the Exactly. But, you can if Okay, so and then we could do that next if we can like pull it into Claude code really easily. That That's what I'm saying like the It looks like the design tool it's kind of to give you a concept. >> Exactly. I don't think And And then you tweak the concept and then And then it's just it's like pure HTML. Right. Right, right. But, I think Claude code still gets you to the finished product in one >> Right. But But, I think this is good if like if you're not technical, if you're scared of the terminal, and you want to do a design >> Or if you just want to like make the design and visualize whatever you're doing first. Right, you can go in there, tweak the font, adjust it, then export that, and then Claude already knows that you want this font and >> you can draw on it, you can edit it, you can comment, you know. Right, that's what I'm saying. >> can make a comment and then comment comment comment comment comment and then go to all the comments and then send them all to Claude at the same time. Yeah, that the way a person would give you feedback on the on anything. Right. Yeah, so that's what I was thinking it would be cool if like clients could like go and comment comment comment comment and then you just go back and be like, "Oh, send." >> [laughter] >> Send. That's the one part that the send is behind an admin section. >> [laughter] >> Only admin can click send. Uh Okay. >> Now, this is this can design It looks like It looks like it can do a website. It can do a website just fine. Uh but I think it's it's more for like um like presentations, right? Yeah, should I see >> See, presentations? Open the uh Oh, before you do that, I just I just want to see I sent you an image. Okay. I sent you an image. Oh, funny. >> There it is. And I want you I want you to tell the put this image on the right-hand side like the dog is kind of coming out of the hero section a little bit. And I want to see if it would do what a person would do, which is like it's going to It should draw the edge of the hero section under the paws. Wait, so where do you want it? Imagine the hero section. I I can't do this cuz my camera will go crazy. Imagine [laughter] the hero section. Imagine the hero section, right? I want the dog to kind of be like pawing looking over the hero section, kind of popping out a little bit. Well, yeah. Um See, but how do I tell See how you tell that to Claude? Like you can't show Claude this. Uh um Claude. Hold on. Okay, um where where on the hero section? Uh right side of the hero section. Hold on. Let me open this in a new tab cuz this is looking weird. Why is this happening? It's falling apart. It is falling apart. Oh, there it goes. Okay. So, I want it right right here? Yeah, remove that that little card. And then just have Scroll down a little bit. Is there an end to the hero section or it just flows? There's an end right here. It kind of just flows in. >> Yeah. Or here. Oh, no. That all flows in. Here. We could put the dog right here. You'd have to be like uh place this dog overlapping one of the sections so that it like it looks Do Do it in the hero section and just say like like it's popping out of the hero section. The hero section should have a bottom. To you know, give the effect. >> And I want to see if it'll if it'll uh do that. >> Okay. I'm going to try my drawing skills. And I think I think that is like the human touch, right? Like the AI would never generate that probably by itself, you know? >> Right. So, I think those are the Those are the creative things. See, cuz I feel like with AI you can be more creative because with Elementor I would've been like, "That's really difficult to make. I'm not I'm not going to like >> do it. I'm not going to build that. >> be really difficult, too. But >> [laughter] >> But I feel like I can do it. I feel like uh maybe not If not here in Claude code, in Claude code for sure. >> I think here would be good. Yeah, like it's just like a a little 3D object kind of popping out of a section. I'll put a doggy here. Wait, what did that dog look like? Okay. I'm [laughter] going to put his paws over it. Hold on. He's a little squished. I mean Yeah, add the face. I think the AI will If you draw like a little eyes and a and a nose and a mouth, the AI will [laughter] understand like This is a an animal here. Not even the AI could understand what I'm doing. >> [laughter] >> Draws a bone. That's a horrible dog. I'm so sorry. >> [laughter] [laughter] >> Oh, man. This is turning out really good. Okay, where's the mouth? >> [laughter] >> Where's the mouth? Where's the mouth? He's smiling. He's like, "Hi." Hi, buddy. Okay, perfect. >> It's got a little tiny >> Okay, I mean I would As a human I would understand it. Okay. And how do you how do you how do you also give it the image? I don't know. Let's see. Uh-oh. Okay. I drew a dog. What? Oh. >> [laughter] >> What am I supposed to do? Hold on. Type anywhere to add a note. Okay, okay. I got you. No. Damn it. Why is this note here? If I delete this Uh It's going to delete your dog. Okay, comment. I I have a note down here, but >> [laughter] >> I don't >> it? >> I don't know what to do with it. Uh I can't drag it. Type anywhere to add Can you uh yeah, I think we're going to have to No, I'm not redoing the dog. >> [laughter] >> It took me forever. Just click send. And then click send there and then >> [laughter] >> hopefully it understands. Oh. Oh, okay. Okay, what was missing? What were you missing? >> I don't know. I drew this dog and put the real dog in the chat. It was a PNG. I want him to go over this section with his paws over it. Yeah? Yeah, it's a dog instead of doc. >> [laughter] >> It's like, "You did not upload a doc." Yeah, it's going to get confused. I drew a dog. >> then I think I I think I would hit send on the chat first. Okay. And then on the here you got to click before it gets [laughter] confused. No, it's doing it. It's shelling. But But the dog You never sent the dog. The actual graphic of the dog is Oh, damn. >> [laughter] >> It's like, "Where's the dog? Find the dog." Okay. Let's see. The attachment isn't the product Let me check the Oh, yeah, I think you're right. Damn. Damn [laughter] it. All right, let's see what it does. Perfect. A chow chow with a transparent background. I swapped the actual Put this real photo. Okay, cool. Okay, okay, okay. All right. That'd be pretty impressive if it could do it. That I would be surprised. I think it's going to place it in the wrong place cuz I I did notice that when you were scrolling like what you drew was not attached. [laughter] It wasn't attached to the section. >> no. I think it was. I think it was. Look. Uh Uh uh Oh, like it takes a little screenshot of that moment. >> see it? Yeah, yeah, it's on the right top. Okay. >> Wait a minute. Is it taking It's just taking a screenshot and uploading it to itself. Yeah. >> [laughter] >> It's not like actually understanding what you drew as you're drawing it. >> [laughter] >> Oh, man. >> I'm already on the $100 plan. Oh, this is the best part. >> [laughter] >> No. >> When When does it reset? How much time do you have? 15 hours? >> 24 hours. Wait. Claude code resets in in 5 hours, though. Maybe cuz this design thing is new. All right, end of the video, guys. Thank you. >> [laughter] >> Click next and see if this thing will finish its loading the dog. Uh it did a good job, though. Let's see. Let's see what it did. Damn, that That sucks. Okay. To To be fair, you you you were using it before like today. >> Uh okay. It's sort of It didn't get it quite right, but I think I feel like Wait, if I refresh this Oh, it put that there. Oh, wait. Now I can edit it. Let me edit it. Oh, look. It it it replaced the little cart cartoony dog with like the actual dog. >> Uh So, not exactly what you wanted, but I can make it bigger. Maybe the dog was on its way to the correct section and you ran out of credits. Yeah. [laughter] It was like moving it down. >> be like, "Wait a minute. It doesn't belong there." Uh damn. We came close. We came real close. Um Okay. >> I mean This is the This is the problem with Claude code, you know, like you become dependent on it. I know. >> And with with without it, not only does your project falls apart, but also the video the video content >> Your business just doesn't work. You're like, [laughter] "I don't know." I mean listen, once you have like all your projects and all your softwares like everybody builds all their their own software on Claude code and then >> Sorry. >> Yeah, and then Anthropic is like, "Hey, by the way, it's 500 bucks a month now. What are you going to do?" Yeah. Right. What are you going to do like not have not run all your software that you built yourself? You know, like But then I hopefully there'll be a competitor like OpenAI is doing their Codex and you'll be like, "All right, I'll just use this one." Have you used Codex? >> No, I haven't because I hear mixed things about it. I don't really like Sam Altman's weird. You ever see an interview with him? He's kind of a weird dude. Yeah, he's like a he's like a he's giving like the old version of Mark Zuckerberg where they were kind of like Yeah, he was He needs to go surfing like Mark Zuckerberg. >> Yeah, yeah. Get cool. Get some jiu-jitsu. Um But yeah, the Claude code will like optimize all the images of your step dad's not your step dad's your father-in-law's website. Yeah. Per And it'll do it like in like it'll do like a 100 images in like 2 seconds. It's crazy. Because of the the Apple thing. Yeah, cuz it it's not actually uploading or downloading anything. It's like running a a computer script that just like And it does it cuz all of them the compression's good cuz sometimes I've noticed was compression is like uh Well, what I've noticed whenever I use like an online compressor, like a compressing website, if I compress it one time, it'll go from like 1 MB to like 500 500 uh KB, which is not that good. I still want it I would have wanted it to be as small as possible. And then if I try to recompress it, like it already did all of its work, it's not going to get any smaller than that. Uh but with this, you can tell Claude how much compression you want, but by default, I think it does 70%. So, worst-case scenario, um it'll be 70% better. But you don't actually have to do anything, like if you have his website locally, like you have it locally on a folder, >> Mhm. just tell it like, "Here's the folder. Uh optimize all the images, and then re-upload it to the website." Yeah. It'll just do it. You don't You don't have to like You don't have to like break the website or mess with the website or or like find all the images or anything like that. It'll just get that It'll get the URLs that are on the website, optimize them, and then put them back in there. Nice. Yeah, like if you check check this out. That's another thing with the speed. Go to PageSpeed.com. Not PageSpeed, like the Google PageSpeed test, whatever it's called. PageSpeed. Yeah, that's what I I went here and I put it in his in his thing. Okay, what what does it say right now? Uh It's the image >> way faster. It's But it's probably way faster than it was when it was uncompressed. >> But I've achieved like 100 or 99 scores or 100, like 99 100 100 on everything for other sites, but I've just I wanted to launch super quick. So, this is probably going to give like a 70 or something. But it's only the images that are messed up. >> That are holding it back. Yeah, yeah, yeah. So, >> the excessive performance because look, the images are That's like 5.6 MB. Uh uh uh uh uh uh uh uh uh uh And listen, to be fair, when Google does the the mobile test, it does it like over 3G or like it does it over like worst-case scenario. Mhm. Um So, it's okay. The SEO >> desktop Desktop will probably be like near 100 like really It should be like significantly Oh, that. Yeah, the images are holding you back there. Yeah. No, it depends. You can redo it again, and it'll give you a different score. Slightly different? Yeah. What do you >> Check my website there. Oh, sorry. No, on the on >> here and buy. Go [laughter] here. Sorry. I don't know what I'm doing. It's too late for me to be thinking. The Claude does not work. You're all out of thinking credits. >> Yeah. >> [laughter] >> The tokens have ran out. Also, in my brain. All right, let's see. >> want me to send this to you or no? Um Yeah, you know, send it to me, and then I'll see how long it takes me to get the uh The cool thing about this is let's say you wanted it locally, I'll show you that way first. Okay, I'll show you that. So, you export Do Do you think Do you think that this burned through your credits really fast, or do you think you >> I don't know if this has different credits than my other one because they're supposed to re redo every 5 hours, and this says try again in 20 >> could be maybe because it's new, it has like a limit on it. You can check your um You know how to check it? Your like usage? Uh no. Not the command line. Let's see. >> If you If you go to like your like your chat your uh terminal. Uh I just do it If you go to your account, hang on, let me see because Wait, I think I have it somewhere. Let's see. Let me see what the URL is. Oh, look. Plan 100%. Where is it? >> Done. Right here. Oh. Oh, but you're like Opus 4.7 extra high maximum plan. >> [laughter] >> I can't think. I want it to think for me. Are you crazy? >> You are You are burning Okay, but what you do What would you do? It's kind of cool. You take this, and you press export, and you export out to Claude, and then you copy this command. And then you just It knows to like >> you paste it back in there, and it takes the exact design, and it copies it locally, and puts all the stuff in there. And now, I saw that you can also You can also export it to Canva. So, if you wanted to like I don't know I don't really know I don't use Canva though. >> to themselves? Well, it's like, "Hey, listen. I I I I I I I I I I I I I I I I I I I I I I I I I >> Adapt or uh But I mean, listen, it's a better to be with them than against them, I guess. You know? Oh. Sending to Canva, but it's not going to because I hit my usage limits. But why? Why Canva stupid? >> Yeah. You can't I guess I don't know. Maybe I think if you have a Maybe if you have If you want If you have your own graphics in there or something, I don't know. Uh Yeah, so mobile mobile's rough. And look, my my own is like Yours is really good. Yeah, and still get to 66. I think it's my internet. Or no, it's internet. Something's going on. Anyways, uh Cuz I know that I know that my website is like under a megabyte, I think. It's so fast. And listen, if you go to Tyler.com, it's the fastest website. >> [laughter] >> It's just like bam. Woah. All of this stuff has to load all of the has to load all of the Listen, Tyler, what you need to do is you need to locally load the those those fonts for the those four words. >> Oh, that's where I messed up. Yeah, you're having it like call Google Google fonts. >> really? I wonder if it does. Is it? Yeah, it does. I had I had to do it to to fix my website. I I locally I had the fonts uh load locally. Uh >> Is mine not local? It probably By default, it go it gets them from the um Google font uh uh server or whatever. No, I don't have any Google font server. Oh, then then you might have them locally. Wow. What? My core vitals failed. Failed. What is going on? Oh Oh, no, no, no. I guess That's weird. >> See, but See, but see, look, your your website is literally four words. And it's at 86 86%. You have to have a blank website with no content on it. Fail. What is this? Core vitals failed. That's hilarious. You know Google's own website is messed up, too. If you put in Google.com, it's [laughter] like not very good. >> No, it's like a it's like a not optimized, too slow. This goes to show [laughter] >> It's something going on. Something's going on with their site. >> I I think it might be it might be your computer. >> [laughter] >> It's You ran out of tokens, so >> out of tokens. I ran out of life. Imagine like a robot's cleaning your laundry, and it just stops. You're like It wouldn't even do this. Uh You're getting a You're getting a robotic surgery, and your your heart is >> [laughter] [gasps] >> You're like, "Put in more." You know, I saw a story where they actually had AI AI-powered like robots like helping with like helping surgeons, and the ones where they used AI had a higher uh injury rate. For uh >> What? Really? Yeah, yeah. And I don't know if it was just the AI I didn't read the whole article. So, I don't know if it was the that the AI was like doing a bad job, or that the doctor was like maybe like too lax, like just like you know. And uh >> Fix him like what I do. Fix him. Fix website. >> The heart needs to be fixed. >> [laughter] >> Save Save person. >> Save person. Person good. >> [sighs] >> Um All right, should we call it? Yeah. Well, that was a good demo. I think everybody who saw the video gets the idea of like how the tool works. I think it's pretty cool. Uh I think it's way better than Elementor and way better than WordPress as as far as like how easy it is. Yeah. Listen, as long as you don't run out of tokens, >> [laughter] >> you're good. >> You're okay. You're good. But I've been I've been coding all day with it, so um and then I hopped on. And I was thinking about that when I was making my games and stuff. I was like, "Oh, wait. I should probably >> [laughter] >> I should stop." But I can't stop. It's like an addiction. Yeah. So, but yeah, there's been times where I'm creating like three and four websites at once, and it it lasts pretty good. Like you have to really be Yeah. I've only ran out a couple times. I've ran out two other times, and I've been using it for months. And then, you know, they go offline like once a week, but that's a separate issue. Oh, yeah, for sure. You're going to get spotty connection with them. But Yeah, I mean, I think you guys can let us know any other topics you guys want us to cover. And if you guys have used Claude Code, you can talk about it in the comments. >> Yeah, we're going to we're going to be doing this weekly, um also, and the schedule should be on Tyler.com/live. Um And yeah. Talking >> We can try We can try to be on here again next Friday if you want. Yeah, that sounds good. Sounds good. All right. [snorts] All right. All right, everybody. Bye., Claude Design - Figma Is Dead, YouTube, 01krc6qhzcgxkty0w3gge7nqpf.