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.

できること

ピッチデッキやマーケティング資料を 1 つの HTML ファイルとして作る手伝いをします。投資家向けピッチや製品デモなどのデッキ戦略を選び、スライド全体の感情の流れを設計し、各スライドのレイアウトとコピーの型を決めたうえで、キーボード・クリック操作、進捗バー、レスポンシブ対応、データスライド用の Chart.js を備えた基本 HTML テンプレートに当てはめます。

動き方

create サブコマンドが references/create.md から対応する指示を読み込みます。
モデルは必要に応じて 4 つの参考ファイル（スライド戦略、レイアウト、コピーの型（PAS、AIDA、FAB など）、HTML テンプレート）を開きます。
スライドごとの計画と HTML を出力します。色などは CSS 変数で表現します。

向いている場面

投資家向けピッチ、製品デモ、マーケティング・営業資料、データを見せるスライド。指示だけのパッケージなので、画像の生成や PowerPoint ファイルの書き出しは行いません。

補足とリスク

指示のみのパッケージです。スクリプトはなく、それ自体はファイルを書き込みません（HTML を保存するかどうかは、ご依頼に応じてモデルが判断します）。HTML テンプレートは jsDelivr CDN から Chart.js を読み込むため、生成したスライドをブラウザで開くときはインターネット接続が必要です。アカウントやキーは不要です。SKILL.md には、このパッケージに含まれていないプロジェクトファイルやスクリプト（`docs/brand-guidelines.md`、`assets/design-tokens.json` など）への言及があり、それらが無い場合はモデルが Skill 既定の色とフォントを使います。スライドに載る数値や主張は、ご自身で確認してください。

Slides（戦略的な HTML プレゼン）

6-slide plan

Slide 1 HTML

できること

動き方

向いている場面