Slides-Grab - AI 에이전트용 HTML 슬라이드 에디터
AI로 생성된 HTML 슬라이드를 시각적으로 편집. 영역 선택 → 에이전트에게 수정 요청.
핵심 컨셉
- HTML & CSS 슬라이드 — AI 에이전트가 쉽게 편집 가능
- 시각적 선택 — 드래그로 영역 선택 → 에이전트에게 수정 요청
- 직접 편집 — 텍스트, 크기, 볼드 등은 직접 수정 (2024년처럼)
- 다양한 내보내기 — PDF, PPTX (실험적), Figma (실험적)
워크플로우
1. Plan → 에이전트가 주제/파일에서 슬라이드 구조 생성
2. Design → 각 슬라이드를 HTML 파일로 생성
3. Edit → 브라우저 에디터에서 시각적 편집 + 에이전트 수정
4. Export → PDF / PPTX / Figma
설치
Claude Code
Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/prompts/setup-claude.md and follow every step.
Codex
Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/prompts/setup-codex.md and follow every step.
수동 설치
git clone https://github.com/vkehfdl1/slides-grab.git && cd slides-grab
npm ci && npx playwright install chromium요구사항: Node.js >= 18
CLI 명령어
| 명령어 | 설명 |
|---|---|
slides-grab edit | 시각적 슬라이드 에디터 실행 |
slides-grab build-viewer | 단일 파일 viewer.html 생성 |
slides-grab validate | 슬라이드 HTML 검증 (Playwright) |
slides-grab convert | PPTX 내보내기 (실험적) |
slides-grab figma | Figma Slides용 PPTX 내보내기 (실험적) |
slides-grab pdf | PDF 내보내기 |
slides-grab list-templates | 슬라이드 템플릿 목록 |
slides-grab list-themes | 색상 테마 목록 |
옵션
--slides-dir <path> # 슬라이드 디렉토리 (기본: slides)
--resolution <preset> # 720p, 1080p, 1440p, 2160p, 4k
--mode <mode> # capture (기본), print멀티 덱 워크플로우
# 덱 생성/생성 후
slides-grab edit --slides-dir decks/my-deck
slides-grab validate --slides-dir decks/my-deck
slides-grab pdf --slides-dir decks/my-deck --output decks/my-deck.pdf
slides-grab convert --slides-dir decks/my-deck --output decks/my-deck.pptx이미지 규칙
| 방식 | 지원 |
|---|---|
./assets/<file> | ✅ 권장 |
data: URL | ✅ 허용 |
원격 https:// | ⚠️ 경고 |
| 절대 경로 | ❌ 미지원 |
내보내기 형식
| 형식 | 상태 | 설명 |
|---|---|---|
| ✅ 안정적 | capture (래스터) / print (텍스트 선택 가능) | |
| PPTX | ⚠️ 실험적 | 레이아웃 변화 가능, 수동 정리 필요 |
| Figma | ⚠️ 실험적 | PPTX → Figma Slides import |
프로젝트 구조
bin/ CLI 진입점
src/editor/ 시각적 에디터 (HTML + JS)
scripts/ 빌드, 검증, 변환, 에디터 서버
templates/ 슬라이드 HTML 템플릿
themes/ 색상 테마
.claude/skills/ Claude Code 스킬
skills/ Codex 스킬
docs/ 설치 및 사용 가이드
npm 패키지
npm install slides-grab왜 이 프로젝트인가?
AI가 슬라이드 HTML을 생성하는 도구는 많다. 하지만 시각적으로 수정할 부분을 지정하고, 제자리에서 반복할 수 있는 도구는 거의 없다.