LLM Wiki

html-ppt: 테마 36종과 레이아웃 31종을 갖춘 HTML 프레젠테이션 제작 에이전트 스킬

Properties2
descriptionPyTorchKR 9bow 게시글의 핵심 내용과 실무적 의미를 원문에 근거해 정리한다.
tagsai-models, open-source, research

5 min read

출처

개요

html-ppt는 AI 코딩 에이전트가 정적 HTML 프레젠테이션을 만들 때 활용할 수 있도록 테마, 레이아웃, 애니메이션, 전체 덱 템플릿을 묶은 AgentSkill이다. 에이전트가 매번 슬라이드 구조와 CSS를 새로 설계하는 대신, 미리 준비된 템플릿과 디자인 토큰을 조합하도록 돕는다. 36개 테마, 31개 단일 페이지 레이아웃, 15개 전체 덱 템플릿, 47개 애니메이션을 제공한다. 순수 HTML·CSS·JavaScript 기반이라 별도의 빌드 과정 없이 브라우저에서 실행할 수 있으며, S 키로 발표자 모드를 열 수 있다.

핵심 포인트

  • 테마는 minimal-white, corporate-clean, dracula, tokyo-night, neo-brutalism, cyberpunk-neon 등 36종이며, CSS 토큰 파일을 교체해 덱 전체의 색상·폰트·간격·그림자 등을 변경한다.
  • 단일 페이지 레이아웃 31종에는 표지, 목차, 2단·3단 구성, KPI, 표, 코드, 터미널, 타임라인, 로드맵, 차트, 아키텍처 다이어그램, 절차 단계 등이 포함된다.
  • 애니메이션은 CSS 기반 27종과 Canvas FX 기반 20종으로 나뉘며, 각각 data-anim과 data-fx 속성으로 지정한다.
  • 발표자 모드는 현재 슬라이드, 다음 슬라이드, 발표 원고, 타이머를 별도 창의 네 카드로 보여 주며, 카드 위치와 크기를 localStorage에 저장한다.
  • 발표자 모드의 미리보기는 같은 덱 HTML을 ?preview=N과 함께 iframe으로 불러오고, postMessage와 BroadcastChannel로 상태를 동기화해 실제 슬라이드와 동일한 스타일을 유지한다.
  • 설치는 npx skills add https://github.com/lewislulu/html-ppt-skill 명령으로 진행하며, 저장소의 스크립트로 새 덱 생성과 헤드리스 Chrome 기반 PNG 렌더링도 가능하다.
  • MIT 라이선스로 공개되어 있으며, 결과물은 PPTX가 아닌 브라우저에서 실행되는 정적 HTML 프레젠테이션이다.

왜 중요한가

html-ppt는 프레젠테이션 디자인을 에이전트의 매번 새로운 생성 작업에만 맡기지 않고, 재사용 가능한 테마·레이아웃·애니메이션 카탈로그와 디자인 토큰으로 구조화한다. 이에 따라 여러 덱에서 시각적 일관성을 유지하고, 완성된 정적 파일을 별도 빌드 없이 바로 검토·배포할 수 있다. 특히 발표자 모드가 실제 덱과 동일한 HTML을 기반으로 동작한다는 점은 발표 화면과 발표자용 미리보기의 불일치를 줄이려는 설계로 볼 수 있다.

후속으로 볼 링크와 키워드

※ 원문 게시물은 GPT 모델을 바탕으로 정리한 글일 수 있다고 고지하고 있으므로, 실제 설치·사용 전에는 GitHub 저장소의 최신 파일과 문서를 함께 확인하는 것이 좋다.

관련 위키

원문 보존 위치

원문 전체는 raw source: 2026-07-31-pytorchkr-topic-11470-html-ppt-36-31-html에 source_url 및 HTML 원문과 함께 저장되어 있습니다.