القائمة
HTML 기반 애니메이션 프레젠테이션 생성. TRIGGER: 'PPT 만들어줘', 'HTML 프레젠테이션', '발표자료 만들어줘', '슬라이드 만들어줘', '애니메이션 PPT', 'html presentation', 'animated slides', '인터랙티브 발표자료', 'ppt로 만들어', '프레젠테이션 만들어줘'. 20가지 디자인 프리셋 + PPTX 커스텀 템플릿 임포트, Excalidraw 다이어그램, Viewport/Slide Template 모드 지원.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | oh-my-slides |
| description | HTML 기반 애니메이션 프레젠테이션 생성. TRIGGER: 'PPT 만들어줘', 'HTML 프레젠테이션', '발표자료 만들어줘', '슬라이드 만들어줘', '애니메이션 PPT', 'html presentation', 'animated slides', '인터랙티브 발표자료', 'ppt로 만들어', '프레젠테이션 만들어줘'. 20가지 디자인 프리셋 + PPTX 커스텀 템플릿 임포트, Excalidraw 다이어그램, Viewport/Slide Template 모드 지원. |
| user-invocable | true |
| argument-hint | oh-my-slides <주제 또는 내용> |
애니메이션이 풍부한 HTML 프레젠테이션 + 편집 가능한 PPTX를 생성하는 스킬.
반드시 AskUserQuestion으로 아래 두 가지를 사용자에게 물어본다. Phase 1 질문과 함께 묶어서 한 번에 질문한다.
어떤 디자인으로 만들까요?
A. 기본 프리셋 (20종) — 큐레이션된 디자인 스타일
- 무드/목적에 맞는 3가지 프리뷰를 보여드립니다
- 예: Bold Signal, Neon Cyber, Glassmorphism 등
B. 커스텀 템플릿 — 보유한 .pptx 파일에서 테마 추출
- B-1. 다크 테마 기반으로 추출
- B-2. 라이트 테마 기반으로 추출
- .pptx 파일 경로를 알려주세요
출력 형식을 선택해주세요:
- Viewport HTML (권장) — 단일 HTML 파일, 브라우저에서 스크롤/키보드 발표, 애니메이션
- Slide Template — 1280×720 개별 HTML, PPTX 이미지 삽입용
선택 기준:
템플릿 파일:
templates/viewport-base.html을 Read하여 기본 구조 참조templates/slide-base.html을 Read하여 기본 구조 참조templates/layouts/ 디렉토리에서 필요한 패턴을 Read상세 가이드: slide-template.md (레이아웃 패턴 설명, 시각화 컴포넌트, 테마 팔레트)
Phase 2 스타일 프리뷰로 진행. 무드/목적 기반으로 3가지 프리뷰를 생성하여 사용자가 선택.
사용자가 .pptx 파일 경로를 제공하면:
--workspace 옵션 사용):
node .claude/skills/oh-my-slides/scripts/import-pptx-theme.js <file.pptx> <name> --workspace=docs/workspace [--dark|--light]
templates/presets/custom-<name>.css를 사용하여 진행workspace/assets/custom-<name>/파일명 경로 사용 (docs/ 기준 상대경로)AskUserQuestion으로 Phase 0과 함께 한 번에 수집:
이미지가 있으면 평가 후 텍스트+비주얼을 함께 고려한 슬라이드 구성을 설계. 콘텐츠 밀도 제한: 타이틀 슬라이드 1 제목+부제, 콘텐츠 슬라이드 최대 4-6 불릿. 초과 시 자동 분할.
디자인을 텍스트로 묻지 않는다. 대신 3가지 스타일 프리뷰 HTML을 생성하여 사용자에게 보여준다.
docs/workspace/ 에 3개의 프리뷰 HTML 파일을 생성:
preview-A.html - 예: Bold Signalpreview-B.html - 예: Notebook Tabspreview-C.html - 예: Neon Cyber각 프리뷰는 타이틀 슬라이드 + 콘텐츠 슬라이드 1장을 포함한 미니 프레젠테이션 (50-100줄). Playwright로 스크린샷을 찍어 사용자에게 보여준다.
사용자는 하나를 선택하거나, 요소를 조합할 수 있다.
| 느낌 | 추천 프리셋 |
|---|---|
| 자신감/임팩트 | Bold Signal, Electric Studio, Duotone Split |
| 우아/프리미엄 | Dark Botanical, Dark Academia, Paper & Ink |
| 친근/접근성 | Pastel Geometry, Split Pastel, Notebook Tabs, Bento Grid |
| 미래/기술 | Neon Cyber, Cyberpunk Outline, Terminal Green |
| 학술/기술 발표 | Swiss Modern, Dark Academia, Paper & Ink |
| 빈티지/개성 | Vintage Editorial, Risograph Print, Creative Voltage |
| 대담/펑크 | Neo-Brutalism, Duotone Split, Creative Voltage |
| 아티스틱/크리에이티브 | Gradient Mesh, Risograph Print, Glassmorphism |
| 모던/트렌디 | Glassmorphism, Bento Grid, Gradient Mesh |
| 발표 목적 | 1순위 | 2순위 | 3순위 |
|---|---|---|---|
| 기술 컨퍼런스 | Swiss Modern | Terminal Green | Cyberpunk Outline |
| 스타트업 피치 | Bold Signal | Gradient Mesh | Electric Studio |
| 학술/논문 발표 | Dark Academia | Paper & Ink | Swiss Modern |
| 팀 세미나 | Bento Grid | Notebook Tabs | Swiss Modern |
| 디자인/크리에이티브 | Risograph Print | Gradient Mesh | Neo-Brutalism |
| 데이터/분석 리포트 | Electric Studio | Swiss Modern | Bento Grid |
| 교육/튜토리얼 | Pastel Geometry | Notebook Tabs | Split Pastel |
| 제품 런칭 | Glassmorphism | Bold Signal | Neon Cyber |
| 코드 리뷰/기술 공유 | Terminal Green | Cyberpunk Outline | Dark Botanical |
| 투자자/경영진 보고 | Dark Botanical | Electric Studio | Paper & Ink |
프리셋 CSS 변수: templates/presets/ 디렉토리에서 선택한 프리셋의 CSS 파일을 Read하여 적용. | |||
| 상세 스타일 정의: design-guide.md (20가지 큐레이션된 프리셋 + 커스텀 PPTX 임포트) |
Excalidraw 스킬을 활용하여 다이어그램 생성.
# Mermaid → Excalidraw → PNG
node .claude/skills/excalidraw/scripts/mermaid-to-excalidraw.js \
--text "flowchart LR ..." docs/workspace/diagram.excalidraw
node .claude/skills/excalidraw/scripts/export-png.js \
docs/workspace/diagram.excalidraw docs/workspace/diagram.png 3
커스텀 다이어그램은 Excalidraw JSON 직접 생성. .claude/skills/excalidraw/ 참조.
슬라이드에 AI 생성 이미지가 필요한 경우 사용. 상세 가이드: oh-my-images-guide.md
Phase 1 콘텐츠를 분석하여 AI 생성 이미지가 효과적인 슬라이드를 식별:
AskUserQuestion으로 제안:
AI 이미지 생성 제안 (oh-my-images 🖼️)
다음 슬라이드에 AI 생성 이미지를 추천합니다:
슬라이드 1 (타이틀): "주제를 상징하는 히어로 이미지" → hero-bg.png
슬라이드 5 (개념): "클라우드 아키텍처 시각화" → cloud-arch.png
- 추가/제거/수정할 이미지가 있나요?
- 프로바이더: Nanobanana/Google Imagen (기본) / OpenAI / Stability AI
- 환경변수 필요:
GOOGLE_API_KEY,OPENAI_API_KEY, 또는STABILITY_API_KEY
API 키가 없으면 이 Phase를 건너뛴다 (사용자에게 안내 후 Phase 4로 진행).
승인된 이미지 목록으로 docs/workspace/image-manifest.json 생성:
[
{ "filename": "hero-bg.png", "prompt": "A dramatic wide-angle scene of...", "style": "dark-botanical" },
{ "filename": "cloud-arch.png", "prompt": "Abstract cloud computing visualization..." }
]
이미지 생성 실행:
node .claude/skills/oh-my-slides/scripts/generate-image.js docs/workspace/images/ \
--batch=docs/workspace/image-manifest.json \
--provider=nanobanana \
--quality=high
단일 이미지 재생성 (프롬프트 수정 후):
node .claude/skills/oh-my-slides/scripts/generate-image.js docs/workspace/images/hero-bg.png \
--prompt="수정된 프롬프트" \
--provider=nanobanana \
--style=dark-botanical
생성된 이미지를 Read로 확인. 부적절한 경우 프롬프트를 수정하여 단일 모드로 재생성.
<!-- docs/ 기준 상대 경로 -->
<img src="workspace/images/hero-bg.png" alt="Hero background">
<!-- 배경 이미지로 사용 -->
<div class="slide" style="background-image: url('workspace/images/hero-bg.png'); background-size: cover;">
하나의 self-contained HTML 파일에 모든 슬라이드, CSS, JS를 포함한다.
기본 템플릿: templates/viewport-base.html을 Read하여 구조를 참조한 후, 선택한 프리셋의 CSS 변수(templates/presets/*.css)를 적용하여 생성.
컴포넌트 참조 (필요 시 Read):
templates/components/animations.csstemplates/components/backgrounds.csstemplates/components/layout-components.css.slide에 height: 100vh; height: 100dvh; overflow: hidden; 필수clamp(min, preferred, max) 사용. 고정 px/rem 단독 사용 금지max-height: 700px/600px/500px로 단계별 축소<link> 태그로 테마별 폰트 로드. 한국어 포함 시 Pretendard 또는 Noto Sans KR:root에 모든 색상/폰트/간격 정의prefers-reduced-motion 지원 필수src="workspace/diagram.png" (docs/workspace/ 내 파일)src="workspace/assets/custom-<name>/파일명" (import 시 --workspace=docs/workspace 필수)skills/oh-my-slides/templates/... 경로를 직접 사용하지 않는다 (docs/ 기준 상대 경로가 깨짐)#6366f1), 흰 배경에 보라/핑크 기본 조합min-height 사용: height를 사용해야 함. min-height는 슬라이드 넘침 허용| 느낌 | 애니메이션 스타일 | 속도 |
|---|---|---|
| 드라마틱/시네마틱 | 느린 페이드, 대형 스케일(0.9→1), 패럴랙스 | 1-1.5s |
| 기술/미래 | 네온 글로우, 글리치, 그리드 리빌 | 0.4-0.8s |
| 플레이풀/친근 | 스프링 물리, 플로팅, 둥근 모서리 | 0.3-0.6s |
| 프로페셔널/기업 | 미세하고 빠른 페이드, 클린 슬라이드 | 0.2-0.3s |
| 차분/미니멀 | 매우 느린 페이드, 넓은 여백 | 0.8-1.2s |
| 에디토리얼/매거진 | 스태거드 텍스트 리빌, 강한 타이포 위계 | 0.4-0.7s |
사용자가 PPTX를 요청하면, 두 가지 방식 중 선택:
html2pptx 변환 가이드를 참조하여 진행.
PPTX 변환 시 제약사항:
width: 720pt; height: 405pt<p>/<h>/<ul>/<ol> 태그 안에별도의 PPTX용 HTML 슬라이드를 작성한다 (HTML 프레젠테이션과 별개).
테이블이 있는 슬라이드는 placeholder로 처리하고, build.js에서 PptxGenJS 네이티브 테이블(addTable)로 추가한다. 그라데이션 헤더가 필요하면 Sharp로 PNG를 미리 렌더링하고 addImage로 오버레이한다.
빌드 유틸리티: build-utilities.md의 테이블 스타일 상수(TH, TD, TD_GOOD 등)와 헬퍼 함수(addNativeTable, row, addGradientHeader, addImageToPlaceholder)를 활용.
const pptxgen = require('pptxgenjs');
const html2pptx = require('./scripts/html2pptx');
const pptx = new pptxgen();
pptx.layout = 'LAYOUT_16x9';
for (const slideHtml of slideFiles) {
const { slide, placeholders } = await html2pptx(slideHtml, pptx);
// 그라데이션 헤더 오버레이
addGradientHeader(slide);
// 네이티브 테이블 추가 (편집 가능)
const tbl = placeholders.find(p => p.id === 'table-xxx');
if (tbl) {
addNativeTable(slide, tbl,
['Header1', 'Header2'],
[
row(['Value', { text: 'Best', style: 'good' }], false),
],
{ colW: [5.0, 5.0] }
);
}
}
await pptx.writeFile({ fileName: 'docs/output.pptx' });
Slide Template (1280x720) 개별 HTML 파일을 Playwright로 캡처하여 이미지 기반 PPTX 생성. 디자인 자유도가 높고 빌드가 단순하지만, 텍스트 편집은 불가.
스킬의 scripts/capture-and-build.js를 바로 실행:
node .claude/skills/oh-my-slides/scripts/capture-and-build.js docs/workspace 20 docs/output.pptx
Viewport HTML (단일 파일, 스크롤 기반) 프레젠테이션을 슬라이드별로 캡처하여 PPTX 생성. 기존에 만들어진 Viewport HTML을 PPTX로 변환할 때 사용. reveal 애니메이션 자동 활성화, UI 요소 자동 숨김.
스킬의 scripts/capture-viewport.js를 바로 실행:
# 기본 (출력: 같은 이름의 .pptx)
node .claude/skills/oh-my-slides/scripts/capture-viewport.js docs/presentation.html
# 출력 경로 지정
node .claude/skills/oh-my-slides/scripts/capture-viewport.js docs/presentation.html docs/output.pptx
# 뷰포트 크기 조절 (콘텐츠 max-width에 맞춰 조절, 너무 크면 글자가 작아짐)
node .claude/skills/oh-my-slides/scripts/capture-viewport.js docs/presentation.html output.pptx --width=1200 --height=675
주요 옵션:
--width=N — 뷰포트 너비 (기본: 1200). 콘텐츠의 max-width보다 약간 크게 설정하면 최적--height=N — 뷰포트 높이 (기본: 675, 16:9 비율)--selector=S — 슬라이드 CSS 셀렉터 (기본: .slide)방식 B vs C 선택 기준:
capture-and-build.js)capture-viewport.js)그라데이션 PNG 생성이 필요하면:
node .claude/skills/oh-my-slides/scripts/create-gradient.js docs/workspace/header-gradient.png 1440 88 "#1e3a5f" "#0ea5e9"
스킬의 scripts/ 디렉토리에 재사용 가능한 검증 스크립트가 있다:
# 개별 슬라이드 PNG 렌더링
node .claude/skills/oh-my-slides/scripts/render-all.js docs/workspace 20
# 프리뷰 그리드 (한눈에 전체 확인)
node .claude/skills/oh-my-slides/scripts/render-preview.js docs/workspace 20 4
생성된 스크린샷 또는 preview-grid.png를 Read로 확인.
생성 완료:
- HTML: docs/{파일명}-presentation.html (브라우저에서 바로 발표)
- PPTX: docs/{파일명}-presentation.pptx (편집 가능)
- 다이어그램: docs/workspace/*.excalidraw (Excalidraw에서 편집)
HTML: 브라우저에서 열고 F키로 전체화면 → 방향키/스와이프로 이동
PPTX: PowerPoint/Keynote/Google Slides에서 편집 가능
viewport-base.html — Viewport 모드 기본 HTML 구조slide-base.html — Slide Template 모드 기본 HTML 구조presets/*.css — 20가지 디자인 프리셋 CSS 변수 (각 프리셋별 색상, 폰트, 시그니처 변수)layouts/*.html — Slide Template 레이아웃 패턴 (5종 + 헤더 3종)components/ — 애니메이션(프리셋별 특화 포함), 배경효과(글래스/도트그리드/프레임 등), 레이아웃, 시각화capture-and-build.js — Slide Template HTML 캡처 → 이미지 기반 PPTX 생성capture-viewport.js — Viewport HTML (단일 파일) 캡처 → 이미지 기반 PPTX 생성render-preview.js — 전체 슬라이드 프리뷰 그리드 생성render-all.js — 개별 슬라이드 PNG 렌더링create-gradient.js — Sharp로 그라데이션 PNG 생성import-pptx-theme.js — PPTX 파일에서 테마(색상, 폰트, 미디어) 추출 → 커스텀 프리셋 CSS 생성html2pptx.js — HTML 슬라이드 → PptxGenJS 슬라이드 변환 (편집 가능 PPTX 생성용)generate-image.js — oh-my-images AI 이미지 생성 (단일/배치 모드, Nanobanana/OpenAI/Stability AI 지원)