Slides 스킬: Chart.js로 만드는 전략적 HTML 피치 덱

데모실행 기록 · claude-sonnet-5-5 · 2026년 10월

Using the slides skill, plan a 6-slide investor pitch for a fictional B2B SaaS called "Acme Metrics" (usage analytics for finance teams). Give the slide-by-slide plan with the layout and copywriting formula for each slide, then write the HTML for slide 1 only.

Skill: slides

Read: references/create.md

Read: references/layout-patterns.md

Read: references/html-template.md

Read: references/copywriting-formulas.md

Read: references/slide-strategies.md

I couldn't save the HTML to a file because the Write tool is disabled in this session. Slide 1's full HTML is inline below, and you can paste it into acme-metrics-pitch.html.

I used the slides skill's Product Demo and YC Seed structures, condensed to six slides. Its emotion arc runs curiosity → frustration → hope → trust → urgency. The skill recommends pattern breaks at the 1/3 and 2/3 points, so slides 2 and 4 use full-bleed treatments.

6-slide plan

#	Slide	Layout	Copy formula	Emotion	Draft headline
1	Title / Hook	Title Slide (centered, gradient-glow), `animate-fade-up`	AIDA (Attention)	Curiosity	"Your finance team is paying for software nobody uses."
2	Problem	Problem Statement, full-bleed pattern break, `animate-stagger`	PAS (Problem → Agitate → Solution)	Frustration	"Seats sit idle. Renewals auto-fire. Nobody sees it until the audit."
3	Solution	Solution Overview, with a 3-card Feature Grid (`animate-scale`, then `animate-stagger`)	FAB (Feature → Advantage → Benefit)	Hope	"Acme Metrics shows real usage per tool, so you can cut waste before renewal."
4	Traction	Metrics Dashboard (3–4 KPI cards) with a Chart.js MRR line, full-bleed break, `animate-stagger-scale`	Proof Stack	Trust	"[X] teams, $[Y]K MRR, [Z]% saved at renewal."
5	Market and Business Model	Two Column Split: TAM/SAM on the left, pricing tiers on the right, `animate-fade-up`	Value Stack	Confidence	"Every finance team has a software budget. We price at a fraction of what we save."
6	The Ask	CTA Closing (`animate-pulse`)	AIDA (Action) plus Urgency	Urgency	"Raising $[X] to put usage data in every CFO's renewal calendar."

Slide 4 numbers: The traction figures are placeholders. Use real or clearly labeled fictional numbers.
Slide 5: I merged Market and Business Model to stay at six slides. Team and Financials are dropped, so add them to the appendix if investors will expect them.

Slide 1 HTML

This is the skill's base template with slide 1 filled in. It includes the navigation, progress bar and responsive breakpoints. The slide counter shows "1 / 1" until the other slides exist.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acme Metrics — Investor Pitch</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
    <style>
        :root {
            --color-primary: #FF6B6B;
            --color-secondary: #FF8E53;
            --color-background: #0D0D0D;
            --primitive-gradient-primary: linear-gradient(135deg, #FF6B6B, #FF8E53);
            --typography-font-heading: 'Space Grotesk', sans-serif;
            --typography-font-body: 'Inter', sans-serif;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background: var(--color-background);
            color: #fff;
            font-family: var(--typography-font-body);
            overflow: hidden;
        }

        .slide-deck { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
        @media (min-width: 769px) {
            .slide-deck {
                max-width: calc(100vh * 16 / 9);
                max-height: calc(100vw * 9 / 16);
                margin: auto;
                position: absolute;
                inset: 0;
            }
        }

        .slide {
            position: absolute;
            width: 100%; height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 60px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s;
            background: var(--color-background);
            overflow: hidden;
        }
        .slide.active { opacity: 1; visibility: visible; }

        .slide-content {
            width: 100%;
            max-width: 100%;
            max-height: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 16px;
        }

        h1, h2 { font-family: var(--typography-font-heading); }
        .slide-title {
            font-size: clamp(32px, 6vw, 80px);
            background: var(--primitive-gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.1;
            max-width: 16ch;
        }

        /* Title slide: centered column + gradient-glow treatment */
        .slide-title-layout::before {
            content: '';
            position: absolute;
            width: 60%; aspect-ratio: 1;
            background: radial-gradient(circle, rgba(255,107,107,0.22), transparent 65%);
            filter: blur(40px);
            pointer-events: none;
        }
        .slide-title-layout .slide-content { position: relative; z-index: 1; }

        .eyebrow {
            font-size: clamp(12px, 1.4vw, 16px);
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--color-secondary);
        }
        .subtitle {
            font-size: clamp(16px, 2vw, 26px);
            color: #B8B8D0;
            max-width: 38ch;
            line-height: 1.4;
        }
        .byline { margin-top: 24px; font-size: clamp(12px, 1.2vw, 14px); color: rgba(255,255,255,0.45); }

        .animate-fade-up > * { opacity: 0; animation: fadeUp 0.6s ease-out forwards; }
        .animate-fade-up > *:nth-child(1) { animation-delay: 0.05s; }
        .animate-fade-up > *:nth-child(2) { animation-delay: 0.2s; }
        .animate-fade-up > *:nth-child(3) { animation-delay: 0.35s; }
        .animate-fade-up > *:nth-child(4) { animation-delay: 0.5s; }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 768px) {
            .slide { padding: 32px 24px; }
            .slide-title { font-size: clamp(28px, 5vw, 48px); }
        }
        @media (max-width: 480px) {
            .slide { padding: 24px 16px; }
            .slide-title { font-size: clamp(22px, 6vw, 36px); }
            .nav-controls { bottom: 16px; gap: 12px; }
            .nav-btn { width: 32px; height: 32px; font-size: 14px; }
        }

        .progress-bar {
            position: fixed; top: 0; left: 0; height: 3px;
            background: var(--color-primary);
            transition: width 0.3s; z-index: 1000;
        }
        .nav-controls {
            position: fixed; bottom: 30px; left: 50%;
            transform: translateX(-50%);
            display: flex; align-items: center; gap: 20px; z-index: 1000;
        }
        .nav-btn {
            background: rgba(255,255,255,0.1); border: none; color: #fff;
            width: 40px; height: 40px; border-radius: 50%;
            cursor: pointer; font-size: 18px;
        }
        .nav-btn:hover { background: rgba(255,255,255,0.2); }
        .slide-counter { color: rgba(255,255,255,0.6); font-size: 14px; }
    </style>
</head>
<body>
    <div class="progress-bar" id="progressBar"></div>

    <div class="slide-deck">

        <!-- Slide 1: Title / Hook (AIDA — Attention) -->
        <div class="slide slide-title-layout active">
            <div class="slide-content animate-fade-up">
                <span class="eyebrow">Acme Metrics</span>
                <h1 class="slide-title">Your finance team is paying for software nobody uses.</h1>
                <p class="subtitle">Usage analytics that show finance teams which tools earn their budget.</p>
                <p class="byline">Seed round · Investor presentation</p>
            </div>
        </div>

        <!-- Slides 2–6 to be added -->

    </div>

    <div class="nav-controls">
        <button class="nav-btn" onclick="prevSlide()">←</button>
        <span class="slide-counter"><span id="current">1</span> / <span id="total">6</span></span>
        <button class="nav-btn" onclick="nextSlide()">→</button>
    </div>

    <script>
        let current = 1;
        const total = document.querySelectorAll('.slide').length;
        document.getElementById('total').textContent = total;

        function showSlide(n) {
            if (n < 1) n = 1;
            if (n > total) n = total;
            current = n;
            document.querySelectorAll('.slide').forEach((s, i) => {
                s.classList.toggle('active', i === n - 1);
            });
            document.getElementById('current').textContent = n;
            document.getElementById('progressBar').style.width = (n / total * 100) + '%';
        }
        function nextSlide() { showSlide(current + 1); }
        function prevSlide() { showSlide(current - 1); }

        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); nextSlide(); }
            if (e.key === 'ArrowLeft') { e.preventDefault(); prevSlide(); }
        });
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.nav-controls')) nextSlide();
        });

        showSlide(1);
    </script>
</body>
</html>

Tokens: I used the skill's default coral/dark palette and font fallbacks inline. The design-system scripts (embed-tokens, search-slides.py) weren't available, so no brand tokens were generated. If Acme Metrics has real brand colors, swap them into :root.
Chart.js: The script tag is already loaded for the traction slide on slide 4.

I can write slides 2–6 next, or save the file once Write access is available.

Real run in an isolated folder with only this skill installed. Only the Skill and Read tools were enabled; the model tried to save the HTML file, was refused, and printed it inline instead. It opened the skill's reference files and ran no scripts. The investor-pitch company is invented for the test.

하는 일

피치 덱이나 마케팅 발표 자료를 하나의 HTML 파일로 만들도록 돕습니다. 투자 유치 피치나 제품 데모 같은 덱 전략을 고르고, 슬라이드 전체의 감정 흐름을 설계하고, 슬라이드마다 레이아웃과 카피 공식을 정한 뒤, 키보드·클릭 탐색, 진행 표시줄, 반응형 구간, 데이터 슬라이드용 Chart.js를 갖춘 기본 HTML 템플릿에 적용합니다.

동작 방식

create 하위 명령이 references/create.md에서 해당 지침을 불러옵니다.
모델이 필요할 때 참고 파일 네 개(슬라이드 전략, 레이아웃, 카피 공식(PAS, AIDA, FAB 등), HTML 템플릿)를 엽니다.
슬라이드별 계획과 HTML을 출력하며, 색상 등은 CSS 변수로 표현합니다.

이런 때 좋습니다

투자 유치 피치, 제품 데모, 마케팅·영업 자료, 데이터를 보여 주는 슬라이드. 지침만 담은 패키지라서 이미지를 생성하거나 PowerPoint 파일로 내보내지는 않습니다.

참고 및 위험

지침만 담긴 패키지입니다. 스크립트가 없고 스스로 파일을 쓰지 않습니다(HTML을 저장할지는 요청에 따라 모델이 판단합니다). HTML 템플릿은 jsDelivr CDN에서 Chart.js를 불러오므로, 생성된 슬라이드를 브라우저에서 열 때 인터넷 연결이 필요합니다. 계정이나 키는 필요 없습니다. SKILL.md에는 이 패키지에 포함되지 않은 프로젝트 파일과 스크립트(`docs/brand-guidelines.md`, `assets/design-tokens.json` 등)가 언급되어 있으며, 없으면 모델이 Skill의 기본 색상과 글꼴을 씁니다. 슬라이드에 들어가는 숫자와 주장은 직접 확인하세요.