From e5146e95086e6a1d6514f9512442e92fb7452b86 Mon Sep 17 00:00:00 2001 From: Hyeongseob91 Date: Sat, 27 Jun 2026 23:38:28 +0900 Subject: [PATCH 1/3] feat(skill): add wigtn-ppt brand presentation generator Add WIGTN-brand HTML presentation skill (6th skill). Principles-based with no template dependency: generates a single self-contained HTML deck from brand tokens + layout references, with Light/Dark themes and the signature purple dot. - SKILL.md: 4-phase workflow (theme+content -> structure -> diagram -> HTML) - references/brand.md: exact palette (ink #1E1E28, Pantone-265 purple #9B51E0), logo variants, purple-dot signature, CSS/SVG wordmark fallback - references/design-guide.md: viewport rules, slide types, animation mapping - assets/logo/README.md: logos are team-private (PNG binaries gitignored) - bump skill count 5 -> 6 in plugin manifests, README badges, CLAUDE.md Quality Score: 93/100 Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01VDvYizKVU4qf57HJjzN6iY --- .claude-plugin/marketplace.json | 4 +- .claude-plugin/plugin.json | 2 +- .gitignore | 3 + CLAUDE.md | 6 +- README.cn.md | 2 +- README.ko.md | 2 +- README.md | 2 +- .../wigtn-plugins/.claude-plugin/plugin.json | 5 +- .../wigtn-plugins/skills/wigtn-ppt/SKILL.md | 117 +++++++++++++++ .../skills/wigtn-ppt/assets/logo/README.md | 23 +++ .../skills/wigtn-ppt/references/brand.md | 133 ++++++++++++++++++ .../wigtn-ppt/references/design-guide.md | 101 +++++++++++++ 12 files changed, 390 insertions(+), 10 deletions(-) create mode 100644 plugins/wigtn-plugins/skills/wigtn-ppt/SKILL.md create mode 100644 plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/README.md create mode 100644 plugins/wigtn-plugins/skills/wigtn-ppt/references/brand.md create mode 100644 plugins/wigtn-plugins/skills/wigtn-ppt/references/design-guide.md diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index 0a3e69b..cac1e41 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -5,13 +5,13 @@ "email": "rukais2294@gmail.com" }, "metadata": { - "description": "AI-native Vibe Coding — From idea to Deploy, Zero friction. Unified plugin with 13 agents, 5 commands, 5 skills, team-based parallel build, 20 design styles, screen-spec generator.", + "description": "AI-native Vibe Coding — From idea to Deploy, Zero friction. Unified plugin with 13 agents, 5 commands, 6 skills, team-based parallel build, 20 design styles, screen-spec generator.", "version": "0.1.8" }, "plugins": [ { "name": "wigtn-plugins", - "description": "Unified AI-native Vibe Coding plugin: PRD generation, digging analysis, screen-spec (IA / User Flow / Wireframe HTML / Dev Handoff), team-based parallel implementation, quality-gated auto-commit, 20 design styles, frontend (React/Next.js), backend (NestJS/Prisma), mobile (React Native/Expo), AI integration (STT/LLM), DevOps (Docker/CI-CD). 13 agents, 5 commands, 5 skills.", + "description": "Unified AI-native Vibe Coding plugin: PRD generation, digging analysis, screen-spec (IA / User Flow / Wireframe HTML / Dev Handoff), team-based parallel implementation, quality-gated auto-commit, 20 design styles, frontend (React/Next.js), backend (NestJS/Prisma), mobile (React Native/Expo), AI integration (STT/LLM), DevOps (Docker/CI-CD). 13 agents, 5 commands, 6 skills.", "source": "./plugins/wigtn-plugins", "version": "0.1.8", "author": { diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json index 1744fe2..0f525d6 100644 --- a/.claude-plugin/plugin.json +++ b/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "wigtn-plugins", "version": "0.1.8", - "description": "AI-native Vibe Coding — From idea to Deploy, Zero friction. Unified plugin with 13 agents, 5 commands, 5 skills, team-based parallel build, 20 design styles.", + "description": "AI-native Vibe Coding — From idea to Deploy, Zero friction. Unified plugin with 13 agents, 5 commands, 6 skills, team-based parallel build, 20 design styles.", "author": { "name": "WIGTN Crew", "url": "https://github.com/wigtn" diff --git a/.gitignore b/.gitignore index 229b222..48c1c50 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,6 @@ tmpclaude-* memory-lake/ .claude/ PLANNING/ + +# WIGTN brand logo binaries bundled for wigtn-ppt (team-only; README stays, *.png ignored) +plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/*.png diff --git a/CLAUDE.md b/CLAUDE.md index bc894be..5cb5fa0 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -14,11 +14,11 @@ A unified Claude Code plugin enabling AI-powered Vibe Coding: idea to production wigtn-plugins/ ├── .claude-plugin/ # Marketplace metadata ├── plugins/ -│ └── wigtn-plugins/ # Unified plugin: 13 agents, 5 commands, 5 skills, 20 design styles +│ └── wigtn-plugins/ # Unified plugin: 13 agents, 5 commands, 6 skills, 20 design styles │ ├── .claude-plugin/ # Plugin metadata │ ├── agents/ # 13 agent definitions │ ├── commands/ # 5 commands (/prd, /screen-spec, /implement, /auto-commit, /review-pr) -│ ├── skills/ # 5 skills (code-review-levels, design-system-reference, handdrawn-diagram, screen-spec, team-memory-protocol) +│ ├── skills/ # 6 skills (code-review-levels, design-system-reference, handdrawn-diagram, screen-spec, team-memory-protocol, wigtn-ppt) │ └── hooks/ # Hooks configuration ├── CLAUDE.md # This file ├── README.md # English docs @@ -101,6 +101,8 @@ Coordinators support both instruction-based orchestration (default) and native A | `plugins/wigtn-plugins/skills/screen-spec/templates/` | 5 boilerplate artifacts | | `plugins/wigtn-plugins/skills/screen-spec/references/` | state-checklist, microcopy-patterns, handoff-checklist | | `plugins/wigtn-plugins/skills/team-memory-protocol/` | Cross-agent shared context management | +| `plugins/wigtn-plugins/skills/wigtn-ppt/` | WIGTN-brand HTML presentation generator (Light/Dark themes, principles-based, no template) | +| `plugins/wigtn-plugins/skills/wigtn-ppt/references/` | `brand.md` (palette, logo, purple-dot signature), `design-guide.md` (layouts) | | `plugins/wigtn-plugins/agents/parallel-*` | Parallel coordinators (digging, review) | | `plugins/wigtn-plugins/agents/team-build-coordinator.md` | Team-based parallel build orchestration | diff --git a/README.cn.md b/README.cn.md index fda513d..0caf63d 100644 --- a/README.cn.md +++ b/README.cn.md @@ -9,7 +9,7 @@ ![Version](https://img.shields.io/badge/v0.1.8-Unified_Plugin-FF6B6B?style=for-the-badge) ![Agents](https://img.shields.io/badge/13-Agents-5A67D8?style=for-the-badge) ![Commands](https://img.shields.io/badge/5-Commands-38B2AC?style=for-the-badge) -![Skills](https://img.shields.io/badge/5-Skills-00D4AA?style=for-the-badge) +![Skills](https://img.shields.io/badge/6-Skills-00D4AA?style=for-the-badge) ![Styles](https://img.shields.io/badge/20-Design_Styles-F59E0B?style=for-the-badge) [![GitHub Stars](https://img.shields.io/github/stars/wigtn/wigtn-plugins?style=flat-square)](https://github.com/wigtn/wigtn-plugins/stargazers) diff --git a/README.ko.md b/README.ko.md index ac0a44b..ead1468 100644 --- a/README.ko.md +++ b/README.ko.md @@ -9,7 +9,7 @@ ![Version](https://img.shields.io/badge/v0.1.8-Unified_Plugin-FF6B6B?style=for-the-badge) ![Agents](https://img.shields.io/badge/13-Agents-5A67D8?style=for-the-badge) ![Commands](https://img.shields.io/badge/5-Commands-38B2AC?style=for-the-badge) -![Skills](https://img.shields.io/badge/5-Skills-00D4AA?style=for-the-badge) +![Skills](https://img.shields.io/badge/6-Skills-00D4AA?style=for-the-badge) ![Styles](https://img.shields.io/badge/20-Design_Styles-F59E0B?style=for-the-badge) [![GitHub Stars](https://img.shields.io/github/stars/wigtn/wigtn-plugins?style=flat-square)](https://github.com/wigtn/wigtn-plugins/stargazers) diff --git a/README.md b/README.md index 69d55b2..4da0133 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ ![Version](https://img.shields.io/badge/v0.1.8-Unified_Plugin-FF6B6B?style=for-the-badge) ![Agents](https://img.shields.io/badge/13-Agents-5A67D8?style=for-the-badge) ![Commands](https://img.shields.io/badge/5-Commands-38B2AC?style=for-the-badge) -![Skills](https://img.shields.io/badge/5-Skills-00D4AA?style=for-the-badge) +![Skills](https://img.shields.io/badge/6-Skills-00D4AA?style=for-the-badge) ![Styles](https://img.shields.io/badge/20-Design_Styles-F59E0B?style=for-the-badge) [![GitHub Stars](https://img.shields.io/github/stars/wigtn/wigtn-plugins?style=flat-square)](https://github.com/wigtn/wigtn-plugins/stargazers) diff --git a/plugins/wigtn-plugins/.claude-plugin/plugin.json b/plugins/wigtn-plugins/.claude-plugin/plugin.json index 9315ad8..490077f 100644 --- a/plugins/wigtn-plugins/.claude-plugin/plugin.json +++ b/plugins/wigtn-plugins/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "wigtn-plugins", "version": "0.1.8", - "description": "AI-native Vibe Coding — From idea to Deploy, Zero friction. 13 agents, 5 commands, 5 skills, team-based parallel build, 20 design styles, screen-spec generator (IA / User Flow / Wireframe HTML).", + "description": "AI-native Vibe Coding — From idea to Deploy, Zero friction. 13 agents, 5 commands, 6 skills, team-based parallel build, 20 design styles, screen-spec generator (IA / User Flow / Wireframe HTML), WIGTN-brand PPT generator.", "agents": [ "./agents/architecture-decision.md", "./agents/code-formatter.md", @@ -29,6 +29,7 @@ "./skills/design-system-reference", "./skills/screen-spec", "./skills/code-review-levels", - "./skills/handdrawn-diagram" + "./skills/handdrawn-diagram", + "./skills/wigtn-ppt" ] } diff --git a/plugins/wigtn-plugins/skills/wigtn-ppt/SKILL.md b/plugins/wigtn-plugins/skills/wigtn-ppt/SKILL.md new file mode 100644 index 0000000..cee9b8f --- /dev/null +++ b/plugins/wigtn-plugins/skills/wigtn-ppt/SKILL.md @@ -0,0 +1,117 @@ +--- +name: wigtn-ppt +description: >- + WIGTN 브랜드 HTML 프레젠테이션 생성. 템플릿 없이 브랜드 원칙(잉크 네이비 + + 시그니처 퍼플 점)을 기반으로 단일 self-contained HTML 발표자료를 만든다. + Light / Dark 두 테마를 선택할 수 있고, WIGTN 로고와 퍼플 점 시그니처를 모든 + 슬라이드에 일관되게 적용한다. Triggers on: 'wigtn ppt', 'wigtn 발표자료', + '위그튼 ppt', 'PPT 만들어줘', 'HTML 프레젠테이션', '발표자료 만들어줘', + '슬라이드 만들어줘', '프레젠테이션 만들어줘', 'html presentation', + 'animated slides', '브랜드 발표자료', '회사 PPT'. +allowed-tools: Read, Write, Edit, Bash, Glob +--- + +# 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 `` 1줄만 허용). + +## 브랜드 (요약) + +| 토큰 | 값 | 용도 | +|------|-----|------| +| Ink (네이비) | `#1E1E28` | Dark 배경 / Light 텍스트 | +| Purple (Pantone 265) | `#9B51E0` | **시그니처 점**, 강조, 링크 | +| Purple Deep | `#6B2EAA` | 점 그림자, 깊이, 그라데이션 끝 | +| White | `#FFFFFF` | Light 배경 / Dark 텍스트 | + +> 전체 팔레트(Light/Dark `:root` 스니펫), 로고 변형 사용 규칙, 타이포그래피, 점 시그니처 규칙은 **반드시 [references/brand.md](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](references/design-guide.md)에서 고른다. + +### Phase 2: 다이어그램 (필요 시) + +흐름도·아키텍처가 필요하면 같은 플러그인의 **`handdrawn-diagram` 스킬**을 호출해 committable 다이어그램(SVG+PNG)을 만들고 슬라이드에 삽입한다. 손그림 톤이 부담되면 단순 CSS/SVG 도형으로 직접 그린다. + +### Phase 3: HTML 생성 + +1. **[references/brand.md](references/brand.md)** 와 **[references/design-guide.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 페이드/슬라이드). + +### Phase 4: 검증 및 전달 + +스크린샷으로 viewport fitting·브랜드 일관성·점 시그니처를 확인한다. Playwright/Chrome이 있으면 슬라이드별 PNG를 렌더해 Read로 점검하고, 없으면 사용자에게 브라우저에서 열어보도록 안내한다. + +``` +생성 완료: +- HTML: docs/{파일명}-presentation.html (브라우저에서 F키 전체화면 → 방향키/스와이프) +``` + +## 로고 사용 + +WIGTN 로고는 **팀 전용 에셋**이라 공개 플러그인에 커밋하지 않는다(.gitignore). 다음 우선순위로 찾는다: + +1. `${CLAUDE_PLUGIN_ROOT}/skills/wigtn-ppt/assets/logo/` — 번들된 로고(팀 로컬) +2. `/docs/images/` — 이 레포의 브랜드 에셋 위치 +3. **CSS/SVG 워드마크 폴백** — PNG가 없으면 `wigtn` + 퍼플 점을 폰트/SVG로 직접 렌더(brand.md에 스니펫). 폴백만으로도 항상 동작한다. + +로고를 쓸 때는 사용할 파일을 발표물 워크스페이스(예: `docs/workspace/`)로 **복사**한 뒤 HTML에서 상대경로로 참조한다. 테마별 변형은 brand.md의 매핑 표를 따른다(Light → NAVY 로고, Dark → WHITE 로고). + +## Anti-Patterns (피할 것) + +- 보라 그라데이션 클리셰(`#6366f1`), 흰 배경에 기본 보라/핑크 → **WIGTN 퍼플 `#9B51E0`만** 사용 +- Inter/Roboto/Arial을 display 폰트로 사용 (브랜드 톤 깨짐) +- 모든 요소 가운데 정렬, 동일 카드 그리드 반복 +- `min-height` 사용(슬라이드 넘침 허용) → 반드시 `height` +- 점 시그니처 누락, 테마 혼용, "비슷한 색" 대체 + +## 참조 + +- **[references/brand.md](references/brand.md)** — WIGTN 브랜드 시스템: Light/Dark 팔레트, 로고 변형·배치, 퍼플 점 규칙, 타이포, CSS 워드마크 폴백 +- **[references/design-guide.md](references/design-guide.md)** — 슬라이드 타입별 레이아웃 원칙(표지/목차/섹션/본문/마무리), viewport 규칙, 애니메이션, anti-pattern +- **`design-system-reference` 스킬** — 레이아웃 밀도·타이포 위계 아이디어 재활용(Swiss Minimal, Editorial, Minimal Corporate가 WIGTN 톤에 가장 근접). 단, 색·점·로고는 **항상 WIGTN 토큰으로 덮어쓴다**. +- **`handdrawn-diagram` 스킬** — 다이어그램이 필요한 슬라이드 + +## 체크리스트 + +- [ ] Phase 0: AskUserQuestion으로 테마(Light/Dark) + 콘텐츠 1회 수집 +- [ ] Phase 1: 슬라이드 맵 + 밀도 제한 +- [ ] Phase 2: 다이어그램 필요 슬라이드 식별 (handdrawn-diagram) +- [ ] Phase 3: brand.md + design-guide.md Read → 단일 HTML 생성 (viewport, 퍼플 점, 로고) +- [ ] Phase 4: 스크린샷 검증 → 전달 diff --git a/plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/README.md b/plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/README.md new file mode 100644 index 0000000..9990372 --- /dev/null +++ b/plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/README.md @@ -0,0 +1,23 @@ +# WIGTN Logo Assets (team-private) + +이 디렉토리의 PNG 로고는 **WIGTN 팀 전용 브랜드 에셋**이라 공개 플러그인에 커밋하지 않는다. +`*.png`는 `.gitignore`로 제외되어 있고, 이 README만 커밋된다. + +## 들어가는 파일 (팀 로컬) + +| 파일 | 형태 | 사용처 | +|------|------|--------| +| `WIGTN_LOGO_NAVY.png` | 풀 워드마크, 잉크 | Light 배경 | +| `WIGTN_LOGO_WIHTE.png` | 풀 워드마크, 화이트 | Dark 배경 | +| `wigtn_mark_dark.png` | 정사각 마크(어두움) | Light 배경 코너 마크 | +| `wigtn_mark_light.png` | 정사각 마크(밝음) | Dark 배경 코너 마크 | +| `wigtn_mark_purple.png` | 정사각 마크(퍼플) | 배지/아이콘, 공용 | + +## 로고를 받는 방법 + +- 이 레포에서 작업 중이면 `docs/images/`에 같은 파일이 있다. 그대로 복사: + ```bash + cp docs/images/*.png plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/ + ``` +- 다른 프로젝트에 플러그인을 설치해 쓰는 팀원은 위 파일을 이 폴더에 직접 넣는다. +- 로고가 전혀 없어도 `references/brand.md`의 **CSS/SVG 워드마크 폴백**으로 발표물은 정상 생성된다. diff --git a/plugins/wigtn-plugins/skills/wigtn-ppt/references/brand.md b/plugins/wigtn-plugins/skills/wigtn-ppt/references/brand.md new file mode 100644 index 0000000..8aac379 --- /dev/null +++ b/plugins/wigtn-plugins/skills/wigtn-ppt/references/brand.md @@ -0,0 +1,133 @@ +# WIGTN Brand System (PPT) + +WIGTN 발표자료의 브랜드 토대. **정확한 HEX만 사용한다. "비슷한 색" 금지.** + +## 1. 브랜드 정체성 + +- **워드마크**: `wigtn.` — 소문자, 기하학적 그로테스크 산세리프, 헤비 웨이트 +- **시그니처**: 워드마크 끝의 **퍼플 마침표(`.`)**. 이것이 WIGTN의 단 하나뿐인 시그니처 요소다. +- **톤**: 미니멀, 자신감, 테크. 잉크 네이비 위에 퍼플 한 점. + +## 2. 컬러 팔레트 (실측 HEX) + +| 이름 | HEX | RGB | 비고 | +|------|-----|-----|------| +| Ink | `#1E1E28` | 30, 30, 40 | 워드마크 네이비. Dark 배경 / Light 본문 텍스트 | +| Ink Deep | `#15151E` | 21, 21, 30 | Dark 테마 최하단 배경 | +| Purple | `#9B51E0` | 155, 81, 224 | **시그니처 점** (Pantone 265 계열, 로고 실측) | +| Purple Bright | `#A85FEA` | 168, 95, 234 | Dark 배경에서 점이 더 튀어야 할 때 | +| Purple Deep | `#6B2EAA` | 107, 46, 170 | 점 그림자 / 깊이 / 그라데이션 끝 | +| White | `#FFFFFF` | 255, 255, 255 | Light 배경 / Dark 텍스트 | +| Off-White | `#FAFAFA` | 250, 250, 250 | Light 보조 배경(surface) | + +> 그라데이션이 꼭 필요하면 **퍼플 단색 계열만** (`#9B51E0 → #6B2EAA`). 무지개·보라/핑크 클리셰 금지. + +## 3. 두 가지 테마 (`:root` 토큰) + +발표 환경에 따라 하나를 고른다. 한 발표물 안에서 섞지 않는다. + +### Light 테마 (`wigtn-light`) — 밝은 발표장·문서형 + +```css +:root { + --bg: #FFFFFF; + --surface: #FAFAFA; + --surface-2: #F4F2F8; /* 퍼플 기 살짝 도는 중립 */ + --text-primary: #1E1E28; + --text-secondary:#5A5A6E; + --accent: #9B51E0; /* 시그니처 점·강조 */ + --accent-deep: #6B2EAA; + --line: #E6E3EE; + --logo: NAVY; /* WIGTN_LOGO_NAVY.png / wigtn_mark_dark.png */ +} +``` + +### Dark 테마 (`wigtn-dark`) — 무대·키노트형 + +```css +:root { + --bg: #15151E; + --surface: #1E1E28; + --surface-2: #26263340; + --text-primary: #F5F4FA; + --text-secondary:#A8A6B8; + --accent: #A85FEA; /* Dark에선 Bright 퍼플로 점을 띄움 */ + --accent-deep: #6B2EAA; + --line: #2C2C3A; + --logo: WHITE; /* WIGTN_LOGO_WIHTE.png / wigtn_mark_light.png */ +} +``` + +## 4. 시그니처 퍼플 점 규칙 + +**모든 슬라이드**에 퍼플 점 모티프를 하나 이상, 일관된 방식으로 반복한다. 슬라이드마다 다른 자리에 흩뿌리지 말고 — 한 발표물 안에서는 한 가지 규칙을 정해 끝까지 유지한다. + +가능한 적용처(한 가지를 골라 통일): +- 페이지 번호 옆 점: `12 ●` +- 섹션 번호의 마침표: `01.` 의 점만 퍼플 +- 우하단 코너 점 (고정 위치, 지름 ~10px) +- 제목 끝 강조점: `Our Vision●` +- 진행 도트/네비게이션 도트를 퍼플로 + +점 스펙: 정원, `background: var(--accent)`, 살짝의 `box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent)` 정도의 은은한 헤일로 허용(과한 글로우 금지). + +```css +.wigtn-dot { /* 재사용 점 */ + display:inline-block; width:.5em; height:.5em; border-radius:50%; + background:var(--accent); vertical-align:baseline; +} +``` + +## 5. 로고 변형 & 사용 + +5종이 `assets/logo/`(또는 `docs/images/`)에 있다. 테마/맥락에 맞춰 고른다. + +| 파일 | 형태 | 사용처 | +|------|------|--------| +| `WIGTN_LOGO_NAVY.png` | 풀 워드마크, 잉크 | **Light 배경**의 표지·헤더 | +| `WIGTN_LOGO_WIHTE.png` | 풀 워드마크, 화이트 | **Dark 배경**의 표지·헤더 | +| `wigtn_mark_dark.png` | 정사각 마크(어두움) | Light 배경의 작은 코너 마크 | +| `wigtn_mark_light.png` | 정사각 마크(밝음) | Dark 배경의 작은 코너 마크 | +| `wigtn_mark_purple.png` | 정사각 마크(퍼플 배경, `w.`) | 표지 배지·앱 아이콘 톤. Light/Dark 공용 | + +**배치 규칙** +- 표지: 풀 워드마크를 상단 좌측 또는 하단에. 충분한 여백(clear space ≥ 로고 높이의 0.5배). +- 본문/마무리: 작은 마크를 우하단 코너에 고정(섹션·본문 슬라이드 공통). 표지·Thank you에는 코너 마크 대신 풀 워드마크. +- 로고를 늘리거나(비율 왜곡), 회전·그림자·색 변경하지 않는다. 퍼플 점은 로고 자체에 이미 포함되어 있으므로 로고 옆에 점을 또 찍지 않는다. + +**삽입 방법**: 사용할 파일을 발표물 워크스페이스(예: `docs/workspace/`)로 복사한 뒤 HTML에서 상대경로(`src="workspace/WIGTN_LOGO_NAVY.png"`)로 참조한다. 스킬 템플릿 절대경로를 직접 쓰지 않는다. + +## 6. CSS / SVG 워드마크 폴백 (항상 동작) + +PNG가 없어도 워드마크는 단순해서 직접 렌더할 수 있다. 폴백만으로도 브랜드가 성립한다. + +```html + +wigtn. +``` +```css +.wigtn-wordmark{ + font-family:"Space Grotesk","Pretendard",sans-serif; + font-weight:700; letter-spacing:-.02em; + color:var(--text-primary); font-size:clamp(1.4rem,2.4vw,2.2rem); +} +.wigtn-dot-char{ color:var(--accent); } /* 마침표만 퍼플 */ +``` + +SVG가 필요하면 동일 원칙: 텍스트 `wigtn` + 퍼플 원(점). 점 지름은 글자 높이의 약 22%, 베이스라인에 정렬. + +## 7. 타이포그래피 + +| 역할 | 권장 폰트 | 비고 | +|------|-----------|------| +| Display / 제목 | Space Grotesk, Sora, Clash Grotesk | 기하학 그로테스크, 헤비. 워드마크 톤과 일치 | +| 본문 (한국어 포함) | Pretendard, Noto Sans KR | 한글·영문·숫자 한 서체 톤으로 통일 | +| 코드 | JetBrains Mono, IBM Plex Mono | 필요 시 | + +- 한국어가 포함되면 **Pretendard**를 기본으로. Google Fonts/CDN `` 1줄로 로드. +- 위계: 제목 SemiBold/Bold, 본문 Regular/Medium, 캡션 Light. 한 슬라이드에 3단계 이내. + +## 8. Do / Don't + +**Do** — 정확한 HEX, 퍼플 점 일관 반복, 넉넉한 여백, 테마 1택, 잉크+퍼플 절제. +**Don't** — 비슷한 보라색 대체, 점 누락/남발, 로고 왜곡, 테마 혼용, 보라/핑크 그라데이션 클리셰, 가운데 정렬 떡칠. diff --git a/plugins/wigtn-plugins/skills/wigtn-ppt/references/design-guide.md b/plugins/wigtn-plugins/skills/wigtn-ppt/references/design-guide.md new file mode 100644 index 0000000..aca3325 --- /dev/null +++ b/plugins/wigtn-plugins/skills/wigtn-ppt/references/design-guide.md @@ -0,0 +1,101 @@ +# WIGTN PPT Design Guide + +슬라이드를 **템플릿 없이** 일관되게 만들기 위한 레이아웃 원칙. 색·로고·점은 [brand.md](brand.md)를 따른다. 여기서는 구조·viewport·슬라이드 타입·애니메이션을 다룬다. + +## 1. Viewport 규칙 (필수) + +```css +.slide{ + height:100vh; height:100dvh; /* min-height 금지 */ + overflow:hidden; /* 슬라이드 내부 스크롤 절대 금지 */ + position:relative; + display:flex; flex-direction:column; + padding:clamp(2.5rem,6vh,5rem) clamp(2rem,6vw,6rem); + background:var(--bg); color:var(--text-primary); +} +``` + +- 모든 폰트·간격은 `clamp(min, preferred, max)`. 고정 px/rem 단독 금지. +- 높이 기반 미디어쿼리로 단계 축소: + ```css + @media (max-height:700px){ :root{ --scale:.9 } } + @media (max-height:600px){ :root{ --scale:.8 } } + ``` +- 콘텐츠가 넘치면 슬라이드를 **분할**한다(폰트를 무리하게 줄이지 않는다). + +## 2. 필수 UI 크롬 + +- **프로그레스 바**: 상단 또는 하단 1~2px, `var(--accent)` 채움. +- **네비 도트**: 우측 또는 하단, 현재 슬라이드는 퍼플 점. +- **페이지 번호**: 우하단, `02 ●` 형태로 퍼플 점 동반(시그니처). +- **네비게이션**: 키보드(←/→/Space), 터치/스와이프, 마우스 휠. `prefers-reduced-motion` 존중. + +## 3. 슬라이드 타입 + +각 타입은 brand.md의 테마 토큰을 그대로 쓴다. **모든 타입에 퍼플 점 시그니처 1개 이상.** + +### 3.1 표지 (Cover) +- 풀 워드마크 로고(Light→NAVY, Dark→WHITE) 상단 좌측 또는 하단. +- 제목 `clamp(2.4rem,5vw,4.5rem)` SemiBold + 부제 Medium. +- 발표자·날짜·기업/제품명 메타는 하단 또는 우상단. +- 시각 요소: 좌측 세로 퍼플 라인 또는 대형 잉크/퍼플 컬러 블록 1개. (텍스트만 금지) +- 점 시그니처: 제목 끝 강조점 또는 우하단 코너 점. + +### 3.2 목차 (Contents / Agenda) +- "Contents" 제목 + 번호 매긴 리스트. 번호의 마침표만 퍼플(`01.`). +- 좌/우 2분할 또는 좌측 제목 + 우측 리스트. + +### 3.3 섹션 구분 (Section Divider) +- 각 챕터 시작. 대형 번호 `01` + 섹션 제목. +- Dark 테마면 잉크 배경에 화이트 텍스트로 대비를 주는 것이 효과적(Light 발표물 안에서도 섹션만 잉크 배경으로 전환 가능 — 단 텍스트 색을 화이트로). +- 번호 옆/끝에 퍼플 점. + +### 3.4 본문 (Body) — 레이아웃 변형 +필요한 것을 골라 쓴다. 한 슬라이드 = 한 메시지. + +| 레이아웃 | 용도 | 핵심 | +|---------|------|------| +| Title + Bullets | 일반 설명 | 슬라이드당 4–6 불릿, 불릿 마커를 퍼플 점으로 | +| Two-Column | 비교/대조 | 좌/우 분할, 가운데 1px `--line` 또는 퍼플 구분 | +| Cards (2–4열) | 항목 나열 | 동일 카드, 헤더 라벨에 퍼플 악센트 | +| Big Number / KPI | 지표 강조 | 초대형 숫자 + 라벨, 숫자 끝 퍼플 점 | +| Quote | 인용/메시지 | 대형 인용문, 좌측 퍼플 세로바 | +| Image + Text | 이미지 설명 | 좌 41% 텍스트 / 우 이미지(또는 반대) | +| Diagram | 흐름/구조 | handdrawn-diagram 또는 CSS/SVG 도형 | +| Timeline | 단계/로드맵 | 가로/세로 라인 + 노드(노드를 퍼플 점으로) | + +공통: Slide Title 좌상단(`clamp(1.4rem,2.6vw,2rem)` Bold), 우하단 작은 마크 로고 + 페이지 번호. + +### 3.5 마무리 (Thank you) +- 표지와 같은 톤. 대형 "Thank you" + 한 줄 클로징. +- 풀 워드마크 로고 + 연락/CTA. 퍼플 점 시그니처 유지. + +## 4. 애니메이션 매핑 + +WIGTN 기본 톤은 **프로페셔널/미니멀**: 절제되고 빠르게. + +| 느낌 | 스타일 | 속도 | +|------|--------|------| +| 기본(프로페셔널) | 미세 페이드 + 8px 슬라이드업, 스태거 | 0.2–0.4s | +| 키노트/임팩트(Dark) | 느린 페이드 + 대형 스케일(0.96→1) | 0.5–0.8s | +| 강조 포인트 | 퍼플 점 팝(scale 0→1, 약한 스프링) | 0.3s | + +- 진입 애니메이션은 슬라이드당 1~2종으로 제한. 동기 없는 그림자/글래스/패럴랙스 금지. +- `@media (prefers-reduced-motion:reduce)`에서 모든 트랜지션 제거. + +## 5. Anti-Patterns + +- `min-height`로 슬라이드 넘침 허용 → 반드시 `height`. +- 보라/핑크 그라데이션, `#6366f1` 등 일반 AI 보라 → **WIGTN `#9B51E0`만**. +- Inter/Roboto/Arial display 폰트, 모든 요소 가운데 정렬, 동일 카드 그리드 반복. +- 텍스트만의 슬라이드, 점 시그니처 누락, 테마 혼용. +- 로고 옆에 점 중복(로고에 이미 점 포함), 로고 비율 왜곡. + +## 6. design-system-reference 재활용 + +같은 플러그인의 `design-system-reference/styles/`에서 **레이아웃 밀도·타이포 위계·여백 감각**만 빌린다. WIGTN 톤에 가장 근접한 셋: +- `swiss-minimal` — 그리드·여백·타이포 위계 +- `editorial` — 강한 타이포·인용·리듬 +- `minimal-corporate` — 보고/경영진 톤 + +> 빌리는 것은 **구조 감각**뿐. 색·폰트 강조·로고·점은 **항상 WIGTN 토큰으로 덮어쓴다.** 다른 스타일의 시그니처(네온, 브루탈리즘 등)를 섞지 않는다. From aa7ffcad1c21ea512d3427a78e4b4b3b123838fd Mon Sep 17 00:00:00 2001 From: Hyeongseob91 Date: Sat, 27 Jun 2026 23:47:24 +0900 Subject: [PATCH 2/3] docs(skill): fix wigtn-ppt logo-path claims and scope triggers (PR review) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Address /review-pr findings on #24: - M1: stop claiming docs/images/ and assets/logo/ are in-repo paths. Both are gitignored/team-private, so a public clone won't have them; reword SKILL.md, brand.md, and assets/logo/README.md to say "team-local, not in the public repo" and lean on the CSS/SVG wordmark fallback. - m2: scope trigger keywords to WIGTN-branded decks only (drop bare generic 'PPT 만들어줘' etc.) to avoid skill-selection collision with bc-ppt/bc-docs. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01VDvYizKVU4qf57HJjzN6iY --- plugins/wigtn-plugins/skills/wigtn-ppt/SKILL.md | 14 +++++++------- .../skills/wigtn-ppt/assets/logo/README.md | 4 ++-- .../skills/wigtn-ppt/references/brand.md | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/plugins/wigtn-plugins/skills/wigtn-ppt/SKILL.md b/plugins/wigtn-plugins/skills/wigtn-ppt/SKILL.md index cee9b8f..024b45e 100644 --- a/plugins/wigtn-plugins/skills/wigtn-ppt/SKILL.md +++ b/plugins/wigtn-plugins/skills/wigtn-ppt/SKILL.md @@ -4,10 +4,10 @@ description: >- WIGTN 브랜드 HTML 프레젠테이션 생성. 템플릿 없이 브랜드 원칙(잉크 네이비 + 시그니처 퍼플 점)을 기반으로 단일 self-contained HTML 발표자료를 만든다. Light / Dark 두 테마를 선택할 수 있고, WIGTN 로고와 퍼플 점 시그니처를 모든 - 슬라이드에 일관되게 적용한다. Triggers on: 'wigtn ppt', 'wigtn 발표자료', - '위그튼 ppt', 'PPT 만들어줘', 'HTML 프레젠테이션', '발표자료 만들어줘', - '슬라이드 만들어줘', '프레젠테이션 만들어줘', 'html presentation', - 'animated slides', '브랜드 발표자료', '회사 PPT'. + 슬라이드에 일관되게 적용한다. WIGTN 브랜드 발표자료에 한정해 동작한다(일반 PPT는 + 다른 PPT 스킬을 쓴다). Triggers on: 'wigtn ppt', 'wigtn 발표자료', '위그튼 ppt', + 'wigtn 슬라이드', 'wigtn presentation', '브랜드 발표자료', '브랜드 PPT', + '회사 PPT', '회사 발표자료'. allowed-tools: Read, Write, Edit, Bash, Glob --- @@ -87,9 +87,9 @@ WIGTN 브랜드 정체성을 담은 **단일 HTML 프레젠테이션**을 만드 WIGTN 로고는 **팀 전용 에셋**이라 공개 플러그인에 커밋하지 않는다(.gitignore). 다음 우선순위로 찾는다: -1. `${CLAUDE_PLUGIN_ROOT}/skills/wigtn-ppt/assets/logo/` — 번들된 로고(팀 로컬) -2. `/docs/images/` — 이 레포의 브랜드 에셋 위치 -3. **CSS/SVG 워드마크 폴백** — PNG가 없으면 `wigtn` + 퍼플 점을 폰트/SVG로 직접 렌더(brand.md에 스니펫). 폴백만으로도 항상 동작한다. +1. `${CLAUDE_PLUGIN_ROOT}/skills/wigtn-ppt/assets/logo/` — 번들된 로고(팀 로컬, `*.png`는 gitignore라 공개 레포 클론엔 없음) +2. `/docs/images/` — 팀 로컬 브랜드 에셋 위치(역시 gitignore, 공개 레포엔 포함되지 않음) +3. **CSS/SVG 워드마크 폴백** — 위 두 경로에 PNG가 없으면(공개 클론·신규 환경의 기본 상태) `wigtn` + 퍼플 점을 폰트/SVG로 직접 렌더(brand.md에 스니펫). 폴백만으로도 항상 동작한다. 로고를 쓸 때는 사용할 파일을 발표물 워크스페이스(예: `docs/workspace/`)로 **복사**한 뒤 HTML에서 상대경로로 참조한다. 테마별 변형은 brand.md의 매핑 표를 따른다(Light → NAVY 로고, Dark → WHITE 로고). diff --git a/plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/README.md b/plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/README.md index 9990372..4d860ed 100644 --- a/plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/README.md +++ b/plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/README.md @@ -15,9 +15,9 @@ ## 로고를 받는 방법 -- 이 레포에서 작업 중이면 `docs/images/`에 같은 파일이 있다. 그대로 복사: +- 팀 로컬에 `docs/images/`를 받아 뒀다면(이 경로도 gitignore라 공개 레포엔 없음) 거기서 복사: ```bash cp docs/images/*.png plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/ ``` -- 다른 프로젝트에 플러그인을 설치해 쓰는 팀원은 위 파일을 이 폴더에 직접 넣는다. +- 공개 레포를 클론했거나 다른 프로젝트에 플러그인을 설치해 쓰는 팀원은 위 파일을 팀 채널에서 받아 이 폴더에 직접 넣는다. - 로고가 전혀 없어도 `references/brand.md`의 **CSS/SVG 워드마크 폴백**으로 발표물은 정상 생성된다. diff --git a/plugins/wigtn-plugins/skills/wigtn-ppt/references/brand.md b/plugins/wigtn-plugins/skills/wigtn-ppt/references/brand.md index 8aac379..668fd27 100644 --- a/plugins/wigtn-plugins/skills/wigtn-ppt/references/brand.md +++ b/plugins/wigtn-plugins/skills/wigtn-ppt/references/brand.md @@ -80,7 +80,7 @@ WIGTN 발표자료의 브랜드 토대. **정확한 HEX만 사용한다. "비슷 ## 5. 로고 변형 & 사용 -5종이 `assets/logo/`(또는 `docs/images/`)에 있다. 테마/맥락에 맞춰 고른다. +5종이 팀 로컬의 `assets/logo/`(또는 `docs/images/`)에 있다 — 둘 다 gitignore라 공개 레포 클론엔 포함되지 않는다(팀원이 별도로 받아 둔다). 테마/맥락에 맞춰 고르고, 없으면 6절의 워드마크 폴백을 쓴다. | 파일 | 형태 | 사용처 | |------|------|--------| From cbf6218b5725340354ae8168ba99762c516c3b51 Mon Sep 17 00:00:00 2001 From: Hyeongseob91 Date: Sat, 27 Jun 2026 23:50:18 +0900 Subject: [PATCH 3/3] fix(skill): correct WIGTN_LOGO_WHITE filename typo (PR review m1) Rename brand asset WIGTN_LOGO_WIHTE.png -> WIGTN_LOGO_WHITE.png so the filename matches the "WHITE" label used elsewhere, and update the 3 references in brand.md and assets/logo/README.md. Resolves the last Correctness gap from /review-pr on #24 (filename/label mismatch). Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01VDvYizKVU4qf57HJjzN6iY --- plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/README.md | 2 +- plugins/wigtn-plugins/skills/wigtn-ppt/references/brand.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/README.md b/plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/README.md index 4d860ed..fb80447 100644 --- a/plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/README.md +++ b/plugins/wigtn-plugins/skills/wigtn-ppt/assets/logo/README.md @@ -8,7 +8,7 @@ | 파일 | 형태 | 사용처 | |------|------|--------| | `WIGTN_LOGO_NAVY.png` | 풀 워드마크, 잉크 | Light 배경 | -| `WIGTN_LOGO_WIHTE.png` | 풀 워드마크, 화이트 | Dark 배경 | +| `WIGTN_LOGO_WHITE.png` | 풀 워드마크, 화이트 | Dark 배경 | | `wigtn_mark_dark.png` | 정사각 마크(어두움) | Light 배경 코너 마크 | | `wigtn_mark_light.png` | 정사각 마크(밝음) | Dark 배경 코너 마크 | | `wigtn_mark_purple.png` | 정사각 마크(퍼플) | 배지/아이콘, 공용 | diff --git a/plugins/wigtn-plugins/skills/wigtn-ppt/references/brand.md b/plugins/wigtn-plugins/skills/wigtn-ppt/references/brand.md index 668fd27..0828c78 100644 --- a/plugins/wigtn-plugins/skills/wigtn-ppt/references/brand.md +++ b/plugins/wigtn-plugins/skills/wigtn-ppt/references/brand.md @@ -54,7 +54,7 @@ WIGTN 발표자료의 브랜드 토대. **정확한 HEX만 사용한다. "비슷 --accent: #A85FEA; /* Dark에선 Bright 퍼플로 점을 띄움 */ --accent-deep: #6B2EAA; --line: #2C2C3A; - --logo: WHITE; /* WIGTN_LOGO_WIHTE.png / wigtn_mark_light.png */ + --logo: WHITE; /* WIGTN_LOGO_WHITE.png / wigtn_mark_light.png */ } ``` @@ -85,7 +85,7 @@ WIGTN 발표자료의 브랜드 토대. **정확한 HEX만 사용한다. "비슷 | 파일 | 형태 | 사용처 | |------|------|--------| | `WIGTN_LOGO_NAVY.png` | 풀 워드마크, 잉크 | **Light 배경**의 표지·헤더 | -| `WIGTN_LOGO_WIHTE.png` | 풀 워드마크, 화이트 | **Dark 배경**의 표지·헤더 | +| `WIGTN_LOGO_WHITE.png` | 풀 워드마크, 화이트 | **Dark 배경**의 표지·헤더 | | `wigtn_mark_dark.png` | 정사각 마크(어두움) | Light 배경의 작은 코너 마크 | | `wigtn_mark_light.png` | 정사각 마크(밝음) | Dark 배경의 작은 코너 마크 | | `wigtn_mark_purple.png` | 정사각 마크(퍼플 배경, `w.`) | 표지 배지·앱 아이콘 톤. Light/Dark 공용 |