§ 01 · 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.
What the video promised.
stated at 01:50 "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." delivered at 07:50
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.
Visual structure at a glance.
Named ideas worth stealing.
01:48
list
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 for Any 'how to use tool X' tutorial structure — install → personalize → extend
05:58
concept
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 for Any agentic prompt that touches a shared skill file or codebase — gate destructive updates behind a Q&A step
09:05
concept
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 for Component library generation for any HTML-based presentation system or showroom page
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."
How they spent the runtime.
Hook length128s
Info densityhigh
Filler5%
Things they pointed at.
03:12toolAntigravity IDE
How they asked for the click.
11:53
subscribe
"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.
Word for word.
HOOK opening / re-engagementCTA the pitch
00:00HOOKCreating 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. So 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. All 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. 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 Anthropix 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
01:11and 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 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.
01:35HOOKThis 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 Y. So the currency floaters 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
02:12So 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. 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 Agenetic AI masterclass for our members at RoboNuggets,
02:36which 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 Clawd before, one of the most approachable ways by which you can try it out is by going to claw.ai/downloads
02:58and 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 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. But 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. So 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. Now 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
04:00views here. And 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. But 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. 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? 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. And 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. 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 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. 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 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 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 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. And 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. 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 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.
07:04So 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
07:17with this new skill. And 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. 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. 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
07:59using Cloud, which are basically these visual motion graphics 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 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. We 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. Right? 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. And 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? 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 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. And 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. It created this context window jar, this animation for our agents, a heat map animation,
09:49this 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, 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 see it gave me this weekly trend line component, which I can now use. It 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. Right? 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. 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 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. 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 under the hood is that since these are all HTML,
11:22CTAthen 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 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. 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 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.
— full transcript
§ 05 · For Joe
The three-level tutorial ladder is the format to steal.
JoeFlow / MCN+ playbook
Install → Brand → Build is a repeatable tutorial arc that turns any Claude Code skill into a full product demo — and each level is a natural upgrade upsell.
- Level 1 is always the free 'get started' entry point — keep it under 3 minutes with a visible result.
- Level 2 is the brand/personalization hook — this is where you show the person seeing themselves in the output.
- Level 3 is the power-user tier and the community upsell — custom components = your moat.
- The bento component request pattern (generate N, open in localhost) is directly portable to JoeFlow's PromptRewriter or Batch panels.
- Zara Zhang's frontend-slides skill is a direct model for how to ship a Claude Code skill as a product — SKILL.md + style presets + component library = a complete deliverable.
- The design-system PDF → CSS tokens loop is worth building into MCN+ as a one-click brand kit importer.
§ 05 · For You
You can make boardroom-quality slides for free in minutes.
If you give any kind of presentation
If you have Claude and a screenshot of your brand, you can generate polished, animated slides without knowing any code — and without paying for Gamma, Beautiful.ai, or Canva.
- Go to claude.ai/downloads, install Claude Desktop, and open Claude Code.
- Paste this GitHub URL and tell Claude to install the skill: github.com/zarazhangrui/frontend-slides
- Take a screenshot of a website you like or a PDF of your brand colors — attach it and say 'update the skill to match this design'.
- Ask for 6 animated components in a bento layout to build a reusable library for future decks.
- Use arrow keys to navigate finished slides, F11 for full-screen presentation mode.
- Add photos by asking Claude to pull from Unsplash or link your own local image files.
