Claude Design - Figma Is Dead - CourtneyR.dev's 2nd Brain

Claude Design - Figma Is Dead ![rw-book-cover](https://img.youtube.com/vi/iaASVi-cFGk/maxresdefault.jpg) 🔗 **Source:** [Claude Design - Figma Is Dead](https://www.youtube.com/watch?v=iaASVi-cFGk) > [!note]+ Document Notes > tags: #ai #figma #web-design #claude #design-tools > author: Tyler Moore > source: YouTube > reference: https://www.youtube.com/watch?v=iaASVi-cFGk > date created: 2024-12-19 12:00 > > # 🏷️ Title: Claude Design - Figma Is Dead >  ## 🧰 Action Inbox - [H1] Test Claude Design's export functionality to Claude code — full workflow validation #web-design - [H2] Compare Claude Design vs traditional Figma workflow — speed and quality metrics #productivity - [H3] Explore multi-project Claude Desktop organization — tab management strategy #workflow ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Claude Design](https://claude.ai/design) - [Tyler Moore Live](https://atyler.com/live) ## 📝 Summary - Tyler Moore and Emmanuel demonstrate Claude's new design feature live, comparing it to Figma - They redesign a pet grooming website using Claude Design's visual tools and drawing features - Key features include visual editing, commenting system, tweakable elements, and export to Claude code - Figma stock dropped 6% on announcement day, suggesting market concern about AI disruption - Tool offers middle ground between pure prompting and manual design work ## 📖 Main Content Claude Design represents Anthropic's entry into visual design tools, positioning itself as a potential Figma replacement. The tool combines conversational AI with visual editing capabilities, allowing users to sketch, comment, and iterate on designs before exporting to code. The demonstration shows a complete website redesign workflow, from initial prompts through visual refinements. Claude Design provides guided onboarding, asking users about style preferences, color directions, and layout types before generating initial designs. Key differentiators include the ability to draw directly on designs, add contextual comments, and use predefined "tweaks" for common adjustments. The tool integrates with Claude's broader ecosystem, allowing seamless export to Claude Desktop for further development. Market reaction suggests significant concern about AI disruption in design tools, with Figma's stock price reflecting investor anxiety about traditional design software's future viability. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/iaASVi-cFGk?t=0) — [H1] Live demo introduction - Key idea: First live demonstration of Claude Design on announcement day - Evidence: "This is our first live thing that we're doing... this came out just today" #### ⏱️ [02:45](https://youtu.be/iaASVi-cFGk?t=165) — [H2] Market impact and positioning - Key idea: Claude Design positioned as Figma killer with immediate stock market impact - Evidence: "Figma stock today, it's gone down 6% and over 6 months it's gone down 66%" #### ⏱️ [04:30](https://youtu.be/iaASVi-cFGk?t=270) — [H1] Drawing and sketching capabilities - Key idea: Users can draw directly on designs for visual feedback - Evidence: "I sketched this out and this is really good. I obviously went to art school" #### ⏱️ [06:15](https://youtu.be/iaASVi-cFGk?t=375) — [H2] Visual editing vs pure prompting - Key idea: Tool provides visual controls alongside conversational interface - Evidence: "Instead of having to do a prompt, it's almost like they have their own visual builder" #### ⏱️ [08:00](https://youtu.be/iaASVi-cFGk?t=480) — [H3] Commenting and collaboration system - Key idea: Comment system allows contextual feedback without complex prompts - Evidence: "You can press comment and then so you can comment on all these" #### ⏱️ [10:30](https://youtu.be/iaASVi-cFGk?t=630) — [H2] Tweaks system for common adjustments - Key idea: Predefined adjustment categories speed up iteration - Evidence: "What tweaks do you want? And then I was like, 'Oh, colors and typography'" #### ⏱️ [12:45](https://youtu.be/iaASVi-cFGk?t=765) — [H1] Export and integration workflow - Key idea: Seamless export to Claude Desktop for development - Evidence: "You can export this and then it just gives you... you put it into Claude desktop" #### ⏱️ [15:20](https://youtu.be/iaASVi-cFGk?t=920) — [H3] Game development demonstration - Key idea: Tool works beyond websites for interactive applications - Evidence: "I made a retro jumper... has sound, also... 10 minutes, maybe" #### ⏱️ [18:00](https://youtu.be/iaASVi-cFGk?t=1080) — [H1] Guided onboarding process - Key idea: Custom onboarding questions eliminate blank page problem - Evidence: "It's generating like a little onboarding for us... custom onboarding here" #### ⏱️ [22:30](https://youtu.be/iaASVi-cFGk?t=1350) — [H2] Real image integration vs placeholders - Key idea: Tool pulls real images from Unsplash rather than using placeholders - Evidence: "It got it from Unsplash before I didn't want to make an image... Put in an image" #### ⏱️ [25:15](https://youtu.be/iaASVi-cFGk?t=1515) — [H3] Website redesign project workflow - Key idea: Complete website redesign from URL to finished design - Evidence: "Redesign this website... that it is modern and looks amazing" #### ⏱️ [35:40](https://youtu.be/iaASVi-cFGk?t=2140) — [H2] Multi-project organization with Claude Desktop - Key idea: Claude Desktop app provides better organization for multiple projects - Evidence: "I have my father-in-law's website. I have this program... just organized over here" #### ⏱️ [42:00](https://youtu.be/iaASVi-cFGk?t=2520) — [H1] Creative possibilities vs traditional tools - Key idea: AI enables more creative approaches by reducing technical barriers - Evidence: "With AI you can be more creative because with Elementor I would've been like, 'That's really difficult'" #### ⏱️ [48:30](https://youtu.be/iaASVi-cFGk?t=2910) — [H3] Credit limitations and usage - Key idea: Heavy usage quickly consumes Claude credits - Evidence: "I'm already on the $100 plan... Plan 100%" ## 📚 References - [Claude Design](https://claude.ai/design) - [Tyler Moore Live Stream](https://atyler.com/live) - [Figma Stock Performance](https://finance.yahoo.com/quote/FIGMA) ## 🗣️ Paraphrase - Claude Design combines conversational AI with visual editing tools, allowing users to sketch and comment directly on designs while getting AI assistance - The tool threatens traditional design software by offering faster iteration cycles and eliminating the need for complex technical skills - Market reaction suggests significant disruption potential, with Figma's stock price reflecting investor concerns about AI competition in design tools ## 📰 Newsletter ## ✅ Action Items #### WordPress - Design: Evaluate Claude Design for WordPress theme prototyping and client mockups - Community: Share Claude Design experiments with WordPress design community - Training: Create tutorials on AI-assisted WordPress design workflows - Documentation: Document best practices for exporting Claude designs to WordPress themes #### DevRel - Developer advocacy: Demo Claude Design integration with WordPress development workflows - Education: Workshop on AI design tools for WordPress developers - Developer experience: Test Claude Design export compatibility with WordPress tooling - Community management: Moderate discussions about AI impact on design roles ## 🧪 Hypotheses - Claude Design will capture significant market share from mid-level design tool users within 12 months - Traditional design software companies will need to integrate AI features or lose market position - The combination of AI design and AI development will create new workflows that dramatically reduce project timelines - Visual editing interfaces will become standard for AI design tools across all major platforms ### 📊 Methodology - Compare design iteration speed between Claude Design and traditional Figma workflows - Survey WordPress developers on AI design tool adoption and barriers - Track market share changes in design software sector over next 12 months - A/B test client satisfaction with AI-generated vs traditional design presentations ### ❓ Questions - How will traditional design agencies adapt to AI-accelerated design workflows? - What happens to design system creation and maintenance with AI design tools? - Can Claude Design handle complex enterprise design requirements and constraints? ### 🔮 Future Research - Integration possibilities between Claude Design and WordPress theme development - Impact on design education and skill requirements in AI-augmented workflows - Evolution of design collaboration when AI becomes primary design partner ### 💡 Implications - Practice: Design workflows may shift from creation to curation and refinement - Policy: Need for new guidelines around AI-generated design intellectual property - Security: Client data protection when using cloud-based AI design tools - Education: Design curriculum must incorporate AI collaboration skills - Funding: Traditional design software licensing models may become unsustainable ### 🧠 Learning Styles Assessment Reading level estimate: 8th-9th grade #### 👀 Visual learners - Present: Live screen recording shows visual interface and drawing capabilities - Improve: Side-by-side comparison diagrams of traditional vs AI design workflows #### 🔊 Aural learners - Present: Live commentary and discussion throughout demonstration - Improve: Separate audio track explaining key concepts without visual distractions #### 🗣️ Verbal learners - Present: Clear explanations of features and conversational problem-solving - Improve: Glossary of AI design terms and analogies to traditional design concepts #### 🧩 Kinesthetic learners - Present: Hands-on demonstration with real website redesign project - Improve: Step-by-step checklist for viewers to follow along with their own projects #### 🧠 Logical learners - Present: Market data and systematic feature comparison - Improve: Decision tree for when to use Claude Design vs traditional tools #### 🧑‍🤝‍🧑 Social learners - Present: Two-person discussion format with different perspectives - Improve: Community challenges or group projects using Claude Design #### 🧘‍♀️ Solitary learners - Present: Complete workflow demonstration for independent practice - Improve: Self-assessment rubric for design quality evaluation #### 🌿 Naturalistic learners - Present: Real-world business problem (pet grooming website) - Improve: Case studies showing Claude Design impact across different industries ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Video has spoken narration throughout - Improve: Detailed alt text for visual design elements shown on screen #### Keyboard navigation - Present: Demonstrates various interaction methods - Improve: Specific coverage of keyboard accessibility in Claude Design interface #### Contrast and readability - Present: High contrast in demo interfaces - Improve: Discussion of accessibility considerations in AI-generated designs #### Text resizing and reflow - Present: Web-based interfaces shown - Improve: Testing of generated designs at various zoom levels #### Media and captions - Present: Live audio commentary - Improve: Captions for all spoken content and visual descriptions #### Forms and interactions - Present: Shows form elements in generated designs - Improve: Accessibility testing of Claude Design's form generation ### 🌍 DEIB Assessment #### Cultural breadth - Present: Pet grooming business represents small business sector - Improve: Examples from various cultural contexts and business types #### Inclusive language - Present: Casual, approachable discussion style - Improve: Acknowledgment of varying technical skill levels and learning needs #### Neurodiversity support - Present: Multiple explanation approaches (visual, verbal, hands-on) - Improve: Structured timestamps and clear section breaks #### Representation - Present: Two different perspectives and experience levels - Improve: Discussion of accessibility features in AI design tools #### Psychological safety - Present: Honest assessment including limitations and failures - Improve: Explicit encouragement for experimentation and learning from mistakes ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Market impact reasoning (Figma stock drop) supports disruption claims - Inductive strength: Single demo extrapolated to broader industry impact conclusions - Causal reasoning: Clear connection between AI capabilities and traditional tool displacement - Analogical strength: Comparison to historical software disruptions (Elementor evolution) #### Fallacies - Hasty generalization: Single day stock movement used to predict long-term market trends - Appeal to novelty: Assumption that newer AI tool is inherently better than established solutions #### Tone of voice - Overall tone: Enthusiastic but grounded, with honest acknowledgment of limitations and credit usage issues ### 🛡️ DARVO Analysis - Deny: No problematic denial patterns observed - Attack: No attacks on accusers present - Reverse victim/offender: Not applicable to this content - Emotional cues and rhetoric: Genuine excitement about technology capabilities balanced with practical concerns ## 🎯 Conclusion Claude Design represents a significant step toward AI-native design workflows, combining conversational AI with visual editing capabilities. While the tool shows promise for rapid prototyping and client collaboration, questions remain about scalability, credit costs, and integration with existing design systems. The market reaction suggests real disruption potential, but long-term success will depend on addressing enterprise requirements, collaboration features, and cost-effectiveness. For WordPress developers, this tool opens new possibilities for rapid theme prototyping and client presentation workflows. The demonstration reveals both the power and limitations of current AI design tools, highlighting the importance of managing expectations while exploring new creative possibilities. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] AI design tools disrupt traditional software markets > [!quote] [Claude Design - Figma Is Dead](https://www.youtube.com/watch?v=iaASVi-cFGk) by [[Tyler Moore]] via [[YouTube]]. Published 2024-12-19. Accessed 2024-12-19. > "Figma stock today, it's gone down 6% and over 6 months it's gone down 66%" Market data shows immediate investor concern about AI competition in design software sector. [view highlight](https://youtu.be/iaASVi-cFGk?t=165#H1) #xref #articleseed ID:rw_claude_design_market ### [H2] Visual feedback improves AI design iteration > [!quote] [Claude Design - Figma Is Dead](https://www.youtube.com/watch?v=iaASVi-cFGk) > "Instead of having to do a prompt, it's almost like they have their own visual builder" Drawing and commenting directly on designs reduces communication friction with AI. [view highlight](https://youtu.be/iaASVi-cFGk?t=375#H2) #xref ID:rw_visual_ai_feedback --- ### 🔖 Atomic Split Pad (Zettel Candidates) #### [Z1] AI enables creative risk-taking in design - Scope: When technical barriers are removed by AI assistance - Pointer: 42:00 timestamp discussion - Links: [[Creative-Constraints]] [[AI-Empowerment]] #### [Z2] Visual interfaces reduce AI prompting complexity - Scope: Design tools that combine conversation with direct manipulation - Pointer: Multiple instances of drawing and commenting features - Links: [[Human-Computer-Interaction]] [[AI-Interface-Design]] --- ### ✏️ Fleeting Queue - [F1] Test Claude Design credit usage patterns — compare to other Claude interfaces #fleeting #inbox - [F2] Explore Canva export functionality — understand file format compatibility #fleeting #inbox - [F3] --- ## Full Transcript [00:00] All right, this is our first [00:01] live thing that we're doing. My name is [00:04] Tyler Moore and [00:06] who are you? [00:08] My name is Emmanuel. I'm a website [00:10] designer. [00:11] Yeah. [00:12] >> And I saw I saw a a Tyler Moore video in [00:14] 2015 and I'm [00:16] I'm still stuck here. Here we are. Now [00:18] we're friends. We're buddies. [00:20] And if you guys want to be our buddies, [00:21] too, [00:22] you could go to atyler.com/live and you [00:24] guys can join in, too, which would be [00:26] crazy cuz you just pop up right here. [00:28] And we'll be like, oh [00:29] >> What's this? [00:31] Is this streaming to YouTube right now [00:32] at the same time? No. No, but Okay, so [00:36] it's live it's live on tyler.com. Yeah, [00:38] it will be live soon, but I I made this [00:41] program right here. You could see it and [00:44] um [00:45] I'm still programming it. [00:47] Or the AI is still programming it. I [00:48] don't know. [00:49] We're programming it together. [00:52] The AI is doing most of the programming. [00:53] >> Yeah, for sure. [00:55] >> [laughter] [00:55] >> I'm just like, why is it broken? [00:57] All right, today we're discussing uh [00:59] Claude's new design [01:01] uh feature. It came out just today, so [01:03] obviously we're not experts in it. We're [01:06] the only people that uh will not lie to [01:08] you on YouTube. Everyone else hypes [01:11] things up too much, but we're going to [01:12] do it live and we're going to see [01:14] if it's good or not. So, we can go to [01:17] claude.ai/design. [01:22] So, this is their new design. Have you [01:24] played with this? It only came out a [01:25] couple hours ago. I imagine not. [01:27] >> No, I haven't I have not used it at all. [01:30] I saw a video on X showing like um what [01:32] it does, which I thought it was [01:35] interesting because they they had said [01:36] that they had updated Claude to be [01:38] really good at um [01:40] graphics and um [01:42] graphs and charts. [01:44] So, I guess they expanded that further [01:45] and now it's like really good at from [01:47] what I saw it's really good at like [01:48] presentations. [01:50] Which would be nice because I've used it [01:51] I've used it to make uh presentations [01:54] for like invoices and like proposals and [01:56] things like that. [01:58] And it's [01:59] it's pretty good. It took a lot of [02:00] prompts to get it to look good, so I'm [02:02] hoping that maybe this makes it like [02:03] really good and like interactive right [02:05] from the beginning. That's what I think [02:06] it's going to do. [02:07] I played with it a little bit. It's [02:08] pretty cool. Let's check out this video. [02:11] Sign in to confirm I'm not a bot. Okay. [02:14] Um well, [02:16] that's not going to work. [02:17] Let's see. [02:18] >> [laughter] [02:18] >> Does this work? [02:20] Oh, man. Okay. Claude design. [02:24] Mm. [02:26] Look at all these YouTubers. They're [02:28] like, "It's insane. Oh my god, it's [02:30] over. Design. [02:32] Woo." That's what we don't want to be. [02:34] Um [02:35] >> [laughter] [02:39] >> Let's see if we can get the video. No, [02:41] we can't even get it. I can't [02:43] I Googled it and it's not even in search [02:45] results. [02:45] >> Yeah. Uh Uh but if you go if you go to [02:48] claude.ai/design, [02:49] it looks like it's there. Okay. Well, [02:51] we'll just, you know, Well, that's [02:52] right. Yeah. Let's see. Let's just Let's [02:54] just build something. [02:55] >> Okay. Let's skip this. Okay, let's just [02:58] build something. I built two things, a [03:00] yoga website and a game. Um but let's [03:04] build something Let's build something [03:06] else. [03:07] What do you want to build? [03:09] >> what is it because my understanding was [03:11] that it is like to design like [03:15] uh decks and slides and that kind of [03:19] stuff. Like how what what is the [03:21] difference between this and like Claude [03:23] code like designing something with [03:25] Claude code? What did they explain? [03:26] >> to give you a little bit more control [03:29] over your designs and it's supposed to [03:30] be like a Figma killer. So, if we look [03:33] at Figma stock today, [03:35] it's gone down 6% and over 6 months [03:39] it's gone down 66% and that's because [03:42] tools like [03:43] Claude did a bunch of design, but now [03:46] it's gone down 6% in a day because [03:49] they're thinking [03:51] this is just going to destroy them and [03:53] not use it at you know, they're not [03:54] going to use Figma at all. [03:56] So, it's supposed to be a Figma [03:58] replacement. [03:59] And then you can import your design into [04:02] the Claude code or Claude desktop [04:05] and start building it from there, which [04:08] I I did. So, I'll give you a couple [04:10] examples. So, [04:12] here's one real quick. [04:14] I said I sketched this out and this [04:17] [clears throat] is really good. I [04:18] obviously went to art school. [04:20] Um [04:20] >> Cool. So, is this is this part of Claude [04:23] or you making it somewhere else? [04:24] >> this is part of Claude, so you can say [04:26] you can just start drawing like you [04:27] want, you know. That's so good. [04:30] And then [04:32] so the logo is up here, navigation here, [04:34] some text, a hero image, and a and a [04:36] button. [04:38] Uh this is new. [04:40] And then we can see we have the logo up [04:42] here, navigation, text, [04:45] image, button. [04:47] And then I'll ask you more things [04:49] and then you can change it all like [04:51] that. The cool thing Yeah, go on. [04:54] >> It shows the image and everything? It [04:56] shows the image and everything. Yeah. [04:58] And it got it from Unsplash before I [05:00] didn't want to make an image with for [05:02] me. I'm like, no. Put in an image. Uh it [05:04] was like, "Do you want an image [05:05] placeholder?" I'm like, come on. [05:08] Just put the real But it doesn't [05:09] generate an image. It gets it from [05:11] Unsplash. So, Anthropic or Claude, they [05:14] never they don't have an image [05:15] generator. [05:16] They don't have [05:18] >> like Google does or or Open AI does. [05:22] Um [05:23] But yeah. So, the cool thing about this [05:25] is uh that's different than just Claude [05:27] code is that you can draw on things, so [05:31] you can click draw and you can say, "Oh, [05:33] change this. Change this." [05:34] Um something easier I found with the [05:38] whole, you know, 20 minutes I've been [05:39] experimenting with this is you can press [05:43] Yeah, an expert super expert. You can [05:45] press comment and then so you can [05:47] comment on all these. So, [05:49] you can say maybe I don't know. What do [05:51] we want to comment? We want this to be [05:52] Fahrenheit. [05:54] Make this Fahrenheit. [05:57] So, it's like [05:59] instead of having to go instead of [06:00] having to do a prompt, it's almost like [06:02] they have their own visual builder into [06:04] whatever it's developed. And it it's and [06:07] it's generating [06:08] I would assume that [06:10] it it's like generates the visual [06:12] builder for you. So, like depending on [06:14] what you're building, it's like, "Okay, [06:15] this is like these tools that you need [06:16] for this project." And they'll just [06:18] Yeah, the super cool thing is this [06:19] tweaks. So, it asked me when I was [06:22] generating this, "What tweaks do you [06:23] want?" And then and then I was like, [06:25] "Oh, colors and typography." So, you can [06:27] open this tweaks [06:29] and then you can change [06:32] this tweaks thing here. [06:34] Got you. And this is in the browser or [06:36] is this a file on your computer? This is [06:38] in the browser, but [06:41] and they made it like a bold variation. [06:43] But you can export this and then it just [06:46] gives you a [06:48] I'll show you. [06:49] Um [06:51] Yeah, I wonder is it going to export [06:52] like whatever version you're on or what? [06:54] >> this command [06:56] Oh, okay. and then you put it into [06:58] Claude desktop or Claude code. Claude [07:02] code [07:03] Claude desktop code or Claude code. [07:06] Um [07:07] And then you can take this off and then [07:09] but we can also edit it, which is cool. [07:11] So, if you edit it, you can go here. You [07:13] can go [07:17] Thanks, Spider-Man. Wow, that's a that's [07:18] amazing because normally in Claude code [07:21] you'd have to [07:22] once you have the design how you want [07:24] it, [07:25] if you want to edit it, you'd have to [07:26] tell like, "Hey, change the heading to [07:28] this." Exactly. [07:29] >> Now you can just click the heading. It's [07:31] almost like You can change the color, [07:33] too, over here. It's like, "Oh, I want [07:35] to do the brown." And then it has all [07:37] the [07:38] options over here like the Yeah. That's [07:41] amazing. Listen, [07:44] I I was not using Elementor anymore, but [07:46] this is just like [07:49] way better. This is like if you want to [07:51] use Elementor, this is like [07:53] you have those tools still if you want [07:55] to if you want to get in there and like [07:57] adjust this one thing without having to [07:58] like explain it. Right. You can just go [08:00] in there and it's like the best of both [08:02] worlds. I think it's really cool. And [08:04] then you can say, "Present this in a new [08:05] tab." [08:07] Opens up a new tab and you can see it. [08:11] Um [08:13] Yeah. So, I think that's [08:17] pretty cool. Does it you know, I wonder [08:19] if [08:21] And then of course over here you can [08:22] make all of your [08:24] changes. [08:25] Can it pull Can it pull um from a URL? [08:29] So, like for example, Yeah. [08:31] >> a like uh if I give you that link for [08:33] the [08:35] the grooming website that's really old, [08:36] do you think it would Let's try it. [08:39] Okay, let me [08:41] let me find [08:41] >> I made a I made a retro jumper, too. [08:43] This has sound, also, but I'm just busy. [08:47] You can jump over things. [08:50] I like the trees are backwards. [08:53] >> [laughter] [08:56] >> And then you can jump under things [08:57] somehow, but [08:58] uh yeah. It has cool sound, too, though. [09:00] I know you can't hear it, but [09:02] Um [09:03] >> That's awesome. And how long did that [09:04] take to make? Uh not long. I mean, I [09:07] 10 minutes, maybe. [09:09] But the cool thing is you can draw on [09:11] this. You can be like, you know, make [09:12] this [09:13] not say game over and whatever. [09:17] And then, you know what I mean? [09:19] Yeah, it's it's more interactive versus [09:21] just prompting. You can just scribble on [09:24] it cuz that that is something that I had [09:25] to do already like for some of the [09:27] design stuff I would have to draw on a [09:28] piece of paper and then upload and be [09:29] like, "This is the layout. Like this is [09:31] how it goes." But now you can just be [09:33] like, "Put this square up here and put [09:35] that thing under this thing." And then [09:36] they have a they have a sharing thing, [09:39] which I thought [09:42] worked on like [09:45] for everyone, which would be cool cuz [09:46] like customers like clients could be [09:48] like, "Oh, I want like this this this [09:49] this." [09:50] But it just says teammates. I thought [09:52] that'd be cool, though. [09:54] Uh maybe they don't [09:55] >> can share it out you can share it as a [09:57] >> teammates. I don't know what that means. [09:59] Yeah. [09:59] I think you just share it as like a [10:02] present presentation, I guess. [10:05] Oh, cool. I don't really care. [10:07] >> That's it. I I would imagine that's like [10:08] if they have a Claude account, they open [10:09] it like in their Claude account. [10:11] Yeah. [10:12] Well, where's my internet? There it [10:14] goes. Okay, yeah. Uh [10:18] Yeah, so okay, what do you want to try? [10:20] Obviously, we're new to this. [10:23] >> So I can set up a design system right [10:24] here. [10:26] I don't know what that means. [10:28] >> So what I think that would be good if [10:30] you have if you're working with like a [10:31] really big brand and they want to have [10:32] like, well, I need to know all the [10:33] colors, I need to know all the fonts, I [10:35] need to know all the [10:35] >> Why why would we redo this? [10:37] >> [laughter] [10:38] >> Honestly, this is a [10:40] AI could never build this. [10:42] >> [laughter] [10:42] >> AI yeah, AI wouldn't build. AI would [10:44] just like, no. [10:46] AI AI see like if this is the this is a [10:49] human. Human only. Only only a human can [10:52] make [10:52] >> Every character was human entered with [10:54] this one. [10:55] >> [laughter] [10:55] >> Obviously. Clearly. Clearly. [10:57] >> So this website it's beautiful, you [10:59] know, like they have [11:01] the dog as the logo and then they have a [11:03] home button with a cat. And then another [11:05] dog. Yeah. [11:07] The fact this website's from 2010, I [11:08] think. Um [11:10] and the fact that it still works, like [11:13] it's not like if this was a WordPress [11:14] website from 2010, it would be broken. [11:16] It would not work. [11:17] >> Yeah, exactly. [11:18] >> This this still works. So that has to [11:20] count for something. Okay, so do we want [11:22] to redesign this, yeah? Or [11:25] Yeah, let's just tell Claude, hey, just [11:28] we're doing some [11:29] pro bono work. We need to help this [11:31] business fix their website. And I want [11:32] to see just what it spits out and then [11:34] how this design tool lets us like tweak [11:36] it after that. Okay, do we look are we [11:39] creating a design system? No, I think [11:40] we're just doing a project. And [11:42] high-fidelity or wireframe it wants to [11:44] know. High-fidelity, just give me the [11:46] finished product. [11:46] >> wireframe would just be like the basic [11:49] building blocks without it like filled [11:51] out. High-fidelity is like a real real [11:53] website. Finished. All right, what is [11:55] this called? This is called [11:57] Furs going to fly. Furs going to fly. [12:00] Furs [12:01] >> Oh, yeah, it's going to fly right now. [12:03] >> Okay, so we create this. [12:06] Oh, look, it says slide deck right here. [12:08] Did you see that? Yeah, so I wonder if [12:10] if it would just turn the website into [12:12] like slides or like it'll just generate [12:14] a PDF of the website. [12:15] >> deck is like for presentations and [12:17] stuff. I don't know. Right, I think [12:19] it'll get confused. It'll it'll maybe [12:20] it'll or maybe it'll just get the [12:22] website and be like, okay, if you were [12:23] like presenting this website, how would [12:25] you do it? And then it'll turn that into [12:26] a slide deck, which could be useful [12:28] because um like if you're an agency and [12:30] you build a website and you want to like [12:31] present it to the customer in like a [12:33] more elaborate way, [12:34] it could generate a deck for you where [12:35] like, well, look, this is what we [12:36] thought about and this is why this is [12:38] this way and whatever. Yeah, it'd be [12:39] pretty cool. All right, so design [12:41] screenshot. [12:42] >> we finish here, we should click that and [12:43] see what happens. [12:43] >> Yeah, for sure. [12:46] Attach codebase. What does attach [12:48] screenshot mean? Okay, it actually wants [12:49] me to attach a screenshot. No. [12:52] Attach codebase. No, I think I'm just [12:54] going to put it in the URL. [12:55] >> Just type yeah, just type redesign this [12:57] website and the link. That's what I [12:58] would do in Claude code. [12:59] >> Right, exactly. [13:00] >> So let's I want to see how it's [13:01] done. [13:03] >> So that it's modern. Also that [13:07] it is modern and looks amazing. [13:12] That's how I talk to my Claude. [13:14] Right, like just do make no mistakes. [13:17] Make no mistakes. Make client happy, [13:20] please. [13:21] >> [laughter] [13:22] >> So sometimes what it'll do to me is [13:24] it'll say that it can't go to the [13:25] website because it's not secure. And I [13:27] wonder if this is going to [13:28] >> Oh, interesting. [13:30] >> if this is going to power through or if [13:32] it's going to come back. If it says it's [13:34] not secure, you should be able to save [13:36] website as HTML and then upload it. And [13:38] then we'll see if Oh, okay, it's asking [13:40] us stuff. Nice. Okay, um okay, do we [13:43] want it to be warm and friendly, premium [13:45] boutique, playful and charming, bold and [13:48] editorial? Or something else. Nice. So [13:51] talking about Claude design, I think [13:53] it's nice that it's generating like a [13:56] little onboarding for us. [13:57] >> Yeah, it's so cool. It's like a custom [13:59] onboarding, too, for you. [14:00] >> Yeah, so even before it creates the [14:02] website, it creates which is nice [14:04] because it it saves time if you if you [14:06] don't know exactly what you're going to [14:07] explain. Like if if you're more [14:09] beginner, you're not clear on what you [14:11] want. Or you're working with a client, [14:13] it kind of gives you like a easy way to [14:16] you know, sometimes it's hard for people [14:17] to be creative without any guidance. So [14:20] this is kind of super nice that it gives [14:21] you a custom onboarding here. [14:22] >> Yeah. I wish Claude had an affiliate [14:24] program. [14:25] Right. [14:26] >> [laughter] [14:27] >> All right. [14:27] >> Uh look Warm and friendly? [14:30] Uh playful and charming, hand-drawn, [14:33] illustrative. That would be cool. [14:34] Playful and charming. Oh, that's that's [14:37] pushing it, I think. Let's do that one. [14:39] Yeah. Yeah, I want to I want to see how [14:41] it's going to do the hand-drawn stuff. [14:42] >> Color direction? [14:44] 1 2 3 4 5. [14:48] We could do the the one before the last [14:50] one and that way it keeps the the the [14:52] light green blue [14:53] >> This one? from the original. So yeah, Is [14:55] that the original one was? Oh, yeah. [14:57] Yeah, it's like a blue. Do you think it [14:58] got it from there? [15:01] I would imagine so. [15:03] >> Single long scrolling page with micro [15:05] interactions, full multi-page, or online [15:08] booking flow. Oh, jeez. [15:11] Uh what do you decide? [15:12] >> let's do a multi-page. [15:14] >> Yeah, agreed. [15:15] >> Just a [15:15] >> I hate the one-pagers. [15:17] It's you know, sometimes I ask it to [15:19] make a website and it it always defaults [15:21] to a one-pager. [15:22] And it's like nobody wants this. I need [15:24] it separate. [15:25] >> Nobody wants it. [15:26] What should the site emphasize? Okay, [15:28] what does it emphasize now? Professional [15:30] grooming It just the grooming [15:32] >> Like a grooming service. [15:33] Okay. [15:34] >> Oh, wait, go back go back go back. Here? [15:36] I think we need to emphasize that right [15:38] there. You see the you see the $10 nail [15:39] trims? [15:41] Where? [15:42] On the left-hand side. [15:43] >> Yeah. Ooh. [15:44] >> Yeah, and then under that, very [15:45] important, we got to emphasize those two [15:47] things. [15:48] I don't know if you're joking or not, [15:50] but I'm put it. No, I'm not No, don't [15:52] don't. [15:53] >> [laughter] [15:53] >> Just let it decide. Let let the AI [15:55] decide. [15:55] >> service and pricing. [15:59] We need to we need to be able to [16:00] monetize this video. [16:02] >> [laughter] [16:05] >> All right, [16:06] um [16:08] imagery, stripe placeholders. We'll do [16:11] that. [16:14] I would say decide for me. Like No, I [16:17] don't want placeholders. This is what I [16:18] told it last time, like get real images. [16:22] Oh, then then then write that. You done? [16:24] >> Okay, instead of placeholder, so no real [16:27] images. [16:29] I mean, come on. What one thing that I [16:31] do now with Claude code is I have a [16:35] I have a folder a Word document that's [16:37] all my API keys. Oh, smart. [16:40] >> and I just I just put that folder into [16:42] the terminal and I'm like, here's my API [16:45] keys, don't ask me for them. Every API [16:48] key has like a title, like Unsplash API, [16:50] this API, that API. Go into this file, [16:53] get the API that you need and and build [16:55] the thing, you know? That's cool. Uh but [16:58] I don't think I don't think the desktop [17:01] or this might not have that integration [17:03] yet. [17:04] What should be tweakable? Okay, so you [17:06] know that pop-up tweakable thing? Right, [17:09] like the like your own little personal [17:10] toolbar of the things that you want to [17:11] um Yeah. [17:15] Nothing or decide for me? [17:17] >> I think [17:19] I think it'd be cool to shift through [17:20] color palettes. But you know, sometimes [17:22] I wonder if choosing more things to be [17:24] tweakable also kind of like locks in the [17:26] design. Like, well, we want to tweak [17:28] this, let me not go too crazy with this, [17:30] so. Right. Can you leave it unchecked? [17:32] Can you just like not decide not [17:34] >> yeah, not checked. [17:36] Typography, Phil. [17:38] Editorial, I don't even know what that [17:39] means. What does that mean? Editorial? [17:40] Okay, [17:42] uh decide for me. [17:45] Hero concept, bold watermark. [17:48] Wordmark. Oh, like what one big bold [17:51] word? [17:51] >> Hero concept. The concept that I would [17:54] have done that I told you about, [17:56] I don't know if it can do this. I know I [17:57] could I could [17:59] >> We could have sketched it. Would be like [18:01] the hero section with like the dog kind [18:04] of like leaning over it. Uh my camera [18:06] has a [18:07] >> [laughter] [18:07] >> zoom lens. [18:09] Is that the tiny? [18:11] The tiny camera? [18:12] >> This Is it called the tiny? [18:14] No. [18:14] >> No, it's called the Osmo. Osmo. The Osmo [18:16] tiny though. [18:18] It is tiny. So maybe it is. I think it's [18:20] called the Osmo tiny. I have it, too, so [18:22] right here. I'm not using it. [18:24] Oh, it's right there. [18:25] Um [18:28] Yeah, so that's kind of was my idea, [18:29] like having the dog pawing over the hero [18:32] section almost like jumping out. So I [18:34] wonder how close we can get to that. [18:36] Yeah, I think that'd be hard for right [18:38] now. Yeah, it would be difficult. Uh The [18:41] way I would do it is I'd have like I'd [18:43] use like Nano Banana to generate the dog [18:45] image with a PNG background and then [18:47] have that on the right-hand side of the [18:49] hero section. It can't make a PNG. I'm [18:51] going to say a few variations I can [18:52] toggle. That's cool. [18:54] >> Right. [18:55] A book booking form or no? [18:58] Uh no, I don't think we need that. [18:59] >> complicated. Copy, keep their copy, just [19:03] tighten it up. Uh no, their copy is too [19:06] too tight as it is. Rewrite with warmer [19:09] modern voice? [19:11] Yeah, rewrite this. Okay. Definitely. [19:13] >> Or should I make it more [19:15] Is it too much stuff? [19:17] Um okay, whatever. Uh maybe I shouldn't [19:20] make it more uh [19:23] What am I trying to say? Minimal? [19:25] Uh [19:28] Or it's fine. Mm, it's fine. [19:30] Make it uh yeah, just you can put like [19:32] clear and to the point. [19:36] There you go. That's what [19:38] Put a high SEO ranking, number one spot [19:42] Google. [19:42] >> [laughter] [19:44] >> Nice to have, testimonial. [19:48] Should we do Do they have testimonials? [19:52] Yeah. [19:53] Okay, whatever. [19:55] Do we want any of these? [19:57] I wonder if you wrote in there [19:59] um [20:00] if you wrote in there the dog thing if [20:01] it would do it. Uh let's do something. [20:03] Let's do Oh, oh, you could put in Let's [20:05] do [20:06] um [20:07] write in there scrolling testimonial [20:09] banner [20:11] with made up testimonials. And I want to [20:13] see how cuz Claude Code does those [20:15] really good. They're like a little [20:17] stripe and they scroll through the [20:18] screen and it looks really nice and I [20:19] wonder if this will do it. [20:21] scrolling testimonial banner with [20:24] made up testimonials [20:25] >> testimonials [20:26] Yeah, you could put You could say a [20:27] scrolling review banner and then [20:30] scrolling review [20:32] Yeah, yeah, it's the same thing. test [20:34] banner with made up testimonials. Okay. [20:36] Oh, yeah. Continue? [20:39] Continue. [20:41] All right. [20:42] See, we could have started with a [20:43] sketch, have that dog there. That'd be [20:46] hard though because it can't make [20:47] transparent ones. Right. That Yeah, for [20:51] for that I'm usually probably What I [20:54] would have done is use Nano Banana [20:55] separately in a separate tab and be like [20:58] create this, which I think you can [20:59] upload a sketch into Nano Banana. And uh [21:02] Right. We can see if [21:05] um [21:06] it would be hard. Like I'd have to I [21:08] think if we found a There must be photos [21:10] of dogs looking out of windows and [21:11] stuff. Yeah, yeah. The dog paws. [21:20] Cores block fetching. Oh, no. [21:29] >> [snorts] [21:29] >> Uh-oh, what's going on? Oh, it's I think [21:32] it's the [21:35] Uh [21:36] what is it? I don't know. [21:39] Ooh, what is it doing? Made me a style [21:41] sheet, but it [21:46] created top bar. Yeah, cuz I I think [21:48] it's doing the same thing we're doing on [21:49] your computer where it creates all the [21:50] the JS files and CSS files and all that [21:53] stuff. [21:55] Uh and I wonder [21:59] The Napkin Sketch tool lets you draw [22:01] freehand. Let's see how long it takes. [22:03] This uh probably 5 to 6 minutes on [22:05] Claude Code. And I do it. [22:06] >> yeah, it's going to take a while. [22:08] It's taking a while. [22:11] Okay, we can talk about uh something [22:14] that I I saw today. Um they were This [22:16] guy's uh made a video about this thing [22:18] called Elementor atomic elements. Have [22:21] you heard of that? Mm-mm. Should I look [22:22] it up? Elementor Uh yeah, you can look [22:25] it up. It's not good. [22:27] >> [laughter] [22:28] >> You can look it up. It's a complete [22:30] waste of time. [22:31] Yeah, so it's like uh they're making it [22:34] more developer-friendly. So, now you can [22:36] add like CSS tags and attributes to the [22:38] elements. [22:40] Okay. [22:40] >> And it's just like I feel like Who wants [22:43] to do that though? Yeah, who wants to do [22:45] that? Like Uh just like when they [22:47] switched from sections to containers. [22:50] Like I get that it's supposed to load [22:51] better or whatever. [22:53] But it's like [22:55] I feel like it's more work. Yeah. Well [22:58] >> And I think [23:00] You think you can add a class and then [23:02] that way you assign a class to all the [23:03] buttons and then you can change them [23:06] You can change the class settings and [23:07] then it changes all the buttons that are [23:08] in that class. Like [23:11] We're going backwards. Like you're [23:12] you're making it [23:14] Like you're making it more technical. [23:16] You ever see [23:17] You ever see um [23:18] You ever see uh [23:23] >> [clears throat] [23:24] >> Where are we going [laughter] with this? [23:25] You ever see Back to the Future? [23:28] He goes He goes to the future and he [23:29] starts like playing a video game and [23:30] he's like super good at it and then the [23:32] the little kid says [23:35] You mean you have to use your hands? [23:36] That's like a baby's toy. [23:38] >> [laughter] [23:38] >> It's like [23:39] >> Oh, that's funny. It reminds you of like [23:41] Elementor like you have to do it [23:42] yourself like with classes and stuff. [23:44] That's like Yeah, that's the thing and [23:47] >> toy. [23:48] Cuz the the whole point of Elementor was [23:50] like, "Okay, you're not technical. So, [23:52] like this tool will help you just [23:53] visually build it." But now, if I am [23:55] technical enough to assign classes and [23:57] all this kinds of all these kinds of [23:58] things, then why am I using I would just [24:00] I would just be building a website. [24:01] Yeah, but you know the crazy thing is [24:04] all of these nerds, you know, I like if [24:07] you ever go to Hacker News. You ever go [24:08] to Hacker News? Probably probably not. [24:11] Um [24:12] but they're all like super [24:14] mad at the LLMs and like, "No, you're [24:17] taking the joy out of like programming. [24:19] You're taking the joy out of coding and [24:21] you know." They all hate it. "Oh, it [24:22] can't do this. It can't do that." And [24:24] it's just like [24:26] uh they want to do it by hand because [24:28] imagine you spent your entire life [24:30] learning how to code, you know, 20, 30 [24:32] years and then the computer can do it. [24:35] You know, it kind of sucks. And they [24:37] have like they cope. They cope. They're [24:39] coping. [24:40] >> Yeah, let me tell you when when I first [24:42] started using Claude, it was a little [24:44] bit jarring because [24:46] I was like, "Oh my god, this [24:48] it generated this thing that is like so [24:50] good. [24:51] And [24:53] like I'm going to use it. But I'm like [24:55] this would have taken me so long to do. [24:57] And it kind of made me feel like, "Oh my [24:58] god, I've been wasting Like I've been [25:00] wasting my time." [25:02] And then I was like, "Well, you know, [25:02] like this didn't exist you know, 2 years [25:05] ago." It's like It's not like I It's not [25:06] like I I could have used this. But it [25:08] was like it was like [25:10] it drawing to see such a like something [25:13] that was so close to being like complete [25:15] that I knew was like a month of work in [25:17] like 5 minutes. It was like whoa. [25:20] Wha- I can't process what I'm seeing [25:22] here. [25:23] Yeah. [25:24] >> And I think one of the most exciting [25:25] things once you like absorb like what it [25:27] can do and um I would keep trying I [25:31] would keep trying to ask it to do things [25:32] that I thought, "Oh, that's too [25:33] complicated. It can't do that." Yeah. [25:35] And then like it just does it perfectly. [25:37] I always have to like I always have to [25:39] go back and like, "Oh my god, wait, it [25:41] can do that." Like I'm always surprised [25:43] like, "Oh, I'm going to do this [25:44] manually." And I'm like, "Oh, wait, no. [25:46] It could do that." So So, let me give [25:49] you a perfect example. One thing that I [25:51] do for almost all of my customers is [25:53] whenever they send me the the images [25:55] um I have to compress them cuz they're [25:57] like large files. [25:58] >> Yeah, that's what I know. Okay, okay, [26:00] wait, wait because I have I'm redoing [26:02] the Pocket Watch guy, but all these [26:03] images are [26:05] PNG and I wanted to ship fast. So, I was [26:07] like [26:08] you know, I don't want to recompress [26:10] them, but if you go to the Light Speed [26:11] score, it's like 5 megabytes on this [26:13] entire Right. Right. Right. Okay. Yeah. [26:15] So, go. Tell me. So, I didn't know this, [26:18] but the Mac has a built-in [26:22] tool or function in preview [26:26] >> Yeah, I guess you can get you can get to [26:28] it through preview, but but it's not [26:30] really what you do in preview when you [26:31] come when you resize the image. It's [26:32] something else. [26:34] It just has the ability to Well, I'll [26:36] show you [26:37] Can you show me your your desktop cuz [26:38] there's like a million things that you [26:39] can do on your Mac that I I just did I [26:41] didn't know. Like bring up a bring up [26:43] any image on your [26:45] um [26:46] Okay, I just did that one. [26:47] >> it's a if it's an image if it's like a [26:48] simple image, it would be better. [26:50] Like a simple graphic. [26:52] Uh well, I have a watch image. Would [26:56] that work? [26:57] Uh yeah, yeah, actually yes. That might [26:59] be perfect. Okay, right click on the [27:01] watch image. [27:03] Oh, just right click on it without open? [27:05] Yeah, yeah, right right click on the [27:06] watch watch image. [27:07] >> All right, yeah, okay. Yeah, it's huge. [27:09] It's like yeah. Click where it says [27:10] quick actions. [27:12] quick actions [27:15] Click where it says uh remove [27:16] background. [27:18] No, for real? [27:20] What? [27:22] It does it instantly. [27:23] >> What? [27:24] Isn't that crazy? Wait, when did they [27:27] add that? [27:28] >> It I did it [27:29] I don't know. I [laughter] just saw it [27:31] the other day and I was like, "What? I'm [27:33] going insane here." I go to like four [27:35] websites that just remove [laughter] the [27:36] background [27:38] and I have to pay for the for the high [27:39] resolution version. That's crazy. [27:42] Well, there's a there's another tool [27:44] that's not there. It's like internal to [27:46] the Mac through like it's like an image [27:48] processing script that the Mac has. Mm. [27:51] Anyways, you get a folder of pictures. [27:53] You tell Claude, "Compress these [27:54] images." It just does it in like 2 [27:56] seconds. [27:57] >> Oh, wow. Like it doesn't have to upload [27:59] or anything. It just runs it through [28:00] like a script that the Mac has. [28:02] >> And it it just um it just it just [28:05] creates a copy of the file that's like [28:07] 70% smaller. [28:08] That's Cuz what I what I used to have to [28:10] do was like upload them all to like a [28:12] image compressor website and then [28:13] re-download them. [28:15] Um [28:17] Something else that I do a lot uh [28:19] I don't know if you know this one. Did [28:20] it Oh, did it finish? Okay, let's see. [28:25] Okay, let's open this in Oh, no, let's [28:27] just keep it here. [28:28] All right. I mean, [28:30] it looks much better. Where is the [28:31] pictures? But Oh, look. [28:35] That's cool. [28:37] Let me open this in a new tab. [28:39] >> That's close. [28:40] >> Let me open this in a new tab [28:41] so that you can see it. [28:44] I mean, it looks [28:45] so much better than this. [28:49] Uh Yeah, okay, let's see. Let's see. [28:51] Okay, it looks good. [28:55] This is already such an improvement. I [28:56] mean, it's so good. [29:00] It's a little bit too minimal. I think [29:02] it didn't really capture [29:05] the uh images how you asked it to, [29:08] right? No, it didn't. [29:13] I wonder what [29:15] uh [29:16] What? See, how would you Does it give [29:18] you Now, where does it give you the [29:19] option to kind of give it the feedback? [29:22] What? [29:23] How do I exit out of here? [29:28] Oh, just escape. Never never. [29:30] Um okay, so yeah, what do you want [29:32] changed now? [29:34] Um yeah, it's [29:36] >> Overall it's not too Oh, we have the [29:38] tweaks. We have the tweaks. Here's the [29:40] tweaks. [29:40] >> Okay, let's see. What options do you get [29:42] on the tweaks? Uh [29:46] Okay, do you want it to be split photo? [29:50] That's kind of cool. Interesting. Okay, [29:52] that's fun. It's a little bit more [29:53] whimsical. [29:54] >> Fur is going to fly. That's not good. [29:57] Uh Too much. [29:59] You like this one? That one's probably [30:00] the best, maybe. [30:02] Yeah. What are the color palettes? [30:05] You got barely they barely Oh, that was [30:07] kind of cool. They messed up on here, [30:09] but [30:11] You know, I'm not seeing the blue. We [30:12] Didn't we choose one that had blue? Did [30:13] it use the blue? [30:15] Tweak [30:16] >> for anything? [30:17] No, did we use the blue? I can't [30:18] remember. Compact. [30:22] Okay, the tweaks are okay. I mean, I [30:24] didn't even ask for tweaks. But, what's [30:26] your overall thing? If this is for a [30:28] client, what would How would you want it [30:30] to be actually? [30:31] >> I would feel like it's it's a little bit [30:33] too plain and the hero section is like [30:35] too boring. [30:41] All right. [30:42] Send. [30:47] All right, we'll wait for that to work. [30:48] Let's see what Hacker News had to say [30:50] about it. Now, these people are usually [30:54] Uh you got the YouTubers on one side [30:56] that are just like super happy, [30:58] everything's going to be amazing. And [30:59] then you got Hacker News on the other [31:00] side where everything is doom and gloom [31:03] and everything sucks. [31:06] And then we got us in the middle. [31:09] Um What are they saying? Oh, god. [31:11] >> Wow, this website looks like [31:13] I know, it's probably this. [31:14] >> right? [31:17] Uh they're saying a bunch of boring [31:19] and too much [31:21] Stuff. [31:26] This won't replace Figma or designers. [31:29] They say, but they're crazy. They're [31:32] crazy. It will. [31:33] >> Well, here [31:34] here's [31:35] I think it's going to replace a lot [31:36] because the same it's going to replace [31:40] I would say [31:42] the the entire mid-level to to low level [31:45] end of the market. Like unless you're [31:47] like a big brand that's going to pay [31:48] like a team of designers to go and like [31:50] make the make the button [31:52] and make the face [31:53] >> you're you're going to get destroyed by [31:55] somebody who is [31:56] who's not doing all of that and can move [31:59] way faster. [32:01] Yeah, and also um what's going to happen [32:03] is [32:05] uh By the time you get there, the I'm [32:07] sure the tools will get This is the [32:08] worst the tools will ever be. Exactly. [32:11] >> The tools will get good enough to to the [32:13] point where [32:13] >> And who can move faster, Claude or [32:15] Figma? [32:16] Like, it's obvious. [32:19] Okay, hang on. I'm going to I'm going to [32:20] send you something right here. [32:24] Are you ready for this? This isn't good [32:25] for design. But, it is good for design. [32:28] That's crazy. Like, if you read a blog [32:29] If a beginner reads a blog and's like, [32:31] "This is not good for design." This is [32:33] This is a million times better [32:35] than this. [32:37] A a billion. [32:39] And and and here's what I think. I think [32:41] whatever tool lets me get my idea from [32:43] my mind outside of my mind the fastest, [32:47] that's the best tool. Right. [32:48] >> Like Like, okay, I can sit here for 2 [32:50] hours and make the page with Elementor [32:53] or I can just explain the page and then [32:55] the AI can get it 80% right and then I [32:56] can explain it again and it gets to 90 [32:58] and then I can explain it again and it [32:59] gets to 99 and then, you know, 6 minutes [33:02] later I have what I wanted. [33:05] Yeah. Which is what I Which is what [33:06] Claude is doing. Exactly. [33:11] But, what do you do while you wait for [33:12] the AI? [33:14] You have to open up another terminal and [33:16] then start [33:16] >> use another AI to [33:18] How many do you do at once? Oh, yeah, [33:20] tell me tell me. Usually the most I'll [33:22] have is like four. And then I get [33:25] the the What I notice is I'll start [33:28] putting the prompts into the wrong one [33:30] even though I have them color-coded. And [33:32] then I'll start breaking the [33:33] >> [laughter] [33:33] >> I'll start breaking the websites. You [33:35] know what I started doing to make it [33:36] more organized and I hate to even say [33:39] this No, I don't hate to say it, but um [33:41] I started using [33:43] Oh, can you see this new screen? [33:45] It's black screen. [33:46] >> Uh yeah. Yeah, yeah. I started using [33:48] this um I don't know if it's too big. [33:50] >> Is this What is it What am I looking at? [33:51] This is the Claude desktop. Hold on. [33:53] Hold on. Let me Let me go to the other [33:55] screen. One second. Sorry. [33:59] Okay. [34:01] I started using this because look, I [34:02] have [34:03] my father-in-law's website. I have this [34:06] program that we're using right now. I [34:07] have the tyler.com in it like tabs it [34:09] all and then it's just kind of [34:11] it actually is easier. [34:13] >> Can you switch between them and then [34:15] like put in a prompt? [34:17] Yeah, yeah, exactly. You put a You put a [34:19] prompt in here and then here [34:21] >> is it Is it essentially like a bunch of [34:23] terminals open? Exactly. All the [34:25] terminals open just organized over here. [34:28] Oh, wow. Yeah, because I have [34:29] >> And And then they have different things [34:31] where you can like [34:33] do things and you can click on a file [34:34] and you can actually edit the file if [34:35] you want to. Is there Is there any [34:37] limitation on this versus versus just [34:39] having it raw in the terminal? [34:42] Um [34:43] >> Like is there Have you Have you hit any [34:44] wall where like you can't [34:47] >> But, so this is identical to typing into [34:48] the terminal. It still goes into the [34:49] files. It still do everything. [34:50] >> Ident- identical. Identical. So, this is [34:53] the Claude desktop app and you can like [34:54] chat or you can do code work or you can [34:57] do this and I just stay in code. [34:58] >> I I don't know if they fixed this yet, [35:00] but it I think it doesn't have memory, [35:02] right? Between code and chat like you [35:04] can't be on the chat asking about your [35:06] code, right? [35:06] >> But, I wonder now cuz it's like in the [35:09] same [35:10] I've tried it and the last time I [35:12] checked it doesn't They're like separate [35:13] memories. I wish it did because [35:15] sometimes I just want to talk about a [35:16] project and I don't need [35:18] work on it. I need to like ideate on it. [35:20] Sometimes I Uh I tell it to make me like [35:23] a [35:24] PRD? Is it PDR? PRD? [35:27] Meaning? What's that? [35:29] A product requirement document. Like I [35:31] Mm. I tell it Like I have a conversation [35:34] with it. I'm like, "All right, now make [35:35] me a PRD." And then it makes me like all [35:38] of the steps and the user flow and [35:41] everything that I've been discussing [35:42] with it into one document and then I [35:44] just copy it over and I like paste it [35:45] into the [35:46] into the code. [35:47] >> Got you. And that way it doesn't it [35:48] doesn't miss any of It like tells you [35:50] the steps that you have to go through. [35:51] >> Exactly. And all the code and the [35:52] scaffolding and, you know, whatever the [35:54] >> [laughter] [35:55] >> good it should do. [35:57] Yeah. [35:58] >> [snorts] [35:59] >> Yeah, this I mean, it's amazing what [36:00] what you can do with it. [36:02] Yeah. It's crazy. Okay, so And then um [36:05] What happened here? [36:08] All right, let's see. Uh-oh. Let me [36:13] in a new tab. [36:16] Oh. [36:17] Oh. Ooh. What did it do? Uh Where pet [36:21] Where pets come to Where pets come to [36:23] fluff. Sparkle. Sparkle. [36:26] >> [laughter] [36:26] >> Beam. And this is kind of fun, though. [36:29] >> This is fun. [36:31] >> [laughter] [36:31] >> Look at the little little [36:32] >> is up here. This is cool. Like the [36:34] >> derpy star. [36:36] Uh I kind of [36:37] I kind of like this idea. I kind of like [36:39] I kind of like that the that it made [36:41] like a little mouse SVG and it's like [36:43] all wonky. Uh [36:45] Yeah. Or this [36:47] >> And the star [laughter] the star is all [36:48] like [36:50] It's like [36:51] >> [laughter] [36:52] >> I wonder if it did it I wonder if it did [36:54] it on purpose to be fun or if it just [36:56] couldn't [36:57] >> [laughter] [36:59] >> Yeah, what is this? Is this a dog? I [37:01] think it's a mouse. [37:02] >> No, it has to be a dog. [37:04] >> It's got to be a dog. Why would they [37:07] have [laughter] a mouse? [37:09] It looks like a mouse to me. [37:11] It's got a paw back there. [37:12] >> Okay, okay, okay. [37:14] Oh, that's funny. Um All right. Yeah, [37:16] it's not showing up here. [37:17] >> It's still going. It's still editing. It [37:18] says editing the CSS. Oh, it's checking [37:21] its work. [37:23] Okay, hang on. Let's give it Let's give [37:24] it a chance. Maybe it needs a little bit [37:25] more time. [37:28] And uh [37:29] Did it make the same pages? Let's see. [37:32] We had our services, gallery [37:34] >> Oh, oh my god. Look, it made the [37:35] services pages and stuff, though, too. [37:38] Now, did it create the same services or [37:40] did it make up like Did it actually go [37:41] and read the website? [37:42] >> Well, what do we have on the services? [37:45] For example, we should have like [37:48] uh [37:49] Jeez, I can't even look at the website. [37:50] >> treatment like flea treatment. We have [37:55] cat cat grooming. [37:59] No, I don't see flea treatment. [38:02] I think it didn't go through all the [38:03] pages. Like it didn't [38:05] You got to [38:06] >> have It might have not recognized the [38:07] navigation, frankly. [38:09] >> [laughter] [38:09] >> This is kind of navigation. It might [38:10] have been Well, there's like four images [38:12] here of a dog here. I don't know if [38:13] that's the navigation. [38:15] Uh this is cool, though. I like the way [38:17] this would be set up. [38:18] Oh, the Bento grid. [38:20] Well, it did have a gallery. [38:23] See, now in a perfect world what I would [38:25] want is for it to pull the images from [38:26] the customer's website and plug them [38:28] into the Exactly. But, you can if Okay, [38:31] so and then we could do that next if we [38:34] can like [38:35] pull it into Claude code [38:37] really easily. That That's what I'm [38:39] saying like [38:41] the It looks like the design tool [38:43] it's kind of to give you a [38:46] concept. [38:47] >> Exactly. [38:48] I don't think And And then you tweak the [38:50] concept and then And then it's just it's [38:52] like pure HTML. [38:54] Right. Right, right. But, I think Claude [38:56] code still gets you to the finished [38:57] product in one [38:59] >> Right. But But, I think this is good if [39:00] like if you're not technical, if you're [39:02] scared of the terminal, and you want to [39:03] do a design [39:04] >> Or if you just want to like make the [39:05] design and visualize whatever you're [39:07] doing first. [39:09] Right, you can go in there, tweak the [39:10] font, adjust it, then export that, and [39:12] then Claude already knows that you want [39:14] this font and [39:14] >> you can draw on it, you can edit it, you [39:16] can comment, you know. Right, that's [39:19] what I'm saying. [39:19] >> can make a comment and then comment [39:21] comment comment comment comment and then [39:23] go to all the comments [39:25] and then [39:26] send them all to Claude [39:29] at the same time. [39:30] Yeah, that the way a person would give [39:32] you feedback on the [39:33] on anything. [39:35] Right. Yeah, so that's what I was [39:37] thinking it would be cool if like [39:38] clients could like go and comment [39:40] comment comment comment and then you [39:41] just go back and be like, "Oh, send." [39:43] >> [laughter] [39:43] >> Send. [39:46] That's the one part that the send is [39:48] behind an admin section. [39:50] >> [laughter] [39:50] >> Only admin can click send. [39:53] Uh [39:55] Okay. [39:56] >> Now, this is this can design It looks [39:58] like It looks like it can do a website. [40:01] It can do a website just fine. Uh but I [40:03] think it's it's more for like [40:05] um [40:08] like presentations, right? Yeah, should [40:09] I see [40:10] >> See, presentations? [40:12] Open the uh Oh, before you do that, I [40:13] just I just want to see I sent you an [40:14] image. Okay. [40:16] I sent you an image. Oh, funny. [40:19] >> There it is. And I want you I want you [40:21] to tell the put this image on the [40:23] right-hand side [40:24] like the dog is kind of coming out of [40:26] the hero section a little bit. [40:29] And I want to see if it would do what a [40:30] person would do, which is like it's [40:31] going to It should draw the edge of the [40:32] hero section under the paws. [40:34] Wait, so where do you want it? [40:36] Imagine the hero section. I I can't do [40:38] this cuz my camera will go crazy. [40:40] Imagine [laughter] the hero section. [40:43] Imagine the hero section, right? I want [40:45] the dog to kind of be like pawing [40:47] looking over the hero section, kind of [40:49] popping out a little bit. Well, yeah. [40:53] Um [40:54] See, but how do I tell See how you tell [40:55] that to Claude? Like you can't show [40:57] Claude this. [40:58] Uh [41:00] um Claude. [41:02] Hold on. Okay, um where where on the [41:04] hero section? Uh right side of the hero [41:06] section. Hold on. Let me open this in a [41:08] new tab cuz this is looking weird. [41:10] Why is this happening? It's falling [41:11] apart. It is falling apart. Oh, there it [41:13] goes. [41:15] Okay. So, I want it right right here? [41:18] Yeah, remove that that little card. And [41:20] then just have Scroll down a little bit. [41:21] Is there an end to the hero section or [41:22] it just flows? [41:24] There's an end right here. [41:25] It kind of just flows in. [41:27] >> Yeah. Or here. Oh, no. That all flows [41:29] in. Here. [41:32] We could put the dog right here. [41:34] You'd have to be like uh place this dog [41:36] overlapping one of the sections so that [41:38] it like it looks Do [41:39] Do it in the hero section and just say [41:41] like like it's popping out of the hero [41:42] section. The hero section should have a [41:44] bottom. [41:46] To you know, give the effect. [41:48] >> And I want to see if it'll if it'll uh [41:50] do that. [41:50] >> Okay. I'm going to try my drawing [41:52] skills. [41:53] And I think I think that is like the [41:55] human touch, right? Like the AI would [41:56] never generate that probably by itself, [41:58] you know? [41:59] >> Right. So, I think those are the Those [42:01] are the creative things. See, cuz I feel [42:03] like with AI you can be more creative [42:04] because [42:05] with Elementor I would've been like, [42:07] "That's really difficult to make. I'm [42:08] not I'm not going to like [42:09] >> do it. I'm not going to build that. [42:11] >> be really difficult, too. [42:13] But [42:14] >> [laughter] [42:14] >> But I feel like I can do it. I feel like [42:16] uh maybe not If not here in Claude code, [42:19] in Claude code for sure. [42:20] >> I think here would be good. [42:22] Yeah, like it's just like a a little 3D [42:24] object kind of [42:26] popping out of a section. I'll put a [42:28] doggy here. Wait, what did that dog look [42:30] like? [42:32] Okay. [42:34] I'm [laughter] going to put his paws [42:36] over it. [42:41] Hold on. [42:42] He's a little squished. I mean [42:47] Yeah, add the face. I think the AI will [42:49] If you draw like a little eyes and a and [42:51] a nose and a mouth, the AI will [42:52] [laughter] understand like [42:53] This is a an animal here. Not even the [42:55] AI could understand what I'm doing. [42:58] >> [laughter] [42:59] >> Draws a bone. [43:02] That's a horrible dog. I'm so sorry. [43:08] >> [laughter] [43:13] [laughter] [43:17] >> Oh, man. [43:20] This is turning out really good. Okay, [43:23] where's the mouth? [43:23] >> [laughter] [43:23] >> Where's the mouth? [43:25] Where's the mouth? He's smiling. He's [43:28] like, "Hi." Hi, buddy. [43:31] Okay, perfect. [43:32] >> It's got a little tiny [43:33] >> Okay, I mean I would As a human I would [43:34] understand it. Okay. [43:37] And how do you how do you how do you [43:38] also give it the image? I don't know. [43:40] Let's see. [43:45] Uh-oh. Okay. [43:46] I drew a dog. [43:49] What? [43:51] Oh. [43:53] >> [laughter] [43:55] >> What am I supposed to do? Hold on. [43:58] Type anywhere to add a note. Okay, okay. [44:01] I got you. [44:04] No. [44:05] Damn it. Why is this note here? [44:08] If I delete this [44:10] Uh [44:11] It's going to delete your dog. [44:14] Okay, comment. [44:18] I I have a note down here, but [44:21] >> [laughter] [44:21] >> I don't [44:22] >> it? [44:22] >> I don't know what to do with it. [44:24] Uh [44:25] I can't drag it. Type anywhere to add [44:28] Can you uh yeah, I think we're going to [44:30] have to No, I'm not redoing the dog. [44:33] >> [laughter] [44:33] >> It took me forever. [44:35] Just click send. And then click send [44:37] there and then [44:38] >> [laughter] [44:38] >> hopefully it understands. Oh. [44:44] Oh, okay. Okay, what was missing? What [44:46] were you missing? [44:47] >> I don't know. [44:48] I drew [44:49] this dog and put the real dog in the [44:56] chat. It was a PNG. [45:01] I want him to go over [45:06] this section with his paws [45:11] over it. Yeah? [45:13] Yeah, it's a dog instead of doc. [45:16] >> [laughter] [45:17] >> It's like, "You did not upload a doc." [45:21] Yeah, it's going to get confused. [45:23] I drew a dog. [45:24] >> then I think I I think I would hit send [45:26] on the chat first. Okay. And then [45:30] on the here you got to click before it [45:31] gets [laughter] confused. No, it's doing [45:33] it. It's shelling. But [45:35] But the dog You never sent the dog. The [45:37] actual graphic of the dog is Oh, damn. [45:40] >> [laughter] [45:40] >> It's like, "Where's the dog? Find the [45:42] dog." [45:46] Okay. [45:48] Let's see. The attachment isn't the [45:50] product Let me check the Oh, yeah, I [45:51] think you're right. Damn. [45:54] Damn [laughter] it. [45:58] All right, let's see what it does. [46:01] Perfect. A chow chow with a transparent [46:03] background. I swapped the actual Put [46:04] this real photo. Okay, cool. Okay, okay, [46:07] okay. [46:08] All right. [46:10] That'd be pretty impressive if it could [46:11] do it. That I would be surprised. I [46:13] think it's going to place it in the [46:14] wrong place cuz I I did notice that when [46:16] you were scrolling like what you drew [46:17] was not attached. [laughter] [46:18] It wasn't attached to the section. [46:19] >> no. I think it was. I think it was. [46:20] Look. [46:22] Uh Uh uh Oh, like it takes a little [46:25] screenshot of that moment. [46:26] >> see it? [46:27] Yeah, yeah, it's on the right top. Okay. [46:30] >> Wait a minute. Is it taking It's just [46:32] taking a screenshot and uploading it to [46:33] itself. [46:34] Yeah. [46:36] >> [laughter] [46:36] >> It's not like actually understanding [46:38] what you drew as you're drawing it. [46:40] >> [laughter] [46:48] >> Oh, man. [46:49] >> I'm already on the $100 plan. [46:52] Oh, this is the best part. [46:54] >> [laughter] [46:54] >> No. [46:55] >> When When does it reset? How much time [46:57] do you have? 15 hours? [46:58] >> 24 hours. Wait. Claude code resets in in [47:02] 5 hours, though. [47:03] Maybe cuz this design thing is new. All [47:05] right, end of the video, guys. Thank [47:07] you. [47:07] >> [laughter] [47:09] >> Click next and see if this thing will [47:11] finish its loading the dog. [47:13] Uh it did a good job, though. Let's see. [47:16] Let's see what it did. Damn, that [47:18] That sucks. [47:20] Okay. [47:21] To To be fair, you you you were using it [47:22] before like today. [47:24] >> Uh okay. [47:28] It's sort of It didn't get it quite [47:29] right, but I think I feel like Wait, if [47:31] I refresh this [47:33] Oh, it put that there. Oh, wait. Now I [47:35] can edit it. Let me edit it. Oh, look. [47:37] It it it replaced the little cart [47:40] cartoony dog with like the actual dog. [47:42] >> Uh So, [47:44] not exactly what you wanted, but [47:46] I can make it bigger. [47:48] Maybe the dog was on its way to the [47:50] correct section and you ran out of [47:51] credits. [47:52] Yeah. [laughter] [47:53] It was like moving it down. [47:54] >> be like, "Wait a minute. It doesn't [47:56] belong there." [47:59] Uh damn. We came close. [48:01] We came real close. [48:04] Um [48:06] Okay. [48:06] >> I mean [48:07] This is the This is the problem with [48:08] Claude code, you know, like you become [48:10] dependent on it. I know. [48:12] >> And with with without it, not only does [48:13] your project falls apart, but also the [48:15] video [48:16] the video content [48:17] >> Your business just doesn't work. You're [48:18] like, [laughter] "I don't know." [48:20] I mean listen, once you have like all [48:22] your projects and all your softwares [48:24] like [48:25] everybody builds all their their own [48:26] software on Claude code and then [48:28] >> Sorry. [48:28] >> Yeah, and then Anthropic is like, "Hey, [48:30] by the way, [48:31] it's 500 bucks a month now. What are you [48:33] going to do?" Yeah. [48:35] Right. What are you going to do like not [48:37] have not run all your software that you [48:39] built yourself? You know, like But then [48:41] I hopefully there'll be a competitor [48:43] like OpenAI is doing their Codex and [48:44] you'll be like, "All right, I'll just [48:45] use this one." [48:47] Have you used Codex? [48:48] >> No, I haven't because [48:50] I hear mixed things about it. [48:52] I don't really like Sam Altman's weird. [48:54] You ever see an interview with him? He's [48:56] kind of a weird dude. Yeah, he's like a [48:57] he's like a he's giving like the old [49:00] version of Mark Zuckerberg where they [49:01] were kind of like Yeah, he was He needs [49:03] to [49:04] go surfing like Mark Zuckerberg. [49:06] >> Yeah, yeah. Get cool. Get some [49:08] jiu-jitsu. Um [49:10] But yeah, the Claude code will like [49:13] optimize all the images of your step [49:15] dad's not your step dad's your [49:17] father-in-law's website. Yeah. Per And [49:19] it'll do it like in like it'll do like a [49:21] 100 images in like 2 seconds. It's [49:23] crazy. Because of the the Apple thing. [49:27] Yeah, cuz it it's not actually uploading [49:29] or downloading anything. It's like [49:29] running a a computer script that just [49:31] like And it does it cuz all of them the [49:33] compression's good cuz sometimes I've [49:34] noticed was compression is like uh [49:37] Well, what I've noticed whenever I use [49:38] like an online compressor, like a [49:40] compressing website, if I compress it [49:42] one time, it'll go from like 1 MB to [49:44] like 500 500 uh KB, which is not that [49:47] good. I still want it I would have [49:48] wanted it to be as small as possible. [49:50] And then if I try to recompress it, like [49:52] it already did all of its work, it's not [49:53] going to get any smaller than that. [49:55] Uh but with this, you can tell Claude [49:57] how much compression you want, but by [49:59] default, I think it does 70%. [50:01] So, worst-case scenario, um it'll be 70% [50:04] better. But you don't actually have to [50:06] do anything, like [50:08] if you have his website locally, like [50:10] you have it locally on a folder, [50:11] >> Mhm. [50:12] just tell it like, "Here's the folder. [50:14] Uh optimize all the images, and then [50:16] re-upload it to the website." Yeah. [50:18] It'll just do it. You don't You don't [50:20] have to like You don't have to like [50:21] break the website or mess with the [50:22] website or or like find all the images [50:24] or anything like that. It'll just get [50:26] that It'll get the URLs that are on the [50:27] website, optimize them, and then put [50:28] them back in there. Nice. [50:31] Yeah, like if you check check this out. [50:33] That's another thing with the speed. Go [50:34] to [50:35] PageSpeed.com. [50:37] Not PageSpeed, like the Google PageSpeed [50:39] test, whatever it's called. [50:40] PageSpeed. Yeah, that's what I I went [50:43] here and I put it in his in his thing. [50:46] Okay, what what does it say right now? [50:48] Uh [50:49] It's the image [50:50] >> way faster. It's But it's probably way [50:52] faster than it was when it was [50:53] uncompressed. [50:54] >> But I've achieved like 100 or 99 scores [50:58] or 100, like 99 100 100 on everything [51:01] for other sites, but I've just I wanted [51:04] to launch super quick. So, this is [51:05] probably going to give like a 70 or [51:07] something. But it's only the images that [51:09] are [51:10] messed up. [51:10] >> That are holding it back. Yeah, yeah, [51:11] yeah. [51:12] So, [51:14] >> the excessive performance because look, [51:16] the images are That's like 5.6 MB. Uh uh [51:20] uh uh uh uh uh uh uh uh And listen, to [51:22] be fair, when Google does the the mobile [51:24] test, it does it like over 3G or like it [51:26] does it over like worst-case scenario. [51:29] Mhm. Um So, it's okay. The SEO [51:32] >> desktop [51:33] Desktop will probably be like near 100 [51:35] like really It should be like [51:36] significantly Oh, that. Yeah, the images [51:38] are holding you back there. Yeah. No, it [51:40] depends. You can redo it again, and [51:42] it'll give you a different score. [51:43] Slightly different? [51:45] Yeah. What do you [51:46] >> Check my website there. [51:50] Oh, sorry. No, on the on [51:52] >> here and buy. Go [laughter] here. [51:56] Sorry. I don't know what I'm doing. It's [51:57] too late for me to be thinking. [52:01] The Claude does not work. You're all out [52:02] of thinking credits. [52:03] >> Yeah. [52:03] >> [laughter] [52:03] >> The tokens have ran out. [52:06] Also, in my brain. [52:09] All right, let's see. [52:10] >> want me to send this to you or no? [52:12] Um [52:14] Yeah, you know, send it to me, and then [52:15] I'll see how long it takes me to get the [52:17] uh [52:18] The cool thing about this is let's say [52:20] you wanted it locally, I'll show you [52:21] that way first. Okay, I'll show you [52:23] that. So, you export Do Do you think Do [52:27] you think that this burned through your [52:28] credits really fast, or do you think you [52:30] >> I don't know if this has different [52:31] credits than my other one because [52:33] they're supposed to re redo every 5 [52:35] hours, and this says try again in 20 [52:37] >> could be maybe because it's new, it has [52:39] like a limit on it. You can check your [52:41] um You know how to check it? Your like [52:42] usage? [52:44] Uh no. [52:47] Not the command line. Let's see. [52:49] >> If you If you go to [52:50] like your like your chat your [52:53] uh terminal. [52:55] Uh I just do it If you go to your [52:57] account, hang on, let me see because [52:59] Wait, I think I have it somewhere. Let's [53:01] see. Let me see what the URL is. [53:04] Oh, look. Plan 100%. [53:08] Where is it? [53:09] >> Done. Right here. Oh. [53:12] Oh, but you're like Opus 4.7 extra high [53:15] maximum plan. [53:17] >> [laughter] [53:17] >> I can't think. I want it to think for [53:19] me. Are you crazy? [53:19] >> You are You are burning Okay, but what [53:22] you do What would you do? [53:23] It's kind of cool. You take this, and [53:25] you press export, and you export out to [53:28] Claude, and then you copy this command. [53:31] And then you just It knows to like [53:33] >> you paste it back in there, and it takes [53:34] the exact design, and it copies it [53:35] locally, and puts all the stuff in [53:37] there. [53:37] And now, I saw that you can also You can [53:39] also export it to Canva. So, if you [53:42] wanted to like [53:43] I don't know I don't really know I don't [53:45] use Canva though. [53:45] >> to themselves? [53:47] Well, it's like, "Hey, listen. I I I I I [53:49] I I I I I I I I I I I I I I I I I I I I [53:51] >> Adapt or uh But I mean, listen, it's a [53:53] better to be with them than against [53:54] them, I guess. [53:56] You know? [53:57] Oh. [53:58] Sending to Canva, but it's not going to [54:00] because I hit my usage limits. [54:04] But why? Why Canva stupid? [54:06] >> Yeah. You can't [54:07] I guess I don't know. Maybe I think if [54:09] you have a [54:11] Maybe if you have If you want If you [54:12] have your own graphics in there or [54:13] something, I don't know. [54:15] Uh [54:16] Yeah, so mobile mobile's rough. [54:19] And look, my my own is like Yours is [54:21] really good. [54:23] Yeah, and still get to 66. I think it's [54:25] my internet. Or no, it's internet. [54:27] Something's going on. [54:31] Anyways, uh Cuz I know that I know that [54:33] my website is like under a megabyte, I [54:35] think. It's so fast. [54:37] And listen, if you go to Tyler.com, [54:39] it's the fastest website. [54:41] >> [laughter] [54:41] >> It's just like bam. [54:43] Woah. All of this stuff has to load all [54:45] of the has to load all of the Listen, [54:47] Tyler, what you need to do is [54:49] you need to locally load the those those [54:51] fonts for the those four words. [54:53] >> Oh, that's where I messed up. [54:55] Yeah, you're having it like call Google [54:58] Google fonts. [54:58] >> really? I wonder if it does. Is it? [55:00] Yeah, it does. I had I had to do it to [55:03] to fix my website. I I locally I had the [55:05] fonts uh load locally. Uh [55:07] >> Is mine not local? [55:09] It probably By default, it go it gets [55:12] them from the um Google font [55:15] uh [55:15] uh [55:17] server or whatever. No, I don't have any [55:18] Google font server. [55:20] Oh, then then you might have them [55:22] locally. Wow. [55:24] What? My core vitals failed. Failed. [55:27] What is going on? Oh Oh, no, no, no. I [55:29] guess That's weird. [55:30] >> See, but See, but see, look, your your [55:32] website is literally four words. And [55:34] it's at 86 86%. You have to have a blank [55:37] website with no content on it. Fail. [55:40] What is this? Core vitals failed. That's [55:41] hilarious. You know Google's own website [55:43] is messed up, too. [55:45] If you put in Google.com, [55:47] it's [laughter] like [55:48] not very good. [55:49] >> No, it's like a it's like a not [55:51] optimized, too slow. This goes to show [55:53] [laughter] [55:53] >> It's something going on. Something's [55:54] going on with their site. [55:55] >> I I think it might be it might be your [55:57] computer. [55:58] >> [laughter] [56:00] >> It's You ran out of tokens, so [56:01] >> out of tokens. I ran out of life. [56:04] Imagine like a robot's cleaning your [56:06] laundry, and it just stops. You're like [56:13] It wouldn't even do this. [56:14] Uh You're getting a You're getting a [56:16] robotic surgery, and your your heart is [56:18] >> [laughter] [56:20] [gasps] [56:20] >> You're like, "Put in more." [56:23] You know, I saw a story where they [56:24] actually had AI AI-powered like robots [56:27] like helping with like helping surgeons, [56:30] and the ones where they used AI had a [56:32] higher uh injury rate. For uh [56:34] >> What? Really? Yeah, yeah. And I don't [56:36] know if it was just the AI [56:38] I didn't read the whole article. [56:40] So, I don't know if it was the that the [56:42] AI was like doing a bad job, or that the [56:44] doctor was like maybe like too lax, like [56:47] just like [56:48] you know. [56:49] And uh [56:49] >> Fix him like what I do. [56:51] Fix him. [56:52] Fix website. [56:53] >> The heart needs to be fixed. [56:55] >> [laughter] [56:56] >> Save Save person. [56:58] >> Save person. Person good. [57:00] >> [sighs] [57:00] >> Um [57:01] All right, should we call it? [57:03] Yeah. Well, that was a good demo. I [57:04] think everybody who saw the video gets [57:06] the idea of like how the tool works. I [57:07] think it's pretty cool. [57:09] Uh I think it's way better than [57:11] Elementor and way better than WordPress [57:13] as as far as like how easy it is. Yeah. [57:16] Listen, as long as you don't run out of [57:17] tokens, [57:18] >> [laughter] [57:18] >> you're good. [57:19] >> You're okay. You're good. But I've been [57:21] I've been coding all day with it, so um [57:24] and then I hopped on. And I was thinking [57:25] about that when I was making my games [57:27] and stuff. I was like, "Oh, wait. I [57:29] should probably [57:29] >> [laughter] [57:30] >> I should stop." But I can't stop. It's [57:31] like an addiction. [57:33] Yeah. So, but yeah, there's been times [57:36] where I'm creating like three and four [57:38] websites at once, and it it lasts pretty [57:40] good. Like you have to really be Yeah. [57:42] I've only ran out a couple times. I've [57:44] ran out two other times, and I've been [57:46] using it for months. [57:48] And then, you know, they go offline like [57:50] once a week, but that's a separate [57:51] issue. Oh, yeah, for sure. [57:52] You're going to get spotty connection [57:54] with them. But [57:56] Yeah, I mean, I think you guys can let [57:58] us know any other topics you guys want [57:59] us to cover. And if you guys have used [58:01] Claude Code, you can talk about it in [58:02] the comments. [58:02] >> Yeah, we're going to we're going to be [58:03] doing this weekly, um also, and the [58:06] schedule should be on Tyler.com/live. [58:09] Um [58:10] And yeah. Talking [58:12] >> We can try We can try to be on here [58:13] again next Friday if you want. Yeah, [58:15] that sounds good. [58:16] Sounds good. All right. [snorts] All [58:18] right. All right, everybody. Bye.  📄 **Full text:** ![[Full Document Contents/Articles/Claude Design - Figma Is Dead.md|Claude Design - Figma Is Dead by YouTube]] ## Highlights - 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 ([View Highlight](https://read.readwise.io/read/01krgpqzw9tz3fx2gdkz2bb72x)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01krgpqzwmfv11wmv8w4rnvy6y)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01krgpqzx60p8yvgn9cg3aq9j2)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01krgpqzy87c5jj08221n5d7kf)) - Tags: 👻 ai highlighted - >> 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. ([View Highlight](https://read.readwise.io/read/01krgpqzzkaxvct42jqz7tzjhx)) - Tags: 👻 ai highlighted - >> 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? ([View Highlight](https://read.readwise.io/read/01krgpr00tw9v50cqe499athtw)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01krgpr09vmjd837t9chjmyfwn)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01krgpr0fehvazp9p44jmvvvg0)) - Tags: 👻 ai highlighted - >> 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 ([View Highlight](https://read.readwise.io/read/01krgpr0pd5nphdngw3ht3a8b0)) - Tags: 👻 ai highlighted - >> [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] ([View Highlight](https://read.readwise.io/read/01krgpr10f59gspnj62q2kqw6x)) - Tags: 👻 ai highlighted