Repolode
제출하기
stackblitz

stackblitz/bolt-slides

AI 에이전트가 만들거나 직접 제작할 수 있는, 슬라이드마다 반응형 웹 페이지로 구성된 React 기반 프레젠테이션 툴킷

대체할 수 있는 제품:PowerPointGoogle SlidesKeynote

GitHub에서 보기
스타
1,129
포크
137
열린 이슈
7
마지막 커밋
3개월 전

어떤 프로젝트인가요?

Bolt Slides는 프레젠테이션을 실제로 작동하는 웹 앱으로 바꿔 줍니다. 각 슬라이드는 일반적인 React 컴포넌트이므로 정적인 글머리표 대신 3D 장면, 실시간 데이터, 임베드된 제품, 인터랙티브 프로토타입 등을 담을 수 있습니다. Claude Code, Codex, Cursor, Bolt 같은 AI 코딩 에이전트가 활용하도록 설계됐으며, 에이전트가 덱에 테마를 적용하고 슬라이드를 구성하는 과정을 안내하는 skill도 함께 제공됩니다.

내부적으로는 도크, 썸네일 사이드바, 전체 슬라이드 그리드 보기, 다음 슬라이드로 넘어가기 전에 콘텐츠를 단계별로 보여 주는 클릭 기반 빌드 기능, 주석 도구를 갖춘 페이지형 덱 엔진을 제공합니다. 발표자 모드는 두 번째 탭에서 열리며, 타이머와 다음 슬라이드 미리보기, 청중 화면과 BroadcastChannel로 동기화되는 편집 가능한 발표자 노트를 보여 줍니다. URL 해시에는 현재 슬라이드가 기록되므로 특정 페이지를 가리키는 링크를 만들 수 있습니다.

저장소에는 구조, 데이터 차트와 표, 스토리텔링 레이아웃, 제품 목업, 시각 효과를 아우르는 컴포넌트 라이브러리가 포함되어 있습니다. 색상, 글꼴, 모서리 반경은 하나의 CSS 토큰 파일에서 설정하므로 기본 색상을 바꾸면 덱 전체의 색상이 바뀝니다.

핵심 기능

  • 01각 슬라이드는 실시간 데이터, 3D 장면, 인터랙티브 프로토타입을 담을 수 있는 React 컴포넌트입니다.
  • 02클릭 기반 빌드에서는 콘텐츠가 단계별로 표시되고, 화살표 키를 눌러 앞뒤로 이동할 수 있습니다.
  • 03동기화된 두 번째 탭의 발표자 모드에서 타이머, 다음 슬라이드 미리보기, 편집 가능한 노트를 확인할 수 있습니다.
  • 04콘텐츠 기준점에 고정되는 주석을 사용하면 화면 크기가 달라져도 그림이 같은 요소에 붙어 있습니다.
  • 05딥링크가 URL 해시를 통해 현재 슬라이드를 가리킵니다.
  • 06컴포넌트 라이브러리에는 차트, 표, 타임라인, 가격표, 코드 창 등이 포함되어 있습니다.

활용 사례

  • 덱에 바로 삽입한 라이브 데모로 제품을 소개합니다.
  • 인터랙티브 차트와 대시보드로 데이터가 많은 분석 결과를 발표합니다.
  • AI 코딩 에이전트에 프롬프트 하나만 입력해 발표용 슬라이드 덱을 생성합니다.
  • 공유 테마 파일을 사용해 브랜드에 맞는 맞춤형 프레젠테이션 템플릿을 만듭니다.

토픽

#presentation#react#slides#typescript#ai-agent#interactive#web-app

자주 묻는 질문

bolt-slides은(는) 무엇인가요?
AI 에이전트가 만들거나 직접 제작할 수 있는, 슬라이드마다 반응형 웹 페이지로 구성된 React 기반 프레젠테이션 툴킷 Bolt Slides는 프레젠테이션을 실제로 작동하는 웹 앱으로 바꿔 줍니다. 각 슬라이드는 일반적인 React 컴포넌트이므로 정적인 글머리표 대신 3D 장면, 실시간 데이터, 임베드된 제품, 인터랙티브 프로토타입 등을 담을 수 있습니다. Claude Code, Codex, Cursor, Bolt 같은 AI 코딩 에이전트가 활용하도록 설계됐으며, 에이전트가 덱에 테마를 적용하고 슬라이드를 구성하는 과정을 안내하는 skill도 함께 제공됩니다.
bolt-slides은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
bolt-slides은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
bolt-slides은(는) 아직 유지보수되고 있나요?
6개월 이내 업데이트. bolt-slides의 마지막 커밋은 2026년 7월 30일입니다.
bolt-slides은(는) 어디에 사용할 수 있나요?
덱에 바로 삽입한 라이브 데모로 제품을 소개합니다. 인터랙티브 차트와 대시보드로 데이터가 많은 분석 결과를 발표합니다. AI 코딩 에이전트에 프롬프트 하나만 입력해 발표용 슬라이드 덱을 생성합니다. 공유 테마 파일을 사용해 브랜드에 맞는 맞춤형 프레젠테이션 템플릿을 만듭니다.
bolt-slides은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/stackblitz/bolt-slides

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트