name: html-ppt description: 创建交互式HTML PPT演示文稿。支持多套配色方案，根据用户提供的配色方案、主题、每页标题和内容生成精美的HTML幻灯片。

技能概述

这是一个用于创建交互式HTML PPT演示文稿的技能。基于现有的PPT模板，支持多套配色方案，用户只需提供主题、配色和每页内容即可生成专业美观的演示文稿。

执行步骤：

生成初级HTML框架 - 根据配色方案和模板生成不含内容的空壳HTML
渲染完整PPT - 根据用户提供的配色方案、主题、每页标题和内容渲染每页PPT
检查与验证 - 确保HTML格式正确，所有功能正常

用户必须提供的信息

在创建PPT之前，用户必须明确提供以下信息：

1. 配色方案

从以下配色方案中选择，或自定义颜色：

方案名称	主色调	辅助色	强调色	背景色
赛博朋克	青色 `#00f5d4`	紫色 `#7b2cbf`	橙色 `#ff6b35`	深空黑 `#0a0a0f`
商务蓝	蓝色 `#2563eb`	深蓝 `#1e40af`	金色 `#f59e0b`	纯白 `#ffffff`
暗夜紫	紫罗兰 `#8b5cf6`	粉色 `#ec4899`	青色 `#06b6d4`	深灰 `#1a1a2e`
森林绿	翠绿 `#10b981`	深绿 `#047857`	琥珀 `#f59e0b`	米白 `#fefce8`
日落橙	珊瑚 `#f97316`	红色 `#ef4444`	黄色 `#eab308`	暖白 `#fff7ed`
极简灰	黑色 `#000000`	灰色 `#6b7280`	红色 `#dc2626`	白色 `#ffffff`
企业红	深红 `#dc2626`	暗红 `#991b1b`	银灰 `#9ca3af`	深灰 `#1f2937`
海洋蓝	天蓝 `#0ea5e9`	深蓝 `#0369a1`	绿色 `#22c55e`	浅蓝 `#f0f9ff`

自定义配色 - 用户也可以指定完整颜色配置：

背景色 (bg-deep, bg-card)
主色调 (primary)
辅助色 (secondary)
强调色 (accent)
文字色 (text-primary, text-secondary)
边框发光色 (border-glow)

2. 主题

PPT的主题/标题，例如：

"产品发布会"
"年度总结报告"
"技术分享会"
"团队介绍"

3. 每页内容

每页PPT需要提供：

标题 - 页面主标题
内容 - 可以是文字、列表、卡片、代码块等
展示形式 - 根据内容类型选择最合适的展示方式

幻灯片模板结构

通用样式

/* 配色变量 - 会根据用户选择的配色方案动态生成 */
:root {
    --bg-deep: #背景深色;
    --bg-card: rgba(背景色, 0.8);
    --primary: #主色调;
    --secondary: #辅助色;
    --accent: #强调色;
    --text-primary: #文字主色;
    --text-secondary: #文字次色;
    --border-glow: rgba(主色调, 0.3);
}

可用组件

标题幻灯片 - 大标题 + 副标题 + 动态背景
内容幻灯片 - 标题 + 文字内容
卡片列表 - 多列卡片展示特性
代码块 - 带语法高亮的代码展示
图片展示 - 图片/截图展示区域
对比卡片 - 左右对比布局
特性列表 - 带图标的特性项
引用框 - 案例/引用展示
总结幻灯片 - 总结内容 + 联系方式
时间线 - 流程/步骤展示
统计卡片 - 数字/统计展示

字体配置

⚠️ 重要：严禁使用任何外部字体 CDN，必须使用系统字体

正文字体: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, sans-serif
代码字体: "Cascadia Code", "Fira Code", "Source Code Pro", Consolas, "Courier New", monospace

布局规范（重要）

1. 浏览器分辨率兼容

幻灯片容器必须使用 width: 100vw 和 height: 100vh
使用响应式字体 clamp(min, val, max) 适配不同屏幕
包含 @media (max-width: 900px) 断点处理移动端
使用 min()、max()、clamp() 等CSS函数优化布局

2. 滚动条控制（核心要求）

每页幻灯片禁止出现滚动条
幻灯片容器必须设置 overflow: hidden
内容必须完全在可视区域内，不能溢出
如果内容过多，考虑：
- 拆分到多页
- 减小字体尺寸
- 减少列表项数量
- 使用折叠/收起组件

3. 内容布局均衡

禁止大面积留白：内容区域使用 Flexbox 垂直居中布局，但要根据内容调整：
- 内容多时：顶部对齐，减少底部留白
- 内容少时：添加装饰性图形/背景元素补充视觉
使用 Grid/Flex 布局让内容均匀分布
标题与内容保持合理间距（使用 gap 而非固定 margin）
卡片列表使用 grid-template-columns: repeat(auto-fit, minmax(...)) 自适应

4. 内容过少时的视觉补充（与内容相关）

当单页内容较少时（如只有1-2个要点），装饰图形必须与页面主题/内容相关，不能随意添加无关装饰。

根据内容类型选择对应的装饰图形：

内容类型	装饰图形建议	CSS实现方式
团队/人物介绍	人物轮廓虚影、同心圆	使用 `radial-gradient` 模拟人物/圆形
产品/功能介绍	产品轮廓、六边形蜂巢	使用 `polygon` 或多重边框
数据/统计	数据点、柱状图简化、趋势线	使用伪元素创建条形/折线
流程/步骤	流程节点、连接线、箭头	使用 `::before/::after` 创建连接元素
总结/结论	光芒、光晕、星星	使用 `radial-gradient` + 动画
技术/代码	代码符号、括号、圆点	使用字符或几何形状
时间/历史	时间轴节点、圆点	使用伪元素创建时间轴装饰
列表/要点	圆点、勾选框、对勾	使用 SVG 或 CSS 绘制

实现示例：

/* 团队介绍页 - 同心圆装饰 */
.slide[data-type="team"]::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border: 2px solid var(--secondary);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.2;
}

/* 产品页 - 六边形蜂巢 */
.slide[data-type="product"]::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 173px;
    background: linear-gradient(135deg, var(--primary) 0%, transparent 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    opacity: 0.15;
    top: 20%;
    right: 10%;
}

/* 数据页 - 柱状图装饰 */
.slide[data-type="data"]::before {
    content: '';
    position: absolute;
    bottom: 15%;
    left: 10%;
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.slide[data-type="data"]::before::before,
.slide[data-type="data"]::before::after {
    content: '';
    width: 30px;
    background: var(--primary);
    opacity: 0.3;
    border-radius: 4px 4px 0 0;
}

关键原则：

装饰图形使用 opacity: 0.1~0.3 保持低调
使用 ::before/::after 伪元素，不增加额外DOM
可以使用动画（如 pulse）增加动态感
颜色使用 var(--primary) / var(--secondary) 保持配色一致

/* 内容少时的装饰示例 */
.slide:has(.content-block:only-child)::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
    opacity: 0.3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 3s ease-in-out infinite;
}

执行流程

步骤1：确认需求

在开始创建之前，必须向用户确认以下信息：

请提供以下信息以创建PPT：

1. 配色方案：从"赛博朋克"/"商务蓝"/"暗夜紫"/"森林绿"/"日落橙"/"极简灰"/"企业红"/"海洋蓝"中选择，或指定自定义颜色
2. 主题：PPT的标题和副标题
3. 每页内容：按顺序列出每页的标题和内容，包括：
   - 每页的标题
   - 内容类型（文字/列表/卡片/代码/图片等）
   - 具体内容

示例格式：
- 第1页：标题"产品介绍"，内容为...
- 第2页：标题"功能特性"，内容为3个卡片...
- 第3页：标题"使用示例"，内容为代码块...

步骤2：生成初级HTML

根据配色方案生成HTML框架（不含内容），包含：

CSS变量定义
基础样式和动画
导航组件
进度条组件
幻灯片容器结构

输出示例：

<!-- 生成的初级框架结构 -->
<div class="presentation">
    <div class="slides-container" id="slidesContainer">
        <!-- 幻灯片将由步骤2动态生成 -->
    </div>
    <!-- 导航箭头 -->
    <div class="nav-arrow nav-prev" onclick="prevSlide()">...</div>
    <div class="nav-arrow nav-next" onclick="nextSlide()">...</div>
    <!-- 进度条 -->
    <div class="progress-container">...</div>
    <!-- 进度点 -->
    <div class="progress-dots" id="progressDots">...</div>
</div>

步骤3：渲染完整PPT

根据用户提供的每页内容，使用丰富的UI技术渲染：

标题幻灯片：
- 动态渐变背景
- 浮动粒子效果
- 大标题 + 副标题动画
内容幻灯片：
- 根据内容类型选择展示方式
- 卡片列表：网格布局 + 悬停效果
- 代码块：语法高亮 + 复制按钮
- 特性列表：图标 + 描述
动画效果：
- 入场动画（淡入 + 上浮）
- 交错延迟动画
- 页面切换动画

步骤4：检查与验证

检查HTML语法正确性
验证CSS变量是否正确应用
确认导航功能正常
检查进度条和进度点同步
验证键盘快捷键支持
检查响应式布局

输出要求

输出文件: 单个 .html 文件，可直接在浏览器中打开
文件命名: {主题名称}.html (如 产品发布会.html)
依赖: 严禁引入任何外部JS和CSS（包括CDN链接、Google Fonts等），必须使用纯本地化方案
- 字体：使用系统字体栈，如 "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", -apple-system, sans-serif
- 代码字体：使用 "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace
- 所有CSS和JS必须内联到HTML文件中

技能文件结构

.claude/skills/html-ppt/
├── SKILL.md                 # 技能说明文件
├── templates/
│   ├── base_template.html   # 基础HTML模板
│   └── color_schemes.json   # 配色方案配置

配色方案配置说明

配置文件 color_schemes.json 包含以下字段：

字段	说明
bg-deep	页面深色背景
bg-card	卡片背景色
primary	主色调（标题、强调）
secondary	辅助色（渐变、图标）
accent	强调色（重点突出）
text-primary	主要文字颜色
text-secondary	次要文字颜色
border-glow	边框发光色
bg-gradient-*	背景渐变色（3层）
primary-shadow	主色调阴影
hover-shadow	悬停阴影
example-bg-*	示例框背景渐变
nav-*	导航按钮样式

功能检查清单（必读）

生成PPT时，必须确保包含以下所有功能，不得遗漏：

核心视觉功能

粒子浮动效果 - .particles 容器 + particleFloat 动画 + JS创建粒子
毛玻璃效果 - backdrop-filter: blur(10px) 用于卡片和导航
响应式字体 - 使用 clamp(min, val, max) 而非固定像素
背景动画 - bgFloat 动画（漂移+旋转）
弹性入场动画 - tourPop 关键帧动画

交互功能

缩略图视图 - 按 T 键或点击按钮切换，显示所有幻灯片网格
全屏功能 - 按 F 键或双击切换
帮助覆盖层 - 按 H 键显示快捷键说明
键盘导航 - 左右箭头/空格/ESC
触摸滑动 - 移动端swipe支持
鼠标滚轮 - 滚动切换页面（带节流防抖）
进度条 + 进度点 - 底部导航，进度条必须横向展示
首次气泡指引 - 首次打开PPT时显示引导气泡，提示用户操作方式（如"点击右下角箭头或按右键切换下一页"），用户关闭后使用 localStorage 记录，不再重复显示

组件样式

example-box - 示例框组件（左border强调）
tool-badge - 工具徽章组件
title-slide - 标题页专用样式（居中、大字号）
响应式布局 - @media (max-width: 900px) 断点

布局检查（重要）

幻灯片容器 - 使用 width: 100vw; height: 100vh; overflow: hidden
无滚动条 - 每页幻灯片内容不溢出，无滚动条出现
响应式字体 - 标题/正文使用 clamp() 函数
内容均衡 - 使用 Flex 垂直居中，内容过少时添加装饰图形
无大面积留白 - 内容区域合理分布，避免上下留白过多

调试验证

生成完成后，检查HTML是否包含：

<!-- 必须包含 -->
<div class="particles" id="particles"></div>
<div class="thumbnail-view" id="thumbnailView">
<div class="help-overlay" id="helpOverlay">
<button onclick="toggleThumbnailView()">  <!-- T键 -->
<button onclick="toggleFullscreen()">    <!-- F键 -->
<button onclick="toggleHelp()">          <!-- H键 -->

鼠标滚轮代码验证：

// 必须包含滚轮事件监听（带节流防抖）
document.addEventListener('wheel', (e) => {
    if (wheelTimeout) return;  // 节流
    if (e.deltaY > 0) nextSlide();
    else if (e.deltaY < 0) prevSlide();
}, { passive: true });

进度条横向展示验证：

/* 进度条必须是横向的，使用 width 而不是 height */
.progress-bar {
    width: 0%;
    height: 4px;
    transition: width 0.3s ease;
}

首次气泡指引验证： 首次打开PPT时显示引导气泡，使用 localStorage 记录用户是否已看过指引，关闭后不再重复显示。

<!-- 必须包含首次气泡指引元素 -->
<div id="guideTooltip" class="guide-tooltip">
    <div class="guide-content">
        <span class="guide-icon">?</span>
        <span class="guide-text">点击右下角箭头或按 → 键切换下一页</span>
        <button class="guide-close" onclick="closeGuide()">×</button>
    </div>
</div>

首次气泡指引 CSS 样式要求：

.guide-tooltip {
    position: fixed;
    bottom: 100px;
    right: 80px;
    z-index: 1000;
    animation: guideFadeIn 0.5s ease;
}
.guide-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glow);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.guide-icon {
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: var(--bg-deep);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.guide-text {
    font-size: clamp(12px, 1.5vw, 14px);
    color: var(--text-primary);
}
.guide-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
}
@keyframes guideFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

首次气泡指引 JS 逻辑：

// 页面加载时检查是否需要显示引导
document.addEventListener('DOMContentLoaded', function() {
    if (!localStorage.getItem('ppt_guide_shown')) {
        showGuide();
    }
});

function showGuide() {
    const tooltip = document.getElementById('guideTooltip');
    if (tooltip) tooltip.style.display = 'flex';
}

function closeGuide() {
    const tooltip = document.getElementById('guideTooltip');
    if (tooltip) tooltip.style.display = 'none';
    localStorage.setItem('ppt_guide_shown', 'true');
}

注意事项

用户必须明确提供配色方案、主题和每页内容，三者缺一不可
如果用户信息不完整，需要询问补充
代码块内容需要适当转义HTML特殊字符
中英文混排时注意字体兼容性
确保生成的HTML在不同浏览器中兼容
生成的HTML文件保存在用户指定目录或当前工作目录
重要：每次生成后必须对照功能检查清单验证，确保无遗漏
⚠️ 严格禁止：严禁在生成的HTML中引入任何外部JS或CSS（包括CDN链接、Google Fonts、Bootstrap等），必须使用纯本地化方案
进度条要求：进度条必须横向展示（使用 width 属性），不能纵向展示
首次气泡指引：首次打开PPT时显示引导气泡，使用 localStorage 记录，关闭后不再重复显示

布局核心要求（必须遵守）

浏览器分辨率兼容
- 幻灯片使用 100vw × 100vh 全屏尺寸
- 字体使用 clamp() 函数自动适配
- 响应式断点 @media (max-width: 900px)
禁止滚动条
- 幻灯片容器设置 overflow: hidden
- 内容必须完全在可视区域内
- 内容过多时拆分为多页或减小尺寸
内容均衡，无大面积留白
- 使用 Flexbox 垂直居中布局
- 内容少时添加装饰图形（渐变光晕、几何图案等）
- 避免上下留白过多
视觉补充
- 单页内容少时添加装饰性背景元素
- 可以使用 CSS 绘制圆形、菱形、线条等装饰

skills-html-ppt

Before / After 效果对比

description SKILL.md