Claude HTML Slides = The NEW Powerpoint Killer (Full Tutorial)

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

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

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

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

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

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

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

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

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

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

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

claude.ai/downloads and to actually download the desktop version here. And once you have that

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,

you. The second tab here is Cowork, which does things for you. So, if you want to move around files automatically or have Claude browse the web the same way that a person would, then Cowork is your go-to. But, if you go to the third

your go-to. But, if you go to the third tab, you'll find the most powerful amongst all of these, which is Claude Code, which builds things for you. Now,

the way that I use it personally is through an IDE software like Antigravity because here you can just view your files much easier and I just have Claude Code running here as an extension, which you can just find here at the left. So,

if you search for Claude Code here, you'll be able to install it quite easily. Now, for the remainder of this

easily. Now, for the remainder of this tutorial, I'll be using Claude Code via the Antigravity extension, but just know that the setup and all the steps will practically be the same whether you're using the desktop app or if you're using

it via the extension or even the terminal view, which is a bit more for developers. Now, the base skill that we

developers. Now, the base skill that we will be installing is this really nice skill by Zara Zaun over at X, which I think went pretty viral. So, it already has 1.3 million views here. I think Zara

did a really good job here of making HTML slides using Claude Code. So, if

you need a good foundation in order to create these PowerPoints and presentations and slides much easier that are a bit more dynamic, then I think this is one of the easiest ways to do it. So, I'll link this repo as well

do it. So, I'll link this repo as well below. But, if you go to this URL, the

below. But, if you go to this URL, the way that you install it is just by copying this GitHub link. Give that to Claude Code and just say to install this skill for you. And once you send that over, it will now get you set up so that

you can have Claude Code use this skill and create those HTML presentations for you right out of the gate. So, now that it's installed, to test this out, I'll just say, "Hey, so can we actually create, let's say, a tree slider sample

slide from this skill? Just so that we can inspect what it creates for us." And

this is just good practice so that you can understand what are the capabilities behind this skill that is now available for you in Claude. And there we go, now it confirmed to us that it is now done and we have a very simple tree slider

that the design is obviously very vanilla, but that is by intent because we'll be upgrading it for your own brand design system in a bit. But, the great thing here is that within this HTML file, you can just scrub through the

slides using the arrows on your keyboard or on Chrome, you can even hit F11 and that will enter full screen mode, which allows you to present this whole thing in a much more engaging way. But,

obviously, we don't want just a vanilla template, right? We want to upgrade it

template, right? We want to upgrade it so that it looks good and actually is aligned to whatever design it is that we want to present. So, if you take this to level two, then you can use Claude to upgrade this skill for your own brand

design system. And to do this, from the

design system. And to do this, from the same Claude Code session, all you need to do is to provide it some input on your own design. Now, a very simple way to do this is just to take a screenshot of any website you're inspired by. Let's

say if you want a more Apple aesthetic, then you can just take a screenshot of this and you can attach that to Claude.

Or, what would be even better is if you have a brand design book like this where it outlines the primary colors of your own brand, what are the hex codes for that, the typography options that you

use to be consistent, as well as a few principles around the way you design things, icons that you use constantly, as well as logos. Now, the good news is this is actually pretty easy to make.

So, if you already have a website, you can just use this skill which I developed, which you can grab in this link or in the pinned comment below.

I'll link all of the resources there.

And what this basically does is to give Claude a brand reference, let's say a website, and you will get a full design system page and a brand book PDF, just like this one that you see. But, let's

say we want our presentations to be guided more by this brand book, what you can now do is to just copy this PDF or at least the path to this PDF so that Claude Code knows exactly where in your computer it can look for this file. And

I'll just say, "Hey, so take a look at this brand book design system and can you please update that skill we just installed so that it follows the principles behind this brand book,

please." You can also ask me clarifying

please." You can also ask me clarifying questions so that the intention is clear and aligned before you proceed. And that

part about asking you clarifying questions is just a good practice so that you can make sure that whatever it is that Claude will change in that skill is aligned to your intention. So, I'll

just answer each one of these, then we'll be regenerating that HTML presentation in a bit.

So, it is now philosophizing our feedback and it should come back to us with a more refined skill. And when

that's done, your skill should now be updated for your own brand look. And

I'll just say, "Update the previous slides you made with this new skill."

And there we go, our slides have now been upgraded to our own brand design palette. So, you can see the Robo Labs

palette. So, you can see the Robo Labs logo and icon in here. And if I scrub through the rest of the slides, the typography as well as the colors have also been adjusted and aligned to what it is that we want. And just to give you

a before and after view, this was the vanilla skill and this is the one that we designed together. And so, you can see how different it is, right? It's the

same content, but if you take the effort to align it to your own taste, then it becomes much more engaging when you present it. Now, let's take this further

present it. Now, let's take this further because apart from aligning it to your own brand design system and your own color palette, if you want it to be a bit more engaging, you can actually build your own components using Claude,

which are basically these visual motion graphic style HTML modules that you can just plug into your presentation. And

just to give you an example, this is a component library that we've made for within our community. And if I scrub through these, you can see there's several entries in here. And if I were to open one of them, this just gives you

a lot of templates and elements that you can potentially use for your own presentations. It has components on

presentations. It has components on motion pads, text effects. It includes

some animated charts, which are pretty useful when displaying data, couple of user interface mock-ups that are quite minimalist in nature, but are just useful for us internally since we need to communicate and use this in a lot of our training materials. We have more

components here on terminal user interfaces, isometric visuals like these ones. Or, if you need a more blueprint

ones. Or, if you need a more blueprint style vibe, that is also available here.

This one's another example where it's a bit more like a notebook parchment style component patterns, which are pretty cool. But, you get what I mean, right?

cool. But, you get what I mean, right?

So, there's a lot of these options that you can do with Claude. And the great thing is, depending on what industry you're on, you can create custom modules and components like these yourself as well. And to make these, if you go back

well. And to make these, if you go back to the Claude Code session that you were talking to, you can just say, "Hey, so I need animated HTML components that we can include in this skill. Can you

create six of them for me, put them in a Bento site, and open it for me in a new HTML page in my local host in my device so that I can inspect them. Feel free to suggest different animations depending

on our setup and based on everything you know about the work that I do." And if you send that prompt over, then you basically offload the thinking to Claude Code in order to create these animated elements for you and even let it suggest

to you what the right animated components are for the specific work that you do. And there you go, it confirmed to me that it created those components now and it's actually turned out pretty well. So, it created for me this component for a token stream, it

created this context window jar, this animation for our agents, a heat map animation, this pretty cool spectrum which I guess we can use to illustrate steps as they happen, and also this nice

animation for the Agentic loop. So, the

reason why these are custom-made for me is because I asked Claude to custom-make them for me. And so, if you send that same prompt to Claude, then you'll be able to just get these components, which if you're not satisfied with them, then

you can just simply ask Claude to do more of them and even be more specific.

Like for example, "Hey, so these are great, but I actually want uh components for data charts as well. So, can you give me, let's say, three more components that are line charts, bar charts, and maybe a pie chart that are

animated?" And with that prompt, you can

animated?" And with that prompt, you can see it gave me this weekly trend line component, which I can now use. It also

gave me this donut chart, which I guess we can refine further because it is exceeding beyond the boundaries in there. And we also have this bar

there. And we also have this bar [clears throat] chart. And if you need to present data, the great thing is these are all HTML code, right? So, you

can potentially link this to a data set and actually use these bar chart component to present that set of data.

But now, let's say that you have your component library now available. If you

just ask Claude to rework the slides that you were building to include components from the library that you just built, then Claude will now go into that same presentation you were working on and it's upgraded to have these more visual styles. And so, the final

visual styles. And so, the final presentation that we ended up with, so you can see here that it included those icons for us, which is good. It upgraded

this slide as well to have those SVG components for us. And for this last sample slide, it included that sort of orbiting particles at the back. Now, a

common question that I get when it comes to these HTML slides is how you can add photos to them. So, I just extended this to illustrate that that can actually be possible. And all that's happening here

possible. And all that's happening here under the hood is that since these are all HTML, then we are simply linking to photos in our computer or from online in order to present these photos from

within the presentation. And in case you're curious, the prompt that I used just to add those photos in is to ask Claude to add slide four and slide five, which are these ones, and to get them from Unsplash, which is just a free

stock photo site that Claude can browse the web and get those images for you.

Obviously, if you want your own images, then you can just provide that to Claude as well, and it'll be able to use them from within your presentation. But there

you go, that is how you make beautiful presentations using Claude. I hope that was useful, and if it is, then consider subscribing because that helps us a lot to put out more educational content like this. And if you want to learn more

this. And if you want to learn more about how I got those design systems for the other brands that I showed near the intro, then you can watch this video next. I'll see you guys next time. Thank

next. I'll see you guys next time. Thank

you.

[music]