The argument in one line.
Claude Code can generate animated, branded HTML presentations by installing a frontend-slides skill, customizing it with your design system, and building a reusable component library—eliminating the need for PowerPoint or expensive design tools.
Read if. Skip if.
READ IF YOU ARE…
- A founder or consultant who presents to clients monthly and currently spends 2+ hours per presentation designing slides in PowerPoint or Gamma.
- A content creator or educator who needs to produce multiple branded slide decks quickly and wants animations without hiring a designer.
- A technical person comfortable with AI tools who wants to stop paying subscription fees for presentation software and build custom components instead.
- Someone working within a company with a defined design system who needs to generate on-brand decks at scale without manual design work.
SKIP IF…
- You need presentations ready in 10 minutes and don't want to learn a new workflow — this requires at least one generation cycle and some prompt iteration.
- Your slides are primarily text-heavy with minimal visual design — HTML slides shine for animated components and data viz, not dense bullet points.
- You work in an organization where IT policy restricts AI tools or requires all presentations in native PowerPoint format for editing and version control.
The full version, fast.
Claude Code can replace PowerPoint and Gamma by generating animated HTML presentations through a three-level workflow that compounds in quality as you invest more setup. Start by installing Zara Zhang's frontend-slides skill via a GitHub link pasted into Claude Code, which gives you a vanilla deck navigable with arrow keys or fullscreen mode. Next, feed Claude a brand book PDF or website screenshot and ask it to update the skill to match your typography, colors, and design principles. Finally, prompt Claude to build a custom library of animated components � charts, UI mockups, motion graphics � tailored to your industry, then ask it to retrofit those components into existing decks. Images pull from Unsplash or local files via standard HTML.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 02:08
01 · Demo gallery + hook
Rapid demo of finished brand decks (Anthropic, Apple, Figma, Uber, Spotify, Wise) to prove viability before any instruction. Introduces the three-level framework.
02:08 – 05:11
02 · Level 1 — Install the HTML Slides skill
Downloads Claude Desktop, introduces Antigravity IDE + Claude Code extension, installs Zara Zhang's frontend-slides skill via GitHub URL, generates a 3-slide sample to inspect output.
05:11 – 07:50
03 · Level 2 — Make it your brand
Feeds a RoboLabs brand PDF to Claude, asks clarifying questions, regenerates the skill with custom colors/typography/logo/principles. Shows before-and-after comparison.
07:50 – 12:16
04 · Level 3 — Build your own components
Prompts Claude to generate 6 animated HTML components in a bento layout (Token Stream, Content Window, Agent Relay, Heatmap, Autonomy Spectrum, Agentic Loop), extends to data charts, adds Unsplash photos, and reworks the final deck to include all components.
Lines worth screenshotting.
- HTML presentations built with Claude are free to generate, while Gamma charges a monthly subscription for similar output.
- A brand design book — with color codes, typography, and design principles — transforms a vanilla HTML skill into something that actually looks like your brand.
- Giving Claude a screenshot of a website you admire is enough input to generate slides that match that aesthetic.
- The most powerful tab in Claude Code is not chat or co-work — it's Claude Code, because it builds things rather than explains them.
- Building a component library of animated HTML modules once means every future presentation can draw from it instantly.
- You can point Claude at an Unsplash URL and it will browse the web to pull real photos directly into your HTML slides.
- Asking Claude to suggest animated components based on the work you do — rather than specifying them yourself — produces more relevant results.
- HTML charts inside a presentation can be linked to a live dataset, turning a static slide into a dynamic data display.
- The gap between a vanilla slide template and a branded one is the effort of a single brand book PDF — not a design tool subscription.
- One-shot generation of a complete multi-slide deck is possible without inspecting or touching any underlying code.
- A component library built in Claude Code is reusable across every future presentation you build in that same session or project.
- Animated SVG components — including agentic loop animations, heat maps, and token streams — are within reach for anyone who asks Claude to build them.
Brand-Locked HTML Slides Built by an AI Agent Replace Paid Presentation Tools
Claude Code workflows
Jay E's three-level framework — install a skill, encode your brand, then build a custom component library — shows that generating polished animated presentations with Claude Code is a pipeline, not a one-shot prompt, and that the quality ceiling rises with each level.
01Demo gallery + hook
- Showing finished brand decks (Anthropic, Apple, Figma, Uber, Spotify, Wise) before any instruction is the proof-before-pitch structure — the viewer believes the system works before learning how to use it
- Three-level framework (install, brand, build) is stated upfront so the viewer knows exactly what they will walk away with
02Level 1 — Install the HTML Slides skill
- Install via GitHub URL — the skill teaches Claude the structural and aesthetic conventions for HTML presentations
- Generating a 3-slide sample immediately after install shows the baseline before any brand customization is applied
03Level 2 — Make it your brand
- Feeding a brand PDF and asking Claude to regenerate the skill with custom parameters locks colors, typography, logo, and principles into every subsequent generation
- The before-and-after comparison is the proof — the brand-locked output is not incrementally better, it is categorically different
04Level 3 — Build your own components
- Custom animated components (Token Stream, Agent Relay, Heatmap, Autonomy Spectrum) are generated by describing the behavior — the agent handles all HTML, CSS, and JavaScript
- Building the component library separately from the deck means each component can be reused across future presentations without rebuilding
Terms worth knowing.
- Claude Code
- Anthropic's command-line AI coding assistant that can generate files, run code, and browse the web — used here as a slide and presentation design tool.
- HTML slides
- Presentations built as web pages using HTML and CSS instead of traditional slide software, allowing animations, dynamic data, and full design customization.
- Claude skill
- A packaged set of instructions stored as a Markdown file that teaches Claude Code how to perform a specific task automatically when prompted.
- frontend-slides skill
- A community-created Claude skill (by Zara Zhang) that gives Claude Code a structured workflow for generating polished, animated HTML slide decks.
- brand design system
- A documented set of visual rules — colors, typography, logo usage, spacing — that ensures all materials produced look consistent with a brand's identity.
- brand book
- A PDF or document that captures the rules of a brand's visual identity, often used as a reference file so AI tools can generate on-brand output.
- component library
- A collection of reusable visual building blocks — such as animated charts, icons, or UI elements — that can be inserted into presentations or web projects.
- Bento site
- A single HTML page that displays multiple components arranged in a grid layout, used here as a preview page to inspect a set of animated UI modules at once.
- vibe coding
- A casual term for directing an AI to build or design something through natural-language prompts, without writing code manually.
- Gamma
- A web-based AI presentation tool that auto-generates slide decks from prompts, positioned here as an alternative to the HTML-slides approach.
- Unsplash
- A free stock photo website with a public library of high-resolution images, accessible via URL so AI tools can embed photos directly into generated files.
- localhost
- A local web server running on your own computer, used to preview HTML files in a browser without hosting them online.
Things they pointed at.
03:12toolAntigravity IDE
Lines you could clip.
00:08
“If you're still using PowerPoint or paying for Gamma every month, you're going to want to watch this tutorial.”
01:00
“Creating these slides are actually quite fast and is free.”
04:59
“The best agents won't replace the craftsman. They will extend them.”
09:10
“You basically offload the thinking to Claude Code in order to create these animated elements for you.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
00:00Creating HTML slides is now one of my favorite ways to use Clone. 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.
00:13So if you're still using PowerPoint or paying for Gamma every month, you're going to want to watch this tutorial.
00:21So 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.
00:37All of these has been vibe 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.
00:52And 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 Anthropix design system. So if you were working on Claude, then this would be a really good way for you to present your work.
01:07This 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.
01:15So 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.
01:24This is the one I 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, 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.
01:44I 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.
01:56You can see it captured the Spotify green gradient design system in there. So this is the one for Y. So the currency floaters there looks really good with even this nice ticker at the bottom.
02:06So you can see how just dynamic these slides can be, all generated for you right from 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, I'll introduce in a bit.
02:20The 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 Agenetic AI masterclass for our members at RoboNuggets, which takes you from zero to mastery when working with agents.
02:39There'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.
02:52Now if you haven't used Clawd before, one of the most approachable ways by which you can try it out is by going to claw.ai/downloads and to actually download the desktop version here. And once you have that installed, you will see three sections.
03:03The first one is chat, so it's similar to chat g p d where it explains things for you. The second tab here is co work, 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 co work is your go to.
03:16But if you go to the third tab, you'll find the most powerful amongst all of these, which is a Claude code, which builds things for you. Now the way that I use it personally is Shu on IDE software like AntiGravity because here you could just view your files much easier. And I just have Cloud Code running here as an extension, which you can just find here at the left.
03:33So if you search for Cloud Code here, you'll be able to install it quite easily. Now for the remainder of this tutorial, I'll be using Cloud Code via the anti gravity 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.
03:51Now the base skill that we will be installing is this really nice skill by Zara Zang over at x, which I think went pretty viral. So it already has 1,300,000 views here.
04:01And I think Zara did a really good job here of making HTML slides using Cloud 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 below.
04:17But if you go to this URL, the way that you install it is just by copying this GitHub link, give that the Cloud Code, and just say to install this skill for you. Once you send that over, it will now get you set up so that you can have Cloud Code use this skill and create those HTML presentations for you right out of the gate.
04:32So 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? This And is just good practice so that you can understand what are the capabilities behind this skill that is now available for you in Claude.
04:50And there we go. Now it confirmed to us that it is now done, and we have a very simple tree slider deck. 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.
05:02But 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 f 11, 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.
05:18Right? 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.
05:29And 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.
05:43Or 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 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.
06:02Now the good news is this is actually pretty easy to make. So if you already have a website, you could use this skill which I developed, which you can grab in this link or in the pinned comment below. I will link all of the resources there.
06:12And what this basically does is to give Claude a brand reference, let's say, 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 the Cloud Code knows exactly where in your computer it can look for this file.
06:32And 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 questions so that the intention is clear and aligned before you proceed.
06:48And 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.
07:04So it is now philosophizing our feedback, and it should come back to us with a more refined skill.
07:10And 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.
07:20And there you go. Our slides have now been upgraded to our own brand design palette. So you can see the RoboLabs logo and icon in here.
07:27And 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.
07:42Right? 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.
07:50Because 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 Cloud, which are basically these visual motion graphics style HTML modules that you can just plug into your presentation.
08:06And 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.
08:21It has components on motion paths, text effects. It includes some animated charts, 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.
08:36We have more components here on terminal user interfaces, isometric visuals like these ones, or if we 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.
08:51Right? So there's a lot of these options that you can do with Clod. And the great thing is depending on what industry you're on, you can create custom modules and components like these yourself as well.
09:00And to make these, if you go back to the Cloud 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?
09:18Feel 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 Cloud 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.
09:37And there you go. It confirmed to me that it created those components now, and this actually turned out pretty well. So it created for me this component for a token stream.
09:44It 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.
09:56So 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, example, hey.
10:12So 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 see it gave me this weekly trend line component, which I can now use.
10:28It also gave me this doughnut chart, which I guess we can refine further because it is exceeding beyond the boundaries in there. And we also have this bar chart. And if you need to present data, the great thing is these are all HTML code.
10:38Right? So you can potentially link this to a dataset 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.
10:47If 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 just upgrade it to have these more 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.
11:03It 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.
11:15So I just extended this to illustrate that that can actually be 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.
11:30And in case you're curious, the prompt that I use 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.
11:49But 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.
11:58And 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 I'll see you guys next time. Thank you.
The Hook
The bait, then the rug-pull.
Before a single line of instruction is spoken, the proof is already on screen: finished HTML decks for Anthropic, Apple, Figma, Uber, Spotify, and Wise — all one-shotted by Claude, no manual edits. Jay E's opening gambit is pure show-don't-tell, and it lands before the tutorial structure is even introduced.
Named ideas worth stealing.
01:48list
Three Levels of HTML Slides
- Level 1 — Install the HTML slides skill (frontend-slides by Zara Zhang)
- Level 2 — Make it your brand (feed a design system PDF, lock CSS tokens)
- Level 3 — Build your own components (bento component library, animated charts, photos)
A progressive skill-building ladder for Claude-powered presentations, from zero to custom motion-graphic decks.
Steal forAny 'how to use tool X' tutorial structure — install → personalize → extend
05:58concept
Ask Clarifying Questions Before Executing
Jay explicitly instructs Claude to ask clarifying questions before updating the skill with brand data — a prompting discipline that prevents misaligned regenerations.
Steal forAny agentic prompt that touches a shared skill file or codebase — gate destructive updates behind a Q&A step
09:05concept
Bento Component Request Pattern
Ask Claude to generate N animated HTML components, display them in a bento layout, open in localhost — offloads component ideation to the model while keeping output reviewable in one page.
Steal forComponent library generation for any HTML-based presentation system or showroom page
How they asked for the click.
VERBAL ASK
11:53subscribe
“If that was useful, then consider subscribing because that helps us a lot to put out more educational content like this.”
Soft, one sentence, followed immediately by a teaser for a related video — no hard sell, no urgency.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
AFFILIATECommission earned if you click.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
