WEBVTT 00:00:00.000 --> 00:00:02.940 I want you to visualize a very specific kind 00:00:02.940 --> 00:00:07.339 of misery. Okay. It is, you know, 11 p .m. The 00:00:07.339 --> 00:00:10.279 office is dark. Uh -huh. You have a presentation 00:00:10.279 --> 00:00:13.599 due at 9 a .m. You know the data. You know the 00:00:13.599 --> 00:00:15.679 story. Right. But you're not thinking about the 00:00:15.679 --> 00:00:19.579 story. You are just staring at a slide, trying 00:00:19.579 --> 00:00:22.379 to drag a text box maybe three pixels to the 00:00:22.379 --> 00:00:25.760 left. Oh, man. I feel that in my soul. Then two 00:00:25.760 --> 00:00:28.179 pixels to the right. You change the font. And 00:00:28.179 --> 00:00:30.190 it looks... It looks wrong. You change it back, 00:00:30.469 --> 00:00:32.630 and it still looks, I don't know, boring. Yeah. 00:00:32.770 --> 00:00:34.530 And you realize you're not a strategist anymore. 00:00:34.609 --> 00:00:37.549 You're a manual laborer in a digital factory. 00:00:37.990 --> 00:00:40.090 That is the tyranny of the alignment tool. It 00:00:40.090 --> 00:00:42.350 is like the modern Sisyphean task. You push the 00:00:42.350 --> 00:00:44.469 boulder up the hill, you get the text centered, 00:00:44.490 --> 00:00:46.810 and then you add one bullet point, and the boulder 00:00:46.810 --> 00:00:48.789 just rolls right back down. The whole layout 00:00:48.789 --> 00:00:51.750 breaks. It's agonizing. But what if we could 00:00:51.750 --> 00:00:54.909 just bypass all that? What if you could just 00:00:54.909 --> 00:00:58.240 speak to your computer, tell it a story? Literally 00:00:58.240 --> 00:01:01.159 just talk to it and watch it build a website 00:01:01.159 --> 00:01:04.480 grade interactive presentation in real time. 00:01:04.560 --> 00:01:07.159 That is the promise we are looking at today. 00:01:07.620 --> 00:01:10.319 We're diving into a guide on mastering slide 00:01:10.319 --> 00:01:13.239 design with Claude artifacts. Okay. And I want 00:01:13.239 --> 00:01:15.280 to be clear up front. This is not just a tip 00:01:15.280 --> 00:01:19.060 for using PowerPoint faster. It is about abandoning 00:01:19.060 --> 00:01:21.439 PowerPoint entirely for something called code 00:01:21.439 --> 00:01:25.920 first thinking. Welcome to the deep dive. I'm 00:01:25.920 --> 00:01:28.500 genuinely curious about this one. It feels like 00:01:28.500 --> 00:01:30.659 we're moving from slide design to something that 00:01:30.659 --> 00:01:33.140 looks, I don't know, more like software development. 00:01:33.299 --> 00:01:35.640 That's a fair assessment, but, you know, don't 00:01:35.640 --> 00:01:38.200 let that scare you. It sounds intimidating, but 00:01:38.200 --> 00:01:40.480 it's actually incredibly liberating. We'll see 00:01:40.480 --> 00:01:42.500 about that. I'm still a little skeptical about 00:01:42.500 --> 00:01:45.200 the complexity, but here's the roadmap for our 00:01:45.200 --> 00:01:47.840 discussion today. Lay it out. First, we need 00:01:47.840 --> 00:01:49.920 to understand what clawed artifacts actually 00:01:49.920 --> 00:01:53.359 are and why, according to this HTML, is, like, 00:01:53.939 --> 00:01:56.319 objectively superior to a slide deck. Okay. Then 00:01:56.319 --> 00:01:59.379 we have to talk about the input, because apparently 00:01:59.379 --> 00:02:02.780 writing a script like a story, it changes how 00:02:02.780 --> 00:02:06.379 the AI thinks about design. That part is fascinating. 00:02:06.439 --> 00:02:09.060 It's all about how these LLMs predict what comes 00:02:09.060 --> 00:02:11.539 next. Right. And then we'll look at the execution, 00:02:11.780 --> 00:02:14.419 the specific system prompts to get that really 00:02:14.419 --> 00:02:16.919 premium, high -end look. And finally, we'll touch 00:02:16.919 --> 00:02:19.800 on some advanced polishing tools, like Cursor, 00:02:19.860 --> 00:02:22.460 that supposedly let non -coders build interactive 00:02:22.460 --> 00:02:25.509 apps. It is a packed agenda. It is, but... Honestly, 00:02:25.530 --> 00:02:27.349 by the end of this, you might look at that orange 00:02:27.349 --> 00:02:30.909 PowerPoint icon and just delete it. Let's start 00:02:30.909 --> 00:02:34.090 with the basics. We keep saying Claude Artifacts. 00:02:34.430 --> 00:02:36.729 For the listener who just uses a standard chat 00:02:36.729 --> 00:02:38.889 interface, you know, chat, GPT, Gemini, whatever. 00:02:39.389 --> 00:02:41.550 What are we actually looking at here? What is 00:02:41.550 --> 00:02:43.870 an artifact? So typically when you chat with 00:02:43.870 --> 00:02:46.490 an AI, it's a linear feed. You say something, 00:02:46.610 --> 00:02:48.849 it writes back text, it's a conversation. Right. 00:02:49.050 --> 00:02:51.270 Artifacts changes the geometry of your screen. 00:02:51.949 --> 00:02:54.430 When you ask Claude to build something substantial 00:02:54.430 --> 00:02:57.349 like code, or a website, or in this case a slide 00:02:57.349 --> 00:03:00.669 deck, it opens a dedicated window. A stage. Yeah, 00:03:00.789 --> 00:03:02.569 a stage on the right side of the interface. So 00:03:02.569 --> 00:03:05.009 it's a split screen, chat on the left, visual 00:03:05.009 --> 00:03:07.530 result on the right. Precisely. But here is the 00:03:07.530 --> 00:03:09.930 critical distinction. It is not generating a 00:03:09.930 --> 00:03:13.710 static image like a JPEG or a PDF. It is rendering 00:03:13.710 --> 00:03:16.669 code, specifically HTML. This is that code first. 00:03:17.260 --> 00:03:20.039 When you use PowerPoint, you are manipulating 00:03:20.039 --> 00:03:23.280 a graphic interface. You are moving pixels. When 00:03:23.280 --> 00:03:26.159 you use artifacts, the AI is writing code that 00:03:26.159 --> 00:03:28.960 behaves like slides. I have to pause you there. 00:03:29.340 --> 00:03:31.340 I'm a visual person. I like dragging the square. 00:03:31.780 --> 00:03:33.800 I like knowing that if I put the picture here, 00:03:34.199 --> 00:03:37.120 it stays here. Why should I care about the code 00:03:37.120 --> 00:03:39.919 underneath? Doesn't that just add a layer of 00:03:39.919 --> 00:03:41.960 abstraction? You would think so, but consider 00:03:41.960 --> 00:03:44.680 the trade -off. Think about how you spend your 00:03:44.680 --> 00:03:47.400 time. There is this painful statistic that we 00:03:47.400 --> 00:03:49.819 usually spend, what, 40 % of our time on the 00:03:49.819 --> 00:03:52.639 actual content, the thinking, and 60 % on just 00:03:52.639 --> 00:03:55.400 formatting, just making it look okay. That feels 00:03:55.400 --> 00:03:57.900 optimistic. I feel like I spend 90 % of my time 00:03:57.900 --> 00:04:00.500 formatting. Right. And the problem with manual 00:04:00.500 --> 00:04:03.460 formatting is that it is fragile. If you have 00:04:03.460 --> 00:04:06.280 50 slides and you decide, actually, I hate this 00:04:06.280 --> 00:04:09.180 corporate blue, I want Apple Red, what do you 00:04:09.180 --> 00:04:11.389 have to do in PowerPoint? I mean, if I haven't 00:04:11.389 --> 00:04:13.330 set up the master slide perfectly, which let's 00:04:13.330 --> 00:04:15.610 be honest, I never do. Nobody does. I have to 00:04:15.610 --> 00:04:18.209 click through 50 slides and manually change the 00:04:18.209 --> 00:04:20.949 header. Exactly. You are clicking 50 times. But 00:04:20.949 --> 00:04:23.810 because artifacts are built on code, you have 00:04:23.810 --> 00:04:26.709 global editing. You don't touch the slides. OK. 00:04:26.839 --> 00:04:29.740 You just say to the AI, change the whole color 00:04:29.740 --> 00:04:32.699 theme to orange red and make all the titles 20 00:04:32.699 --> 00:04:35.540 % bigger. And it just ripples through. And because 00:04:35.540 --> 00:04:38.079 the underlying code is all connected, boom, it 00:04:38.079 --> 00:04:41.000 happens instantly across the entire deck. So 00:04:41.000 --> 00:04:42.860 you're saying the code acts as almost like a 00:04:42.860 --> 00:04:45.500 nervous system. You stimulate one part. and the 00:04:45.500 --> 00:04:47.980 whole body reacts. That is a great analogy. It 00:04:47.980 --> 00:04:51.240 enforces consistency. You physically cannot have 00:04:51.240 --> 00:04:54.420 one slide with a slightly different font size 00:04:54.420 --> 00:04:57.199 by accident because the code defines the font 00:04:57.199 --> 00:04:59.600 size globally. That's a fascinating shift in 00:04:59.600 --> 00:05:01.699 agency. You stop being the construction worker 00:05:01.699 --> 00:05:04.259 laying the bricks and you become the architect 00:05:04.259 --> 00:05:06.720 shouting instructions. And it allows for features 00:05:06.720 --> 00:05:09.639 that PowerPoint simply struggles with too. Like 00:05:09.639 --> 00:05:11.420 what? We're talking about interactive chapter 00:05:11.420 --> 00:05:14.160 menus. Because it's HTML, it's basically a little 00:05:14.160 --> 00:05:16.019 website. You can have a navigation bar on the 00:05:16.019 --> 00:05:17.920 left. Oh, interesting. You click chapter three 00:05:17.920 --> 00:05:20.220 and it jumps there instantly. It can support 00:05:20.220 --> 00:05:22.579 live countdown timers, dynamic charts, things 00:05:22.579 --> 00:05:25.660 that feel alive rather than static. So if I'm 00:05:25.660 --> 00:05:27.740 hearing you right, the core value proposition 00:05:27.740 --> 00:05:30.920 isn't just speed. It's that the underlying structure, 00:05:31.060 --> 00:05:34.529 the code. enforces a level of consistency that 00:05:34.529 --> 00:05:37.750 a human just can't maintain manually. Exactly. 00:05:38.250 --> 00:05:41.790 Global code updates mean zero formatting errors. 00:05:41.930 --> 00:05:43.990 Okay, I'm listening. So we have the vehicle, 00:05:44.449 --> 00:05:46.949 which is HTML code rendered in this artifact 00:05:46.949 --> 00:05:49.430 window, but a vehicle is only as good as the 00:05:49.430 --> 00:05:51.290 fuel you put in it. We need to talk about the 00:05:51.290 --> 00:05:53.870 input. You know, garbage in, garbage out. This 00:05:53.870 --> 00:05:56.139 is where most people get it wrong. And it's not 00:05:56.139 --> 00:05:58.180 their fault. We've been trained by PowerPoint. 00:05:58.319 --> 00:06:01.060 How so? We think in bullets. We think. Title, 00:06:01.300 --> 00:06:02.819 bullet, bullet, bullet. That's true. That's how 00:06:02.819 --> 00:06:05.360 you outline. But the guide argues for a narrative 00:06:05.360 --> 00:06:09.079 strategy. It explicitly says, do not paste dry 00:06:09.079 --> 00:06:11.959 bullet points. Write your script like a long 00:06:11.959 --> 00:06:14.839 message to a friend or a dramatic story. That 00:06:14.839 --> 00:06:17.860 seems counterintuitive. I mean, usually AI wants 00:06:17.860 --> 00:06:20.399 structured data. If I want a slide deck, shouldn't 00:06:20.399 --> 00:06:22.980 I give it a list of slides? Why does a story 00:06:22.980 --> 00:06:26.209 help the design? It comes down to how these large 00:06:26.209 --> 00:06:28.930 language models, these LLMs, actually work. They're 00:06:28.930 --> 00:06:32.110 prediction engines. They predict the next token, 00:06:32.310 --> 00:06:35.069 the next piece of information, based on the pattern 00:06:35.069 --> 00:06:39.029 you give them. So if you feed it a dry, flat 00:06:39.029 --> 00:06:42.189 list of bullet points, what's it going to predict? 00:06:42.389 --> 00:06:45.709 A dry, flat visual hierarchy. Exactly. It thinks, 00:06:45.709 --> 00:06:47.850 OK, everything is equal weight. I will just make 00:06:47.850 --> 00:06:50.230 a list. I see. But if you write with narrative 00:06:50.230 --> 00:06:52.569 flow, if you say, We were struggling with sales, 00:06:52.589 --> 00:06:56.230 but then we found the solution. The AI detects 00:06:56.230 --> 00:06:59.269 that emotional pivot. It understands the logic 00:06:59.269 --> 00:07:02.610 of the argument. It might decide, hey, this solution 00:07:02.610 --> 00:07:05.110 part is the climax. I'm going to give that text 00:07:05.110 --> 00:07:08.089 its own slide with a large, bold font and a dark 00:07:08.089 --> 00:07:11.069 background. So by stripping away the rigid structure 00:07:11.069 --> 00:07:13.850 and just writing naturally, we're actually giving 00:07:13.850 --> 00:07:17.399 the AI more signal about what's important. Yes. 00:07:17.759 --> 00:07:20.060 You're programming the AI's attention span. You're 00:07:20.060 --> 00:07:22.779 telling it what matters. And practically speaking, 00:07:23.220 --> 00:07:26.160 you do need to structure this story into clear 00:07:26.160 --> 00:07:29.779 chapters. The problem, the solution, the strategy. 00:07:30.240 --> 00:07:32.620 This isn't just for flow. This is what triggers 00:07:32.620 --> 00:07:35.500 the AI to build that clickable navigation menu 00:07:35.500 --> 00:07:38.480 we talked about. If you don't define the chapters 00:07:38.480 --> 00:07:40.699 in the text, the code doesn't know how to build 00:07:40.699 --> 00:07:43.240 the menu buttons. The text also mentions something 00:07:43.240 --> 00:07:46.319 about visual cues. kind of breaking the fourth 00:07:46.319 --> 00:07:49.319 wall. Oh, this is a pro tip. You can insert notes 00:07:49.319 --> 00:07:51.779 in brackets right in the middle of your story. 00:07:52.000 --> 00:07:55.240 So like insert comparison table here or use a 00:07:55.240 --> 00:07:57.639 pie chart to show market share. So you're narrating, 00:07:57.720 --> 00:07:59.660 but you're also directing the camera. Exactly. 00:07:59.779 --> 00:08:02.019 You are bridging that gap between your text and 00:08:02.019 --> 00:08:03.920 the visual output. You don't have to hope the 00:08:03.920 --> 00:08:06.300 AI guesses you on a chart. You just tell it. 00:08:06.420 --> 00:08:08.860 Does writing like a storyteller actually result 00:08:08.860 --> 00:08:12.319 in a tangibly different visual layout? compared 00:08:12.319 --> 00:08:15.319 to just pasting in an outline. Yes. It helps 00:08:15.319 --> 00:08:18.660 the AI prioritize the gold ideas visually. It 00:08:18.660 --> 00:08:21.620 prioritizes the gold. I like that. Now, let's 00:08:21.620 --> 00:08:24.899 get into the mechanics. The system. I have to 00:08:24.899 --> 00:08:27.639 admit, as someone who isn't a coder, there is 00:08:27.639 --> 00:08:30.759 a vulnerability here for me. The idea of generating 00:08:30.759 --> 00:08:33.679 HTML is a little scary because if it breaks, 00:08:34.220 --> 00:08:36.019 I don't know how to fix it. I worry I'll just 00:08:36.019 --> 00:08:38.639 be staring at a wall of code, you know. Matrix 00:08:38.639 --> 00:08:41.600 style that is a very real fear the wall of text. 00:08:41.679 --> 00:08:43.899 Yeah, and the guide addresses this immediately 00:08:43.899 --> 00:08:46.159 Okay, first off you have to check your settings 00:08:46.159 --> 00:08:49.179 and quad ensure artifacts is actually enabled 00:08:49.179 --> 00:08:51.879 If it's not you will just get that scary wall 00:08:51.879 --> 00:08:54.539 of code You need the visual preview engine running 00:08:54.539 --> 00:08:57.179 so you see the slide not the brackets. Okay, 00:08:57.220 --> 00:08:59.519 so once the engine is on How do we steer it? 00:08:59.679 --> 00:09:02.259 We need a prompt? This is the secret sauce, the 00:09:02.259 --> 00:09:04.820 system prompt. You don't just say, make slides. 00:09:05.039 --> 00:09:07.600 You have to define the persona. You tell it. 00:09:07.940 --> 00:09:10.820 You are an expert HTML slide designer. Simple 00:09:10.820 --> 00:09:13.200 enough. But then you add constraints. And constraints 00:09:13.200 --> 00:09:17.080 are magic for AI. How so? You say, dark background, 00:09:17.759 --> 00:09:21.080 big clear white text, and this one's key, arrow 00:09:21.080 --> 00:09:23.879 key support. Why arrow key support? Because it's 00:09:23.879 --> 00:09:27.049 a website. By default, websites scroll, right? 00:09:27.350 --> 00:09:29.549 But you want a presentation. You want to tap 00:09:29.549 --> 00:09:31.929 your right arrow key and have it snap to the 00:09:31.929 --> 00:09:34.870 next slide. If you don't ask for that code, you'll 00:09:34.870 --> 00:09:36.649 be scrolling with your mouse wheel like you're 00:09:36.649 --> 00:09:38.669 reading a blog post. It just ruins the flow. 00:09:38.970 --> 00:09:41.070 That is a crucial detail. So you set the stage, 00:09:41.450 --> 00:09:44.049 then comes the execution. The guide breaks this 00:09:44.049 --> 00:09:46.990 down into a three -step build process. Step one 00:09:46.990 --> 00:09:50.320 is the initial architect. This is where you paste 00:09:50.320 --> 00:09:52.500 that narrative script we talked about, but there 00:09:52.500 --> 00:09:55.539 is a specific command I love here. Skip the hello 00:09:55.539 --> 00:09:59.419 or title part. Why? Is the AI too polite? It 00:09:59.419 --> 00:10:02.360 is. AI loves to schmooze. It wants to give you 00:10:02.360 --> 00:10:04.700 a title slide that says, here is the presentation 00:10:04.700 --> 00:10:06.919 you requested, and then a slide that says welcome. 00:10:07.059 --> 00:10:10.220 The guide says no. Cut the fluff. Hit the audience 00:10:10.220 --> 00:10:13.659 with value on screen one. Efficient. So we have 00:10:13.659 --> 00:10:16.019 the rough draft. Step two is visual upgrades. 00:10:16.269 --> 00:10:18.549 This is where we prompt for prestige. You look 00:10:18.549 --> 00:10:20.610 at the deck, and maybe it's a bit text heavy, 00:10:20.690 --> 00:10:22.889 so you go back to the chat and say, convert these 00:10:22.889 --> 00:10:25.330 bullet points into a comparison table, or make 00:10:25.330 --> 00:10:28.029 this a pie chart. OK. But here is the killer 00:10:28.029 --> 00:10:31.590 keyword the guide swears by, McKinsey. The consulting 00:10:31.590 --> 00:10:34.870 firm. Yes. You specifically ask for McKinsey 00:10:34.870 --> 00:10:38.450 style. I have to ask. Is that just a buzzword, 00:10:38.490 --> 00:10:40.629 or does it actually do something to the code? 00:10:40.870 --> 00:10:43.509 It does something very specific. In the design 00:10:43.509 --> 00:10:46.370 data the AI has been trained on, McKinsey is 00:10:46.370 --> 00:10:48.950 associated with a very specific aesthetic. Such 00:10:48.950 --> 00:10:54.850 as? Clean lines, specific sans serif fonts, and 00:10:54.850 --> 00:10:57.809 massive amounts of white space. It forces the 00:10:57.809 --> 00:10:59.830 AI to stop cluttering the slide. Interesting. 00:10:59.990 --> 00:11:02.350 It signals professionalism. It's a shortcut to 00:11:02.350 --> 00:11:04.350 a specific kind of design language that just 00:11:04.350 --> 00:11:07.429 screams expensive. And step three is the UX audit. 00:11:07.549 --> 00:11:09.850 User experience, yeah. Since this is code, you 00:11:09.850 --> 00:11:12.350 need to check the load times. But usually, because 00:11:12.350 --> 00:11:15.549 it's simple HTML, it's lightning fast, no loading 00:11:15.549 --> 00:11:18.389 circles, much lighter than a 50 megabyte PowerPoint 00:11:18.389 --> 00:11:21.110 file. So just to clarify, why is that specific 00:11:21.110 --> 00:11:24.669 keyword McKinji so effective in a prompt? It 00:11:24.669 --> 00:11:27.149 forces the AI to use whitespace and clean lines. 00:11:27.309 --> 00:11:30.190 Whitespace and clean lines. Got it. Now, I want 00:11:30.190 --> 00:11:32.009 to pivot to something a bit more advanced. We 00:11:32.009 --> 00:11:34.570 have the slides. They look professional. They're 00:11:34.570 --> 00:11:37.730 still just... slides. The guide mentions a tool 00:11:37.730 --> 00:11:39.990 called cursor that can apparently take this to 00:11:39.990 --> 00:11:42.289 a whole new level. This is where things get really 00:11:42.289 --> 00:11:44.710 fun. We are going to take a very brief break, 00:11:44.970 --> 00:11:47.210 but when we come back I want to understand how 00:11:47.210 --> 00:11:49.190 a non -coder is supposed to use a developer tool 00:11:49.190 --> 00:11:54.179 like cursor without breaking everything. Stay 00:11:54.179 --> 00:11:57.799 with us. We are back. We've built the deck in 00:11:57.799 --> 00:12:00.639 quad. It's HTML. It looks like a McKinsey consultant 00:12:00.639 --> 00:12:03.720 made it. Yeah. But maybe it needs that final 00:12:03.720 --> 00:12:07.100 1 % of polish. Or maybe I wanted to do something 00:12:07.100 --> 00:12:10.220 PowerPoint can't, like glow or react to my mouse. 00:12:10.740 --> 00:12:13.820 The guide brings up cursor. Yeah. Cursor is, 00:12:13.860 --> 00:12:15.639 well, technically, it's a code editor. It's a 00:12:15.639 --> 00:12:18.399 fork of VS code, which developers use. You are 00:12:18.399 --> 00:12:20.700 losing me. I am not opening a code editor. Stick 00:12:20.700 --> 00:12:23.480 with me, because cursor has AI built into the 00:12:23.480 --> 00:12:25.879 fabric of the editor. Think of it as clod for 00:12:25.879 --> 00:12:28.740 files on your computer. OK. I'm listening. So 00:12:28.740 --> 00:12:30.840 you download the HTML file you just made. You 00:12:30.840 --> 00:12:33.460 open it in Cursor. You see the code, which is 00:12:33.460 --> 00:12:35.919 scary, I know. Right. But you don't touch the 00:12:35.919 --> 00:12:38.759 code. You highlight a section, say the code for 00:12:38.759 --> 00:12:40.970 a button, and you press Control -Pay. A little 00:12:40.970 --> 00:12:43.870 chat box pops up right there in the code. And 00:12:43.870 --> 00:12:45.970 you talk to it in plain English. What do you 00:12:45.970 --> 00:12:48.710 mean? You say, make this button glow purple when 00:12:48.710 --> 00:12:52.009 I hover over it. Or change this background to 00:12:52.009 --> 00:12:55.330 a subtle blue gradient. And the AI just writes 00:12:55.330 --> 00:12:57.759 the code? It deletes the old code. and writes 00:12:57.759 --> 00:13:00.039 the new code right before your eyes. You see 00:13:00.039 --> 00:13:02.840 the preview update instantly. That is wild. I 00:13:02.840 --> 00:13:04.679 mean, glow on hover is something that would take 00:13:04.679 --> 00:13:07.399 me an hour to figure out in PowerPoint animations, 00:13:07.480 --> 00:13:09.899 and it would probably look cheesy. Exactly. And 00:13:09.899 --> 00:13:13.059 here it takes seconds. You can add shadows, smooth 00:13:13.059 --> 00:13:15.799 transitions, things that make the deck feel like 00:13:15.799 --> 00:13:18.539 a premium app. You feel like a wizard. You are 00:13:18.539 --> 00:13:20.700 typing English, and the computer is spitting 00:13:20.700 --> 00:13:24.460 out advanced CSS. That sounds incredible, but 00:13:24.460 --> 00:13:26.799 I have to play devil's advocate again. Just because 00:13:26.799 --> 00:13:30.639 we can add glowing menus and gradients, should 00:13:30.639 --> 00:13:32.960 we? Is there a risk of over -engineering this? 00:13:33.080 --> 00:13:35.419 Huge risk. It's the Jurassic Park problem. Just 00:13:35.419 --> 00:13:37.460 because you can doesn't mean you should. And 00:13:37.460 --> 00:13:40.039 the guide actually outlines golden design rules 00:13:40.039 --> 00:13:42.500 to prevent this. What's rule number one? Less 00:13:42.500 --> 00:13:46.090 text, more meaning. A classic. Yeah. But it's 00:13:46.090 --> 00:13:48.850 harder to stick to with AI because AI loves to 00:13:48.850 --> 00:13:50.889 include every single word you wrote in the script. 00:13:50.990 --> 00:13:52.470 You have to be the editor. You have to be the 00:13:52.470 --> 00:13:54.929 editor. Let the charts talk. Rule number two. 00:13:55.389 --> 00:13:58.590 White space is luxury. I want to pause on that. 00:13:58.870 --> 00:14:01.870 White space is luxury. It sounds a little pretentious. 00:14:02.610 --> 00:14:05.690 Why is emptiness associated with luxury? Think 00:14:05.690 --> 00:14:09.009 about a discount flyer. It is crammed. Yeah. 00:14:09.169 --> 00:14:12.230 Every inch has a price, a starburst, a sale. 00:14:12.509 --> 00:14:16.190 sticker. It screams anxiety. It screams look 00:14:16.190 --> 00:14:19.409 at me. True. Now think about an art gallery or 00:14:19.409 --> 00:14:24.029 a high -end watch ad. A single object. Vast empty 00:14:24.029 --> 00:14:26.470 space. Right. It implies confidence. It says 00:14:26.470 --> 00:14:28.389 this number is so important it doesn't need to 00:14:28.389 --> 00:14:31.049 shout. Sendering a single powerful number in 00:14:31.049 --> 00:14:33.490 the middle of a vast dark background looks expensive. 00:14:33.649 --> 00:14:35.090 That's a really good point. It's the confidence 00:14:35.090 --> 00:14:37.590 of restraint. Precisely. And rule number three 00:14:37.590 --> 00:14:40.230 is navigation flow. Because we have that menu 00:14:40.230 --> 00:14:42.570 on the left, you can do something magical during 00:14:42.570 --> 00:14:45.350 a Q &A. If someone asks about the first topic, 00:14:45.429 --> 00:14:47.850 you click the menu and boom, you're there. You 00:14:47.850 --> 00:14:50.570 aren't frantically pressing the back arrow 50 00:14:50.570 --> 00:14:52.990 times while everyone watches you sweat. It makes 00:14:52.990 --> 00:14:55.409 you look like you were in total control of the 00:14:55.409 --> 00:14:57.870 information. It creates a wow factor. It shows 00:14:57.870 --> 00:14:59.960 you no - your material inside and out. OK, so 00:14:59.960 --> 00:15:02.039 you've polished it. You've respected the white 00:15:02.039 --> 00:15:05.039 space. Now you have to show it to people. And 00:15:05.039 --> 00:15:07.139 this is where my technical anxiety flares up 00:15:07.139 --> 00:15:11.639 again. In PowerPoint, I email a file. Done. How 00:15:11.639 --> 00:15:14.519 do I email an HTML folder? You don't. And this 00:15:14.519 --> 00:15:17.059 is the best part. This is the moment that changes 00:15:17.059 --> 00:15:20.240 the dynamic with your client or your team. The 00:15:20.240 --> 00:15:23.320 guide suggests two methods. Method one. You just 00:15:23.320 --> 00:15:27.129 open the HTML file in your browser. Chrome, Safari, 00:15:27.769 --> 00:15:30.210 whatever, press F11 for full screen, and present. 00:15:30.350 --> 00:15:32.309 The browser is the projector. Okay, but what 00:15:32.309 --> 00:15:34.610 if I want to send it to them? Method two. You 00:15:34.610 --> 00:15:37.570 use a service called Netlify. Netlify. Sounds 00:15:37.570 --> 00:15:39.929 technical? It sounds it, but think of it like 00:15:39.929 --> 00:15:41.830 Dropbox for code. You don't need to configure 00:15:41.830 --> 00:15:44.269 servers, you don't need to pay for hosting. So 00:15:44.269 --> 00:15:46.129 what do you do? You take that folder with your 00:15:46.129 --> 00:15:48.549 slides, you drag it onto the Netlify website 00:15:48.549 --> 00:15:51.649 in your browser, and you just drop it. And then, 00:15:51.730 --> 00:15:53.850 about three seconds later, it gives you a link. 00:15:54.470 --> 00:15:59.120 A URL. MyAwesome -presentation .netlify .app. 00:15:59.320 --> 00:16:01.299 So it's a website. It is a website. You text 00:16:01.299 --> 00:16:03.659 that link to your client. They open it on their 00:16:03.659 --> 00:16:06.740 phone. It renders perfectly. Wow. They open it 00:16:06.740 --> 00:16:09.659 on their iPad. It works. Wait. So that solves 00:16:09.659 --> 00:16:12.440 the missing font issue. The thing where I use 00:16:12.440 --> 00:16:14.759 a cool font on my Mac, send it to a PC user, 00:16:15.139 --> 00:16:17.440 and everything turns into Times New Roman, and 00:16:17.440 --> 00:16:19.639 the layout just explodes. Gone. Because it's 00:16:19.639 --> 00:16:21.919 a website, it pulls the fonts from the internet, 00:16:22.059 --> 00:16:24.600 like from Google fonts. It ensures the experience 00:16:24.600 --> 00:16:27.100 you design is exactly the experience they see. 00:16:27.320 --> 00:16:29.620 It is universal. So the browser is effectively 00:16:29.620 --> 00:16:32.139 the new projector. Absolutely. It guarantees 00:16:32.139 --> 00:16:34.759 fonts and layouts render perfectly everywhere. 00:16:35.139 --> 00:16:37.480 So let's unpack the big picture here. We aren't 00:16:37.480 --> 00:16:39.480 just talking about a new software tool. We're 00:16:39.480 --> 00:16:42.600 talking about a philosophical shift. The guide 00:16:42.600 --> 00:16:46.080 summarizes this as moving from slide designers 00:16:46.080 --> 00:16:49.629 to experienced architects. That's the core takeaway. 00:16:50.070 --> 00:16:53.009 When you are dragging boxes, you are a laborer. 00:16:53.029 --> 00:16:55.610 You are fighting the tool. When you are prompting 00:16:55.610 --> 00:16:57.889 code, you are a director. You are focused on 00:16:57.889 --> 00:17:00.549 the story and the flow. And the trade -off seemed 00:17:00.549 --> 00:17:03.669 clear. We trade manual formatting, all the clicking 00:17:03.669 --> 00:17:06.890 for natural language commands. We trade linear 00:17:06.890 --> 00:17:11.250 static slides for interactive website -like artifacts. 00:17:12.349 --> 00:17:15.450 And crucially, we trade bullet points for narrative 00:17:15.450 --> 00:17:18.009 scripts to drive the design. It lets us spend 00:17:18.009 --> 00:17:20.730 that precious time on the argument, the logic, 00:17:21.390 --> 00:17:24.289 the persuasion. That's what actually wins pitches, 00:17:24.690 --> 00:17:27.049 not the alignment of the text box. It's compelling. 00:17:27.410 --> 00:17:30.369 But it does require a leap of faith. For the 00:17:30.369 --> 00:17:32.690 listener who is sitting there, maybe with a PowerPoint 00:17:32.690 --> 00:17:35.609 icon staring at them from their desktop, what's 00:17:35.609 --> 00:17:37.609 the call to action? The challenge is simple. 00:17:37.869 --> 00:17:39.730 Take the next script you have. Maybe it's for 00:17:39.730 --> 00:17:42.509 a team meeting, maybe a pitch. Do not open PowerPoint. 00:17:42.789 --> 00:17:45.769 Write it out as a story. Open Claude. Paste it 00:17:45.769 --> 00:17:48.069 in with that initial architect command. Create 00:17:48.069 --> 00:17:50.789 an HTML slide deck. Skip the intro. Just see 00:17:50.789 --> 00:17:52.730 what happens. Even if you fail, you'll learn 00:17:52.730 --> 00:17:54.490 something about how you structure your thoughts. 00:17:55.390 --> 00:17:58.529 Exactly. Jump in. The water is warm and the fonts 00:17:58.529 --> 00:18:01.660 always load. Don't just save time, change how 00:18:01.660 --> 00:18:04.720 you communicate. That was the final thought from 00:18:04.720 --> 00:18:07.319 the guide, and I think it sticks. Thanks for 00:18:07.319 --> 00:18:09.440 diving in with us. Always a pleasure. We'll catch 00:18:09.440 --> 00:18:09.980 you on the next one.