DeckMason: AI 프레젠테이션 워크플로우
요약: 주제, 문서 또는 개요로부터 프로덕션 품질의 HTML 슬라이드 덱을 생성합니다. 이 파일은 6단계 워크플로우의 진입점입니다. 먼저 이 파일을 읽고, 각 단계에 도달할 때마다 필요에 따라 참조 파일을 불러오세요. 모든 참조 파일을 한 번에 불러오지 마십시오.
파일 시스템 접근이 가능한 AI 코딩 에이전트 필요: Claude Code, Cursor, Codex CLI, Windsurf, Aider 또는 파일 읽기와 스크립트 실행이 가능한 모든 에이전트.
출력 품질 기준
모든 프레젠테이션은 최고 수준의 SaaS 마케팅 페이지나 에디토리얼 스프레드에 어울리는 느낌이어야 합니다. 깔끔하고, 자신감 있으며, 미니멀하고, 프로페셔널해야 합니다. AI 쓰레기는 안 됩니다. 제너릭 그라디언트는 안 됩니다. 내용 없는 카피는 안 됩니다.
빠른 시작
새 프레젠테이션:
"[주제]에 대한 피치 덱 만들어줘"
"[대상]을 위한 [주제]에 관한 프레젠테이션 만들어줘"
자체 콘텐츠 사용:
"이 노트를 슬라이드로 바꿔줘: [내용 붙여넣기]"
"이 개요를 프레젠테이션 스타일로 꾸며줘"
브랜드 사용:
"company-deck.pptx의 브랜드를 사용해서 프레젠테이션 만들어줘"
"이 피치 덱에 https://linear.app 스타일을 적용해줘"
기존 PPTX 불러오기:
"company-deck.pptx를 HTML 프레젠테이션으로 변환해줘"
사전 비행 스코핑 (덱 생성 전)
단 하나의 슬라이드를 작성하기 전에 미적 방향을 확정하세요. 사용자가 이미 명확한 답변을 준 경우에만 질문을 건너뛰세요. 건너뛰는 경우, 가정을 명시적으로 다시 언급하세요.
단계 0: 시각적 미리보기 (권장 경로)
사용자가 시각적으로 방향을 선택할 수 있도록 3개의 테마로 빠른 시각 미리보기 슬라이드를 생성하세요:
python3 scripts/preview_themes.py "여기에 주제"
이 명령어는 previews/ 디렉토리에 3개의 단일 슬라이드 HTML 파일을 생성합니다:
previews/preview-1-dark.html(Deep Space 테마)previews/preview-2-light.html(Modern SaaS 테마)previews/preview-3-bold.html(Bold Signal 테마)
사용자에게 3개의 파일을 열고 방향을 선택하도록 안내하세요. 선택된 방향이 미적 방향(1단계)이 되며, 아래 텍스트 기반 제안은 건너뜁니다.
단계 1: 미적 방향 (텍스트 대체)
사용자가 텍스트를 선호하는 경우, 이 특정 주제와 대상에 맞춤화된 3가지 시각적 방향을 제안하세요. 고정된 사전 설정 목록에서 가져오지 마세요. 각 옵션은 분위기 단어 + 구체적인 시각적 단서(팔레트, 타이포그래피, 모티프)를 결합하여 사용자가 상상할 수 있도록 합니다. 세 방향은 서로 의미 있게 달라야 하며, 같은 아이디어의 세 가지 변형이 아니어야 합니다. 하나를 추천으로 표시하세요.
각 방향에 대해 색상 조화(단색, 유사, 보색, 분할 보색, 삼색, 중립+강조), 색온도(따뜻함, 차가움, 중립), 60-30-10 분포(어떤 색이 주색, 보조색, 강조색인지)를 명시하세요. 이렇게 하면 계획 단계에서 색상 결정을 강제하여 나중에 고려하지 않도록 합니다.
단계 2: 페이지 수
다음 중에서 선택하도록 제안하세요:
- 3-5 슬라이드: 짧음 / 티저
- 6-10 슬라이드: 표준
- 11-20 슬라이드: 심층
- 사용자 지정: 사용자 지정
단계 3: 페이지당 텍스트 밀도
다음 네 가지 수준 중 하나:
- 미니멀: 한 줄 또는 큰 숫자
- 가벼움: 제목 + 2-3개 불릿
- 표준: 제목 + 4-5개 불릿
- 조밀함: 다중 열 또는 상세 참조 콘텐츠
단계 4: 모션
정적, 미묘한 라이브 리뷰 모션, 또는 별도의 비디오 자산. PDF, PPTX, Google Slides 및 사전 읽기 덱의 경우 기본적으로 정적을 선택하세요.
GSAP 기반 애니메이션 패턴(페이드인업, 스태거 리빌, 클립패스 리빌, 스케일인, 슬라이드인-좌/우, 블러인)은 references/animation-patterns.md를 참조하세요. 사용자가 라이브 HTML 리뷰 또는 키노트 스타일 재생을 원할 때 사용하세요.
이러한 사항이 확정된 후에만 개요로 진행하세요.
6단계 워크플로우 (개요)
이 개요를 읽어 전체 파이프라인을 이해하세요. 각 단계에 도달할 때 해당 참조 파일을 불러오세요.
| 단계 | 이름 | 수행 작업 | 참조 파일 |
|---|---|---|---|
| 사전 비행 | 스코핑 | 시각적 미리보기 또는 4가지 텍스트 질문: 미적 방향, 페이지 수, 텍스트 밀도, 모션 | 이 파일 (위) |
| 0 | 브리프 | 요청, 기본값, 가정을 기록합니다. 대상, 아크, 요청, 성공이 포함된 브리프를 작성합니다. PPT 불러오기 워크플로우도 다룹니다. | references/phase0-brief.md |
| 1 | 구조 | 피라미드 원칙, 주장-증거 제목, 논제, 대조 비트, 제품 디자인 레이어 | references/phase1-structure.md |
| 2 | 개요 | 페이지 유형 분류, 10가지 에디토리얼 레이아웃 유형, 슬라이드 수 스케일링 | references/phase2-outline.md |
| 3 | HTML | 캔버스 스케일 아키텍처, 뷰포트 맞춤, 수직 예산 계산, 슬라이드당 하나의 아이디어, HTML 구조, 애니메이션 패턴, DOM 규칙, 그리드 비율 | references/phase3-html.md |
| 4 | 이미지 | 7가지 명명된 이미지 역할, 이미지 유형 분류, 이미지 슬라이드 모드, 차트 안티패턴 | references/phase4-images.md |
| 5 | 폴리싱 | 페이지 리듬, 폰트 계층 구조, 색상 이론 시스템, AI 특징, 산업 제약, 음성 안내, 디자이너의 눈 비평, 내러티브 스파인 | references/phase5-polish.md |
| 6 | 내보내기 | PPTX (python-pptx 또는 pptxgenjs), PDF, Vercel 배포 | references/phase6-export.md |
특화 모드 (필요 시 불러오기)
- 시네마틱 슬라이드 모드: 워크플로우 데모를 위한 5개 장면의 22초 영화 클립
- 스위스 국제 엄격 모드: 비네텔리에서 영감을 받은 초고정밀 그리드 디자인
- 에디토리얼 웹 덱 모드: 매거진 스타일 키노트 덱
- HTML 슬라이드 템플릿 라이브러리:
beautiful-html-templates의 32개 프로덕션 품질 템플릿 - 테마 변형 프로토콜: 확정 전 3개의 뚜렷한 시각적 방향
- 디자인 철학 학교 시스템: 모호한 브리프를 위한 5가지 학교
- 발표자 노트 오버레이: N 키 토글, 슬라이드별 자동 업데이트
- 브랜드 불러오기 워크플로우: PPTX, 웹사이트 URL 또는 브랜드 가이드 PDF에서 테마 추출
모든 특화 모드의 전체 세부 정보: references/specialized-modes.md
품질 가드레일 (전달 전에 불러오기)
모든 품질 가드레일, 금지 단어, 데이터 슬롭 규칙, 30% 카피 컷 규칙, 전달 전 자체 점검, 문제 해결 및 요구 사항: references/quality-guardrails.md
스타일 프리셋
31개의 엄선된 스타일(11개 오리지널 + 20개 확장)과 Kami Warm Editorial에 대한 자세한 내용은 STYLE_PRESETS.md를 참조하세요:
오리지널 11: Modern SaaS (기본값), Neon Cyber, Midnight Executive, Deep Space, Terminal Green, Paper & Ink, Swiss Modern, Soft Pastel, Warm Editorial, Brutalist, Gradient Wave
확장 20: Bold Signal, Electric Studio, Creative Voltage, Dark Botanical, Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial, Liquid Glass Bento, Engineering Blueprint, Watercolor Map, Golden Serif Quote, Chalkboard Lesson, Exploded Layer Stack, Hyperreal Product, Summary Infographic, Cobalt Grid, 8-Bit Orbit, Raw Grid, Broadside
Kami Warm Editorial: 인쇄 품질, 종이 같은 덱을 위한 완전한 에디토리얼 사양입니다. STYLE_PRESETS.md의 Kami 섹션을 참조하세요.
전체 CSS 및 폰트 세부 정보는 STYLE_PRESETS.md에 있습니다.
이 스킬 읽는 방법
- 먼저 이 파일을 읽으세요. 여기에는 빠른 시작, 사전 비행 스코핑 및 6단계 개요가 포함되어 있습니다.
- 각 단계에 도달할 때 필요에 따라 참조 파일을 불러오세요. 모든 참조 파일을 한 번에 불러오지 마세요.
- 덱을 전달하기 전에
references/quality-guardrails.md를 불러오고 자체 점검 체크리스트를 실행하세요. - 특화 모드(시네마틱, 스위스 엄격, 에디토리얼 웹 등)의 경우 사용자가 해당 모드를 요청할 때만
references/specialized-modes.md를 불러오세요. - GSAP 애니메이션의 경우, 사용자가 표준 CSS 전환 이상의 모션을 원할 때
references/animation-patterns.md를 불러오세요.
이 점진적 공개 구조는 컨텍스트 토큰을 절약합니다. 원래 단일 파일 SKILL.md는 1,195줄이었습니다. 이 진입점은 약 200줄입니다. 각 참조 파일은 필요할 때만 불러옵니다.
내보내기 빠른 참조
# PPTX 내보내기 (경로 A: python-pptx, 이미지 기반)
python3 scripts/pptx_export.py presentation.html --output presentation.pptx
# PPTX 불러오기 (기존 .pptx를 DeckMason용 JSON으로 변환)
python3 scripts/pptx_import.py input.pptx --output decks/input_deck.json
# 시각적 미리보기 (사용자가 선택할 3개 테마)
python3 scripts/preview_themes.py "주제"
# PDF 내보내기 (헤드리스 Chrome)
chrome --headless --print-to-pdf=presentation.pdf --run-all-compositor-stages-before-draw --virtual-time-budget=5000 presentation.html
# Vercel 배포 (라이브 URL)
npx vercel
요구 사항
- 파일 시스템 및 터미널 접근이 가능한 AI 코딩 에이전트
- 모든 적격 LLM 백엔드
- PPTX 내보내기 경로 A를 위한 Python 3 +
python-pptx(pip3 install python-pptx) - PPTX 내보내기 경로 B를 위한 Node.js +
pptxgenjs(npm install pptxgenjs) - 최신 브라우저 (Chrome/Edge/Firefox/Safari)
추가 API 키는 필요하지 않습니다. 모든 것이 로컬에서 실행됩니다.
npm 설치 (선택 사항)
# 클론 없이 빠른 시작
npx deckmason init [dir]
# 전역 설치
npm install -g deckmason
deckmason init
deckmason themes
deckmason preview "주제"
deckmason import company-deck.pptx
전체 npm 사용법은 README.md를 참조하세요.