There’s no escaping slide decks. You might be able to dodge advanced calculus depending on your career path, but you’d have to try really hard to avoid ever opening a presentation tool again. Internships, team meetings, product pitches, event proposals — sooner or later, you’ll find yourself putting together a presentation.

Traditionally, that meant defaulting to Microsoft PowerPoint. Recently, I tried something, inspired by a post on X (more on that later), that might sound a little odd: vibe-coding my slides. While I never thought I’d say this, I don’t think I’ll be making my presentation slides any other way again.

Vibe-coding slides beats AI presentation generator

The AI generators can’t touch this

With AI in the mix now, that entire era of relying on Microsoft PowerPoint, and even simple template-based tools like Canva and Adobe Express, is starting to feel… dated. There are thousands of AI presentation generators scattered across the internet, and I don’t think twice before taking every new one I come across for a spin. Unfortunately, the majority of them don't give you presentation-ready decks unless you're willing to spend hours tweaking and polishing every aspect of the output.

Though NotebookLM is one of the few AI tools that’s managed to get me close to the kind of decks I’d like to create, the biggest limitation is that you can’t currently manipulate the output beyond the prompt you provide. Any adjustments require rerunning the prompt (and hoping you get an output that meets your needs) or making edits manually.

A while ago, I was scrolling on X and came across a Claude Code skill created by one of my favorite AI founders, Zara Zhang, called Frontend Slides. Instead of generating static PDF presentations, the skill creates web-based presentations using HTML, CSS, and JavaScript. It lets you build a presentation from scratch simply by describing your preferences in words.

Getting started with the skill is about as simple as it gets. All you need to do is head to the GitHub repository and download the SKILL.md and Style_presets.md files. If you're using Claude Code, place them in the ~/.claude/skills/frontend-slides/ directory on your machine, and Claude will automatically pick up the skill the next time you start a session.

When you're ready to create a new presentation, all you need to do is type /frontend-slides to activate the skill, describe the kind of deck you're looking for, and Claude takes it from there. Instead of just beginning to generate your presentation once you've sent the first prompt, the skill will ask questions about the content, the feeling the audience should have when viewing your slides, and the length of the deck you'd like.

Even at this stage, it won't jump into generating the content of the presentation. Instead, it'll generate three visual styles based on the vibe it's getting from your answers to let you pick. You can also pick from the following included styles: Neon Cyber, Midnight Executive, Deep Space, Terminal Green, Paper & Ink, Swiss Modern, Soft Pastel, Warm Editorial, Brutalist, and Gradient Wave. Once you've greenlighted the style, it'll begin generating the deck!

It outputs a fully interactive HTML presentation

HTML slides that play like magic

Instead of a .pptx file, this skill generates a fully interactive HTML presentation that runs directly in your browser. Once it's generated, the file (a single, self-contained HTML) opens automatically so you can preview it right away, and it’s also saved locally on your machine so you can reuse, edit, or share it however you like. And it’s not just a static set of slides.

The output comes packed with features you’d expect from a modern web experience: keyboard navigation (arrow keys and space bar), touch and swipe support, mouse wheel scrolling, a built-in progress bar, navigation dots, scroll-triggered animations, responsive design, and even reduced motion support for accessibility.

However, as with any AI output on the first go, the initial result isn’t always perfect. You’ll likely want to refine the layout, tweak the wording, or adjust the visual direction slightly. The best part here is that you’re not boxed into a rigid template! You can simply describe the changes you want and regenerate, or jump into the code yourself if you feel like fine-tuning things further.

The code this skill generates is also well-commented, so even if you aren’t the most experienced with HTML, CSS, or JavaScript, it’s still easy to navigate and make small changes without feeling completely lost.

The skill also lets you convert existing PowerPoint decks

You aren’t starting from scratch anymore

If you have a PowerPoint deck you created that you’d like to give a more modern, interactive feel, you don’t have to start from scratch. The Claude Skill also lets you convert any existing .pptx file to a web slideshow by extracting all the text, images, and notes from your deck.

Similar to using the Skill to create a presentation from scratch, you’ll be prompted to select a visual style, and it will then generate a new HTML presentation that preserves all your original content while giving it a fresh, interactive design.

Crushes every other presentation tool

I never thought a post I found on X could completely change the way I make presentations, but discovering this Claude Skill did exactly that. The best part is that the Claude Skill itself is free to use. You just need access to Claude (or Claude Code) and to download the necessary skill files from the GitHub repository!