oh-my-slides

oh-my-slides

A Claude Code plugin that generates animation-rich HTML presentations from natural language prompts. 20 curated design presets, PPTX export, and zero-dependency output.

English | 한국어

Live Demo | Open gallery.html locally for the same experience.

---

Quick Start

1. Install

git clone https://github.com/seongyeon1/oh-my-slides.git
cd oh-my-slides
bash install.sh

The installer will:

• Install npm dependencies (Playwright, PptxGenJS, Sharp)
• Register the plugin in Claude Code's plugin system
• Enable the plugin automatically

2. Restart Claude Code

Close and reopen Claude Code (or start a new session) for the plugin to load.

3. Use

> PPT 만들어줘: AI 기술 트렌드 2026
> Create a presentation about microservices architecture
> 발표자료 만들어줘 — 주제: LLM Fine-tuning 실전 가이드

The skill triggers on presentation-related keywords in both Korean and English.

Uninstall

bash uninstall.sh

Removes plugin registration from Claude Code. Your source files remain untouched.

---

How It Works

5-Phase Workflow

Phase 0 asks you two questions: which design source (preset or custom .pptx import) and output format (Viewport HTML or Slide Template).

Phase 2 is where oh-my-slides differs from typical tools. Instead of asking "what color do you want?", it generates three mini-preview HTML files, takes screenshots with Playwright, and shows them side-by-side. You pick visually.

Phase 4 produces a single self-contained HTML file. Every slide is exactly 100vh tall — no internal scrolling, no overflow. Typography scales via clamp() so presentations render correctly from 13" laptops to 4K monitors.

---

Concepts

Viewport Fitting

Every slide uses height: 100dvh; overflow: hidden. Fonts and spacing use clamp() with height-based media queries for progressive reduction on smaller screens:

--title-size: clamp(2rem, 6vw, 5rem);
--slide-padding: clamp(1rem, 4vw, 4rem);

@media (max-height: 700px) { /* reduce padding */ }
@media (max-height: 500px) { /* shrink headings */ }

Signature Elements

Each preset has unique visual signatures (e.g., halftone textures for Creative Voltage, double inset borders for Dark Academia). These signatures repeat consistently across all slides — mixing signatures from different presets is explicitly prohibited.

Zero-dependency HTML

Output is a single .html file with inline CSS and JS. Fonts load from Google Fonts via <link>. No build step, no framework, no runtime dependency. Open in any browser and present.

Dual Output

• HTML — for presenting (animations, keyboard/touch navigation, progress bar)
• PPTX — for editing (PowerPoint, Keynote, Google Slides)

---

20 Design Presets

#	Preset	Mood	Font Pairing
1	Bold Signal	Confident, Bold, High-impact	Archivo Black + Space Grotesk
2	Electric Studio	Clean, Professional, High-contrast	Manrope 800 / 400
3	Creative Voltage	Energy, Creative, Retro-modern	Syne + Space Mono
4	Dark Botanical	Elegant, Refined, Premium	Cormorant + IBM Plex Sans
5	Notebook Tabs	Editorial, Organized, Tactile	Bodoni Moda + DM Sans
6	Pastel Geometry	Friendly, Soft, Modern	Plus Jakarta Sans
7	Split Pastel	Playful, Creative, Friendly	Outfit
8	Vintage Editorial	Witty, Editorial, Character	Fraunces + Work Sans
9	Neon Cyber	Futuristic, Tech, Confident	Clash Display + Satoshi
10	Terminal Green	Developer, Hacker aesthetic	JetBrains Mono
11	Swiss Modern	Clean, Precise, Bauhaus	Archivo + Nunito
12	Paper & Ink	Literary, Editorial, Thoughtful	Cormorant Garamond + Source Serif 4
13	Neo-Brutalism	Punk, Anti-design, Bold	Arial Black + Courier New
14	Bento Grid	Apple-style, Sleek, Organized	SF Pro / Inter
15	Dark Academia	Academic, Vintage, Classic	Playfair Display + EB Garamond
16	Glassmorphism	Translucent, Depth, Premium	Inter
17	Gradient Mesh	Artistic, Colorful, Fluid	Bebas Neue + Outfit
18	Duotone Split	Contrast, Graphic, Intense	Bebas Neue + Space Mono
19	Risograph Print	Retro, Handmade, Art poster	Bebas Neue + Space Mono
20	Cyberpunk Outline	Wireframe, Hacker, Blueprint	Bebas Neue + Space Mono

Mood Recommendation Matrix