Slides Skill：以 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 檔。它會先選一種簡報策略（例如募資路演、產品展示），規劃整套投影片的情緒節奏，為每一頁選定版型與文案公式，再套用基礎 HTML 範本：鍵盤與點擊翻頁、進度條、響應式斷點，數據頁以 Chart.js 繪圖。

運作方式

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 內建的預設顏色與字體。投影片上的數字與結論請自行查核。