ckm:slides

개요

ckm:slides란?

ckm:slides는 완성도 높은 전략적 HTML 슬라이드 데크를 설계하는 AI 스킬입니다. 단순히 글머리표만 나열하는 대신, 다음 요소들을 활용해 브라우저에서 바로 사용할 수 있는 일관된 프레젠테이션 구조를 만들어 내도록 에이전트를 안내합니다.

• 데이터 시각화를 위한 Chart.js
• 일관된 비주얼 테마를 위한 디자인 토큰
• 다양한 디바이스에 대응하는 반응형 레이아웃
• 설득력 있는 메시지를 위한 카피라이팅 공식
• 자주 쓰이는 데크 유형별 검증된 슬라이드 전략

이 스킬은 마케팅 프레젠테이션, 피치 데크, 임원·이해관계자 보고서, 제품 데모 등 스토리와 구조가 모두 중요한 자료를 만드는 데 최적화되어 있습니다.

ckm:slides는 어떤 사람에게 적합한가요?

ckm:slides는 다음과 같은 경우에 잘 맞습니다.

• 마케팅, 세일즈, 투자 유치, 리포팅용 슬라이드 데크를 자주 만든다
• 전통적인 PowerPoint 파일보다 HTML/JavaScript 기반 프레젠테이션을 선호한다
• 매번 빈 슬라이드에서 시작하기보다 재사용 가능한 레이아웃 패턴과 템플릿을 쓰고 싶다
• YC seed deck, sales pitch, QBR처럼 명확한 내러티브 구조가 프로세스에 내장되길 원한다

개발자, 프로덕트 마케터, 창업자, 애널리틱스 팀 모두 이 스킬을 활용해 “주제 + 원하는 슬라이드 수”만으로 구조화된 HTML 프레젠테이션 플랜을 얻을 수 있습니다.

어떤 문제를 해결하나요?

ckm:slides는 다음과 같은 문제를 피하는 데 도움을 줍니다.

• 스토리 흐름이 없고 산만한 슬라이드 데크
• 슬라이드마다 들쭉날쭉한 레이아웃과 타이포그래피
• 설득력 없이 평범하게 느껴지는 슬라이드 카피
• 매 프레젠테이션마다 Chart.js 차트를 수동으로 연결해야 하는 번거로움

레이아웃 패턴, 카피라이팅 공식, 즉시 사용할 수 있는 HTML 템플릿을 결합해, 탄탄한 데크를 설계하고 바로 구현 가능한 HTML을 생성하는 데 필요한 기반을 에이전트에 제공합니다.

ckm:slides가 잘 맞지 않는 경우는?

ckm:slides는 다음과 같은 경우에는 적합하지 않을 수 있습니다.

• HTML이 아닌 PowerPoint나 Keynote의 네이티브 파일이 꼭 필요하다
• 프론트엔드를 전혀 다루지 않고, HTML/JS 자산을 호스팅할 수 없다
• 전체 데크가 아니라 단일 슬라이드 한 장만 필요하다

이런 상황이라면 텍스트만 생성하는 단순한 슬라이드 생성기나 .pptx로 직접 내보내는 도구가 더 나은 선택일 수 있습니다.

사용 방법

설치 및 설정

nextlevelbuilder/ui-ux-pro-max-skill 리포지토리에서 slides 스킬을 에이전트 환경에 추가하려면 다음 명령으로 설치합니다.

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slides

설치 후에는 다음 단계를 따라 주세요.

1. .claude/skills/slides 아래의 SKILL.md를 열어 스킬의 상위 동작 방식과 인자 구조를 파악합니다.
2. 스킬이 사용하는 패턴과 템플릿을 확인하려면 references/ 폴더를 검토합니다.
   • references/layout-patterns.md
   • references/html-template.md
   • references/copywriting-formulas.md
   • references/slide-strategies.md
   • references/create.md

스킬 자체를 위해 추가적인 빌드 단계는 필요하지 않습니다. 기존 에이전트 환경의 일부로 바로 동작합니다. 다만 생성된 HTML을 서빙하거나 여는 방법(예: 파일로 저장 후 브라우저에서 열기)은 별도로 준비해야 합니다.

기본 호출 패턴

스킬은 다음 형태의 인자를 기대합니다.

• [topic] [slide-count]

그리고 create 서브커맨드를 지원합니다. 에이전트 프롬프트에서의 일반적인 호출 예시는 다음과 같습니다.

Use the ckm:slides skill to create a "create" deck about "Series A fundraising narrative" with 12 slides.

내부적으로 라우팅은 SKILL.md에 정의된 흐름을 따릅니다.

1. $ARGUMENTS에서 첫 단어(예: create)로 서브커맨드를 파싱합니다.
2. 해당 서브커맨드에 대응하는 reference 파일을 로드합니다. (create의 경우 references/create.md)
3. 나머지 인자(토픽과 슬라이드 수)를 사용해 데크의 구조와 내용을 생성합니다.

새 데크를 만드는 추천 워크플로

1. 목표와 타깃 오디언스 정의

ckm:slides를 호출하기 전에 다음을 명확히 정리합니다.

• 목표 (예: 시드 라운드 투자 유치, 엔터프라이즈 계약 성사, 이사회 업데이트)
• 주요 오디언스 (VC, 잠재 고객, 리더십, 내부 팀, 컨퍼런스 참석자 등)
• 대략적인 슬라이드 수

이 맥락 정보를 인자에 함께 넘겨야 스킬이 알맞은 구조와 패턴을 선택할 수 있습니다.

2. 슬라이드 전략 선택 또는 자동 선택 위임

references/slide-strategies.md에는 다음과 같은 15가지 대표적인 데크 구조가 정리돼 있습니다.

• YC Seed Deck (10–12 슬라이드)
• Sales Pitch (7–10 슬라이드)
• Product Demo (5–8 슬라이드)
• QBR, Board Meeting, Webinar, Workshop 등

사용 방법은 두 가지입니다.

• “YC seed deck 구조를 사용해 달라”처럼 원하는 구조를 명시적으로 요청하거나,
• 목표와 오디언스를 설명하고, 가장 적합한 구조를 에이전트가 추론하도록 맡기는 방식입니다.

각 전략에는 슬라이드별 아웃라인과 감정 흐름(예: curiosity → frustration → hope → confidence → trust → urgency)이 포함되어 있어, 전체 스토리가 자연스럽게 이어지도록 돕습니다.

3. 설득형 카피라이팅 공식을 활용해 문구 생성

references/copywriting-formulas.md에는 다음을 포함해 25개의 카피라이팅 공식이 정리돼 있습니다.

• 문제 슬라이드에 쓰는 PAS (Problem–Agitate–Solution)
• 훅과 CTA에 쓰는 AIDA (Attention–Interest–Desire–Action)
• 기능·제품 슬라이드에 쓰는 FAB (Features–Advantages–Benefits)
• 긴박감·전환을 위한 Cost of Inaction, Before–After–Bridge 등

스킬은 이 공식을 활용해 슬라이드별 헤드라인, 본문 카피, CTA를 구조화합니다. 에이전트에게 다음을 적극적으로 요청해 보세요.

• 슬라이드 유형에 맞는 공식을 매칭하도록
• 제공된 템플릿 문구를 출발점으로 활용하도록
• 브랜드 톤과 오디언스 수준에 맞게 톤·디테일을 조정하도록

4. 레이아웃 패턴과 애니메이션 적용

references/layout-patterns.md에는 다음과 같은 CSS 기반 레이아웃 패턴 25종이 포함돼 있습니다.

• Title Slide
• Problem Statement
• Solution Overview
• Feature Grid
• Metrics Dashboard
• Comparison Table
• Timeline Flow
• Team Grid
• Pricing Cards
• CTA Closing

각 레이아웃에는 다음 정보가 포함됩니다.

• 추천 활용 사례
• 예시 애니메이션 클래스 (animate-fade-up, animate-stagger, animate-scale 등)
• 대표적인 슬라이드 유형에 대한 예시 CSS 구조

데크 생성을 요청할 때는 다음과 같은 지시를 포함하세요.

For each slide, assign a layout class from layout-patterns.md and, where relevant, an animation class.

이렇게 하면 데크 전반의 비주얼 일관성을 유지하면서, CSS 테마 변경도 쉽게 할 수 있습니다.

5. HTML 슬라이드 템플릿 사용

references/html-template.md에는 전체 데크 구조를 위한 완성된 HTML 템플릿이 들어 있으며, 내용은 다음과 같습니다.

• CDN으로 포함된 Chart.js를 포함하는 <head>
• :root CSS 변수를 활용한 토큰 기반 테마 시스템
• 16:9 비율에 맞게 사이즈가 잡힌 .slide-deck 컨테이너와 .slide 요소
• 타이포그래피와 레이아웃을 위한 기본 스타일

일반적인 워크플로는 다음과 같습니다.

1. 제공된 HTML 템플릿에서 시작합니다.
2. 생성된 슬라이드를 적절한 클래스를 가진 <section> 또는 <div> 요소로 삽입합니다.
3. embed-tokens.cjs 등에서 가져온 디자인 토큰을 :root 블록에 붙여 넣습니다.
4. 필요한 Chart.js <canvas> 요소와 이에 대응하는 JavaScript를 추가합니다.

스킬은 다음 두 가지 형태로 결과를 출력할 수 있습니다.

• 전체 HTML 파일의 초안
• 직접 사용하는 쉘 템플릿에 붙여 넣을 수 있는 <body> 내부 슬라이드 구조만

6. Chart.js 데이터 시각화 연결

데이터 중심 데크(지표 대시보드, 트랙션 슬라이드, QBR, 이사회 보고 등)를 위해 ckm:slides는 html-template.md에서처럼 Chart.js와 함께 쓰도록 설계되었습니다.

에이전트를 다음과 같이 안내할 수 있습니다.

• 관련 슬라이드 레이아웃 안에 차트용 <canvas> 요소를 생성하도록
• 보유한 지표를 기반으로 Chart.js config 객체(데이터셋, 레이블, 색상)를 제안하도록
• 페이지 로드 시 차트를 초기화하는 <script> 블록을 포함하도록

실제 데이터 제공과 최종 차트 설정 검증은 사용자의 책임이지만, 스킬이 구조적 스캐폴딩을 제공해 작업 부담을 크게 줄여 줍니다.

7. 내보내기 및 프레젠테이션

데크용 HTML이 준비되면 다음 단계로 마무리합니다.

1. 프로젝트 내에 .html 파일로 저장합니다.
2. 브라우저에서 직접 열거나, 선호하는 웹 서버를 통해 서빙합니다.
3. 키보드 내비게이션 또는 직접 추가한 커스텀 JS로 슬라이드 간 이동을 구현해 사용합니다.

PowerPoint에 익숙한 이해관계자와 공유해야 한다면 브라우저 화면을 공유하거나, 브라우저의 인쇄 → PDF 기능으로 슬라이드를 이미지/PDF로 내보낼 수 있습니다.

ckm:slides 활용도를 높이는 팁

• 가능하다면 슬라이드 수와 구조를 구체적으로 명시하세요.
• 이 데크가 어떤 결정을 이끌어야 하는지(투자, 구매, 얼라인먼트 등)를 에이전트에 알려 주세요.
• 어떤 슬라이드에 어떤 유형의 차트(라인, 바, 파이 등)가 필요할지도 지정해 주세요.
• 전체 콘텐츠를 생성하기 전에, 슬라이드 번호·제목·목표·레이아웃·주요 카피라이팅 공식을 표로 정리해 달라고 요청해 플랜부터 검토하면 좋습니다.

FAQ

ckm:slides는 정확히 무엇을 생성하나요?

ckm:slides는 다음과 같은 결과물을 생성하도록 설계되어 있습니다.

• 슬라이드별 목표와 내러티브 흐름이 포함된 아웃라인
• PAS, AIDA, FAB 같은 공식을 활용한 슬라이드별 카피 초안
• layout-patterns.md에 정의된 패턴 기반 레이아웃 제안
• 반응형 토큰 기반 슬라이드 데크를 위한 HTML/CSS 구조
• 데이터 시각화 슬라이드를 위한 Chart.js 스캐폴딩

구체적인 출력 내용은 에이전트를 어떻게 프롬프트하느냐에 따라 달라지지만, 핵심은 일반 텍스트 문서가 아니라 전략적인 HTML 슬라이드 콘텐츠를 생성한다는 점입니다.

ckm:slides로 PowerPoint(.pptx) 파일을 만들 수 있나요?

아니요. ckm:slides는 HTML 슬라이드 데크에 초점을 맞춘 스킬입니다. HTML, CSS, Chart.js를 사용해 브라우저에서 바로 열 수 있는 프레젠테이션을 만듭니다. .pptx 파일이 필요하다면, 이 스킬 외부에서 별도의 내보내기 또는 변환 단계를 거쳐야 합니다.

우리 브랜드에 맞게 디자인을 커스터마이즈할 수 있나요?

가능합니다. html-template.md는 CSS variables를 활용한 디자인 토큰 방식을 사용합니다. 다음과 같이 커스터마이즈할 수 있습니다.

• 예시 :root 토큰 값을 브랜드 컬러, 타이포그래피, 간격 기준으로 교체
• 커스텀 레이아웃이나 애니메이션을 위한 CSS 클래스를 확장
• 로고, 푸터, 워터마크 스타일 등 자체 컴포넌트를 추가

ckm:slides는 구조화된 출발점을 제공하고, 브랜드 시스템은 사용자가 입히는 방식입니다.

create 서브커맨드는 어떻게 동작하나요?

create 서브커맨드는 references/create.md에 설명된 메인 진입점입니다. create와 함께 인자를 넘기면 스킬은 다음과 같이 동작합니다.

1. <task>$ARGUMENTS</task>를 사용자가 원하는 데크에 대한 설명으로 간주합니다.
2. 레이아웃 패턴, 카피라이팅 공식, 슬라이드 전략, HTML 템플릿 등 지식 베이스를 활용해 그 태스크에 맞는 설득력 있는 데크를 설계합니다.

CLI에서 직접 create를 호출하기보다는, 에이전트에게 ckm:slides 스킬을 create 서브커맨드와 함께 사용하도록 지시하는 방식이 일반적입니다.

ckm:slides가 특히 잘 만드는 데크 유형은 무엇인가요?

slide-strategies.md의 패턴을 기반으로, ckm:slides는 특히 다음과 같은 데크에 강점을 보입니다.

• 펀드레이징 데크 (YC Seed Deck, Series A 등)
• 세일즈 피치 및 제품 데모
• 분기 사업 리뷰(QBR), 이사회 업데이트
• 웨비나, 워크숍, 컨퍼런스 발표
• 케이스 스터디, 경쟁사 분석 프레젠테이션

이 유형의 데크는 모두 명확한 스토리, 설득력 있는 카피, 그리고 차트 중심의 데이터 표현이 중요하며, 이는 ckm:slides의 지식 베이스가 가장 잘 다루도록 튜닝된 영역입니다.

내비게이션과 키보드 컨트롤은 어떻게 처리하나요?

기본 HTML 템플릿은 레이아웃과 비주얼에 초점을 두고 있습니다. 키보드 화살표, 클릭 이동, 진행 표시 등 내비게이션은 reference 스니펫에 완전히 정의되어 있지 않으며, 구현은 사용자에게 맡겨져 있습니다. 예를 들어 다음과 같이 구성할 수 있습니다.

• JavaScript로 ArrowLeft / ArrowRight 키 입력을 감지해 표시 중인 슬라이드를 변경
• URL 해시나 data attribute를 사용해 활성 슬라이드를 추적
• 필요하다면 기존 HTML 슬라이드쇼 프레임워크와 연동

ckm:slides는 콘텐츠와 구조 설계를 돕고, 실제 내비게이션 동작은 사용하는 프론트엔드 셋업에 따라 구현하면 됩니다.

ckm:slides를 사용하려면 JavaScript를 이해해야 하나요?

다음과 같은 작업을 하고 싶다면 기본적인 프론트엔드 지식이 큰 도움이 됩니다.

• HTML 템플릿을 수정하거나 확장하려는 경우
• Chart.js 차트와 인터랙션을 직접 구성해야 하는 경우

다만 스토리 구조 설계, 레이아웃 선택, 카피라이팅 패턴 등 상당 부분은 비기술적 작업입니다. 비개발자라 하더라도, HTML과 차트 마무리 작업을 개발자와 협업해 진행하면 충분히 혜택을 누릴 수 있습니다.

사용 가능한 패턴과 전략은 어디에서 모두 확인할 수 있나요?

스킬 디렉터리(보통 .claude/skills/slides)를 열고 다음 파일들을 확인해 보세요.

• 전체 동작, 인자, 라우팅 개요: SKILL.md
• 레이아웃과 CSS 구조: references/layout-patterns.md
• 기본 HTML 슬라이드 데크 셸: references/html-template.md
• 설득형 카피라이팅 프레임워크: references/copywriting-formulas.md
• 완성된 데크 구조와 감정 흐름: references/slide-strategies.md

이 파일들을 훑어보면 ckm:slides가 어떤 작업을 할 수 있는지 명확히 이해할 수 있고, 데크 생성 시 더 정교한 프롬프트를 작성하는 데 큰 도움이 됩니다.