RoboNuggets — Claude HTML Slides (PowerPoint Killer)
Source: YouTube Channel: Jay E | RoboNuggets (151000 subs) Duration: 12:16 Views: 65133 · Likes: 1566 Video: Watch on YouTube
Get the Agentic AI Masterclass and 50+ Slide Components Library 🚀 https://www.skool.com/robonuggets/about?ref=c1365a0fede2445292bc2bbd2b9e9359
Credit to zarazhang for the base skill https://github.com/zarazhangrui/frontend-slides
Get RUBRIC - The Command Centre for AI Agents: https://www.getrubric.app/
Summary 👇🏻 Create instantly beautiful slides with Claude - here’s how
Our AI Partner Tools (affiliate revenue go to community perks): 🥚 Free trial of Blotato: https://blotato.com/?ref=robonuggets 🥚 Free trial of n8n: https://n8n.partnerlinks.io/o3jqtj032c02 🥚 Free trial of Make https://www.make.com/en/register?pc=robonuggets 🥚 Free trial of ElevenLabs: https://try.elevenlabs.io/m5mn2jkv5rzk 🥚 Free credits at Apify: https://www.apify.com?fpr=sffv1
About Me 👋🏻
Hey thanks for watching! I’m Jay - spent my career in data and brand building, founded the ROBO Group to help forward-looking businesses grow with AI, and now teaching what I know through this channel and the RoboNuggets community.
If you learned something new and want to see more, support the channel by subscribing: https://www.youtube.com/@RoboNuggets
Follow on other platforms 🔻 ➗ Instagram: https://www.instagram.com/robonuggets ➖ Tiktok: https://www.tiktok.com/@robonuggets ✖️ Twitter/X: https://www.twitter.com/robonuggets ➕ LinkedIn: https://www.linkedin.com/in/j-enri/
For business, reach out at https://robolabs.so
Leave me a comment if you have a specific request! Thanks. — J
Timestamps 00:00 Intro 02:08 Level 1 05:11 Level 2 07:50 Level 3
Key Insights
Based on the full video transcript:
Creating HTML slides is now one of my favorite ways to use Claude. I can automatically generate slides like these that have beautiful animations, visual components that make sense for your brand, or even dynamic charts that reflect actual data. So, if you’re still using PowerPoint or paying for Gamma every month, you’re going to want to watch this tutorial. >> [music] >> So, to give you a preview of these HTML presentations, so you can see for this one we use this exact same system to create these learning materials for our in-person training events. So, this is all HTML, and what’s great about it is that they are quite dynamic. So, if you need process-driven slides like these, that is entirely possible. All of these has been live coded and generated by Claude. If you need to present charts like this nice radar chart over here, again, this is all HTML under the hood and created by our AI agent as well. Or, if you want to put in icons and even photos as well, then that is within the realm of possibilities for you. And because creating these slides are actually quite fast and is free, I went ahead and create some mock-up slides for some well-known brands. So, this one is a mock-up using Anthropic’s design system. So, if you were working on Claude, then this would be a really good way for you to present your work. This one for Apple turned out really well. It has that aesthetic for apple.com and even has a mock-up of an iPhone in there, which you can even ask Claude to animate. So, you can see this whole graphic is pulsing quite subtly, which is pretty cool. And yep, all of these slides have just been generated by Claude. And all by one shot, like I didn’t even inspect this. This is the one it created for Figma, so it has that nice animation for each of these cards as you present them and even that animation for the mouse which is going around the screen. This one for Uber turned out pretty well as well. So, the component that it made is actually appropriate because it showed that map and it has this black and white interface, which is pretty sleek. I think this one has a bit more slides and all of these are pretty professional and you can imagine how someone from Uber can just tweak this to their liking. This is the one for Spotify, so just scrubbing through this, you can see it captured the Spotify green gradient design system in there. So, this is the one for Wise, so the currency flow there is there. Looks really good with even this nice ticker at the bottom. So, you can see how just dynamic these slides can be. All generated for you right from Claude. So, to build beautiful presentations using Claude, there’s actually three levels to it. The first is to get you set up with the HTML slides skill, which I’ll introduce in a bit. The second level is to make it your own, to make it your brand and your design. And finally, I’ll teach you how to build your own components that are appropriate for whatever it is that you need, so that you have animated visuals like these that you can include in your presentations. Now, real quick, we just released the Agentic AI Masterclass for our members at Robo Nuggets, which takes you from zero to mastery when working with agents. There’s a link to the community in the pinned comment below. We’ve got founders in there who landed their first client in weeks, live build sessions where we create this stuff together, and the actual templates behind what I showed in this video. The community is also the reason these lessons get made, so see that below if that’s for you. Now, if you haven’t used Claude before, one of the most approachable ways by which you can try it out is by going to claude.ai/downloads and to actually download the desktop version here. And once you have that installed, you will see three sections. The first one is chat, so it’s similar to ChatGPT where it explains things for you. The second tab here is Cowork, which does things for you. So, if you want to move around fil
Chapters
- 00:00 — Intro
- 02:08 — Level 1
- 05:11 — Level 2
- 07:50 — Level 3