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