[GitHub] AI가 만든 슬라이드, 내 맘대로 편집하자! 에이전트 중심 프레임워크 'slides-grab'

AI 도구들이 순식간에 발표 자료를 만들어주는 시대입니다. 하지만 AI가 생성한 슬라이드에서 "딱 이 부분만" 수정하고 싶을 때 답답했던 적 없으신가요?

대부분의 AI 슬라이드 생성기는 화면의 특정 부분을 직접 가리키고, 그 자리에서 즉각적으로 반복 편집하는 기능을 제공하지 않습니다. 오늘 소개할 slides-grab은 바로 이 가려운 부분을 시원하게 긁어주는 에이전트 우선(Agent-first) 발표 자료 프레임워크입니다.

https://github.com/NomaDamas/slides-grab/tree/main

GitHub - NomaDamas/slides-grab: Best harness + editor + linter for generating slides in Claude Code / Codex - Claude Design Open

 

 

🤔 왜 'slides-grab' 인가요?

slides-grab은 슬라이드를 HTML과 CSS로 작성합니다. 그리고 브라우저 기반의 편집기를 통해 원하는 영역을 드래그해 선택(bbox)하고, 직접 텍스트를 수정하거나 AI 에이전트에게 재작성을 요청할 수 있습니다.

수정이 완료되면 단 한 번의 명령으로 고해상도 PDF, PPTX, 심지어 Figma용 파일로 내보낼 수 있습니다.

👉 라이브 쇼케이스 갤러리에서 실제 만들어진 발표 자료를 직접 넘겨보며 확인해 보세요!

🔄 완벽한 4단계 워크플로

slides-grab은 발표 자료 제작을 다음 4단계 흐름으로 정의합니다.

1. Plan (기획): AI 에이전트가 주제나 제공된 파일을 바탕으로 슬라이드의 아웃라인을 짭니다.
2. Design (디자인): 에이전트가 각 슬라이드를 독립적인 HTML 파일로 작성합니다.
3. Edit (편집): 브라우저 편집기에서 원하는 영역을 드래그하고, 텍스트를 수정하거나 에이전트에게 수정을 지시합니다.
4. Export (내보내기): 명령어 하나로 PDF는 물론, 실험적인 PPTX나 Figma 가져오기용 파일로 내보냅니다.

⚡ 빠른 시작 & 설치 방법

CLI(명령줄 인터페이스)와 공유 에이전트 스킬만 사용하려면 npm 패키지를 전역으로 설치하는 것이 가장 빠릅니다. (Node.js 20 이상 필요)

# npm 패키지 설치
npm install -g slides-grab

# Playwright용 크롬 브라우저 설치 (PDF 내보내기 등에 필요)
npx playwright install chromium

# 에이전트 환경(Codex, Claude)에 스킬 추가
npx skills add slides-grab -g -a codex -a claude-code --yes --copy

만약 프로젝트를 직접 수정하거나 기여하고 싶다면 깃허브 저장소를 클론하세요.

# NomaDamas 공식 저장소 (추천)
git clone https://github.com/NomaDamas/slides-grab.git && cd slides-grab

# 또는 개발자 저장소
# git clone https://github.com/vkehfdl1/slides-grab.git && cd slides-grab

npm ci && npx playwright install chromium

🛠️ 강력한 CLI 명령어 모음

slides-grab은 다양한 CLI 명령어를 지원합니다. 모든 작업 흐름은 기본적으로 --slides-dir 옵션을 통해 특정 슬라이드 폴더를 지정하여 실행할 수 있습니다.

🎨 편집 및 스타일

• slides-grab edit: 시각적 슬라이드 편집기를 브라우저에서 실행합니다.
• slides-grab list-styles: 번들로 제공되는 35개의 디자인 스타일(30개 기본 파생 + 5개 고유 스타일) 목록을 보여줍니다.
• slides-grab preview-styles: 35개 스타일의 미리보기 갤러리를 브라우저에서 엽니다.

💾 내보내기 (Export)

• slides-grab pdf: 렌더링된 슬라이드를 고화질 PDF로 내보냅니다. (기본 모드: 이미지 캡처)
  • 검색/선택 가능한 텍스트가 필요하다면 --mode print 옵션을 추가하세요.
• slides-grab convert: 슬라이드를 PPTX 파일로 변환합니다. (실험적 기능)
• slides-grab figma: Figma Slides에서 Import할 수 있는 PPTX를 생성합니다.
• slides-grab png: 슬라이드별로 고해상도(기본 2160p) PNG 이미지를 렌더링합니다.

🪄 에셋 관리 및 자동화

• slides-grab image --prompt "...": 프롬프트를 입력해 로컬 슬라이드용 AI 이미지를 생성하고 에셋 폴더에 자동 저장합니다.
• slides-grab fetch-video --url <URL>: YouTube 등의 웹 동영상을 덱의 에셋으로 다운로드합니다. (yt-dlp 필요)
• slides-grab tldraw: .tldr 다이어그램 파일을 슬라이드 크기에 맞게 안전한 로컬 SVG로 변환합니다.

⚠️ 에셋(Asset) 관리 규칙

slides-grab은 독립적이고 안정적인 슬라이드 환경을 위해 엄격한 에셋 규칙을 권장합니다.

• 권장: 모든 로컬 이미지와 동영상은 <slides-dir>/assets/에 저장하고, HTML에서는 ./assets/파일명 형태로 참조하세요.
• 허용: 완전한 자체 포함 슬라이드를 위한 data: URL 방식
• 금지/비권장: 원격 http(s):// 이미지/동영상 URL, 절대 파일 경로(/Users/... 등)

내보내기 전에는 항상 아래 명령어로 누락된 에셋이나 잘못된 경로가 없는지 검증하세요!

slides-grab validate --slides-dir <path>

📱 인스타그램 카드뉴스도 뚝딱!

인스타그램 스타일의 정사각형 콘텐츠가 필요하신가요? slides-grab은 720x720 정사각형 프레임의 카드뉴스 모드도 지원합니다. 모든 명령어에 --mode card-news 또는 --slide-mode card-news를 추가하기만 하면 됩니다.

# 카드뉴스 모드로 편집기 실행
slides-grab edit --slides-dir decks/my-cards --mode card-news

# 고해상도 PNG로 최종 렌더링
slides-grab png --slides-dir decks/my-cards --slide-mode card-news --resolution 2160p

💡 마무리하며

AI가 슬라이드 초안을 잡아주고, 나는 브라우저에서 마우스로 영역을 지정해 AI와 함께 디테일을 다듬어 나갑니다. 그리고 터미널에서 명령어 한 줄로 고품질 PDF나 이미지로 뽑아냅니다.

코딩과 발표 자료 제작을 오가는 개발자, AI의 생산성을 100% 활용하고 싶은 기획자라면 slides-grab의 워크플로를 경험해 보세요. 여러분의 프레젠테이션 제작 방식이 완전히 달라질 것입니다!

🔗 slides-grab 공식 GitHub 저장소(NomaDamas) 바로가기 🔗 slides-grab 개발자 GitHub 저장소 바로가기