make-slide 🎯

March 25, 2026 Β· View on GitHub

AI-powered presentation skill that generates stunning single-file HTML slide decks. AI μ½”λ”© μ—μ΄μ „νŠΈκ°€ 단일 HTML 파일둜 κ³ ν’ˆμ§ˆ ν”„λ ˆμ  ν…Œμ΄μ…˜μ„ μƒμ„±ν•˜λŠ” λ²”μš© μŠ€ν‚¬.

Live Gallery npm License: MIT

What is make-slide?

make-slide is a skill (instruction set) for AI coding agents β€” like Claude Code, Gemini CLI, Codex, Cursor, and others β€” that enables them to generate professional presentation slides as a single HTML file.

Instead of crafting designs from scratch every time (wasting tokens and producing inconsistent results), the AI references pre-built theme templates from this repository. The result is:

  • Token-efficient β€” AI fetches a reference file instead of inventing layouts
  • Consistent quality β€” every presentation follows a polished, tested design system
  • Zero dependencies β€” output is one .html file you can open anywhere

Think of it as a design system for AI-generated presentations.

✨ Features

FeatureDescription
🎨 10 ThemesFrom dark minimal to playful pastels β€” browse the gallery
πŸ“„ Single HTML OutputOne file, no build step, no framework β€” just open in a browser
🎀 Speaker NotesBuilt-in presenter mode with per-slide notes (press S)
πŸ–¨οΈ PDF ExportPrint-ready via Ctrl+P with clean @media print styles
πŸ–₯️ FullscreenOne-key fullscreen toggle (press F)
⌨️ Keyboard NavigationArrow keys, spacebar, touch/swipe support
πŸ“₯ 3 Input ModesTopic only / Content provided / Script provided
πŸ“ 4 Layout StylesCentered, Wide, Split, Editorial β€” browse layouts
πŸ“Š PPTX ExportGenerate PowerPoint files alongside HTML
πŸ–ΌοΈ Auto Image SearchAutomatically find and place relevant images from Unsplash
πŸ€– Works with Any AI ToolClaude Code, Gemini CLI, Codex, Cursor, and more
🌍 Language-AgnosticGenerates content in whatever language you speak
πŸ“Š CSS-Only ChartsBar charts, progress rings, KPI cards β€” no chart library needed

πŸš€ Quick Start

npx make-slide init

This will:

  1. Copy the skill files into your project's .claude/skills/make-slide/
  2. Auto-detect your AI config (CLAUDE.md, AGENTS.md, GEMINI.md, .cursorrules) and inject the /make-slide command
  3. You're ready! Type /make-slide in Claude Code to create presentations

Other Commands

npx make-slide themes    # View all 10 themes
npx make-slide gallery   # Open theme gallery in browser
npx make-slide help      # Show help

Manual Setup (Any AI Tool)

Give your AI coding tool the following instruction:

Read SKILL.md from https://github.com/kuneosu/make-slide and create a presentation about [your topic] using the minimal-dark theme.

Or fetch it directly:

Fetch https://raw.githubusercontent.com/kuneosu/make-slide/main/.claude/skills/make-slide/SKILL.md and follow its instructions to create a presentation about [your topic].

Tip: Browse themes first at make-slide.vercel.app and tell your AI which one you like!

βš™οΈ How It Works

The .claude/skills/ Convention

make-slide uses Claude Code's native skill system. After running npx make-slide init, your project gets:

your-project/
β”œβ”€β”€ .claude/
β”‚   └── skills/
β”‚       └── make-slide/
β”‚           β”œβ”€β”€ SKILL.md          ← Main instruction file
β”‚           └── references/
β”‚               β”œβ”€β”€ themes.md        ← 10 themes + GitHub raw URLs
β”‚               β”œβ”€β”€ layouts.md       ← 4 layout styles
β”‚               β”œβ”€β”€ slide-types.md   ← 12 slide type patterns
β”‚               β”œβ”€β”€ html-spec.md     ← HTML requirements
β”‚               β”œβ”€β”€ core-features.md ← Copy-paste JS/CSS for features
β”‚               └── pptx-spec.md     ← PPTX conversion rules
β”œβ”€β”€ CLAUDE.md                        ← Auto-updated with /make-slide command
└── ... your project files

When you type /make-slide in Claude Code, it reads the skill and follows a 10-step workflow:

  1. Analyze input β€” mode (topic / content / script), slide count, output format (HTML / PPTX)
  2. Choose a theme β€” pick from the gallery or AI recommends
  3. Choose a layout β€” Centered, Wide, Split, or Editorial
  4. Image options β€” no images / provide URLs / auto-search from Unsplash
  5. Generate outline β€” slide-by-slide plan for your approval
  6. Fetch theme + layout reference β€” downloads templates from GitHub
  7. Generate HTML β€” builds presentation matching theme + layout exactly
  8. Add speaker notes β€” popup window with timing cues
  9. Generate script β€” full speaking script (optional)
  10. Deliver β€” saves index.html (and presentation.pptx if PPTX mode)

Theme files are fetched from GitHub on demand β€” nothing heavy is stored locally.

🎨 Themes

All 10 themes are live at make-slide.vercel.app

#ThemeStyleBest For
1minimal-darkClean dark, white typographyTech talks, conferences
2minimal-lightBright white, precise typeGeneral, academic
3corporateNavy & gold, structuredBusiness, reports
4gradient-popVibrant gradients, glassmorphismStartups, pitches
5neon-terminalTerminal green, scanlinesDev talks, hackathons
6paperKraft paper, serif typeEducation, workshops
7keynote-appleDramatic dark, Apple-inspiredProduct launches, keynotes
8magazineEditorial, asymmetric layoutDesign, creative
9data-focusDashboard aesthetic, cleanData analysis, KPIs
10playfulRounded, pastel, bouncyWorkshops, casual talks

πŸ“ Project Structure

make-slide/
β”œβ”€β”€ package.json            # npm package config
β”œβ”€β”€ bin/cli.js              # CLI (init, themes, gallery)
β”œβ”€β”€ .claude/skills/make-slide/  # Skill template (copied by init)
β”‚   β”œβ”€β”€ SKILL.md
β”‚   └── references/
β”‚       β”œβ”€β”€ themes.md
β”‚       β”œβ”€β”€ layouts.md
β”‚       β”œβ”€β”€ slide-types.md
β”‚       β”œβ”€β”€ html-spec.md
β”‚       β”œβ”€β”€ core-features.md
β”‚       └── pptx-spec.md
β”œβ”€β”€ layouts/                # Layout references (4 styles)
β”‚   β”œβ”€β”€ centered/
β”‚   β”œβ”€β”€ wide/
β”‚   β”œβ”€β”€ split/
β”‚   └── editorial/
β”œβ”€β”€ SKILL.md                # Legacy standalone skill file
β”œβ”€β”€ README.md               # This file
β”œβ”€β”€ LICENSE                  # MIT License
β”‚
β”œβ”€β”€ themes/                 # Theme references (10 themes)
β”‚   β”œβ”€β”€ minimal-dark/
β”‚   β”‚   β”œβ”€β”€ README.md           # Design guidelines
β”‚   β”‚   └── reference.html      # Full example presentation
β”‚   β”œβ”€β”€ minimal-light/
β”‚   β”œβ”€β”€ corporate/
β”‚   β”œβ”€β”€ gradient-pop/
β”‚   β”œβ”€β”€ neon-terminal/
β”‚   β”œβ”€β”€ paper/
β”‚   β”œβ”€β”€ keynote-apple/
β”‚   β”œβ”€β”€ magazine/
β”‚   β”œβ”€β”€ data-focus/
β”‚   └── playful/
β”‚
β”œβ”€β”€ gallery/                # Theme gallery website (Vercel)
β”‚   └── index.html
β”‚
β”œβ”€β”€ core/                   # Shared JS/CSS source
β”‚   β”œβ”€β”€ navigation.js
β”‚   β”œβ”€β”€ fullscreen.js
β”‚   β”œβ”€β”€ speaker-notes.js
β”‚   β”œβ”€β”€ pdf-export.css
β”‚   └── base.css
β”‚
└── examples/               # Example presentations
    └── pineone-talk-reference.html

🀝 Contributing

Adding a New Theme

  1. Create a folder in themes/ with your theme ID (kebab-case):

    themes/your-theme-name/

  2. Add these files:

    • reference.html β€” Complete 10-slide example with all slide types, navigation, fullscreen, speaker notes, and PDF export
    • README.md β€” Design guidelines: color palette, typography, spacing, philosophy

  3. Follow the conventions in core/ for navigation, fullscreen, speaker notes, and PDF export

  4. Submit a PR β€” your theme will appear in the gallery!

Guidelines

  • Output must be a single .html file β€” all CSS/JS inlined
  • Only external dependencies: font CDNs (Pretendard required) + Prism.js (for code blocks)
  • All themes must support the full slide type set
  • Test keyboard navigation, fullscreen, speaker notes, and print export

πŸ“œ License

MIT β€” use freely for personal and commercial projects.


make-slide 🎯 (ν•œκ΅­μ–΄)

AI μ½”λ”© μ—μ΄μ „νŠΈκ°€ 단일 HTML 파일둜 κ³ ν’ˆμ§ˆ ν”„λ ˆμ  ν…Œμ΄μ…˜μ„ μƒμ„±ν•˜λŠ” λ²”μš© μŠ€ν‚¬.

ν…Œλ§ˆ 가러리 npm License: MIT

make-slideλž€?

make-slideλŠ” Claude Code, Gemini CLI, Codex, Cursor λ“± AI μ½”λ”© μ—μ΄μ „νŠΈλ₯Ό μœ„ν•œ μŠ€ν‚¬(μ§€μΉ¨μ„œ)μž…λ‹ˆλ‹€. AIκ°€ 이 μŠ€ν‚¬μ„ 읽고 λ”°λΌν•˜λ©΄ 전문적인 ν”„λ ˆμ  ν…Œμ΄μ…˜ μŠ¬λΌμ΄λ“œλ₯Ό 단일 HTML 파일둜 μƒμ„±ν•©λ‹ˆλ‹€.

맀번 μ²˜μŒλΆ€ν„° λ””μžμΈμ„ λ§Œλ“œλŠ” λŒ€μ‹ (토큰 λ‚­λΉ„ + 일관성 μ—†λŠ” κ²°κ³Ό), AIκ°€ 이 레포의 사전 μ œμž‘λœ ν…Œλ§ˆ ν…œν”Œλ¦Ώμ„ μ°Έμ‘°ν•©λ‹ˆλ‹€:

  • 토큰 μ ˆμ•½ β€” AIκ°€ λ ˆμ΄μ•„μ›ƒμ„ 발λͺ…ν•˜λŠ” λŒ€μ‹  레퍼런슀 νŒŒμΌμ„ κ°€μ Έμ˜΄
  • μΌκ΄€λœ ν’ˆμ§ˆ β€” λͺ¨λ“  ν”„λ ˆμ  ν…Œμ΄μ…˜μ΄ κ²€μ¦λœ λ””μžμΈ μ‹œμŠ€ν…œμ„ 따름
  • 제둜 μ˜μ‘΄μ„± β€” 결과물은 μ–΄λ””μ„œλ‚˜ μ—΄ 수 μžˆλŠ” .html 파일 ν•˜λ‚˜

AI 생성 ν”„λ ˆμ  ν…Œμ΄μ…˜μ„ μœ„ν•œ λ””μžμΈ μ‹œμŠ€ν…œμ΄λΌκ³  μƒκ°ν•˜μ„Έμš”.

πŸš€ λΉ λ₯Έ μ‹œμž‘

npx둜 μ„€μΉ˜ (ꢌμž₯)

npx make-slide init

이 λͺ…λ Ήμ–΄λŠ”:

  1. .claude/skills/make-slide/에 μŠ€ν‚¬ 파일 볡사
  2. AI μ„€μ • 파일(CLAUDE.md, AGENTS.md, GEMINI.md, .cursorrules) μžλ™ 감지 ν›„ /make-slide λͺ…λ Ήμ–΄ μ£Όμž…
  3. μ€€λΉ„ μ™„λ£Œ! Claude Codeμ—μ„œ /make-slide μž…λ ₯ν•˜λ©΄ ν”„λ ˆμ  ν…Œμ΄μ…˜ 생성

기타 λͺ…λ Ήμ–΄

npx make-slide themes    # 10개 ν…Œλ§ˆ 보기
npx make-slide gallery   # ν…Œλ§ˆ 가러리 μ—΄κΈ°
npx make-slide help      # 도움말

μˆ˜λ™ μ„€μ • (λ‹€λ₯Έ AI 도ꡬ)

AI μ½”λ”© 도ꡬ에 λ‹€μŒκ³Ό 같이 μ§€μ‹œν•˜μ„Έμš”:

https://github.com/kuneosu/make-slide 의 SKILL.mdλ₯Ό 읽고 [주제]에 λŒ€ν•œ ν”„λ ˆμ  ν…Œμ΄μ…˜μ„ minimal-dark ν…Œλ§ˆλ‘œ λ§Œλ“€μ–΄μ€˜.

팁: make-slide.vercel.appμ—μ„œ ν…Œλ§ˆλ₯Ό λ¨Όμ € λ‘˜λŸ¬λ³΄κ³  λ§ˆμŒμ— λ“œλŠ” 것을 AIμ—κ²Œ μ•Œλ €μ£Όμ„Έμš”!

βš™οΈ μž‘λ™ 방식

.claude/skills/ μ»¨λ²€μ…˜

npx make-slide init μ‹€ν–‰ ν›„ ν”„λ‘œμ νŠΈ ꡬ쑰:

your-project/
β”œβ”€β”€ .claude/
β”‚   └── skills/
β”‚       └── make-slide/
β”‚           β”œβ”€β”€ SKILL.md          ← 메인 μ§€μΉ¨μ„œ
β”‚           └── references/
β”‚               β”œβ”€β”€ themes.md        ← 10개 ν…Œλ§ˆ + GitHub raw URL
β”‚               β”œβ”€β”€ layouts.md       ← 4가지 λ ˆμ΄μ•„μ›ƒ μŠ€νƒ€μΌ
β”‚               β”œβ”€β”€ slide-types.md   ← 12가지 μŠ¬λΌμ΄λ“œ νƒ€μž…
β”‚               β”œβ”€β”€ html-spec.md     ← HTML μš”κ΅¬μ‚¬ν•­
β”‚               β”œβ”€β”€ core-features.md ← κΈ°λ³Έ κΈ°λŠ₯ JS/CSS μ½”λ“œ
β”‚               └── pptx-spec.md     ← PPTX λ³€ν™˜ κ·œμΉ™
β”œβ”€β”€ CLAUDE.md                     ← /make-slide λͺ…λ Ήμ–΄ μžλ™ μΆ”κ°€
└── ... ν”„λ‘œμ νŠΈ νŒŒμΌλ“€

Claude Codeμ—μ„œ /make-slide μž…λ ₯ν•˜λ©΄ 9단계 μ›Œν¬ν”Œλ‘œμš°λ₯Ό λ”°λ¦…λ‹ˆλ‹€:

  1. μž…λ ₯ 뢄석 β€” λͺ¨λ“œ(주제/λ‚΄μš©/λŒ€λ³Έ), μŠ¬λΌμ΄λ“œ 수, 좜λ ₯ ν˜•μ‹(HTML/PPTX) κ²°μ •
  2. ν…Œλ§ˆ 선택 β€” κ°€λŸ¬λ¦¬μ—μ„œ μ„ νƒν•˜κ±°λ‚˜ AIκ°€ μΆ”μ²œ
  3. λ ˆμ΄μ•„μ›ƒ 선택 β€” Centered, Wide, Split, Editorial 쀑 선택
  4. 이미지 μ˜΅μ…˜ β€” μ—†μŒ / URL 제곡 / Unsplash μžλ™ 검색
  5. 아웃라인 생성 β€” μŠ¬λΌμ΄λ“œλ³„ ꡬ성 승인
  6. ν…Œλ§ˆ + λ ˆμ΄μ•„μ›ƒ 레퍼런슀 β€” GitHubμ—μ„œ ν…œν”Œλ¦Ώ λ‹€μš΄λ‘œλ“œ
  7. HTML 생성 β€” ν…Œλ§ˆ + λ ˆμ΄μ•„μ›ƒμ— λ§žλŠ” ν”„λ ˆμ  ν…Œμ΄μ…˜ λΉŒλ“œ
  8. λ°œν‘œμž λ…ΈνŠΈ β€” νŒμ—… μœˆλ„μš° 방식, 타이밍 큐 포함
  9. λŒ€λ³Έ 생성 β€” 전체 λ°œν‘œ λŒ€λ³Έ (선택)
  10. 전달 β€” index.html μ €μž₯ (PPTX λͺ¨λ“œλ©΄ presentation.pptx도)

ν…Œλ§ˆ νŒŒμΌμ€ GitHubμ—μ„œ μ˜¨λ””λ§¨λ“œλ‘œ κ°€μ Έμ˜΅λ‹ˆλ‹€ β€” λ‘œμ»¬μ— 무거운 파일이 μ €μž₯λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

🎨 ν…Œλ§ˆ

10개 ν…Œλ§ˆ λͺ¨λ‘ make-slide.vercel.app μ—μ„œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

#ν…Œλ§ˆμŠ€νƒ€μΌμΆ”μ²œ μš©λ„
1minimal-dark닀크 λ°°κ²½, ν™”μ΄νŠΈ νƒ€μ΄ν¬ν…Œν¬ λ°œν‘œ, 컨퍼런슀
2minimal-lightν™”μ΄νŠΈ λ°°κ²½, 클린 νƒ€μ΄ν¬μΌλ°˜ λ°œν‘œ, μ„Έλ―Έλ‚˜
3corporate넀이비 & κ³¨λ“œ, κ΅¬μ‘°μ λΉ„μ¦ˆλ‹ˆμŠ€, 보고
4gradient-popλΉ„λΉ„λ“œ κ·ΈλΌλ””μ–ΈνŠΈ, κΈ€λΌμŠ€λͺ¨ν”Όμ¦˜μŠ€νƒ€νŠΈμ—…, ν”ΌμΉ­
5neon-terminal터미널 κ·Έλ¦°, μŠ€μΊ”λΌμΈκ°œλ°œμž λ°œν‘œ, 해컀톀
6paperν¬λž˜ν”„νŠΈμ§€, 세리프 νƒ€μ΄ν¬κ΅μœ‘, μ›Œν¬μˆ
7keynote-appleλ“œλΌλ§ˆν‹± 닀크, Apple μŠ€νƒ€μΌμ œν’ˆ λ°œν‘œ, ν‚€λ…ΈνŠΈ
8magazine에디토리얼, λΉ„λŒ€μΉ­ λ ˆμ΄μ•„μ›ƒλ””μžμΈ, ν¬λ¦¬μ—μ΄ν‹°λΈŒ
9data-focusλŒ€μ‹œλ³΄λ“œ μŠ€νƒ€μΌ, 깔끔데이터 뢄석, KPI
10playfulλ‘₯κ·Ό λͺ¨μ„œλ¦¬, νŒŒμŠ€ν…”, λ°”μš΄μŠ€μ›Œν¬μˆ, 캐주얼 λ°œν‘œ

🀝 κΈ°μ—¬ν•˜κΈ°

μƒˆ ν…Œλ§ˆ μΆ”κ°€ν•˜κΈ°

  1. themes/ μ•ˆμ— ν…Œλ§ˆ ID둜 폴더 생성 (μΌ€λ°₯ μΌ€μ΄μŠ€)
  2. reference.html + README.md μΆ”κ°€
  3. core/의 μ»¨λ²€μ…˜μ„ λ”°λ₯΄κΈ°
  4. PR 제좜 β€” κ°€λŸ¬λ¦¬μ— μžλ™ μΆ”κ°€!

πŸ“œ λΌμ΄μ„ μŠ€

MIT β€” 개인 및 상업 ν”„λ‘œμ νŠΈμ— 자유둭게 μ‚¬μš©ν•˜μ„Έμš”.