Skill

oh-my-slides

Creates animated HTML presentations with 20 design presets, PPTX template import, and Excalidraw diagrams. Supports viewport and slide template modes.

HTML

design

automation

Popularity

Stars

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/oh-my-slides:oh-my-slides oh-my-slides <주제 또는 내용>

User invocable

Model invocable

Inline context

Default effort

Argument hintoh-my-slides <주제 또는 내용>

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

애니메이션이 풍부한 HTML 프레젠테이션 + 편집 가능한 PPTX를 생성하는 스킬.

Supporting Files

SKILL.md

411 lines · ~3.5k tokens

Stats

LanguageJavaScript

Stars13

MaintenanceExcellent

Last CommitMay 15, 2026

Actions

View Source View Plugin View on GitHub View README

PPT Generator

애니메이션이 풍부한 HTML 프레젠테이션 + 편집 가능한 PPTX를 생성하는 스킬.

핵심 원칙

Show, Don't Tell - 추상적 디자인 질문 대신 3가지 스타일 프리뷰를 생성하여 사용자가 시각적으로 선택
Viewport Fitting - 모든 슬라이드는 정확히 100vh에 맞춰야 함. 슬라이드 내부 스크롤 절대 불가
Signature Element 반복 - 각 스타일의 시그니처 요소를 모든 슬라이드에 일관되게 반복. 다른 스타일의 시그니처를 혼합하지 않는다
Distinctive Design - 일반적인 AI 패턴 회피. 개성 있는 20가지 큐레이션된 스타일 + PPTX 커스텀 임포트. 정확한 HEX 값 사용 (비슷한 색 금지)
텍스트만의 슬라이드 금지 - 모든 슬라이드에 최소 하나의 시각 요소 (도형, 색상 블록, 아이콘, 패턴) 포함
듀얼 출력 - HTML 프레젠테이션(발표용) + PPTX(편집용) 동시 생성
Zero-dependency HTML - 단일 HTML 파일로 브라우저에서 바로 발표 가능
다이어그램 자동 생성 - Excalidraw로 흐름도/아키텍처 생성

워크플로우 (5단계)

Phase 0: 디자인 소스 & 출력 형식 선택 (AskUserQuestion 필수)

반드시 AskUserQuestion으로 아래 두 가지를 사용자에게 물어본다. Phase 1 질문과 함께 묶어서 한 번에 질문한다.

질문 1: 디자인 소스 선택

어떤 디자인으로 만들까요?

A. 기본 프리셋 (20종) — 큐레이션된 디자인 스타일

무드/목적에 맞는 3가지 프리뷰를 보여드립니다

예: Bold Signal, Neon Cyber, Glassmorphism 등

B. 커스텀 템플릿 — 보유한 .pptx 파일에서 테마 추출

B-1. 다크 테마 기반으로 추출

B-2. 라이트 테마 기반으로 추출

.pptx 파일 경로를 알려주세요

질문 2: 출력 형식 선택

출력 형식을 선택해주세요:

Viewport HTML (권장) — 단일 HTML 파일, 브라우저에서 스크롤/키보드 발표, 애니메이션

Slide Template — 1280×720 개별 HTML, PPTX 이미지 삽입용

선택 기준:

브라우저 발표 + 애니메이션 → Viewport HTML
슬라이드별 정교한 레이아웃/테이블/파이프라인 → Slide Template
PPTX 편집 필요 → Slide Template

템플릿 파일:

Viewport 모드: templates/viewport-base.html을 Read하여 기본 구조 참조
Slide Template 모드: templates/slide-base.html을 Read하여 기본 구조 참조
레이아웃 패턴: templates/layouts/ 디렉토리에서 필요한 패턴을 Read

상세 가이드: slide-template.md (레이아웃 패턴 설명, 시각화 컴포넌트, 테마 팔레트)

디자인 소스별 후속 처리

A. 기본 프리셋 선택 시

Phase 2 스타일 프리뷰로 진행. 무드/목적 기반으로 3가지 프리뷰를 생성하여 사용자가 선택.

B. 커스텀 템플릿 선택 시

사용자가 .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를 사용하여 진행
필요 시 CSS 변수를 수동 조정 (사용자 피드백 반영)
HTML에서 에셋 참조 시 workspace/assets/custom-<name>/파일명 경로 사용 (docs/ 기준 상대경로)

Phase 1: 콘텐츠 수집

AskUserQuestion으로 Phase 0과 함께 한 번에 수집:

목적: 컨퍼런스 발표 / 팀 공유 / 교육 / 피치덱
슬라이드 수: 5-10장 / 10-20장 / 20장+
핵심 메시지: 전달하고자 하는 내용
이미지: 포함할 이미지가 있는지, 어디에 있는지
편집 기능: 인라인 편집 기능 필요 여부 (기본: 미포함)

이미지가 있으면 평가 후 텍스트+비주얼을 함께 고려한 슬라이드 구성을 설계. 콘텐츠 밀도 제한: 타이틀 슬라이드 1 제목+부제, 콘텐츠 슬라이드 최대 4-6 불릿. 초과 시 자동 분할.

Phase 2: 스타일 프리뷰 (Show, Don't Tell)

디자인을 텍스트로 묻지 않는다. 대신 3가지 스타일 프리뷰 HTML을 생성하여 사용자에게 보여준다.

프리뷰 생성 방법

docs/workspace/ 에 3개의 프리뷰 HTML 파일을 생성:

preview-A.html - 예: Bold Signal
preview-B.html - 예: Notebook Tabs
preview-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 임포트)

Phase 3: 다이어그램 생성 (필요 시)

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/ 참조.

Phase 3.5: AI 이미지 생성 — oh-my-images (선택 사항)

슬라이드에 AI 생성 이미지가 필요한 경우 사용. 상세 가이드: oh-my-images-guide.md

Step 1: 슬라이드 분석 및 이미지 제안

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로 진행).

Step 2: 매니페스트 생성 및 이미지 생성

승인된 이미지 목록으로 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

Step 3: 생성된 이미지 확인

생성된 이미지를 Read로 확인. 부적절한 경우 프롬프트를 수정하여 단일 모드로 재생성.

HTML에서 참조 (Phase 4에서 사용)

<!-- 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;">

Phase 4: HTML 프레젠테이션 생성

단일 HTML 파일 아키텍처

하나의 self-contained HTML 파일에 모든 슬라이드, CSS, JS를 포함한다.

기본 템플릿: templates/viewport-base.html을 Read하여 구조를 참조한 후, 선택한 프리셋의 CSS 변수(templates/presets/*.css)를 적용하여 생성.

컴포넌트 참조 (필요 시 Read):

애니메이션 패턴: templates/components/animations.css
배경 효과: templates/components/backgrounds.css
레이아웃 컴포넌트: templates/components/layout-components.css

필수 규칙

Viewport Fitting - .slide에 height: 100vh; height: 100dvh; overflow: hidden; 필수
반응형 clamp() - 모든 폰트/간격에 clamp(min, preferred, max) 사용. 고정 px/rem 단독 사용 금지
높이 기반 미디어 쿼리 - max-height: 700px/600px/500px로 단계별 축소
콘텐츠 밀도 - 타이틀 1줄+부제, 본문 최대 4-6 불릿. 초과 시 슬라이드 분할
Google Fonts - <link> 태그로 테마별 폰트 로드. 한국어 포함 시 Pretendard 또는 Noto Sans KR
CSS 커스텀 프로퍼티 - :root에 모든 색상/폰트/간격 정의
프로그레스 바 + 네비게이션 도트 필수 포함
키보드 + 터치 + 스와이프 네비게이션 필수
prefers-reduced-motion 지원 필수
이미지 경로 - HTML 파일 위치(docs/) 기준 상대 경로 사용. base64는 최후 수단
- 다이어그램: src="workspace/diagram.png" (docs/workspace/ 내 파일)
- 커스텀 에셋: src="workspace/assets/custom-<name>/파일명" (import 시 --workspace=docs/workspace 필수)
- 절대 skills/oh-my-slides/templates/... 경로를 직접 사용하지 않는다 (docs/ 기준 상대 경로가 깨짐)

Anti-Patterns (절대 피할 것)

폰트: Inter, Roboto, Arial을 display 폰트로 사용
색상: 보라 그라데이션(#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

Phase 4-B: PPTX 생성 (선택)

사용자가 PPTX를 요청하면, 두 가지 방식 중 선택:

방식 A: html2pptx (편집 가능 PPTX)

html2pptx 변환 가이드를 참조하여 진행.

PPTX 변환 시 제약사항:

웹 안전 폰트만 (Arial, Verdana, Georgia, Courier New)
CSS 그래디언트 금지
애니메이션 불가
body 크기: 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' });

방식 B: 캡처 & 빌드 (Slide Template → 이미지 기반 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

방식 C: Viewport 캡처 (단일 HTML → 이미지 기반 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 선택 기준:

개별 HTML 파일 (slide01.html, slide02.html...) → 방식 B (capture-and-build.js)
단일 HTML 파일 (스크롤 프레젠테이션) → 방식 C (capture-viewport.js)

그라데이션 PNG 생성이 필요하면:

node .claude/skills/oh-my-slides/scripts/create-gradient.js docs/workspace/header-gradient.png 1440 88 "#1e3a5f" "#0ea5e9"

Phase 5: 검증 및 전달

HTML 프레젠테이션 검증

스킬의 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에서 편집 가능

체크리스트

Phase 1: AskUserQuestion으로 콘텐츠 수집
Phase 2: 3가지 스타일 프리뷰 생성 → 사용자 선택
Phase 3: 다이어그램 필요 슬라이드 식별 → Excalidraw 생성
Phase 3.5: (선택) AI 이미지 제안 → 사용자 승인 → oh-my-images 생성
Phase 4: HTML 프레젠테이션 생성 (viewport fitting, 애니메이션, 반응형)
Phase 4-B: PPTX 생성 (요청 시, 네이티브 테이블 사용)
Phase 5: 스크린샷 검증 → 전달

참조

design-guide.md - 20가지 스타일 프리셋, 레이아웃, 애니메이션 (Viewport 방식)
slide-template.md - 1280×720 고정 슬라이드 템플릿 (Tailwind + Font Awesome)
build-utilities.md - 재사용 빌드 유틸리티 (테이블 스타일, 헬퍼 함수, 코드 패턴)
templates/ - 코드 템플릿 (필요 시 Read):
- viewport-base.html — Viewport 모드 기본 HTML 구조
- slide-base.html — Slide Template 모드 기본 HTML 구조
- presets/*.css — 20가지 디자인 프리셋 CSS 변수 (각 프리셋별 색상, 폰트, 시그니처 변수)
- layouts/*.html — Slide Template 레이아웃 패턴 (5종 + 헤더 3종)
- components/ — 애니메이션(프리셋별 특화 포함), 배경효과(글래스/도트그리드/프레임 등), 레이아웃, 시각화
scripts/ - 실행 가능한 재사용 스크립트:
- 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 지원)
oh-my-images-guide.md - AI 이미지 생성 가이드 (프로바이더 설정, 프롬프트 가이드, 스타일 매핑)
Excalidraw 스킬 (선택) - 다이어그램 생성 시 필요

oh-my-slides

Popularity

Invocation

Context Preview

Supporting Files

SKILL.md

oh-my-slides

Popularity

Invocation

Context Preview

Supporting Files

SKILL.md

PPT Generator

핵심 원칙

워크플로우 (5단계)

Phase 0: 디자인 소스 & 출력 형식 선택 (AskUserQuestion 필수)

질문 1: 디자인 소스 선택

질문 2: 출력 형식 선택

디자인 소스별 후속 처리

A. 기본 프리셋 선택 시

B. 커스텀 템플릿 선택 시

Phase 1: 콘텐츠 수집

Phase 2: 스타일 프리뷰 (Show, Don't Tell)

프리뷰 생성 방법

무드 → 스타일 추천

발표 목적 → 스타일 추천 매트릭스

Phase 3: 다이어그램 생성 (필요 시)

Phase 3.5: AI 이미지 생성 — oh-my-images (선택 사항)

Step 1: 슬라이드 분석 및 이미지 제안

Step 2: 매니페스트 생성 및 이미지 생성

Step 3: 생성된 이미지 확인

HTML에서 참조 (Phase 4에서 사용)

Phase 4: HTML 프레젠테이션 생성

단일 HTML 파일 아키텍처

필수 규칙

Anti-Patterns (절대 피할 것)

느낌 → 애니메이션 매핑

Phase 4-B: PPTX 생성 (선택)

방식 A: html2pptx (편집 가능 PPTX)

방식 B: 캡처 & 빌드 (Slide Template → 이미지 기반 PPTX)

방식 C: Viewport 캡처 (단일 HTML → 이미지 기반 PPTX)

Phase 5: 검증 및 전달

HTML 프레젠테이션 검증

전달

체크리스트

참조

Similar Skills

PPT Generator

핵심 원칙

워크플로우 (5단계)

Phase 0: 디자인 소스 & 출력 형식 선택 (AskUserQuestion 필수)

질문 1: 디자인 소스 선택

질문 2: 출력 형식 선택

디자인 소스별 후속 처리

A. 기본 프리셋 선택 시

B. 커스텀 템플릿 선택 시

Phase 1: 콘텐츠 수집

Phase 2: 스타일 프리뷰 (Show, Don't Tell)

프리뷰 생성 방법

무드 → 스타일 추천

발표 목적 → 스타일 추천 매트릭스

Phase 3: 다이어그램 생성 (필요 시)

Phase 3.5: AI 이미지 생성 — oh-my-images (선택 사항)

Step 1: 슬라이드 분석 및 이미지 제안

Step 2: 매니페스트 생성 및 이미지 생성

Step 3: 생성된 이미지 확인

HTML에서 참조 (Phase 4에서 사용)

Phase 4: HTML 프레젠테이션 생성

단일 HTML 파일 아키텍처

필수 규칙

Anti-Patterns (절대 피할 것)

느낌 → 애니메이션 매핑

Phase 4-B: PPTX 생성 (선택)

방식 A: html2pptx (편집 가능 PPTX)

방식 B: 캡처 & 빌드 (Slide Template → 이미지 기반 PPTX)

방식 C: Viewport 캡처 (단일 HTML → 이미지 기반 PPTX)

Phase 5: 검증 및 전달

HTML 프레젠테이션 검증

전달

체크리스트