per-slide HTML × html2pptx 기반의 16:9 editable PPTX 디자인 시스템. Claude Code 채팅창에 "Q3 사업 리뷰 슬라이드 만들어줘"라고 한 줄만 입력하면,
/slide스킬이 슬라이드별 독립 HTML(960pt×540pt)을 작성 → html2pptx가 DOM의 computedStyle을 PowerPoint 객체로 1:1 번역 →output/<주제>-pptx/<주제>.pptx를 떨어뜨립니다. PowerPoint/Keynote에서 텍스트 더블클릭으로 직접 편집 가능한 진짜 .pptx입니다 — 이미지 깔린 가짜 PPTX가 아닙니다.
📦 Based on alchaincyf/huashu-design · /slide editable PPTX 파이프라인 + /theme-init 멀티 프리셋 시스템 추가
- 무엇을 하는 도구: 글로만 지시하면 PowerPoint에서 바로 편집 가능한 슬라이드 덱을 자동으로 만들어주는 도구입니다.
- 누가 쓰면 좋은가: 기획자·마케터·강사·임원·컨설턴트 — PPT 한 장씩 만들기 지겹고, 나중에 회사 템플릿으로 옮겨야 하는 누구나.
- 어떻게 쓰는가: Claude Code 안에서
/slide또는 자연어로 요청하면 됩니다. 명령어 암기 불필요. - 결과물:
- editable PPTX (
output/<주제>-pptx/<주제>.pptx) — PowerPoint/Keynote에서 텍스트 더블클릭 편집 - 슬라이드별 HTML (
output/<주제>-pptx/slides/NN-name.html) — 브라우저로 미리보기·인쇄
- editable PPTX (
예시 한 줄:
"사내 AI 도구 도입 효과 슬라이드 12장 만들어줘. KPI 위주로."
↓ 1~3분 후 ↓
→ output/사내-AI-도입-pptx/사내-AI-도입.pptx 생성. 표지 → 컨텍스트 → KPI 대시보드 →
사례 카드 → 로드맵 → 클로징 12장이 Jangpm 디자인 시스템(모노크롬 + accent #4633E3)으로 통일되어 들어 있고, 각 텍스트는 PowerPoint에서 그대로 편집 가능합니다.
Claude Code 공식 다운로드 — Mac / Windows / Linux 모두 지원.
git clone https://github.com/byungjunjang/slide-html.git ~/Desktop/slide-html
cd ~/Desktop/slide-htmlNode 18 이상이 필요합니다.
npm install # playwright, pptxgenjs, sharp
npx playwright install chromium # html2pptx의 브라우저 캡처용루트의
package.json/package-lock.json은 로컬 사용용이고,.claude/skills/slide/package.json은 claude.ai에 zip으로 올렸을 때 self-contained로 동작하도록 동일한 의존성을 따로 들고 있습니다. 의존성 버전을 바꿀 때는 두 파일을 같이 갱신하세요 (드리프트 시 claude.ai 번들이 어긋남).
표지·인포그래픽·세로 카드에 AI 이미지가 필요할 때 /slide 2.5단계가 사용하는 기본 경로입니다.
API 키 발급·관리 없이 Codex 기본 이미지 생성 기능으로 gpt-image-2를 호출하고, 슬라이드 빌더가 미리 정한 슬롯명 그대로 (images/<slot>.png) 파일을 저장합니다.
최초 1회 준비 (한 번만 하면 됩니다):
npm install -g @openai/codex # Codex CLI 설치
codex login # ChatGPT 계정으로 OAuth 인증 (브라우저 자동 오픈)
codex login status # "Logged in using ChatGPT" 표시되면 끝codex login은 OAuth 토큰을 ~/.codex/auth.json에 한 번 저장하고, 이후 모든 이미지 호출은 그 토큰을 자동 재사용합니다.
sk-* 형식 API 키는 어디에도 저장되지 않습니다. Codex OAuth 토큰은 ChatGPT 세션 토큰이라 OpenAI REST API로 직접 던지면 401이 떨어지지만, codex exec의 내부 브릿지가 OAuth → 내장 image_gen 도구 → gpt-image-2 경로로 라우팅해줍니다.
/slide 외에 직접 호출해야 할 때도 Codex 기본 이미지 생성 경로를 사용합니다. 슬롯 파일명은 슬라이드 HTML의 <img src="../images/<slot>.png">와 정확히 맞춰야 합니다.
codex exec "Use the built-in image_gen tool to generate one 1536x1024 high-quality image from this prompt: minimal flat line-art illustration of a globe, single accent color, neutral palette. Save it to output/my-deck-pptx/images/hero-cover.png and print the saved path and byte size." \
-s workspace-write \
--skip-git-repo-check \
-c 'model_reasoning_effort="medium"'| 증상 | 해결 |
|---|---|
auth expired / 401 |
codex login 재실행 (토큰 갱신) |
NOT_FOUND |
npm install -g @openai/codex |
| 트러스트 오류 | codex exec 호출에 --skip-git-repo-check를 포함 |
| 생성 파일이 슬롯명과 다름 | 저장 경로가 슬라이드 HTML의 <img src> 경로와 정확히 일치하는지 확인 |
| 16:9 인데 양옆이 좀 잘림 | 정상. gpt-image-2는 1536×1024(약 3:2)만 가능 → CSS object-fit: cover로 960×540 슬롯에 맞춰 자동 크롭 |
Codex 패키징: .codex/skills에는 codex-image를 포함하지 않습니다. Codex에는 기본 imagegen/image_gen 기능이 있기 때문입니다. .claude/skills/codex-image/는 Claude Code에서만 쓸 수 있는 독립 편의 헬퍼로 남아 있으며, slide 파이프라인의 필수 계약은 아닙니다.
비용: ChatGPT Plus/Team/Enterprise 계정의 OpenAI 사용량에 청구 (1024x1024 high ≈ $0.04, 1536x1024 high ≈ $0.06).
Codex CLI가 미설치 또는 codex login 미인증 상태면 슬라이드는 이미지 슬롯 없이 텍스트·아이콘·도형만으로 생성됩니다 (Jangpm 기본 동작에서도 충분히 임팩트 있는 데크가 됩니다). 필요하면 슬롯 경로(output/<주제>-pptx/images/<slot>.png)에 직접 그린·다운로드한 이미지를 떨궈도 됩니다.
💡 슬라이드별 HTML 미리보기는 별도 빌드 없이 브라우저로 그대로 열면 됩니다 (
output/<주제>-pptx/slides/01-title.html더블클릭).
목적에 맞게 두 가지 경로 중 선택. /slide가 진입 시 output/<주제>-pptx/slide_plan.json 존재 여부로 자동 분기합니다.
/slide AI 코딩 도구 도입 효과 발표 12장 만들어줘. KPI 중심으로.
또는 슬래시 없이 자연어로:
사내 발표용으로 우리 팀 AI 도입 효과 슬라이드 만들어줘.
Claude는 자동으로 다음 5단계를 순서대로 실행합니다 (slide_plan.json 없이 즉흥 결정):
- 프로젝트 셋업 —
init-project.sh <주제>실행 →output/<주제>-pptx/생성, jangpm 프리셋 심볼릭 링크 + 보일러플레이트 1장 복사 - 주제 분석 + 패턴 배치 — 슬라이드 수와 패턴 시퀀스 결정 (37 패턴 중 다양성 룰)
- 슬라이드 작성 —
slides/NN-name.html한 파일씩 작성. 보일러플레이트에서 가까운 패턴 복사 → 콘텐츠만 교체 - 빌드 —
cd output/<주제>-pptx && node build.mjs→ html2pptx가 슬라이드별 HTML을 OOXML 객체로 번역 - 검증 —
<주제>.pptx를 PowerPoint/Keynote에서 열어 텍스트 더블클릭 편집 확인
컨설팅 데크·멀티 evidence·재현성이 필요할 때. /slide-plan이 먼저 데크 구조를 기획하고 그 결과(slide_plan.json)를 /slide가 소비합니다.
/slide-plan Q3 보드 리뷰 데크. 신규 채널 자기잠식 분석. 이사회 30분.
→ output/Q3-보드-리뷰-pptx/slide_plan.json 생성 + 슬라이드별 1줄 markdown 요약 → 사용자 검토·confirm
/slide
→ slide_plan.json을 입력으로 받아 R2(차트↔takeaway)/R5(evidence 매핑) 빌드 시점 검증 → 각 슬라이드는 plan의 recommended_layout_family에 박힌 boilerplate를 그대로 따라 렌더.
R2/R5 위반 시 빌드 자동 차단 (exit 1). 자세한 사양은 .claude/skills/slide-plan/SKILL.md.
PDF가 필요하면 PowerPoint/Keynote에서 직접 export하세요. 이 저장소는 editable PPTX 단일 경로로 설계되어 있어 별도 PDF 파이프라인을 두지 않습니다.
/theme-init ← 새 브랜드 프리셋 추가 (기존 jangpm 보존)
테마 가이드 마크다운(필수)을 사용자가 제공하면, 토큰을 추출 → theme.json(v1 컨트랙트) → colors_and_type.css + _pptx-slide.css + 보일러플레이트 37장까지 일괄 렌더링합니다. 새 폴더로 추가될 뿐 기존 프리셋은 손대지 않습니다 (멀티 프리셋 모델).
슬라이드 주역이 구조적 관계일 때 — 아키텍처/구성도, 플로우차트·순서도, 시퀀스, 상태도, ER, 타임라인, 스윔레인, 사분면, 트리, 조직도, 계층, 벤, 피라미드·퍼널 — /slide가 diagram-design 스킬(14종)로 다이어그램을 그립니다. "이 슬라이드에 아키텍처 다이어그램 넣어줘"처럼 말하면 됩니다.
자동 처리 흐름: ① diagram-design 문법으로 다이어그램만 든 HTML(diagrams/<이름>.html)을 작곡 — 색·폰트는 활성 프리셋 변수를 참조해 덱과 한 몸으로 보입니다 → ② scripts/render-diagram.mjs(Playwright)로 투명 고해상도 PNG(images/<이름>.png)로 렌더(한글·Pretendard 정확) → ③ 슬라이드에서 <img src="../images/<이름>.png"> 슬롯으로 임베드.
다이어그램은 "그림"입니다. PowerPoint에 inline SVG를 편집 도형으로 넣을 방법이 없어(차트·사진과 동일) 래스터 이미지로 들어갑니다 — 도형 안 텍스트는 더블클릭 편집 불가, 슬라이드의 나머지 텍스트는 평소처럼 편집됩니다. 문구 수정은
diagrams/<이름>.html을 고쳐 다시 렌더. 전체 계약은.claude/skills/slide/references/diagram-slots.md참조.claude.ai에
.claude/skills/slide/만 zip 업로드하는 경우, 다이어그램 작곡 문법을 쓰려면.claude/skills/diagram-design/폴더도 함께 포함하세요(렌더러render-diagram.mjs는 slide 폴더 안에 있습니다).
slide-html은 하나의 정본 소스로 Claude Code와 Codex(클라우드/웹) 양쪽에서 동작합니다.
.claude/skills/가 정본 스킬 트리입니다 (여기만 편집)..codex/skills/는 생성형 미러(sync_codex_mirror.py)입니다 — Codex는 루트AGENTS.md를 통해 발견합니다. 미러는 직접 편집하지 마세요..claude/skills를 바꾼 뒤에는 재생성:python3 .claude/skills/slide/scripts/dev/sync_codex_mirror.py- 두 호스트는 하나의 완료 게이트(
verify_deck.py)를 공유합니다 —node build.mjs가 빌드 후 자동 호출하고,AGENTS.md가 done 선언 전 통과를 강제합니다.slide_plan.json자동 생성 자체는 agent가 AGENTS/SKILL을 읽고 수행하는 계약이며, gate는 미준수를 막는 안전망입니다. - Windows (Git Bash 없이 PowerShell):
powershell -ExecutionPolicy Bypass -File .claude\skills\slide\scripts\init-project.ps1 <slug>로 셋업 (init-project.sh의 네이티브 PowerShell 포트).
이로써 Claude Code 품질은 그대로 유지하면서 Codex에도 같은 실행 규율(즉흥 fallback 금지 · placeholder 이미지 금지 · 계획 자동 진입)을 부여합니다.
이 프로젝트의 /slide 스킬은 .claude/skills/slide/ 폴더만 zip으로 묶어 claude.ai에 그대로 업로드할 수 있게 자기완결화되어 있습니다. 외부 MCP 서버나 다른 스킬 폴더를 참조하지 않으며, 변환 엔진(export_deck_pptx.mjs + html2pptx.js), 디자인 시스템(jangpm + acme-warm + Pretendard 폰트), 보일러플레이트 37개가 모두 폴더 안에 들어 있습니다 (~21MB).
claude.ai 업로드 후 첫 사용 시:
cd .claude/skills/slide
npm install
npx playwright install chromiumhtml2pptx.js가 Playwright로 HTML 레이아웃을 측정하므로 Chromium 바이너리 설치가 필수입니다.
권장 동봉 안 하는 것:
/theme-init스킬 — 새 디자인 시스템을 굽는 용도라 Claude Code 로컬 전용. theme-init은 자기 출력물을slide/assets/design-systems/에 직접 떨궈 카탈로그(README.md)까지 자동 갱신하므로, 로컬에서 새 프리셋을 굽고 그 결과가 박힌 slide 번들을 claude.ai에 올리는 흐름.- AI 이미지 생성 (Codex 기본
imagegen/image_gen, 또는 Claude Code 전용codex-image헬퍼) — 어느 경로든 Codex CLI 바이너리가 필요한데 claude.ai 샌드박스에는 설치되지 않음. claude.ai 환경에서 이미지가 필요한 슬롯은 텍스트·아이콘·도형으로 대체되거나, 사용자가 직접 이미지를 슬롯 경로에 떨궈서 사용.
번들 사용 가이드는 .claude/skills/slide/README.md에 더 자세히 적혀 있습니다.
slide-html/
├── inputs/ ← 원본 자료 (직접 만들고 채워넣음, 선택)
│ ├── KPI지표.xlsx
│ ├── 사례리서치.pdf
│ └── 메시지요약.md
├── output/ ← 완성물 (자동 생성)
│ └── <주제>-pptx/
│ ├── slides/NN-*.html ← 슬라이드별 HTML (자동 생성)
│ ├── design-system/ → jangpm ← 심볼릭 링크 (자동)
│ ├── _pptx-slide.css ← html2pptx-safe 헬퍼 (자동 복사)
│ ├── build.mjs ← 빌드 스크립트 (자동 생성)
│ ├── icons/ ← 외부 SVG 두는 곳
│ ├── <주제>.pptx ← 빌드 결과물 (editable)
│ └── README.md
└── ...
폴더 이름은 한글/영어 무관. 각 생성 요청 = output/<주제>-pptx/ 한 폴더로 격리 — 자기완결적이라 다른 프로젝트와 절대 섞이지 않습니다. 이전 덱이 새 덱에 영향 주지 않음.
inputs/
├── 4분기_재무.xlsx
└── 리스크_리스트.md
inputs/ 자료 보고 Q4 사업 리뷰 12장 만들어줘.
4분기_재무.xlsx 요약 시트로 KPI 대시보드 한 장,
리스크는 매트릭스로, 결론은 투자 승인 요청.
inputs/
├── 도입사례.csv
└── 메시지초안.md
사내 AI 도입 성과 발표 10장. 이미지 표지 + 도입 전후 비교 +
KPI 4개 + 사례 6개 + 로드맵 + 클로징.
inputs/
└── 5년_매출.csv
5년_매출.csv만 보고 핵심 메시지 5장으로 뽑아줘. 추세, 변곡점, 이상치 중심.
슬라이드 4를 KPI 대시보드 패턴(31-kpi-dashboard)으로 바꿔줘. 전년 대비 화살표 포함.
슬라이드 7의 세 번째 카드를 accent 톤으로 바꿔줘 (시선 앵커).
전체적으로 그라디언트 잔존하는 거 다 빼고, 다크 배경은 closing 한 장만 남겨.
영문판도 같이 만들어줘. 구조·숫자는 동일하게.
대화하듯 계속 다듬을 수 있습니다. 각 수정은 슬라이드 HTML 파일 하나만 건드리므로 부분 재빌드도 가능합니다.
Q. 이거 진짜 PowerPoint에서 텍스트 편집되나요? 이미지 PPTX 아닙니까?
A. 진짜 됩니다. html2pptx.js가 슬라이드 HTML의 모든 <p> / <h1~h6>를 PowerPoint 텍스트 프레임(<a:txBody>)으로 번역하기 때문에, PowerPoint/Keynote/Google Slides에서 텍스트를 더블클릭하면 직접 편집할 수 있습니다. 이미지 깔린 가짜 PPTX가 아닙니다.
Q. 왜 React/Vite 안 쓰고 슬라이드별 HTML 파일을 만드나요?
A. html2pptx는 DOM의 computedStyle을 슬라이드 단위로 캡처합니다. 슬라이드 1장 = HTML 파일 1개로 격리하면 (1) 슬라이드 간 CSS 누수 방지, (2) 한 장만 빌드/디버그 가능, (3) PowerPoint의 슬라이드-당-XML 모델과 1:1 매핑 — 세 가지가 자동으로 보장됩니다. 자매 프로젝트 slide-pencil은 React 경로, 이 저장소는 HTML 경로입니다 (아래 "자매 프로젝트" 참고).
Q. 디자인 색상·폰트를 우리 회사 브랜드로 바꾸고 싶어요.
A. /theme-init을 쓰세요. 디자인 가이드 마크다운(필수)을 주면 35개 토큰을 추출 → theme.json → colors_and_type.css + _pptx-slide.css + 보일러플레이트 37장까지 새 폴더로 렌더링합니다. 기존 jangpm은 그대로 보존되므로, 한 사용자가 N개 프리셋을 동시에 가질 수 있습니다. 수동 편집 금지 — 토큰 컨트랙트가 어긋나면 빌드가 실패합니다.
Q. 슬라이드 개수를 지정할 수 있나요? A. 네. "10장으로", "15슬라이드짜리"라고 말하면 그대로 만듭니다. 미지정 시 주제 분량에 맞게 자동 결정 (보통 8–15장).
Q. 영어 덱도 만들 수 있나요? A. 네. 한국어로 요청하면서 "영문으로 만들어줘"라고 하거나, 영어로 요청하면 영어 덱이 나옵니다. Pretendard는 영문도 깔끔하게 처리합니다.
Q. 빌드가 4 hard constraint로 실패해요.
A. 가장 흔한 4가지: (1) DIV 안에 <p> 없이 맨텍스트, (2) linear-gradient/radial-gradient 사용, (3) <p>에 background/border/shadow, (4) DIV에 background-image. 자세한 픽스는 .claude/skills/slide/references/error-patterns.md. Claude는 빌드 실패 시 자동으로 픽스를 시도합니다.
Q. 기밀 데이터인데 안전한가요? A. 파일은 모두 로컬에서 처리됩니다 (브라우저 캡처도 로컬 chromium). 단, Claude와의 대화 내용은 AI 응답을 받기 위해 Anthropic 서버로 전달됩니다. 회사 보안 정책에 따라 판단하세요.
Q. 이전 슬라이드 덱이 다음 작업에 끼어드나요?
A. 안 끼어듭니다. 각 요청 = output/<주제>-pptx/ 독립 폴더로 격리되며, 디자인 시스템만 심볼릭 링크로 공유합니다. 이전 덱을 삭제할 필요 없이 그냥 새 주제로 요청하면 됩니다.
- 라이선스: 원본 alchaincyf/huashu-design가 2026-05-14부터 MIT License로 전환됨에 따라, 본 저장소도 MIT License를 따릅니다 — 상업적 이용을 포함해 자유롭게 사용·수정·배포 가능. 자세한 조건은
LICENSE참조. - 다이어그램 스킬:
/slide의 다이어그램 기능은 cathrynlavery/diagram-design(Cathryn Lavery, MIT)을 vendoring 한 것입니다. 원본 라이선스는.claude/skills/diagram-design/LICENSE, 통합 내역은.claude/skills/diagram-design/PROVENANCE.md참조. - 이미지 생성 헬퍼: Claude Code 전용
codex-image헬퍼는 wjb127/codex-image를 vendoring 한 것입니다 — Claude Code에서만 쓰는 선택 편의 헬퍼이며 Codex 패키지(.codex/skills)에는 포함되지 않습니다 (Codex는 기본imagegen/image_gen사용). - 버그 리포트·패턴 제안: GitHub 이슈 환영
- PR: 새 프리셋 추가, 보일러플레이트 패턴 추가, 4 constraint 위반 사례 환영
- 테마 추가 제안:
/theme-init사용법은.claude/skills/theme-init/SKILL.md참조