wigtn-ppt

WIGTN PPT Generator

WIGTN 브랜드 정체성을 담은 단일 HTML 프레젠테이션을 만드는 스킬. 템플릿(.pptx) 없이도, 브랜드 원칙과 reference만으로 Claude가 매번 새로 디자인한다.

핵심 원칙

1. 원칙 기반, 템플릿 무의존 — 고정 템플릿 파일에 의존하지 않는다. references/의 브랜드 토큰 + 레이아웃 원칙을 읽고 그때그때 생성한다.
2. 브랜드 충실도 (Brand Fidelity) — 정확한 HEX만 사용한다. "비슷한 색" 금지. 잉크 #1E1E28, 시그니처 퍼플(Pantone 265) #9B51E0.
3. 시그니처 퍼플 점 반복 — wigtn. 의 마침표에서 온 퍼플 점(.)이 브랜드의 시그니처다. 모든 슬라이드에 퍼플 점 모티프를 하나 이상 일관되게 반복한다 (페이지 번호 옆 점, 섹션 번호의 점, 코너 점, 진행 도트 등).
4. Light / Dark 듀얼 테마 — 발표 환경에 맞춰 둘 중 하나를 선택. 한 발표물 안에서 섞지 않는다.
5. Viewport Fitting — 모든 슬라이드는 정확히 100vh. 슬라이드 내부 스크롤 절대 금지.
6. 텍스트만의 슬라이드 금지 — 모든 슬라이드에 최소 하나의 시각 요소(도형·색 블록·점·라인·아이콘).
7. Show, Don't Tell — 디자인을 말로 묻지 않는다. 테마/콘텐츠만 확정하면 바로 생성하고, 스크린샷으로 보여준 뒤 조정한다.
8. Zero-dependency — 단일 HTML 파일. 브라우저에서 바로 발표 가능 (폰트는 CDN <link> 1줄만 허용).

브랜드 (요약)

토큰	값	용도
Ink (네이비)	#1E1E28	Dark 배경 / Light 텍스트
Purple (Pantone 265)	#9B51E0	시그니처 점, 강조, 링크
Purple Deep	#6B2EAA	점 그림자, 깊이, 그라데이션 끝
White	#FFFFFF	Light 배경 / Dark 텍스트

전체 팔레트(Light/Dark :root 스니펫), 로고 변형 사용 규칙, 타이포그래피, 점 시그니처 규칙은 반드시 references/brand.md를 Read한 뒤 적용한다.

워크플로우 (4단계)

Phase 0: 테마 + 콘텐츠 (AskUserQuestion 1회)

AskUserQuestion으로 한 번에 묶어서 묻는다:

1. 테마 — Light (밝은 발표장·문서형) / Dark (무대·키노트형). 추천 포함.
2. 목적 — 컨퍼런스 / 팀 공유 / 피치덱 / 교육 / 경영진 보고
3. 분량 — 5–10장 / 10–20장 / 20장+
4. 핵심 메시지 & 이미지 — 전달할 내용, 포함할 이미지 유무·위치

발표자명·날짜·기업/제품명 등 표지에 들어갈 메타도 함께 확인한다.

Phase 1: 구조 설계

콘텐츠를 슬라이드 맵으로 분해한다. 밀도 제한: 표지는 제목+부제, 본문은 슬라이드당 최대 4–6 불릿(또는 동등한 시각 블록). 초과하면 자동 분할.

기본 골격: 표지 → 목차 → (섹션 구분 → 본문 N) × 챕터 → 마무리(Thank you). 각 슬라이드에 어떤 본문 레이아웃을 쓸지 references/design-guide.md에서 고른다.

Phase 2: 다이어그램 (필요 시)

흐름도·아키텍처가 필요하면 같은 플러그인의 handdrawn-diagram 스킬을 호출해 committable 다이어그램(SVG+PNG)을 만들고 슬라이드에 삽입한다. 손그림 톤이 부담되면 단순 CSS/SVG 도형으로 직접 그린다.

Phase 3: HTML 생성

1. references/brand.md 와 references/design-guide.md 를 Read.
2. 선택한 테마의 :root 토큰을 적용한 단일 HTML을 작성한다. 필수 규칙:
   • .slide { height: 100vh; height: 100dvh; overflow: hidden; }
   • 모든 폰트·간격은 clamp(min, pref, max) (고정 px 단독 금지)
   • 높이 기반 미디어쿼리(max-height: 700px/600px)로 단계 축소
   • 프로그레스 바 + 네비 도트(퍼플) + 키보드/터치/스와이프 + prefers-reduced-motion
   • 시그니처 퍼플 점을 모든 슬라이드에 반복
   • 로고 삽입: 아래 "로고 사용" 규칙을 따른다
3. 콘텐츠를 채우고, 애니메이션은 절제되게(프로페셔널: 0.2–0.4s 페이드/슬라이드).