구이장 HTML PPT 에이전트 스킬

Claude Code, Codex 및 유사한 코딩 에이전트 환경을 위한 에이전트 스킬입니다. 단일 파일 HTML 가로 스와이프 덱, 덱 비주얼, 소셜 커버 페이지를 생성합니다.

두 가지 비주얼 시스템이 함께 제공됩니다:

• 스타일 A: 편집 매거진 × 전자 잉크. 코드가 녹아든 Monocle을 상상하세요. 서사 중심의 강연, 의견, 살롱, 개인적인 목소리에 적합합니다.
• 스타일 B: 스위스 국제 타이포그래피 스타일. 그리드 우선, 고채도 앵커 컬러 하나, 날카로운 직사각형, 헤어라인 룰, 극단적인 서체 대비. 사실, 제품, 분석, 프레임워크에 적합합니다.

Guizang이 "1인 회사: AI가 접은 조직"과 "새로운 작업 방식"과 같은 오프라인 강연에서 추출했습니다. 해당 덱에서 발생한 모든 문제점은 checklist.md에 기록되어 있습니다.

이전 테마 · 스타일 A 편집 매거진

새 테마 · 스타일 B 스위스 인터내셔널

30초 시작

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

또는 셸 접근이 가능한 AI 에이전트에 붙여넣으세요:

guizang-ppt-skill을 설치해줘. https://github.com/op7418/guizang-ppt-skill을 ~/.claude/skills/guizang-ppt-skill에 클론하고, SKILL.md, assets/, references/가 존재하는지 확인해줘.

이미 설치되어 있다면 업데이트하세요:

guizang-ppt-skill을 업데이트해줘. ~/.claude/skills/guizang-ppt-skill로 가서 git pull을 실행한 다음 최신 커밋을 알려줘.

그런 다음 에이전트에게 요청하세요:

이 기사에서 스위스 스타일 덱을 만들어줘, 약 7 슬라이드에 2-3개의 생성된 비주얼을 포함해서.

다른 유용한 프롬프트:

이 마크다운 파일을 편집 매거진 스타일 프레젠테이션으로 변환해줘.
이 덱의 핵심 아이디어에서 21:9 소셜 커버를 만들어줘.
이 제품 스크린샷을 16:10 슬라이드 비주얼로 다시 디자인해줘.

제공 사항

• 🖋 두 가지 비주얼 시스템: 스타일 A를 위한 편집적 스토리텔링, 스타일 B를 위한 사실적 스위스 구조
• 📐 가로 스와이프 내비게이션: ← → 화살표 / 스크롤 휠 / 터치 스와이프 / 하단 점 / 인덱스용 ESC
• 🧩 스타일 A 10가지 레이아웃: 커버, 디바이더, 큰 숫자, 이미지/텍스트, 이미지 그리드, 파이프라인, 비교 등
• 🧱 스타일 B 22개 고정 레이아웃: 커버, 선언문, KPI 타워, 루프 다이어그램, 듀오 비교, 이미지 히어로, 클로징 매니페스토 등
• 🎨 선별된 테마 프리셋: 스타일 A용 전자 잉크 테마 5종, 스타일 B용 스위스 앵커 컬러 테마 4종
• 🖼 선택적 Codex 이미지 플로우: GPT-Image 2.0 / GPT-M 2.0으로 다큐멘터리 사진, 인포그래픽, 플로우 다이어그램, 시스템 맵, UI 장면을 생성한 후 템플릿 안전 비율로 삽입
• 📰 소셜 커버: 21:9 WeChat 커버 이미지, 1:1 공유 카드, 3:4 샤오홍슈 커버, 비디오 썸네일 및 관련 변형 생성
• 📴 저전력 정적 모드: B를 눌러 WebGL / 캔버스 애니메이션을 정적 비주얼로 전환
• 📄 단일 HTML 파일 - 빌드 불필요, 서버 불필요, 브라우저에서 바로 열기

적합 / 부적합

✅ 적합: 오프라인 강연, 업계 기조연설, 사적 살롱, AI 제품 출시, 데모데이, 개인적인 목소리가 강한 프레젠테이션

❌ 부적합: 데이터 밀집 테이블, 교육용 덱(밀도가 너무 낮음), 다중 사용자 협업 편집(정적 HTML)

주요 사용 사례

HTML 덱을 사용하는 이유

• 에이전트 네이티브 편집: HTML / CSS는 평문이므로 에이전트가 직접 읽고, 편집하고, 검증할 수 있습니다.
• 마크다운보다 높은 비주얼 밀도: 정밀한 레이아웃, 위치, 모션, 상호작용, 커버 형식.
• 가벼운 전달: 하나의 HTML 파일로 열람, 발표, 전송, 스크린샷, 녹화가 가능합니다.
• 더 나은 품질 게이트: 스위스 검증기가 레이아웃 붕괴, 안전하지 않은 이미지 배치, 중앙 정렬 본문 타이틀, SVG 텍스트 함정을 잡아냅니다.
• 출력물 전반에 걸친 하나의 비주얼 시스템: 덱, 생성된 비주얼, 커버, 스크린샷 재디자인이 동일한 스타일 규칙을 공유할 수 있습니다.

플랫폼 지원

설치

옵션 1: 한 줄 설치 (권장)

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

옵션 2: AI에 이 내용을 붙여넣으세요

나를 위해 guizang-ppt-skill Claude Code 스킬을 설치해줘. 단계:

1. ~/.claude/skills/가 존재하는지 확인 (없으면 생성)
2. git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill 실행
3. 확인: ls ~/.claude/skills/guizang-ppt-skill/ 결과에 SKILL.md, assets/, references/가 표시되어야 함
4. 완료되면 알려줘. 이후에 "매거진 스타일 덱 만들어줘"와 같은 말을 하면 이 스킬이 트리거됩니다.

위 블록을 Claude Code / Cursor / 셸 접근이 있는 아무 AI 에이전트에 붙여넣으면 설치를 처리합니다.

옵션 3: 수동 CLI

git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill

실행 방법

설치가 완료되면 Claude Code가 자동으로 스킬을 감지합니다. 트리거 구문:

• "매거진 스타일 덱 만들어줘"
• "스위스 스타일 덱 만들어줘"
• "가로 스와이프 덱 생성해줘"
• "편집 매거진 스타일 프레젠테이션"
• "내 강연용 전자 잉크 슬라이드"
• "이 기사에서 21:9 WeChat 커버 만들어줘"
• "이 덱에서 1:1 공유 카드 만들어줘"

워크플로우

이 스킬은 구조화된 워크플로우로, 에이전트가 각 단계를 안내합니다:

1. 스타일 선택 — 스타일 A 편집 매거진 또는 스타일 B 스위스 인터내셔널
2. 의도 명확화 — 7가지 질문 체크리스트: 스타일, 대상 청중, 발표 시간, 원본 자료, 이미지/스크린샷, 테마, 엄격한 제약
3. 템플릿 복사 — 스타일 A는 assets/template.html 사용; 스타일 B는 assets/template-swiss.html 사용
4. 콘텐츠 채우기 — 리듬 계획을 세우고 해당하는 레이아웃 뼈대 선택 후 적용
5. 선택적 이미지 생성 — Codex에서 GPT-Image 2.0 / GPT-M 2.0 이미지 사용 여부를 물어본 후 페이지 적정 비율로 삽입
6. 자가 점검 — references/checklist.md 대조; P0 사항은 모두 통과해야 함; 스위스 덱은 레이아웃 검증기도 통과 필요
7. 미리보기 — 브라우저에서 HTML 열기
8. 반복 — 인라인 스타일로 글꼴 크기, 높이, 간격 조정

전체 명세는 SKILL.md에 있습니다.

스타일 B 스위스

스위스 테마는 단순한 CSS 스킨이 아닌 엄격한 레이아웃 시스템입니다.

• 22개의 명명된 레이아웃: 본문 슬라이드는 반드시 S01에서 S22까지 사용; 새로운 구조를 임의로 만들지 않음
• 4가지 앵커 컬러: 인터내셔널 클라인 블루, 레몬 옐로, 레몬 그린, 세이프티 오렌지
• 그리드 락: 16컬럼 그리드, 날카로운 직사각형, 1px 헤어라인, 그림자 없음, 그라데이션 없음, 둥근 카드 없음
• 중국어 제목 스케일링: 전체가 중국어인 헤드라인은 콘텐츠와 이미지 공간 확보를 위해 한 단계 작게
• 이미지/텍스트 하단 정렬: 좌/우 이미지 레이아웃에서 텍스트와 이미지 블록이 하단에 정렬되어야 하며, 페이지네이션 컨트롤을 피해야 함
• 이미지 슬롯: 이미지는 템플릿에 정의된 data-image-slot 영역에 위치해야 하며, 주로 21:9 또는 16:10 비율로 생성됨
• 엄격한 검증: 검증기가 중앙 정렬된 본문 타이틀, 실험적 레이아웃, 보이는 SVG 텍스트, 슬롯 외부에 배치된 이미지를 감지

스위스 검증:

node scripts/validate-swiss-deck.mjs path/to/index.html

Codex 이미지 플로우

Codex에서 첫 번째 덱 초안이 준비되면, 에이전트가 사용자에게 생성된 비주얼을 원하는지 물을 수 있습니다. 확인되면 이미지 유형이나 스타일을 선택합니다. 일반적인 유형은 다음과 같습니다:

• 다큐멘터리 사진: 인간적인 질감을 더하는 후지 / 라이카 스타일의 실제 장면
• 인포그래픽 / 플로우 다이어그램 / 비교 차트 / 시스템 맵: 사진으로 잘 설명할 수 없는 개념에 사용
• 스크린샷 프레이밍 / 스크린샷 재디자인: 먼저 번들 배경 에셋과 CleanShot X 스타일 캔버스로 원본 스크린샷을 보존하고, 스크린샷 재구성이 필요한 경우에만 UI 장면 생성 사용
• 데이터 포스터 / 차트: 핵심 숫자를 삽입 가능한 비주얼 에셋으로 변환
• 다중 이미지 컴포지션: 서로 관련 없는 세 장의 16:9 이미지가 그리드를 깨뜨릴 수 있는 초광폭 슬롯에 유용

생성된 이미지는 네 가지 핵심 규칙을 따라야 합니다:

• 이미지를 임베디드 에셋으로 취급하고, 독립적인 슬라이드가 아니므로 푸터, 페이지 하단, 타이틀, 페이지 번호, 코너 마크, 서명, 장식 테두리 금지
• 덱 언어에 일치: 중국어 덱은 인포그래픽에 중국어 라벨, 영어 덱은 영어 라벨 사용
• 생성 전 슬롯 비율에 맞출 것: 많은 스위스 히어로 슬롯은 21:9, 일반 메인 비주얼은 16:9 / 16:10, UI 장면은 16:10, 이미지 그리드는 고정된 동일 높이
• 원본 스크린샷을 충실히 유지해야 할 경우, 먼저 references/screenshot-framing.md를 읽고 번들 assets/screenshot-backgrounds/ 배경과 프로그래밍 방식의 크기 조절, 패딩, 정렬을 사용하며, 기본적으로 스크린샷을 다시 그리지 않음

이미지 프롬프트는 references/image-prompts.md에, 스크린샷 프레이밍은 references/screenshot-framing.md에 있습니다.

커버 생성

이 스킬은 기사나 덱 아이디어를 플랫폼 커버로도 변환할 수 있습니다:

• WeChat 메인 커버: 21:9, 헤드라인 우선, 하나의 비주얼 앵커
• WeChat 공유 카드: 1:1, 21:9 커버와 시각적으로 페어링
• 샤오홍슈 커버 / 캐러셀: 3:4, 큰 타이틀, 배치 전반에 일관된 타이포 스케일
• 비디오 썸네일: 16:9, 타이틀 + 서브타이틀 + 하나의 포컬 비주얼

규칙은 동일합니다: 강력한 키워드 몇 개를 사용하고, 타이틀을 비주얼 중심으로 유지하며, 캔버스를 본문 텍스트로 채우지 마세요.

예시 프롬프트

다음 프롬프트 중 하나를 에이전트에 복사한 후, 기사, 마크다운 파일 또는 이미지 에셋을 첨부하세요:

이 기사에서 8 슬라이드 스위스 스타일 덱을 생성하고, 템플릿 이미지 슬롯에 맞춘 3개의 생성된 비주얼을 포함하세요.

이 제품 분석 문서를 강한 내러티브 리듬이 있는 편집 매거진 스타일 덱으로 변환하세요.

이 덱의 핵심 아이디어에서 두 개의 커버를 생성하세요: 21:9 메인 커버와 시각적으로 페어링된 1:1 공유 카드.

이 제품 스크린샷을 일관된 16:10 슬라이드 비주얼로 재디자인하세요. 주요 UI 정보는 유지하고, 이미지 내에 슬라이드 타이틀이나 푸터를 추가하지 마세요.

디렉토리

guizang-ppt-skill/
├── SKILL.md              ← 주 스킬 파일: 워크플로우, 원칙, 흔한 실수
├── README.md             ← 중국어 README
├── README.en.md          ← 이 파일
├── assets/
│   ├── template.html         ← 스타일 A 편집 매거진 템플릿
│   ├── template-swiss.html   ← 스타일 B 스위스 템플릿
│   └── screenshot-backgrounds/ ← 번들 WebP 스크린샷 배경: style-a 5개 / style-b 4개
├── scripts/
│   └── validate-swiss-deck.mjs ← 스위스 레이아웃 검증기
└── references/
    ├── components.md     ← 컴포넌트 카탈로그 (유형, 색상, 그리드, 아이콘, 콜아웃, 스탯, 파이프라인)
    ├── layouts.md        ← 10개 레이아웃 뼈대 (붙여넣기 가능)
    ├── layouts-swiss.md  ← 22개 고정 스위스 레이아웃
    ├── swiss-layout-lock.md ← 스위스 충실도 및 레이아웃 엄격 규칙
    ├── themes.md         ← 5개 테마 프리셋 (선택만, 커스터마이즈 금지)
    ├── themes-swiss.md   ← 4개 스위스 앵커 컬러 테마
    ├── image-prompts.md  ← GPT-Image 2.0 / GPT-M 2.0 이미지 유형, 비율, 기본 프롬프트
    ├── screenshot-framing.md ← CleanShot X 스타일 스크린샷 프레이밍 의미
    └── checklist.md      ← 품질 체크리스트 (P0 / P1 / P2 / P3 등급)

테마 프리셋

references/themes.md에서 선택하세요. 커스텀 헥스 값은 허용되지 않습니다 — 선택의 자유보다 미적 감각 보호가 더 중요합니다.

스타일 A 편집 테마

테마 전환은 template.html의 :root{} 블록 상단에 있는 6개 변수만 교체하면 되며, 다른 모든 CSS는 var(--...)를 통해 흐릅니다.

스타일 B 스위스 테마

references/themes-swiss.md에서 선택하세요. 여기서도 커스텀 헥스 값은 허용되지 않습니다.

사용자가 색상을 지정하지 않고 스위스 스타일 덱을 요청하면 기본값으로 인터내셔널 클라인 블루를 사용합니다.

핵심 디자인 원칙

1. 화려함보다 절제 — WebGL 배경은 히어로 페이지에서만 살짝 드러납니다.
2. 장식보다 구조 — 그림자나 떠 있는 카드가 아닌 서체 크기 + 서체 + 그리드 여백을 통한 정보 위계
3. 이미지는 일급 시민 — 본문 콘텐츠 영역에 맞추고, 비율을 안정적으로 유지하며, 아래쪽만 잘라내고 위쪽과 측면은 보존
4. 생성된 비주얼은 에셋 — 핵심 사진/차트/UI만 유지하고 이미지 안에 슬라이드 타이틀, 푸터, 코너 마크를 렌더링하지 않음
5. 리듬은 히어로 페이지에 — 히어로/비히어로 교대가 눈의 피로를 덜어줍니다.
6. 동적 효과는 선택 사항 — B로 정적 모드 전환 가능하여 애니메이션이 읽기에 부담이 되지 않음
7. 용어 일관성 유지 — 스킬은 스킬입니다; 혼합 번역 금지
8. 스위스 레이아웃은 잠김 상태 유지 — 스타일 B는 관련 없는 페이지를 새로 만들지 말고 원래의 22페이지 레이아웃 시스템을 복원하여 재사용

비주얼 레퍼런스

• Monocle 매거진 레이아웃
• YC Garry Tan — "가는 하네스, 풍성한 스킬"
• Massimo Vignelli / Helvetica Forever / 스위스 국제 타이포그래피 스타일
• Guizang의 오프라인 강연 덱 시리즈

로드맵

• 실제 예시와 열어서 볼 수 있는 HTML 덱 데모 추가
• 더 많은 출판 플랫폼을 위한 커버 형식 확장
• 더 많은 스위스 레이아웃 검증 규칙 추가
• 스크린샷 재디자인 및 인포그래픽 생성 워크플로우 개선
• WorkBuddy와 같은 마켓플레이스 전용 변종 준비
• 커스터마이즈 색상을 제한하면서 큐레이션된 테마 팩 추가

자주 묻는 질문

PPTX로 내보낼 수 있나요? 주요 출력물은 HTML입니다. 브라우저에서 발표하거나, 스크린샷을 찍거나, 녹화할 수 있습니다. PPTX 변환은 별도의 워크플로우로 가능하지만, 현재 핵심 경로는 아닙니다.

커스텀 색상이 허용되지 않는 이유는 무엇인가요? 이 스킬은 안정적인 비주얼 출력을 위해 설계되었습니다. 임의의 색상은 시스템을 망가뜨리는 경우가 많아 덱은 반드시 큐레이션된 프리셋을 사용해야 합니다.

나만의 레이아웃을 추가할 수 있나요? 네. 스타일 A 레이아웃은 references/layouts.md에서 확장할 수 있습니다. 스타일 B는 더 엄격합니다: template-swiss.html, layouts-swiss.md, swiss-layout-lock.md, 검증기를 함께 업데이트해야 합니다.

Codex 이미지 생성은 필수인가요? 아니요. 생성된 이미지 없이도 덱이 작동합니다. 이미지 플로우는 사진, 인포그래픽, UI 장면, 커버가 필요할 때만 사용됩니다.

스킬을 어떻게 업데이트하나요? 설치 명령어를 다시 실행하거나 로컬 스킬 디렉토리에서 git pull을 실행하세요.

기여하기

버그, 레이아웃 문제, 새로운 레이아웃 요청 — 이슈와 PR을 환영합니다. 우선순위:

• 먼저 template.html에 새 클래스를 추가하고, layouts.md에서 정의되지 않은 클래스를 참조하지 않도록 합니다.
• template-swiss.html을 변경할 때는 layouts-swiss.md와 swiss-layout-lock.md도 함께 업데이트합니다.
• 스위스 규칙을 추가할 때는 scripts/validate-swiss-deck.mjs를 업데이트합니다.
• 발생한 문제점을 해당 P0 / P1 / P2 / P3 등급에 맞춰 checklist.md에 기록합니다.
• 새 테마 색상은 권장 사용 사례와 함께 themes.md에 추가합니다.

라이선스

MIT © 2026 op7418