메뉴
디자인 팩의 prompt.md로 실제 PPT 슬라이드/웹 페이지 샘플을 생성하고, 동일 콘텐츠의 baseline 출력도 함께 만들어 preview.png를 렌더하는 방법론 스킬. sample-renderer 에이전트가 사용한다. 공정 대조용 더미 콘텐츠(fixture), 트랙별 렌더 경로, 폰트 폴백 처리를 규정한다.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Claude로 PPT·발표자료나 웹사이트를 만들 때, AI 기본 미감(보라 그라디언트·둥근 카드·천편일률)으로 수렴하지 않도록 80가지 검증된 디자인 스타일 팩 중 하나를 골라 그 명세대로 생성하게 하는 스킬. 사용자가 "PPT/슬라이드/덱/발표자료" 또는 "웹사이트/랜딩페이지/UI"를 만들어 달라고 하면서 "디자인 팩", "특정 스타일로", "다양하게", "뻔하지 않게", "고급스럽게", "○○ 느낌으로", "design-pick" 을 언급하거나, 팩 슬러그(예: web-velvet-dark-boutique, ppt-mckinsey-ghost-deck)를 직접 지정하면 반드시 이 스킬을 사용한다. 무슨 느낌인지 말하면 어울리는 팩 2~3개를 추천하고, 사용자가 고른 팩의 정밀 디자인 명세를 적용해 결과물을 생성한다. 후속으로 "다른 팩으로", "팩 바꿔", "추천 다시"도 이 스킬. 단순 텍스트 작성·요약은 이 스킬을 쓰지 않는다 — 디자인 결과물(슬라이드/웹페이지) 생성에만 쓴다.
디자인 팩의 산출 형식(prompt.md + tokens.json + preview.png + meta.yaml)과 카탈로그 인덱스(catalog.json)를 정의하는 단일 진실 원천(SSOT) 스킬. 팩을 집필·검수·발행하는 모든 에이전트(pack-architect, ppt/web curator, catalog-publisher)가 따른다. 팩 파일 구조·필드·토큰 키·슬러그 규칙·스키마 변경 절차를 규정한다.
PPT/프레젠테이션 고유의 시각 관용을 디자인 팩으로 증류하는 지식 스킬. ppt-pack-curator가 사용한다. 16:9 슬라이드 캔버스, 슬라이드 타입 위계, 그리드·여백, 차트·다이어그램 스타일링, 발표 가독성을 검증 가능한 prompt.md 지시로 옮기는 방법을 규정한다.
검증 통과한 디자인 팩을 GitHub 공개 레포로 구조화하고, 팩을 탐색·필터·복사할 수 있는 Next.js 카탈로그 웹사이트로 빌드해 Vercel에 배포하는 방법론 스킬. catalog-publisher 에이전트가 사용한다. 레포 레이아웃, README/CONTRIBUTING/LICENSE 구성, 정적 사이트 사양, 배포 절차, 자체 QA 체크리스트를 규정한다.
Claude가 산출하는 PPT·웹사이트 디자인의 천편일률 문제를 해결하는 '디자인 팩 카탈로그' 제작 오케스트레이터. 공개 디자인 시스템·비주얼 스타일을 수집·증류해, Claude Code에 복붙하면 그 스타일이 재현되는 디자인 팩 (prompt.md + tokens.json + preview.png + meta.yaml)을 만들고, baseline 대조로 다양성을 검증한 뒤 GitHub 공개 레포 + 카탈로그 웹사이트로 발행한다. 7인 에이전트 팀(소싱·스키마·PPT집필·웹집필·렌더·다양성QA·발행)을 파이프라인으로 조율한다. 트리거 — "디자인 다양성", "디자인 팩", "디자인 팩 카탈로그", "디자인 시스템 카탈로그", "PPT 디자인 다양화", "웹 디자인 팩", "프롬프트형 디자인 시스템", "Claude 디자인 천편일률", "디자인 팩 만들어줘". 후속 작업 — "팩 추가", "PPT 팩 N개 더", "웹 팩 추가", "특정 팩만 다시", "다양성 검증 다시", "팩 재집필", "스키마 변경", "카탈로그 사이트 재배포", "레포 갱신", "재실행"도 모두 이 스킬로 처리한다. 단순 PPT 1건 제작은 korean-premium-deck, 단순 웹사이트 1건은 frontend-design을 사용한다.
공개 디자인 시스템·UI 키트·비주얼 스타일 운동을 발굴해 PPT/웹 트랙별 스타일 후보를 만드는 리서치 스킬. design-scout 에이전트가 사용한다. 1차 출처 확인, 스타일 축 매트릭스 기반 다양성 확보, 라이선스 위생, PPT 20 + 웹 20 시드 후보 목록을 제공한다.
| name | sample-rendering |
| description | 디자인 팩의 prompt.md로 실제 PPT 슬라이드/웹 페이지 샘플을 생성하고, 동일 콘텐츠의 baseline 출력도 함께 만들어 preview.png를 렌더하는 방법론 스킬. sample-renderer 에이전트가 사용한다. 공정 대조용 더미 콘텐츠(fixture), 트랙별 렌더 경로, 폰트 폴백 처리를 규정한다. |
sample-renderer가 팩 적용 샘플과 baseline을 공정하게 렌더할 때 따르는 방법.
다양성을 측정하려면 콘텐츠는 같고 디자인만 달라야 한다. 팩 적용본과 baseline은 동일한 더미 콘텐츠(fixture)를 쓴다. prompt.md는 손대지 않고 있는 그대로 입력한다 — prompt.md만으로 스타일이 안 나오면 그것이 팩의 결함이고, diversity-qa가 잡을 일이다.
트랙별로 고정된 가짜 콘텐츠를 쓴다. 매 팩·baseline에 동일 적용.
PPT fixture — 가상 회사 "Northwind" 분기 보고:
웹 fixture — 가상 제품 "Northwind" 랜딩:
웹 트랙: prompt.md 지시대로 단일 HTML 파일(인라인 CSS 또는 Tailwind CDN) 작성 → _workspace/03_render_{slug}.html → Playwright 등 헤드리스 브라우저로 데스크탑 폭(1280px)에서 풀페이지 스크린샷 → design-packs/{slug}/preview.png.
PPT 트랙: 16:9 캔버스의 슬라이드 3종(표지·본문·차트)을 한 장에 세로로 배치한 HTML 목업으로 렌더하는 방식을 기본으로 한다(가장 안정적). HTML 한 장 → 스크린샷 → preview.png. 실제 .pptx가 필요하면 python-pptx로 생성 후 LibreOffice(soffice --headless --convert-to png)로 변환하되, 변환 도구가 없으면 HTML 목업으로 폴백한다.
baseline: 같은 fixture를 "PPT를 만들어줘" / "랜딩페이지를 만들어줘" 수준의 팩 없는 기본 요청으로 렌더 → _workspace/03_render_baseline-{track}.png. 트랙당 1회만 만들고 모든 팩 검증에 재사용한다.
지정 폰트가 시스템·웹폰트로 확보되지 않으면 같은 분류(sans/serif/mono/display)의 가용 폰트로 폴백하고, 렌더 메모에 폴백 사실을 남긴다. 한글 콘텐츠는 Pretendard/Noto Sans KR 계열을 확보한다 — 한글이 두부(口)로 깨지면 렌더 실패로 처리한다.
design-packs/{slug}/preview.png — 팩 적용 샘플 (사이트 카탈로그에도 쓰임)._workspace/03_render_baseline-{track}.png — 트랙 baseline._workspace/03_render_{slug}.html(또는 .pptx) — 렌더 소스, 감사·재현용 보존.렌더 실패(폰트·변환 도구 부재 등)는 1회 재시도 후 render_failed로 표시하고 사유와 함께 diversity-qa·pack-architect에 보고한다. 자동으로 발행에서 제외하지 않는다 — 사람이 판단한다.