/ 디렉터리 / 플레이그라운드 / Interactive Slides
← 모든 서버 ↗ GitHub
● 커뮤니티 sylvial928 ⚡ 바로 사용

Interactive Slides

제작: sylvial928 · sylvial928/interactive-slides

콘텐츠를 아름답고 독립적인 애니메이션 HTML 프리젠테이션(슬라이드 데크, 스크롤 스토리 또는 대화형 데크)으로 변환하고 선택적으로 .pptx로 내보낼 수 있습니다.

대화형 슬라이드는 모든 브라우저에서 열 수 있는 단일 HTML 파일을 생성하는 Claude Code 기술입니다. 세 가지 프레젠테이션 모드(클래식 슬라이드 데크, 긴 형식의 스크롤 스토리, 탐구적인 대화형 데크). GSAP + Google Fonts + Chart.js는 CDN으로 로드됩니다. 키보드/클릭/터치/스와이프/스크롤 탐색은 모두 기본적으로 작동합니다. 선택 사항인 pptxgenjs 내보내기는 편집 가능한 .pptx를 생성하므로 PowerPoint에 거주하는 이해 관계자에게 전달할 수 있습니다.

▶ 데모 보기 📦 설치 💡 사용 사례

왜 쓰나요

핵심 기능

라이브 데모

실제 사용 모습

interactive-slides-skill.replay ▶ 준비됨
0/0

설치

작성자 저장소 · Claude Skills 공식 문서

사용 사례

실전 활용법: Interactive Slides

한 페이지 분량의 자료를 투자자 자료로 전환

👤 창립자와 PM이 프레젠테이션을 진행합니다. ⏱ ~30 min beginner

언제 쓸까: 콘텐츠가 있습니다. 몇 분 안에 실제 데크의 모양을 원합니다.

흐름
  1. 스킬을 발동하세요
    /interactive-slides — 모드: 슬라이드 데크. 내용: <한 페이지 분량>. 테마: 최소한의 어둠.✓ 복사됨
    → Deck.html을 생성합니다. 브라우저에서 열립니다
  2. 섹션 반복
    MRR에 대한 꺾은선형 차트가 있는 '견인력' 섹션을 추가하세요.✓ 복사됨
    → 슬라이드 내부에 렌더링된 Chart.js 꺾은선형 차트
  3. .pptx 내보내기
    itch.pptx로 내보냅니다.✓ 복사됨
    → 편집 가능한 .pptx가 저장되었습니다. PowerPoint에서 완전히 편집 가능한 텍스트

결과: 오늘 데모하고 내일 .pptx 형식으로 이메일을 보낼 수 있는 자료입니다.

함정
  • 내보낸 .pptx에 애니메이션이 부족함 — HTML 애니메이션은 왕복되지 않습니다. 실시간 대화를 위한 HTML, 핸드오프를 위한 .pptx 유지
함께 쓰기: mcp-echarts

두루마리 이야기 설명 도구 만들기

👤 기술 작가 및 마케팅 담당자 ⏱ ~60 min intermediate

언제 쓸까: 스크롤을 통해 시각적으로 표시되는 미디엄 스타일의 긴 형식의 작품이 필요합니다.

흐름
  1. 모드를 선택하세요
    모드: 스크롤 스토리. 내용: 이 글. 스크롤로 트리거되는 차트와 시각적 개체를 추가하세요.✓ 복사됨
    → 출력은 GSAP 고정 섹션이 있는 스크롤 페이지입니다.
  2. 간격 조정
    '문제' 섹션의 핀 스크롤 속도를 늦추세요.✓ 복사됨
    → 스크럽 타임라인이 조정되었습니다.

결과: 독자들이 실제로 완성하는 매력적인 두루마리 작품입니다.

함정
  • 효과 오버로딩 — 섹션당 하나의 애니메이션; 휴식은 조용해야 한다

워크숍을 위한 대화형 데모 자료

👤 워크숍을 운영하는 교육자 및 DevRel ⏱ ~90 min intermediate

언제 쓸까: 작은 대화형 연습 문제가 인라인으로 포함된 슬라이드를 원합니다.

흐름
  1. 모드: 대화형
    모드: 대화형 데크. 실시간으로 업데이트되는 입력 필드 + Chart.js를 포함합니다.✓ 복사됨
    → 유선 대화형 요소; 입력 시 차트 업데이트
  2. 설문조사 추가
    클릭수를 로컬에서 기록하고 집계하는 '하나 선택' 슬라이드를 추가하세요.✓ 복사됨
    → 클릭 시 로컬 전용 카운터 업데이트

결과: 백엔드가 없어도 라이브 느낌이 나는 데크입니다.

조합

다른 MCP와 조합해 10배 효율

interactive-slides-skill + mcp-echarts

ECharts를 통해 차트를 생성하고 데크에 삽입

mcp-echarts를 SVG로 사용하여 수익 차트를 렌더링합니다. '견인' 슬라이드에 삽입하세요.✓ 복사됨
interactive-slides-skill + claude-code-design-skills

덱 테마에 브랜드 토큰 적용

데크 팔레트 및 유형에 브랜드-acme 토큰을 사용하십시오.✓ 복사됨
interactive-slides-skill + magic-ui-mcp

Interactive Deck 모드를 위한 선별된 UI 구성 요소

대화형 모드: 신뢰 로고 슬라이드에 Magic UI 선택 윤곽을 사용합니다.✓ 복사됨

도구

이 MCP가 노출하는 것

도구입력언제 호출비용
/interactive-slides (SKILL) mode + content + theme 이미 가지고 있는 콘텐츠에서 데크나 스크롤 스토리가 필요할 때마다 0

비용 및 제한

운영 비용

API 쿼터
없음
호출당 토큰
보통 - 데크 콘텐츠가 HTML 길이입니다.
금액
무료
팁
슬라이드당 문장은 80단어 미만으로 유지하세요. 그렇지 않으면 데크가 빨리 부풀어 오릅니다.

보안

권한, 시크릿, 파급범위

자격 증명 저장: 없음
데이터 외부 송신: GSAP, Google Fonts, Chart.js가 CDN에서 로드됩니다. 완전히 오프라인이 필요한 경우 라이브러리를 인라인하는 기술을 요청하세요.

문제 해결

자주 발생하는 오류와 해결

화살표 키를 눌러도 슬라이드가 진행되지 않습니다.

키보드 리스너가 바인딩되어 있는지 확인하세요. 일부 브라우저는 HTML 파일이 file://에서 제공될 때 차단됩니다. 로컬 서버를 사용해 보세요: python3 -m http.server.

확인: Open dev console; inspect keyup handler
.pptx 누락된 애니메이션 내보내기

애니메이션은 HTML 전용입니다. .pptx는 텍스트 + 레이아웃을 내보냅니다. 라이브에는 HTML을 사용하세요. 이메일 전달을 위한 .pptx.

확인: Open the .pptx in PowerPoint; check layout only
글꼴이 오프라인에서 잘못 보입니다.

오프라인 사용을 위해 base64 데이터 URI와 함께 @font-face를 포함하도록 스킬에 요청하세요.

확인: Open airplane-mode; load the HTML

대안

Interactive Slides 다른 것과 비교

대안언제 쓰나단점/장점
mck-ppt-design-skillHTML이 아닌 컨설팅 스타일의 .pptx 슬라이드를 원합니다.덜 상호작용적입니다. 더 많은 슬라이드 폴리쉬
mermaid-skill데크가 아닌 다이어그램이 필요합니다다른 유물
markmap-mcp-server덱보다 마인드맵이 더 잘 맞는다다양한 서술형

더 보기

리소스

📖 GitHub에서 공식 README 읽기

🐙 열린 이슈 보기

🔍 400+ MCP 서버 및 Skills 전체 보기