NomaDamas/slides-grab

Best harness + editor + linter for generating slides in Claude Code / Codex - Claude Design Open Source Alternative

slides‑grab – AI 증강 HTML 슬라이드 에디터

무엇인가요 – slides‑grab는 대규모 언어 모델 에이전트(Claude, Codex 등)가 자체 포함된 HTML + CSS 파일로 프레젠테이션 데크를 생성, 편집, 내보낼 수 있는 Node 기반 CLI 및 브라우저 에디터입니다. 사용자는 슬라이드의 어느 부분이든 경계 상자 드래그로 선택하고, AI 에이전트에게 텍스트 재작성, 스타일 변경, 이미지 교체를 요청할 수 있으며, 변경 사항은 HTML 소스에 직접 적용됩니다. 이 도구는 이후 데크를 PDF, 실험적 PPTX, 또는 Figma 호환 파일로 번들링합니다.

왜 중요한가요 – 대부분의 AI 슬라이드 생성기는 정적 HTML 또는 이미지만 출력합니다. slides‑grab는 시각적 선택 인터페이스를 노출함으로써 생성과 반복 편집 사이의 격차를 메우며, 데크를 완전히 편집 가능하고 검색 가능하며 재내보내기 쉬운 상태로 유지합니다.

핵심 기능 (README에 설명됨)

AI 기반 워크플로우 – 에이전트는 아웃라인 계획, HTML로 각 슬라이드 디자인, 경계 상자 선택을 통한 편집, 내보내기를 수행할 수 있습니다.
브라우저 기반 시각 에디터 – 드래그 선택, 인라인 텍스트 편집, 에이전트 재작성 호출 버튼을 갖춘 순수 JavaScript 에디터.
풍부한 내보내기 옵션
- slides‑grab pdf – 래스터 캡처 PDF(기본값) 또는 검색 가능한 텍스트 PDF(--mode print).
- slides‑grab convert – 실험적 PPTX 내보내기(래스터 또는 텍스트 엔진).
- slides‑grab figma – Figma 슬라이드에 가져오기 위한 형식으로 구성된 실험적 PPTX.
- slides‑grab png – 슬라이드별 PNG, 인스타그램 스타일 그래픽용 특수 card‑news 1:1 모드.
디자인 스타일 카탈로그 – 95개의 내장된 스타일(30개는 pptx-design‑styles, 5개는 내장, 60개는 design‑diversity). 사용자는 스타일을 목록화, 미리보기, 또는 에이전트에게 스타일 선택을 요청할 수 있습니다.
템플릿 및 이미지 네이티브 파이프라인 – 기존 PPTX/HTML 템플릿을 가져오거나, 내장된 codex‑imagen 제공자(OpenAI 또는 Gemini로 백업)를 사용해 이미지 중심 슬라이드를 생성합니다. 자산은 <slides‑dir>/assets/에 로컬에 저장됩니다.
CLI 유틸리티 – edit, edit-image, validate(Playwright 기반), tldraw(tldraw 다이어그램을 SVG로 변환), fetch-video(yt‑dlp 다운로드), 공유 Vercel 에이전트 기술 설치 도우미 등.
확장 가능 – 에디터는 단일 JavaScript 파일로 구성되어 있으며, 전체 프로젝트를 다시 빌드하지 않고도 새로운 에이전트, 디자인, 명령어를 추가할 수 있습니다.

빠른 시작 (README에서)

# 복제하고 종속성 설치
git clone https://github.com/NomaDamas/slides-grab.git && cd slides-grab
npm ci && npx playwright install chromium   # 검증에 필요

# 또는 npm 패키지 직접 설치
npm install slides-grab
npx playwright install chromium
npx slides-grab install-skills --target all --scope user

CLI는 기본적으로 slides/ 폴더의 HTML 슬라이드를 대상으로 작동합니다. 예제 워크플로우:

slides-grab edit               # 시각 에디터 열기
slides-grab validate           # Playwright로 HTML 검증
slides-grab pdf --output deck.pdf
slides-grab convert --output deck.pptx

일반적인 사용 사례

빠른 AI 생성 데크 – Claude나 Codex에 슬라이드 개요와 HTML 파일 생성을 요청한 후, 특정 섹션을 시각적으로 조정.
디자인 탐색 – 95개 스타일 갤러리 둘러보기, 즉시 스타일 선택, 또는 에이전트에게 맞춤형 룩 제안 요청.
이미지 중심 스토리텔링 – slides‑grab image로 전체 슬라이드 이미지 생성(기본은 Codex의 개인 이미지 백엔드 사용)하고, edit-image로 편집.
기업 형식으로 내보내기 – HTML 데크를 PPTX로 변환해 PowerPoint용 또는 디자인 인수용 Figma 호환 PPTX로 변환.
소셜 미디어 카드 – card‑news 모드를 사용해 인스타그램이나 링크드인용 바로 사용 가능한 정사각형 PNG 생성.

설치 노트

Node ≥ 20 필요.
validate 명령어에는 Playwright 필요 (chromium 바이너리 npx playwright install chromium로 설치).
이미지 생성은 내장된 codex‑imagen 제공자로 기본 설정되며, 로컬 Codex ChatGPT 로그인(~/.codex/auth.json)을 재사용합니다. --provider와 적절한 API 키 환경 변수로 openai, nano‑banana/Gemini 등의 대체 제공자 선택 가능.
npm 패키지는 CLI와 공유 Vercel 에이전트 기술 포함. 개발 또는 커스텀 확장이 필요한 경우에만 리포지토리 클론 필요.

라이선스 및 감사

MIT 라이선스 하에 제공.
ppt_team_agent 프로젝트(Builder Josh)를 기반으로 제작됨 (README의 감사 참조).

결론 – slides‑grab는 AI 에이전트와 편집 가능한 HTML 슬라이드 형식을 결합한 진정한 오픈소스 도구로, 사용자에게 생성 → 시각적 선택 → 인라인 AI 재작성 → 다중 형식 내보내기의 루프를 제공합니다.