The argument in one line.
Slide decks built as HTML pages are interactive, deployable websites that AI models design better than any PowerPoint template, and a non-technical person with a coding agent and a skill can ship one today without writing a line of code.
Read if. Skip if.
READ IF YOU ARE…
- You make presentations regularly and find PowerPoint friction exhausting.
- You want a low-stakes first Claude Code or Codex project with an immediately useful output.
- You build software products and want to understand the design-for-agents shift.
- You have deep expertise and want to package your workflow so others or their agents can run it.
SKIP IF…
- You are already deep in agent infrastructure development.
- You need an offline-capable or regulated-environment slide format.
The full version, fast.
HTML slides are strictly better than PowerPoint: interactive media embeds, laser-pointer cursors, live links, deployable at a real URL. A Claude Code skill called Frontend Slides generates them from a plain content outline without manual coding. The creator built it through 10-20 rounds of iterative AI feedback, then extracted the workflow into a skill that went viral with 1.4M views and hit 22K GitHub stars. Three lessons distilled: skills will replace small-utility apps because agents absorb the interface layer; output personalization happens automatically at the agent layer without complaint floods; and HTML is genuinely the model's native output language because models trained on more web pages than any other visual medium.
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 – 00:33
01 · Intro: 22K stars, 0 lines of code
Credibility hook: 22K GitHub stars, 1.4M launch views, built entirely through natural language prompting.
00:34 – 01:28
02 · What HTML slides can actually do
Live demo of a finished deck: clickable media, laser-pointer cursor, Easter egg reveals, live embeds, all impossible in PowerPoint.
01:29 – 03:17
03 · Demo: install, draft, design, build
Step-by-step walkthrough: GitHub install, paste an outline, answer 4 onboarding questions, pick from 3 cover previews, watch Claude Code self-correct in real time.
03:18 – 04:01
04 · Inserting media: the file-path tip
Practical tip: you cannot drag an image into Claude Code. You send the file path. Mac path-bar trick shown.
04:02 – 04:36
05 · Sharing and deploying with Vercel
Deploy the HTML deck as a real live URL via Vercel: just tell Claude Code to do it.
04:37 – 06:41
06 · Origin story: from one prompt to viral
Started from seeing an HTML deck at a talk. 10-20 feedback rounds to shape Claude output. Packaged into a skill. Went viral on X with 1.4M views. Added 30+ templates after users complained of generic output.
06:42 – 08:50
07 · Three lessons: skills, agents, HTML
Lesson 1: skills replace apps, agents as distribution layer. Lesson 2: one skill, different output for everyone, agents absorb customization. Lesson 3: HTML is the model's native output language.
08:51 – 09:47
08 · How to make your own skill
Four-step framework: Test, Iterate, Package, Share. The skill is the last step, not the first.
09:48 – 11:06
09 · Everything is code: start with slides
Closing argument: slides are the perfect vibe-coding entry project. No blank page. You already know what you want. Start here.
Lines worth screenshotting.
- A skill built with zero code can hit 22,000 GitHub stars: the barrier to shipping open-source tools has collapsed.
- HTML slides are a website, not a file: you deploy them at a URL, embed live media, and add cursor effects PowerPoint can never touch.
- The secret to avoiding AI design slop is showing three cover previews before generating the full deck, locking style direction before burning tokens on the wrong aesthetic.
- Onboarding a skill with four questions (purpose, length, content, density) is what separates a useful tool from an expensive random-output generator.
- Skills eliminate complaint floods because agents absorb user customization: users tell their agent to change things instead of filing tickets with the developer.
- You do not start with a skill. You build the thing first, iterate until it hits your taste, then tell the AI to freeze the workflow into a skill.
- HTML is the model's native output language because its training data is saturated with web pages, so asking it to design in HTML unlocks its full front-end capability.
- Apps rot in phone drawers; skills live inside the tool users already open every day. Skills win on distribution, not features.
- If Markdown is the model's native input language, HTML is its native output language: both are text, but only HTML is visually beautiful to human readers.
- The file-path tip is the one practical thing most demos skip: you cannot drag an image into Claude Code, you send the file path.
- Templates built from opinionated reference images prevent generic output at scale: the skill now ships 30+ auto-selected by mood and content.
- Slides are the ideal first vibe-coding project: no scary blank page, you already know the subject, and the output is immediately usable in real life.
Four steps that turn any workflow into a reusable skill
WHAT TO LEARN
The skill comes last, not first: you build the output you want, beat it into shape against your own taste through rounds of feedback, then freeze the workflow so anyone's agent can run it.
- Build the actual output you want before thinking about packaging: the skill is what you extract from an iterative build process, not what you plan before it starts.
- Front-load the model with structured context (purpose, density, length, content) before generating any artifact or it produces generic, mediocre output every time.
- Show design-direction options as previews before building the full artifact: locking style early prevents wasted tokens and saves users from results they would reject anyway.
- Skills eliminate complaint floods because agents absorb customization at the output layer: users tell their agent to change things instead of filing feedback with the creator.
- HTML is the right output format for any visual knowledge work: models trained on more web pages than any other designed medium, so HTML unlocks their full design capability.
- Slides are the lowest-risk first vibe-coding project because there is no blank-page problem: you already know the subject, the format is clear, and the output is immediately useful.
- The four-step build loop (Test, Iterate, Package, Share) applies to any repeatable workflow you have taste about: the only requirement is caring enough to give it 10-20 rounds of feedback.
Terms worth knowing.
- Skill
- A reusable instruction set that wraps expertise, taste, and workflow into something a coding agent can run on command, installed via a GitHub link rather than an app store.
- Frontend Slides
- An open-source Claude Code skill that takes a content outline and generates a complete, interactive HTML presentation deployable as a real website.
- Vibe coding
- Building software through natural language prompts to an AI coding agent without writing code manually, iterating on output through description and feedback.
- Design slop
- Generic, aesthetically mediocre AI output produced when the model lacks enough opinionated context about style direction before generating.
- Onboarding gate
- A set of structured questions a skill asks a user before generating anything, used to give the model enough context to produce non-generic output.
Things they pointed at.
Lines you could clip.
01:18
“You're not making a PowerPoint. You're making a website.”
07:10
“Instead of you going to find a software, the software comes to you.”
08:54
“You don't start with a skill. You end with a skill.”
08:15
“If Markdown is the model's native language on the input side, then HTML might be its native language on the output side.”
09:50
“The biggest winners of vibe coding are not programmers. They're everyone else.”
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.
metaphoranalogy
00:00I 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.
00:09It's now past 22,000 stars on GitHub and is one of the most popular slide skills out there. So I'm actually completely nontechnical.
00:16I 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 will walk you through how to use the skills 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.
00:33Let's get into it. This is a deck I made with a skill, and the first thing I want you to notice is that this is not a PowerPoint file. It's a web page.
00:41I even publish it at its own URL. And look at it. It's genuinely beautifully designed.
00:46I'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 enlarge it.
00:57You can embed all sorts of media, like images, videos, even live links. You can hover over the navigation and see the title of every page.
01:07The cursor turns into a laser pointer, and they're little Easter eggs like content that stays hidden until you click to reveal it. This is the whole point of using HTML for slides.
01:18You're not making a PowerPoint. You're . So your deck can be as beautiful and interactive as any modern website because it's leveraging the AI's front end design skills.
01:29Okay. Let me show you how to actually use this. First, you need a coding agent, something like Clog Code or Codex.
01:35I'm using ClotCode here because right now, Clot is a lot 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.
01:48The link is in the description below. Done. Installed.
01:51Next, tell it what you want. Here, I'm pasting an outline that I wrote for a deck. I happen to have the exact words I want on each slide, but you don't need that.
02:00You 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 a deck for?
02:09I'm gonna select conference talk. And then what the content density should be, speaker led or reading first. I'm gonna select speaker led, and it's also gonna confirm the content for you.
02:20And 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.
02:31And it asks 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 ClockCode 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.
02:48So it's now done with building the slides. Let's take a look. Pretty cool.
02:53I think this is really good as a first pass. And with some tweaking, I can directly use it. Now what if you wanna edit content in the slides?
03:01Of course, you can just take screenshots and describe your changing words to ClotCode. But in the Clot or Codex desktop app, you can also annotate directly on the slide to give targeted feedback and comments.
03:18And if you wanna 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 CloudCode and ask to insert it, it's not gonna do it.
03:32You need to send the file path to CloudCode. 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.
03:44So now it's gonna 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.
03:58So 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, you can just open it in your browser, and the format will hold up on any device.
04:12Now what if you wanna 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.
04:25The easiest way is Vercel. You make a free account, and then literally just tell Cloud deploy this app with Vercel. It connects to your account and ships it as a live link in a couple of minutes, and then you can just share the URL with others.
04:37So how did I build this skill? The idea first hit me at an event where I watched someone present a HTML deck. It looked incredible, so I went home and tried to create an HTML deck with Cloud Code.
04:48My very first prompt was basically something like this. I wanna make slides as HTML. Can you build one I can flip through like a slideshow?
04:56Here's the content I want. And Claude came back with something and it kind of worked, but it was plain, not polished. And I knew I wanted to really push the format to make something that would be flat out impossible in PowerPoint.
05:07So I told Claude, pull out all the stops. Show me every front end trick you've got, animations, transitions, cursor effects, all of it. And then I give it round after round of feedback.
05:17The navigation dots, for example, that was my idea. I was basically teaching Claude what I think a great deck looks like. After maybe ten to 20 rounds, I finally had something I liked.
05:28So I said, now take everything we just did and package it into a skill. At that point, the skill was maybe 70% there. What was missing was the user journey.
05:37So the next step was designing how to onboard a user. With slides, the model needs enough context upfront. Otherwise, it just produces slop.
05:46So I built in these four questions, purpose, length, content, and density. And because the model kept generating DAX in styles I didn't like, which wasted a lot of tokens, I added a step where it shows you three cover options first so you can lock in the design direction before it builds everything.
06:03Once 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,400,000 views, and it became one of the most popular skills in the slides category.
06:17And 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.
06:28I found really opinionated reference images, handed them to Cloud Design, and I had a 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.
06:44I think a lot of apps, both mobile and web, are going to get replaced by skills, especially small productivity tools. Think about your own phone. It's full of zombie apps you haven't opened in years.
06:55Nobody 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.
07:06No new interface to learn. No new app to install. Instead of you going to find a software, .
07:13Second, 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, every day I got a flood of complaints.
07:25People couldn't find a button. People didn't like a feature. With a skill, I barely get any of that.
07:30And the reason is simple. A human isn't using the skill directly. An agent is.
07:35So 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.
07:43If everyone eventually has their 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 model's native language.
08:02So many people tell me the decks from this scale look gorgeous, modern, high-tech, interactive, and that audiences react really well to them in real presentations. It makes them look good in the room.
08:13So why is the model so good at designing in HTML? Here's my guess. The model's training data is full of web pages, so it's genuinely excellent at the question of how do I take a pile of text and images and lay it out into something clear and beautiful.
08:28And 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 is friendly to the model but not to us.
08:41Nobody enjoys reading a lot of text. HTML is friendly to both. So here's a question I'll leave you with.
08:48Why does your next presentation have to be a PowerPoint? So let's talk about how you can make a skill yourself. What even is a skill?
08:55The 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, whatever your weird specific workflow is, you can turn it into a skill.
09:11Here's the most important thing to remember. You don't start with a skill. You end with a skill.
09:16Building the skill is the last step, not the first step. Here's how I actually do it now. I have an idea.
09:22I just get clock code to build a 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 Cloud to take the workflow we just did and turn it into a skill.
09:36And then I figure out what context the 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 your agent to upload it to GitHub, and now everyone can use it. I want to end on one idea.
09:50Everything is code. Any knowledge work that happens on a computer can, in theory, be done with code. That's why I keep saying the biggest winners of vibe coding are not programmers.
09:59They'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.
10:12So here's my pitch to you, especially if you're not technical and vibe coding has always felt a little intimidating. Start here. Start with slides.
10:20Everyone 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.
10:27You already know what you're trying to make. So vibe code your next set of slides. And here's what that really gives you.
10:33You 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 wanna say. You bring the ideas, and you let the AI handle the design and the layout, and then keep going.
10:49Over 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 slice.
11:02The link to install it is in the description. Go make something beautiful.
The Hook
The bait, then the rug-pull.
She launched it a few months ago and it kind of exploded: 22,000 GitHub stars, 1.4 million launch views, zero lines of code she wrote herself. Zara Zhang's Frontend Slides skill is a proof-of-concept for something bigger than decks: that anyone with taste and a coding agent can ship open-source tools, and that the most beautiful output format AI has ever had might not be Markdown.
Named ideas worth stealing.
08:51list
Skill-building 4-step loop
- 01 Test
- 02 Iterate
- 03 Package
- 04 Share
Build the output you want first, tweak it against your own taste, then freeze the workflow into a skill. The skill is always the last step.
Steal forany workflow you want to teach an agent to run for others
05:44model
Onboarding context gate (4 questions)
- Purpose
- Length
- Content
- Density
Front-load a model with these four questions before generating or it produces slop. Works for any AI tool that needs user intent upfront.
Steal forany skill or AI tool where the model needs intent before generating
05:56concept
3-cover design lock
Show three cover-page design previews before building the full artifact. Locks style direction before spending tokens on the wrong aesthetic.
Steal forany AI creative tool where design taste is subjective
How they asked for the click.
VERBAL ASK
10:40link
“The link to install it is in the description. Go make something beautiful.”
Soft and generous: GitHub link plus encouragement, no upsell. Paired with VIBE CODE YOUR SLIDES slide on screen showing github.com/zarazhangrui/frontend-slides.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
