| name | ai-vibe-slides |
| description | Create beautiful, professional HTML or React slide decks ready for fullscreen presentation. Use this skill when the user wants to: create a PPT/slide/presentation from an idea or outline; build a visually stunning slide deck from existing content; generate an HTML presentation that can be projected fullscreen; convert a document into a presentation. Trigger when you hear: 'create slides', 'make a PPT', 'presentation', 'slide deck', 'pitch deck', 'vibe ppt', 'make a talk', or any request to create a presentation. This skill produces a single self-contained HTML/React artifact — no backend, no installation, no dependencies. |
AI Vibe Slides — Beautiful HTML Slide Decks, Ready to Present
Goal
Produce a single HTML or React artifact file containing a complete slide deck that can:
- Present fullscreen directly in the browser
- Navigate via arrow keys, spacebar, or click
- Look professional, polished, and stylistically consistent
- Print or export to PDF when needed
Inspired by banana-slides: a 3-step pipeline of Idea → Outline → Finished Slides, but the output is a self-contained HTML file instead of a fullstack application.
Slide Creation Pipeline
Step 1: Understand the Request → Build an Outline
When the user provides a request, first build an outline mentally (no need to display it unless the user asks):
- Identify the main topic and target audience (students, business, tech talk...)
- Break it into logical sections:
- Slide 1: Cover (title + subtitle + author)
- Slides 2-3: Introduction / context
- Middle slides: Core content (one key idea per slide)
- Final slide: Conclusion / Call to action / Thank you
- Each slide should have: a title, 2-5 bullet points or visual content, and a layout type
If the user only gives a short sentence (e.g., "create slides about AI in healthcare"), automatically expand it into 8-12 slides with a logical structure.
Step 2: Choose a Design Direction
Based on context, commit to one clear design direction:
| Context | Suggested Style |
|---|
| Startup pitch deck | Bold, dark theme, gradient accents, strong sans-serif |
| Academic / education | Clean, light, diagram-heavy, readable fonts |
| Tech talk / conference | Modern dark, code-style typography, neon accents |
| Corporate / report | Minimal, professional, navy/white, serif headings |
| Creative / marketing | Colorful, asymmetric layout, bold typography |
| Kids / early education | Pastel, rounded corners, playful icons, large text |
General rules:
- Pick 2-3 primary colors and use them consistently across the entire deck
- 1 heading font + 1 body font (use Google Fonts)
- Minimal text, generous whitespace — max 5-6 lines per slide
- Clear visual hierarchy: large title → medium content → small notes
Step 3: Generate the HTML/React Slide Deck
Create a single file (.html or .jsx) containing everything:
HTML Slide Deck Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{Presentation Title}</title>
<link
href="https://fonts.googleapis.com/css2?family={Font1}&family={Font2}&display=swap"
rel="stylesheet"
/>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slide-deck {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
}
.slide {
width: 100%;
height: 100%;
display: none;
flex-direction: column;
justify-content: center;
: ;
: absolute;
: ;
: ;
}
{
: flex;
}
{
: , sans-serif;
: ;
: ;
}
{
: , sans-serif;
: ;
: ;
}
,
{
: , sans-serif;
: ;
: ;
}
{
: ;
: ;
: ;
: ;
: ;
: ;
}
{
: fixed;
: ;
: ;
: ;
: (--text-secondary);
: ;
}
{
: fixed;
: ;
: ;
: ;
: (--text-secondary);
}
{
: fadeIn ease;
}
fadeIn {
{
: ;
: ();
}
{
: ;
: ();
}
}
{
: center;
: center;
: center;
}
{
: row;
: ;
: center;
}
{
: ;
}
{
: center;
: center;
}
{
: (, , , );
: ;
: ;
: ;
}
{
: inline-block;
: (--accent);
: white;
: ;
: ;
: ;
}
{
: ;
: ;
: (--accent);
: ;
: ;
}
{
: grid;
: (auto-fit, (, fr));
: ;
}
print {
{
: always;
: flex ;
: relative;
}
,
{
: none;
}
}
Topic
Main Title
Short subtitle description
Author — Date
Slide Title
Key point 1
Key point 2
Key point 3
1 /
← → or click to navigate
Slide Layout Types
Each slide should use the layout that best fits its content:
1. Cover Slide
- Centered, extra-large font, gradient background
- Topic badge + main title + subtitle + author
2. Section Divider
- Only section title + number, accent color background
- Used to separate major sections of the presentation
3. Content + Bullets
- Left-aligned title + list of key points
- Use icons/emoji at the start of each bullet instead of plain dots
4. Two-Column
.two-column layout: text on left, visuals/list/cards on right- Great for comparisons, before-after, text+illustration
5. Cards Grid
- 2-3 column grid, each card containing icon + title + short description
- Great for features, benefits, team members
6. Big Number / Statistic
- Huge number in the center (font-size: 5rem+) + small label below
- Great for data points, KPIs, impact numbers
7. Quote / Highlight
- Large text, centered, with decorative quotation marks
- Different background (light accent color)
8. Timeline / Steps
- Horizontal or vertical flexbox, dots connecting each step
- Great for processes, roadmaps, history
9. Thank You / CTA
- Centered, simple, contact info or call to action
MANDATORY Design Rules
- 16:9 aspect ratio: Always use
width: 100vw; height: 100vh — each slide fills the entire screen
- Minimal text: Maximum 6 lines per slide. If content is long → split into multiple slides
- Large font sizes: Heading ≥ 2.4rem, body ≥ 1.3rem — must be readable on a projector
- High contrast: Text must be clearly legible against its background. Verify visually
- Consistency: Same fonts, same color palette, same spacing throughout the entire deck
- No placeholder images: Never use
<img src="placeholder">. Replace with CSS shapes, gradients, icons (emoji or Lucide for React), or inline SVGs
- Subtle animation: Only fadeIn on slide transition. No complex animations that distract
- Responsive fullscreen: Must work well at all screen sizes
- Print-ready: Include
@media print rules so each slide becomes one printed page
When Using React (.jsx) Instead of HTML
If creating a React artifact, use this pattern:
import { useState, useEffect, useCallback } from "react";
const slides = [
{ type: "cover", title: "...", subtitle: "..." },
{ type: "content", title: "...", points: ["...", "..."] },
{ type: "twoColumn", title: "...", left: "...", right: "..." },
];
export default function SlideDeck() {
const [current, setCurrent] = useState(0);
const next = useCallback(
() => setCurrent((c) => (c + 1) % slides.length),
[],
);
const prev = useCallback(
() => setCurrent((c) => (c - 1 + slides.length) % slides.length),
[],
);
useEffect(() => {
const = () => {
(e. === || e. === ) ();
(e. === ) ();
(e. === ) ..?.();
};
.(, handleKey);
.(, handleKey);
}, [next, prev]);
= () => {
(slide.) {
:
;
:
;
:
;
}
};
(
);
}
Advantages of React: Tailwind CSS utilities, Lucide icons, more complex logic, recharts for charts.
Pre-Delivery Checklist
Natural Language Editing
After initial creation, the user can request modifications:
- "Switch to a light theme" → update CSS variables
- "Add 2 slides about case studies" → insert slides into the array
- "Slide 3 has too much text, split it" → refactor content across slides
- "Change the font to Playfair Display" → update Google Fonts link + CSS
- "Add a chart to slide 5" → use CSS chart or recharts (React)
On each edit, keep unchanged slides intact and only update what the user requested.
