Stop making PowerPoints: how to vibe code beautiful HTML slides with AI (22k+ stars on GitHub)

I built a skill that lets AI make slides this beautiful as HTML. It's called

Front End Slides. I launched it a few months ago and it kind of exploded. It's

now past 22,000 stars on GitHub and it's one of the most popular slide skills out there. So, I'm actually completely

there. So, I'm actually completely non-technical. I built all of this

non-technical. I built all of this through natural language, just talking to an AI without writing a single line of code myself. In this video, I'll show you the kinds of decks you can make with it. I'll walk you through how to use the

it. I'll walk you through how to use the skill step by step and then I'll tell you the story of how I built it, what I learned, and how you can build your own skills, too. Let's get into it. This is

skills, too. Let's get into it. This is

a deck I made with the skill and the first thing I want you to notice is that this is not a PowerPoint file. It's a

web page. I even publish it at its own URL. And look at it, it's genuinely

URL. And look at it, it's genuinely beautifully designed. I'm not a

beautifully designed. I'm not a designer, so there's no way I could have made this by hand. It's also interactive in ways that a normal slide just can't be. You can click any image or video to

be. You can click any image or video to enlarge it. You can embed all sorts of

enlarge it. You can embed all sorts of media, like images, videos, even live links. You can hover over the navigation

links. You can hover over the navigation and see the title of every page. The

cursor turns into a laser pointer. And

there are little Easter eggs, like content that stays hidden until you click to reveal it.

This is the whole point of using HTML for slides. You're not making a

for slides. You're not making a PowerPoint, you're making a website. So,

your deck can be as beautiful and interactive as any modern website because it's leveraging the AI's front end design skills. Okay, let me show you how to actually use this. First, you

need a coding agent, something like Claude Code or Codex. I'm using Claude Code here because right now Claude is a little stronger at front end design than the GPT models. To install the skill,

just send the agent the GitHub link and ask it to install it for you.

That's it. The link is in the description below. Done, installed.

description below. Done, installed.

Next, tell it what you want. Here, I'm

pasting in an outline that I wrote for a deck. I happen to have the exact words I

deck. I happen to have the exact words I want on each slide, but you don't need that. You can just give it rough notes

that. You can just give it rough notes or just a topic, and the agent will help you draft the actual content. Now, the

agent will ask you a few questions, like what is the deck for?

I'm going to select conference talk, and then what the content density should be, speaker led or reading first. I'm going

to select speaker led. And it's also going to confirm the content for you.

And then it generates three different cover pages designs as previews. So, in

this case it generated one like this, another one like this, and one like this. And it asked you to pick the design direction you like. I'm

going to pick this direction, and then it's going to generate the full deck in that style. The good thing about Cloud

that style. The good thing about Cloud Code is as you can see, as it's building the slide, it's actually taking screenshots of every slide draft and then correcting itself if it's making

mistakes. So, it's now done with

mistakes. So, it's now done with building the slides. Let's take a look.

Pretty cool. I think this is really good as a first pass, and with some tweaking I can directly use it. Now, what if you want to edit content in the slides? Of

course, you can just take screenshots and describe your changing words to Cloud Code, but in the Cloud or Codex desktop app, you can also annotate directly on the slide to give targeted

feedback and comments.

And if you want to add media like images, GIFs, and videos, just drop all the files in a folder and just tell the agent where to put them. Now, one quick tip about inserting media. If you just send the image to Cloud Code and ask to

insert it, it's not going to do it. You

need to send the file path to Cloud Code. So, how do you find a file path?

Code. So, how do you find a file path?

If you're on a Mac, open the folder and then click on view for the finder menu, and then click show path bar. So, now

it's going to show the actual path of each file at the bottom, and then just right click on it and then copy as path name.

And this is how you can easily get the file path name of any file on your computer. So, you can just send the path

computer. So, you can just send the path to Cloud Code and get it to insert it wherever you want.

So, now you've got your deck as a local HTML file. When it's time to present,

HTML file. When it's time to present, you can just open it in your browser, and the format will hold up on any device. Now, what if you want to share

device. Now, what if you want to share this deck with others? Of course, you can just send someone the HTML file directly, but honestly, not everyone is comfortable with opening a random file, especially on their phone. So, the

cleaner option is to deploy it as a real website. The easiest way is Vercel. You

website. The easiest way is Vercel. You

make a free account, and then literally just tell Cloud deploy this deck with Vercel. It connects your account and

Vercel. It connects your account and ships it as a live link in a couple of minutes. And then you can just share the

minutes. And then you can just share the URL with others. So, how did I build this skill? The idea first hit me at an

this skill? The idea first hit me at an event where I watched someone present a HTML deck. It looked incredible, so I

HTML deck. It looked incredible, so I went home and tried to create a HTML deck with Cloud Code. My very first prompt was basically something like this. I want to make slides as HTML. Can

this. I want to make slides as HTML. Can

you build one I can flip through like a slideshow? Here's the content I want.

slideshow? Here's the content I want.

And Cloud came back with something, and it kind of worked, but it was plain, not polished. And I knew I wanted to really

polished. And I knew I wanted to really push the format to make something that I would be flat out impossible in PowerPoint. So, I told Cloud, pull out

PowerPoint. So, I told Cloud, pull out all the stops. Show me every front-end trick you've got. Animations,

transitions, cursor effects, all of it.

And then I gave it round after round of feedback. The navigation dots, for

feedback. The navigation dots, for example, that was my idea. I was

basically teaching Cloud what I think a great deck looks like. After maybe 10 to 20 rounds, I finally had something I liked. So, I said, "Now take everything

liked. So, I said, "Now take everything we just did and package it into a skill." At that point, the skill was

skill." At that point, the skill was maybe 70% there. What was missing was the user journey. So, the next step was designing how to onboard a user. With

Slides, the model needs enough context up front. Otherwise, it just produces

up front. Otherwise, it just produces slop. So, I built in these four

slop. So, I built in these four questions: purpose, length, content, and density. And because the model kept

density. And because the model kept generating decks in styles I didn't like, which wasted a lot of tokens, I added a step where I chose you three cover options first, so you can lock in

the design direction before it builds everything. Once the onboarding flow is

everything. Once the onboarding flow is in, I just asked Claude to upload it to GitHub, and I posted a quick demo on X.

It went completely viral with 1.4 million views, and it became one of the most popular skills in the slides category. And people started sending me

category. And people started sending me all the ways they were using it, which was wild to watch. But, a lot of people also told me they struggled to get it to look right, and their decks came out generic. So, I went and built templates.

generic. So, I went and built templates.

I found really opinionated reference images, handed them to Claude design, and I had it design HTML templates inspired by them. Now, the skill includes a library of over 30 templates,

and the agent picks one based on the mood and the content of your slides.

Here's what building this skill actually taught me. I think a lot of apps, both

taught me. I think a lot of apps, both mobile and web, are going to get replaced by skills, especially small productivity tools. Think about your own

productivity tools. Think about your own phone, it's full of zombie apps you haven't opened in years. Nobody wants to download another app. And for web apps, you forget they even exist. But, if a

developer wraps a capability into a skill, you can just have your agent call it right inside the tool you already live in. No new interface to learn, no

live in. No new interface to learn, no new app to install. Instead of you going to find the software, the software comes to you. Second, the magic of a skill is

to you. Second, the magic of a skill is that the output can be different for every single person. I built both GUI web apps and skills, so I can compare them directly. When I ran a web app,

them directly. When I ran a web app, every day I got a flood of complaints.

People couldn't find a button, people didn't like a feature. With a skill, I barely get any of that, and the reason is simple. A human isn't using the skill

is simple. A human isn't using the skill directly, an agent is. So, say my template defaults to having navigation, but a user doesn't want it. They don't

need to file feedback with me, they can just tell Claude to remove it, and it's gone. If everyone eventually has your

gone. If everyone eventually has your own agent, that agent becomes the middle layer between the person and the software, and that's what finally makes software truly personal, which means as product people, we need to learn to

design for agents because a lot of the products we build will be used by agents, not humans. Third, HTML is AI models' native language. So many people tell me the decks from this skill look

gorgeous modern high-tech interactive, and that audiences react really well in real presentations. It

makes them look good in the room. So why

is the model so good at designing in HTML? Here's my guess. The model's

HTML? Here's my guess. The model's

training data is full of web pages, so it's generally excellent at the question of how do I take a pile of text and images and lay it out into something clear and beautiful, and HTML lets it

use its full front-end design muscle. So

if Markdown is the model's native language on the input side, then HTML might be its native language on the output side. The difference is Markdown

output side. The difference is Markdown is friendly to the model, but not to us.

Nobody enjoys reading a wall of text.

HTML is friendly to both. So here's a question I'll leave you with. Why does

your next presentation have to be a PowerPoint? So let's talk about how you

PowerPoint? So let's talk about how you can make a skill yourself. What even is a skill? The way I think about it, a

a skill? The way I think about it, a skill is your expertise, your taste, your best practices, your workflow, all frozen into something an agent can run.

Anyone can do this, especially if you're not technical. Whatever you're good at,

not technical. Whatever you're good at, whatever your weird specific workflow is, you can turn it into a skill. Here's

the most important thing to remember.

You don't start with a skill. You end

with a skill. Building the skill is the last step, not the first step. Here's

how I actually do it now. I have an idea, I just get Claude code to build a thing first. It's not satisfactory, so I

thing first. It's not satisfactory, so I tweak it over and over, give it rounds and rounds of feedback until it hits my standard and my taste. Then I tell Claude to take the workflow we just did

and turn it into a skill, and then I figure out what context a skill needs from a user and design the onboarding experience so the agent knows what to ask for. Once that's done, you can just

ask for. Once that's done, you can just ask your agent to upload it to GitHub and now everyone can use it. I want to end on one idea. Everything is code. Any

knowledge work that happens on a computer can in theory be done with code. That's why I keep saying the

code. That's why I keep saying the biggest winners of VIP coding are not programmers, they're everyone else. And

slides are the perfect example. On the

surface, making a presentation has nothing to do with code, but as you've seen, it absolutely can be done with code and it gets dramatically better when it is. So here's my pitch to you,

especially if you're not technical and VIP coding has always felt a little intimidating. Start here. Start with

intimidating. Start here. Start with

slides. Everyone has to make a deck at some point for work, for school, for life, so it's the perfect project.

There's no scary blank page. You already

know what you're trying to make. So VIP

code your next set of slide. And here's

what that really gives you. You stop

pushing boxes around in PowerPoint, fighting with alignment, and spacing, and where the logo goes, and you put all your energy where it actually matters, the content, what you actually want to

say. You bring the ideas and you let the

say. You bring the ideas and you let the AI handle the design and the layout. And

then keep going. Over time, you'll start to notice your own taste, your own workflow, your own point of view on how things should be done. And when you do, you can freeze those into skills of your own, exactly like the way I did with

this one. So that's Front-end Slides.

this one. So that's Front-end Slides.

The link to install it is in the description. Go make something

description. Go make something beautiful.