ui-ux-pro-max-skill 幻灯片 HTML 模板解析:16:9 布局、Design Tokens 注入与 Chart.js 集成

2026-09-04 09:05:05作者：滑思眉Philip

本文以 ui-ux-pro-max-skill 仓库中的 slides-html-template.md 为核心,完整拆解该技能体系用于生成 HTML 演示文稿的基础模板:16:9 letterbox 舞台、导航脚本、Chart.js 数据可视化、入场动画类与背景图叠加方案,并结合仓库内 design-system 脚本的源码,说明模板中的 CSS 变量如何由 Design Tokens 管线自动注入、以及产出的幻灯片 HTML 如何被令牌合规校验器约束。读完本文,你可以独立复制并定制这套单文件幻灯片模板,理解其每个关键配置的作用与默认值,并掌握从 design-tokens.json 到最终 <style> 块的完整令牌链路。

一、模板在技能体系中的位置

该模板文件位于 design 技能的参考文档目录:

技能入口:.claude/skills/design/references/slides-html-template.md,同目录还有 slides.md、slides-create.md、slides-layout-patterns.md、slides-strategies.md 等配套参考文档;
slides 技能将其列为知识库之一:.claude/skills/slides/SKILL.md 的 "References (Knowledge Base)" 表格声明了 4 个参考文件(布局模式、HTML 模板、文案公式、幻灯片策略),并定义了路由逻辑:解析 $ARGUMENTS 首个词作为子命令,加载对应 references/{subcommand}.md 后执行。其中 create 子命令的入口文档为 .claude/skills/slides/references/create.md,其内容明确指示"调用 slides 技能,使用 Design Tokens、Chart.js 与幻灯片知识库创建说服性 HTML 幻灯片"。

从源码结构看,模板只是"骨架",真正决定视觉一致性的数据来自 design-system 技能目录下的脚本与知识库,包括 generate-tokens.cjs、embed-tokens.cjs、generate-slide.py、html-token-validator.py,以及 slide-charts.csv、slide-backgrounds.csv 等知识库数据文件。CLI 分发侧还在 cli/assets/skills/design/references/slides-html-template.md 保留了一份同内容副本,供 init 等命令写入用户项目。

二、基础结构:完整的单文件幻灯片 HTML

文档 "Base Structure" 一节给出了一份可直接运行的完整 HTML(slides-html-template.md#L7-L202),包含令牌占位、响应式样式、导航控件与全部导航逻辑。以下是原文完整骨架(令牌注释处即为 embed-tokens.cjs 的输出粘贴点):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Presentation Title</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <style>
        /* Paste embed-tokens.cjs output here */
        :root {
            --color-primary: #FF6B6B;
            --color-background: #0D0D0D;
            /* ... more tokens */
        }

        /* Base slide styles */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background: var(--color-background);
            color: #fff;
            font-family: var(--typography-font-body, 'Inter', sans-serif);
            overflow: hidden;
        }

        /* 16:9 Aspect Ratio Container (desktop) */
        .slide-deck {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        @media (min-width: 769px) {
            .slide-deck {
                /* Lock to 16:9 — letterbox if viewport ratio differs */
                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; /* Prevent content overflow */
        }

        .slide.active { opacity: 1; visibility: visible; }

        /* Slide inner wrapper — constrains content within safe area */
        .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;
        }

        /* Typography */
        h1, h2 { font-family: var(--typography-font-heading, 'Space Grotesk', sans-serif); }
        .slide-title {
            font-size: clamp(32px, 6vw, 80px);
            background: var(--primitive-gradient-primary, linear-gradient(135deg, #FF6B6B, #FF8E53));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.1;
        }

        /* ===== RESPONSIVE BREAKPOINTS ===== */

        /* Tablet (portrait) */
        @media (max-width: 768px) {
            .slide { padding: 32px 24px; }
            .slide-title { font-size: clamp(28px, 5vw, 48px); }
            h2 { font-size: clamp(20px, 4vw, 32px); }
            p, li { font-size: clamp(14px, 2.5vw, 18px); }
        }

        /* Mobile */
        @media (max-width: 480px) {
            .slide { padding: 24px 16px; }
            .slide-title { font-size: clamp(22px, 6vw, 36px); }
            h2 { font-size: clamp(18px, 4.5vw, 28px); }
            p, li { font-size: clamp(12px, 3vw, 16px); }
            .nav-controls { bottom: 16px; gap: 12px; }
            .nav-btn { width: 32px; height: 32px; font-size: 14px; }
        }

        /* Navigation */
        .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>
    <!-- Progress Bar -->
    <div class="progress-bar" id="progressBar"></div>

    <!-- Slide Deck Container (16:9 on desktop) -->
    <div class="slide-deck">

    <!-- Slides -->
    <div class="slide active">
        <div class="slide-content">
            <h1 class="slide-title">Title Slide</h1>
            <p>Subtitle or tagline</p>
        </div>
    </div>

    <!-- More slides... (always wrap content in .slide-content) -->

    </div><!-- /.slide-deck -->

    <!-- Navigation -->
    <div class="nav-controls">
        <button class="nav-btn" onclick="prevSlide()">←</button>
        <span class="slide-counter"><span id="current">1</span> / <span id="total">9</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>

下面按关键设计点逐段解析。

2.1 令牌占位:standalone HTML 的唯一"外部依赖"

<style> 开头标注了 /* Paste embed-tokens.cjs output here */,即把 embed-tokens.cjs 的 stdout 直接粘入,得到 :root { ... } 令牌块。模板内置的示例值(--color-primary: #FF6B6B、--color-background: #0D0D0D)只是占位,实际项目应以品牌令牌替换。这种"内嵌而非外链"的方式保证幻灯片是零构建、零本地依赖的单文件,适合邮件分发或投屏场景。

2.2 16:9 letterbox 舞台

桌面端(视口宽度 ≥ 769px)的 .slide-deck 使用经典 letterbox 锁比例方案:

max-width: calc(100vh * 16 / 9) 与 max-height: calc(100vw * 9 / 16) 互相钳制,使舞台在任何宽高比的屏幕上都被限制为 16:9;
position: absolute; inset: 0; margin: auto 将舞台居中,多余区域显示为 body 背景色,形成上下/左右黑边;
移动端(≤ 768px)不启用 letterbox,.slide-deck 退化为 100vw × 100vh,幻灯片全屏铺满,适配手机竖屏翻阅。

2.3 幻灯片与内容安全区

.slide 绝对定位铺满舞台,默认 opacity: 0; visibility: hidden,仅 .slide.active 可见,切换为 0.4s 的透明度过渡;overflow: hidden 防止内容溢出舞台(对应注释 "Prevent content overflow");
内容一律包裹在 .slide-content 中,该内层容器用 max-height: 100%; overflow: hidden; gap: 16px 把内容约束在安全区内,文档注释明确要求 "always wrap content in .slide-content";
标题 .slide-title 使用 clamp(32px, 6vw, 80px) 流式字号,并用 background-clip: text 将 --primitive-gradient-primary 渐变裁剪为文字填充色——注意它提供了渐变回退值 linear-gradient(135deg, #FF6B6B, #FF8E53),即使令牌缺失也能正常渲染;
body 与 h1/h2 的字体均通过 var(--typography-font-body, 'Inter', sans-serif) / var(--typography-font-heading, 'Space Grotesk', sans-serif) 取令牌并带回退值。

2.4 响应式断点

模板定义了两个降级断点,所有字号都采用 clamp(最小, 视口比例, 最大) 形式:

断点	`.slide` 内边距	标题	h2	正文 p/li
平板(≤ 768px)	32px 24px	clamp(28px, 5vw, 48px)	clamp(20px, 4vw, 32px)	clamp(14px, 2.5vw, 18px)
手机(≤ 480px)	24px 16px	clamp(22px, 6vw, 36px)	clamp(18px, 4.5vw, 28px)	clamp(12px, 3vw, 16px)

手机断点还额外缩小了导航控件:.nav-controls 下移到 bottom: 16px、间距缩至 12px,.nav-btn 从 40px 缩到 32px,保证小屏上手势区不被遮挡。

2.5 导航、进度条与交互逻辑

顶部 .progress-bar(3px 高,主色)宽度由脚本驱动,直观呈现"当前页 / 总页数"的进度;
底部 .nav-controls 为左右圆形按钮加 "n / total" 计数器,z-index: 1000 保证始终浮在幻灯片之上;
脚本逻辑全部收敛在 showSlide(n):先钳制页码范围(n < 1 归 1,n > total 归 total),再批量 classList.toggle('active'),最后同步计数器与进度条宽度 (n / total * 100)%;
输入覆盖三种方式:键盘 ArrowRight/空格前进、ArrowLeft 后退(均 preventDefault 防止空格滚动页面);点击页面任意位置前进,但命中 .nav-controls 内的点击被排除(!e.target.closest('.nav-controls')),避免误触底部按钮区域;
页面加载时执行 showSlide(1) 完成初始化,total 由 document.querySelectorAll('.slide').length 自动计算——因此新增幻灯片只需复制 .slide 节点,无需改脚本。

三、Chart.js 数据可视化集成

文档 "Chart.js Integration" 一节给出图表容器与初始化代码的完整写法(slides-html-template.md#L204-L237),依赖 head 中锁定的 chart.js@4.4.1 UMD 构建:

<div class="chart-container" style="width: min(80%, 600px); height: clamp(200px, 40vh, 350px);">
    <canvas id="revenueChart"></canvas>
</div>

<script>
new Chart(document.getElementById('revenueChart'), {
    type: 'line', // or 'bar', 'doughnut', 'radar'
    data: {
        labels: ['Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
            label: 'MRR ($K)',
            data: [5, 12, 28, 45],
            borderColor: '#FF6B6B',
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            borderWidth: 3,
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            x: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#B8B8D0' } },
            y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#B8B8D0' } }
        }
    }
});
</script>

关键配置说明:

容器尺寸 width: min(80%, 600px); height: clamp(200px, 40vh, 350px) 同时用了 min() 与 clamp(),让图表随幻灯片舞台缩放但不失控;
maintainAspectRatio: false 是幻灯片场景的必选项——否则 Chart.js 默认按 canvas 固有比例渲染,会与 .chart-container 的固定高度冲突;
tension: 0.4 开启轻度贝塞尔平滑,fill: true 配合低透明度 backgroundColor 形成面积填充,契合深色底;
网格线 rgba(255,255,255,0.05) 与刻度 #B8B8D0 是典型的暗色主题低对比处理,保证数据系列成为视觉主角;
图表类型按 // or 'bar', 'doughnut', 'radar' 注释可直接替换,datasets 结构不变。

一个值得注意的细节:图表配色在模板中是硬编码的,而仓库的令牌校验器 html-token-validator.py 恰恰对 <script> 块内的硬编码颜色网开一面(见第八节)——这正是"CSS 必须走令牌、JS 图表数据可内联"这一设计边界在模板中的体现。

四、入场动画类

"Animation Classes" 一节(slides-html-template.md#L239-L273)提供四组开箱即用的 CSS 动画,均为纯 CSS、无 JS 依赖:

/* Fade Up */
.animate-fade-up {
    animation: fadeUp 0.6s ease-out forwards;
    opacity: 0;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Count Animation */
.animate-count { animation: countUp 1s ease-out forwards; }

/* Scale */
.animate-scale {
    animation: scaleIn 0.5s ease-out forwards;
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Stagger Children */
.animate-stagger > * {
    opacity: 0;
    animation: fadeUp 0.5s ease-out forwards;
}
.animate-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.animate-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.animate-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.animate-stagger > *:nth-child(4) { animation-delay: 0.4s; }

.animate-fade-up:从下方 30px 淡入,0.6s,forwards 保持终态;需配合幻灯片切换时机触发(如切换 .active 时元素才被渲染),避免所有元素在页面加载时一次性播完;
.animate-count:预留的数字滚动占位类(指向 countUp 关键帧),模板本身未给出关键帧实现,属于留给使用方扩展的钩子;
.animate-scale:0.9 倍缩放至 1 并淡入,适合图表卡片、指标块;
.animate-stagger:作用于容器的"级联入场"——直接子元素共用 fadeUp,按 nth-child 以 0.1s 步进延迟,最多显式支持 4 个子元素,超过 4 个的后续元素会立即(无延迟)入场,使用时注意控制列表长度或自行补延迟。

五、背景图与深色遮罩

"Background Images" 一节(slides-html-template.md#L275-L284)给出图片幻灯片的三层结构:

<div class="slide slide-with-bg" style="background-image: url('https://images.pexels.com/...')">
    <div class="overlay" style="background: linear-gradient(135deg, rgba(13,13,13,0.9), rgba(13,13,13,0.7))"></div>
    <div class="content" style="position: relative; z-index: 1;">
        <!-- Slide content -->
    </div>
</div>

要点:

图片作为 .slide 的 background-image,示例源为 Pexels 外链;
.overlay 用 135° 深色渐变(不透明度 0.9 → 0.7)压住背景,保证前景文字对比度;注意其色值 rgba(13,13,13,x) 与模板令牌示例 --color-background: #0D0D0D 一致,即遮罩颜色应跟随品牌背景色;
内容层 position: relative; z-index: 1 浮于遮罩之上。

这一做法与校验器的白名单机制互相印证:html-token-validator.py#L88-L91 的 ALLOWED_EXCEPTIONS 明确放行 pexels.com、unsplash.com 等外部素材域名,允许这类图片 URL 出现在幻灯片中而不触发"外部资源"告警。

六、CSS 变量参考表

文档末尾的 "CSS Variables Reference"(slides-html-template.md#L286-L295)列出模板实际消费的最小变量集:

Variable	Usage
`--color-primary`	Brand primary (CTA, highlights)
`--color-background`	Slide background
`--color-secondary`	Secondary elements
`--primitive-gradient-primary`	Title gradients
`--typography-font-heading`	Headlines
`--typography-font-body`	Body text

这 6 个变量正是第二、四节中所有 var() 引用的并集。模板对它们都提供了回退值,因此即使 :root 令牌块缺失,页面也能以示例色渲染——这是一个有意的"优雅降级"设计:令牌是增强,不是硬依赖。

七、源码级实现佐证:令牌从哪里来、如何被校验

模板注释 "Paste embed-tokens.cjs output here" 指向一条完整的令牌管线,以下按仓库源码逐环说明。

7.1 generate-tokens.cjs:JSON 令牌 → CSS 变量

generate-tokens.cjs 是管线的源头,命令行参数为:

node generate-tokens.cjs --config tokens.json -o tokens.css
node generate-tokens.cjs --config tokens.json --format tailwind

其内部实现(generate-tokens.cjs#L73-L98)分三步:

resolveReference 解析 {primitive.color.blue.600} 这类令牌引用,支持递归(解析出的 $value 若仍是引用会继续解析);
flattenTokens 将 primitive / semantic / component / dark.semantic 四个命名空间展平为 CSS 变量,命名规则 toCssVarName 为"路径以连字符连接并加 -- 前缀",如 primitive.gradient.primary → --primitive-gradient-primary;
generateCSS 按 /* === PRIMITIVES === */ 等分节输出多个 :root 块,存在暗色令牌时额外输出 .dark { ... } 块;--format tailwind 则把语义层颜色映射为 theme.extend.colors 的 Tailwind 配置片段。

仓库提供起始模板 design-tokens-starter.json 供项目初始化令牌。

7.2 embed-tokens.cjs:为 standalone HTML 抽取内嵌块

embed-tokens.cjs 专为"生成独立 HTML 文件(信息图、幻灯片等)"设计,头部注释即如此声明。运行方式:

node embed-tokens.cjs           # 输出完整 CSS
node embed-tokens.cjs --minimal # 仅输出常用令牌
node embed-tokens.cjs --style   # 用 <style> 标签包裹

实现要点:

findProjectRoot 从当前工作目录逐级向上,查找含 assets/design-tokens.css 的目录作为项目根(embed-tokens.cjs#L17-L30)——说明该脚本面向"技能所操作的目标项目"运行,而非本仓库自身;
extractTokens 用正则 /:root\s*\{([^}]+)\}/g 抽取全部 :root 块,再以 --[\w-]+:\s*[^;]+; 收集变量并去重(embed-tokens.cjs#L61-L82);
--minimal 按 MINIMAL_TOKENS 前缀白名单过滤(embed-tokens.cjs#L41-L59),白名单恰好覆盖模板所需的全部变量族:--primitive-spacing-、--primitive-fontSize-、--primitive-fontWeight-、--primitive-lineHeight-、--primitive-radius-、--primitive-shadow-glow-、--primitive-gradient-、--primitive-duration-、--color-*(primary/secondary/accent/background/surface/foreground/border)、--typography-font-、--card-;
--style 会包上 <style> 并附加 "Design Tokens (embedded for standalone HTML)" 注释,输出形态与模板 <style> 中的粘贴点完全吻合。

7.3 generate-slide.py:严格令牌约束的幻灯片生成器

generate-slide.py 展示了同一套令牌纪律的 Python 实现,其文件头注释明确:"ALL styles MUST use CSS variables from design-tokens.css, NO hardcoded colors, fonts, or spacing allowed"。几个对使用者有直接价值的工程细节:

输入转义:_e 对所有用户文案做 HTML 转义;_safe_url 只允许 http://、https://、#、/ 四种链接形态,明确标注用于"防止 javascript: URI 注入(CWE-79)"(generate-slide.py#L21-L29);
幻灯片类型映射 SLIDE_GENERATORS 支持 title / problem / solution / metrics(别名 traction)/ chart / testimonial / cta(别名 closing)八种语义页型(generate-slide.py#L624-L634),与 slides-strategies 参考文档中的叙事策略一一对应;
其 CSS 中同样使用 background-clip: text 实现 .slide-title 渐变标题、aspect-ratio: 16 / 9 固定单页比例,并以 --slide-* 组件令牌取代模板中的 clamp() 手写字号——可以推断,模板的 clamp() 方案是"无生成器场景"的等效兜底,两者目标一致:让字号随舞台缩放;
命令行支持 --demo 直接产出一套 7 页演示 deck(title → problem → solution → metrics → chart → testimonial → cta),输出至项目 assets/designs/slides/ 目录,可作为手工编写幻灯片前的结构范本。

八、合规校验:html-token-validator.py 的判定规则

html-token-validator.py 负责验证产出的幻灯片 HTML 是否真的遵循令牌规范,运行方式:

python html-token-validator.py                    # 校验全部 HTML 资产
python html-token-validator.py --type slides     # 只校验幻灯片
python html-token-validator.py path/to/file.html # 校验指定文件
python html-token-validator.py --colors         # 打印令牌中的 CSS 变量

其判定逻辑(html-token-validator.py#L65-L91)与本模板的每一处"硬编码"都能对上号:

必备 import:内容中必须出现 design-tokens.css 字样(外链或内嵌标记),否则直接报错 "Missing design-tokens.css import";
禁止模式 FORBIDDEN_PATTERNS 覆盖 hex、rgb()、rgba()、hsl() 颜色与硬编码 font-family,但存在四条例外:
- <script> 块内一律跳过(html-token-validator.py#L170-L174)——这正是第三节中 Chart.js 配置可以写 borderColor: '#FF6B6B' 的原因,文档注释也写明 "Chart.js allowed";
- 白名单域名(pexels/unsplash/googlefonts 等)的外部 URL 跳过;
- 品牌色透明化 ALLOWED_RGBA_PATTERNS:仅品牌主/次/强调色与黑白、#0F172A、#070B14 的 rgba() 形式被允许,用于"CSS 无法对 var() 直接做透明度混合"的场景——模板导航按钮的 rgba(255,255,255,0.1) 正落在白名单内;
- var() 回退值(如 var(--typography-font-body, 'Inter', ...))被识别为假阳性跳过;
令牌用量下限:var(--color-、var(--primitive-、var(--typography-、var(--card-、var(--button- 五族引用总数低于 5 时给出 "Low token usage" 警告(html-token-validator.py#L211-L212)。

项目根的定位也值得注意:脚本从工作目录向上查找 assets/design-tokens.json、assets/design-tokens.css、package.json 或 .git 作为项目根,并支持 DESIGN_SYSTEM_PROJECT_ROOT 环境变量显式覆盖(html-token-validator.py#L22-L41);源码注释说明这是为了兼容"技能安装在用户级目录或作为插件、与被操作项目分离"的部署形态。

九、使用方式与适用前提

综合文档与脚本实现,这套模板的落地方式与边界如下:

最小可用形态:复制 "Base Structure" 的完整 HTML,把 embed-tokens.cjs 的输出(推荐 --minimal)粘入 :root 占位处,按需添加 .slide 节点即可,外部依赖仅 Chart.js 4.4.1 的 CDN 脚本;
令牌前提:完整的令牌管线(generate-tokens.cjs → assets/design-tokens.css → embed-tokens.cjs)依赖目标项目存在 assets/design-tokens.css / assets/design-tokens.json,可先以 design-tokens-starter.json 起步;本仓库本身并不内置这份资产,上述脚本以"被操作项目"的工作目录为根运行;
内容组织:页面叙事可配合 slide-strategies 知识库与 slide-charts.csv 等 CSV 数据,布局选型参考 layout-patterns.md,文案参考 copywriting-formulas.md;
合规收口:产出后运行 python html-token-validator.py --type slides,把"CSS 全令牌化、JS 图表内联色、外部图走白名单域名"作为验收标准;
交互注意:默认"点击任意处前进"的行为在含可点击图表/链接的幻灯片上可能误触,自定义时建议保留 e.target.closest('.nav-controls') 同款排除逻辑,或改用按钮导航;animate-count 引用的 countUp 关键帧需自行实现。