前端幻灯片技能

创建零依赖、动画丰富的 HTML 演示文稿，完全在浏览器中运行。此技能帮助非设计师通过视觉探索（"展示，而非告知"）发现自己的审美偏好，然后生成生产质量的幻灯片。

核心理念

1. 零依赖 — 单文件 HTML，内联 CSS/JS。无需 npm，无需构建工具。
2. 展示，而非告知 — 人们在看到之前不知道自己想要什么。生成视觉预览，而非抽象选择。
3. 独特设计 — 避免通用的"AI 生成"美学。每一份演示文稿都应该是定制打造的。
4. 生产质量 — 代码应注释充分、可访问且高性能。

阶段 0：检测模式

首先，确定用户想要什么：

模式 A：新建演示文稿

• 用户希望从零创建幻灯片
• 进入阶段 1（内容发现）

模式 B：PPT 转换

• 用户有 PowerPoint 文件（.ppt, .pptx）需要转换
• 进入阶段 4（PPT 提取）

模式 C：改进现有演示文稿

• 用户有 HTML 演示文稿并希望改进
• 读取现有文件，理解结构，然后进行改进

阶段 1：内容发现（新建演示文稿）

在设计之前，先了解内容。通过 AskUserQuestion 进行询问：

步骤 1.1：演示文稿背景

问题 1：用途

• 标题："用途"
• 问题："这份演示文稿的用途是什么？"
• 选项：
  • "路演材料" — 向投资者/客户推销想法、产品或公司
  • "教学/教程" — 解释概念、操作指南、教育内容
  • "会议演讲" — 在活动中演讲、技术分享、主题演讲
  • "内部演示" — 团队更新、战略会议、公司动态

问题 2：幻灯片数量

• 标题："长度"
• 问题："大约需要多少张幻灯片？"
• 选项：
  • "短（5-10）" — 快速路演、闪电演讲
  • "中（10-20）" — 标准演示文稿
  • "长（20+）" — 深入讲解、综合演讲

问题 3：内容

• 标题："内容"
• 问题："你的内容已经准备好了，还是需要帮助组织？"
• 选项：
  • "我已经准备好了所有内容" — 只需要设计演示文稿
  • "我有粗略笔记" — 需要帮助组织成幻灯片
  • "我只有一个主题" — 需要帮助创建完整大纲

如果用户有内容，请他们分享（文字、要点、图片等）。

阶段 2：风格发现（视觉探索）

关键：这是"展示，而非告知"阶段。

大多数人无法用语言表达设计偏好。我们不是问"你想要极简还是大胆？"，而是生成迷你预览让他们做出反应。

步骤 2.1：情绪选择

问题 1：感受

• 标题："氛围"
• 问题："你希望观众看到你的幻灯片时有什么感受？"
• 选项：
  • "印象深刻/自信" — 专业、可信、这个团队知道自己在做什么
  • "兴奋/充满活力" — 创新、大胆、这就是未来
  • "平静/专注" — 清晰、深思熟虑、易于理解
  • "受到启发/深受感动" — 情感化、叙事性、令人难忘
• multiSelect：true（最多可选 2 项）

步骤 2.2：生成风格预览

根据他们的情绪选择，在临时目录中生成 3 种不同的风格预览 作为迷你 HTML 文件。每个预览应是一张标题幻灯片，展示：

• 排版（字体选择、标题/正文层次）
• 颜色调色板（背景、强调色、文字颜色）
• 动画风格（元素如何进入）
• 整体审美感受

基于情绪考虑的风格（选 3 种）：

重要：永远不要使用这些通用模式：

• 白色背景上的紫色渐变
• Inter、Roboto 或系统字体
• 标准的蓝色主色调
• 可预测的英雄布局

取而代之，使用独特的选择：

• 独特的字体配对（Clash Display, Satoshi, Cormorant Garamond, DM Sans 等）
• 有凝聚力的个性化色彩主题
• 氛围背景（渐变、微妙图案、深度）
• 标志性动画时刻

步骤 2.3：展示预览

在 .claude-design/slide-previews/ 中创建预览：

.claude-design/slide-previews/
├── style-a.html   # 第一种风格选项
├── style-b.html   # 第二种风格选项
├── style-c.html   # 第三种风格选项
└── assets/        # 共享资源

每个预览文件应：

• 自包含（内联 CSS/JS）
• 展示美学的单张"标题幻灯片"
• 有动画以演示运动风格
• 约 50-100 行，而非完整演示文稿

向用户展示：

我已为你创建了 3 种风格预览供你比较：

**风格 A：[名称]** — [一句话描述]
**风格 B：[名称]** — [一句话描述]
**风格 C：[名称]** — [一句话描述]

打开每个文件查看实际效果：
- .claude-design/slide-previews/style-a.html
- .claude-design/slide-previews/style-b.html
- .claude-design/slide-previews/style-c.html

看一看，告诉我：
1. 哪种风格最打动你？
2. 你喜欢它的哪些方面？
3. 有什么想改变的吗？

然后使用 AskUserQuestion：

问题：选择你的风格

• 标题："风格"
• 问题："你更喜欢哪种风格预览？"
• 选项：
  • "风格 A：[名称]" — [简要描述]
  • "风格 B：[名称]" — [简要描述]
  • "风格 C：[名称]" — [简要描述]
  • "混合元素" — 结合不同风格的方面

如果选择"混合元素"，询问具体需求。

阶段 3：生成演示文稿

现在基于以下内容生成完整的演示文稿：

• 阶段 1 的内容
• 阶段 2 的风格

文件结构

对于单份演示文稿：

presentation.html    # 自包含演示文稿
assets/              # 图片（如有）

对于包含多份演示文稿的项目：

[presentation-name].html
[presentation-name]-assets/

HTML 架构

所有演示文稿遵循以下结构：

    
    
    

    
    

    


    
    


    
    

    
    

        
演示文稿标题
        
副标题或作者
    

    

        
幻灯片标题
        
内容...
    

    

    

必需的 JavaScript 功能

每份演示文稿应包括：

1. SlidePresentation 类 — 主控制器

   • 键盘导航（方向键、空格键）
   • 触摸/滑动支持
   • 鼠标滚轮导航
   • 进度条更新
   • 导航点

2. Intersection Observer — 用于滚动触发的动画

   • 当幻灯片进入视口时添加 .visible 类
   • 高效触发 CSS 动画

3. 可选增强（基于风格）：

   • 带轨迹的自定义光标
   • 粒子系统背景（canvas）
   • 视差效果
   • 悬停 3D 倾斜
   • 磁性按钮
   • 计数动画

代码质量要求

注释： 每个部分应有清晰注释，说明：

• 它做什么
• 为什么存在
• 如何修改

/* ===========================================
   自定义光标
   创建跟随鼠标的样式化光标，带轨迹效果。
   - 使用 lerp（线性插值）实现平滑移动
   - 悬停在交互元素上时变大
   =========================================== */
class CustomCursor {
    constructor() {
        // ...
    }
}

可访问性：

• 语义化 HTML（
  ,
• 键盘导航正常工作
• 需要时使用 ARIA 标签
• 减少运动支持

@media (prefers-reduced-motion: reduce) {
    .reveal {
        transition: opacity 0.3s ease;
        transform: none;
    }
}

响应式：

• 移动端友好（单列、调整间距）
• 在移动端禁用重型效果
• 触控友好交互

@media (max-width: 768px) {
    .nav-dots,
    .keyboard-hint {
        display: none;
    }
}

阶段 4：PPT 转换

转换 PowerPoint 文件时：

步骤 4.1：提取内容

使用 Python 和 python-pptx 提取：

from pptx import Presentation
from pptx.util import Inches, Pt
import json
import os
import base64

def extract_pptx(file_path, output_dir):
    """
    从 PowerPoint 文件中提取所有内容。
    返回包含幻灯片、文本和图片的 JSON 结构。
    """
    prs = Presentation(file_path)
    slides_data = []

    # 创建资源目录
    assets_dir = os.path.join(output_dir, 'assets')
    os.makedirs(assets_dir, exist_ok=True)

    for slide_num, slide in enumerate(prs.slides):
        slide_data = {
            'number': slide_num + 1,
            'title': '',
            'content': [],
            'images': [],
            'notes': ''
        }

        for shape in slide.shapes:
            # 提取标题
            if shape.has_text_frame:
                if shape == slide.shapes.title:
                    slide_data['title'] = shape.text
                else:
                    slide_data['content'].append({
                        'type': 'text',
                        'content': shape.text
                    })

            # 提取图片
            if shape.shape_type == 13:  # 图片
                image = shape.image
                image_bytes = image.blob
                image_ext = image.ext
                image_name = f"slide{slide_num + 1}_img{len(slide_data['images']) + 1}.{image_ext}"
                image_path = os.path.join(assets_dir, image_name)

                with open(image_path, 'wb') as f:
                    f.write(image_bytes)

                slide_data['images'].append({
                    'path': f"assets/{image_name}",
                    'width': shape.width,
                    'height': shape.height
                })

        # 提取备注
        if slide.has_notes_slide:
            notes_frame = slide.notes_slide.notes_text_frame
            slide_data['notes'] = notes_frame.text

        slides_data.append(slide_data)

    return slides_data

步骤 4.2：确认内容结构

将提取的内容呈现给用户：

我已从你的 PowerPoint 中提取了以下内容：

**幻灯片 1：[标题]**
- [内容摘要]
- 图片：[数量]

**幻灯片 2：[标题]**
- [内容摘要]
- 图片：[数量]

...

所有图片已保存到 assets 文件夹。

看起来是否正确？我可以继续进行风格选择吗？

步骤 4.3：风格选择

进入阶段 2（风格发现），同时考虑提取的内容。

步骤 4.4：生成 HTML

将提取的内容转换为所选风格，保留：

• 所有文本内容
• 所有图片（从 assets 文件夹引用）
• 幻灯片顺序
• 所有演讲者备注（作为 HTML 注释或单独文件）

阶段 5：交付

最终输出

演示文稿完成后：

1. 清理临时文件

   • 如果存在则删除 .claude-design/slide-previews/

2. 打开演示文稿

   • 使用 open [filename].html 在浏览器中启动

3. 提供摘要

你的演示文稿已准备就绪！

📁 文件：[filename].html
🎨 风格：[风格名称]
📊 幻灯片：[数量]

**导航：**
- 方向键（← →）或空格键导航
- 滚动/滑动也可用
- 点击右侧的点跳转到对应幻灯片

**自定义：**
- 颜色：在顶部查找 `:root` CSS 变量
- 字体：更改 Fontshare/Google Fonts 链接
- 动画：修改 `.reveal` 类的时间设定

是否需要我进行任何调整？

风格参考：效果→感受映射

使用此指南将动画与预期感受匹配：

戏剧性/电影感

• 慢速淡入（1-1.5s）
• 大比例过渡（0.9 → 1）
• 深色背景配聚光灯效果
• 视差滚动
• 全出血图片

科技感/未来感

• 霓虹发光效果（带强调色的 box-shadow）
• 粒子系统（canvas 背景）
• 网格图案
• 强调部分使用等宽字体
• 故障或文字打乱效果
• 青色、洋红色、电光蓝调色盘

有趣/友好

• 弹性缓动（弹簧物理）
• 圆角（大半径）
• 柔和或明亮色彩
• 浮动/上下摆动动画
• 手绘或插画元素

专业/商务

• 微妙、快速的动画（200-300ms）
• 干净的无衬线字体
• 海军蓝、石板灰或炭灰背景
• 精确的间距和对齐
• 极简装饰元素
• 数据可视化重点

宁静/极简

• 非常缓慢、微妙的运动
• 大面积的留白
• 柔和调色盘
• 衬线排版
• 充裕的内边距
• 内容聚焦，无干扰

编辑/杂志风格

• 强烈的排版层次
• 引用和标注
• 图文互动
• 打破网格的布局
• 衬线标题，无衬线正文
• 黑白加一个强调色

动画模式参考

入场动画

/* 淡入 + 上滑（最常见） */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--ease-out-expo),
                transform 0.6s var(--ease-out-expo);
}

.visible .reveal {
    opacity: 1;
    transform: translateY(0);
}

/* 缩放进入 */
.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
}

/* 从左滑入 */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
}

/* 模糊进入 */
.reveal-blur {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.8s, filter 0.8s var(--ease-out-expo);
}

背景效果

/* 渐变网格 */
.gradient-bg {
    background:
        radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.2) 0%, transparent 50%),
        var(--bg-primary);
}

/* 噪点纹理 */
.noise-bg {
    background-image: url("data:image/svg+xml,..."); /* 内联 SVG 噪点 */
}

/* 网格图案 */
.grid-bg {
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

交互效果

/* 悬停 3D 倾斜 */
class TiltEffect {
    constructor(element) {
        this.element = element;
        this.element.style.transformStyle = 'preserve-3d';
        this.element.style.perspective = '1000px';
        this.bindEvents();
    }

    bindEvents() {
        this.element.addEventListener('mousemove', (e) => {
            const rect = this.element.getBoundingClientRect();
            const x = (e.clientX - rect.left) / rect.width - 0.5;
            const y = (e.clientY - rect.top) / rect.height - 0.5;

            this.element.style.transform = `
                rotateY(${x * 10}deg)
                rotateX(${-y * 10}deg)
            `;
        });

        this.element.addEventListener('mouseleave', () => {
            this.element.style.transform = 'rotateY(0) rotateX(0)';
        });
    }
}

故障排查

常见问题

字体未加载：

• 检查 Fontshare/Google Fonts URL
• 确保 CSS 中的字体名称匹配

动画未触发：

• 验证 Intersection Observer 是否运行
• 检查 .visible 类是否被添加

滚动捕捉无效：

• 确保 html/body 上有 scroll-snap-type
• 每张幻灯片需要 scroll-snap-align: start

移动端问题：

• 在 768px 断点禁用重型效果
• 测试触摸事件
• 减少粒子数量或禁用 canvas

性能问题：

• 谨慎使用 will-change
• 优先使用 transform 和 opacity 动画
• 节流滚动/鼠标移动处理器

相关技能

• learn — 为演示文稿生成 FORZARA.md 文档
• frontend-design — 用于更复杂的交互页面（超出幻灯片范围）
• design-and-refine:design-lab — 用于迭代组件设计

示例会话流程

1. 用户："我想为我的 AI 初创公司创建一个路演材料"
2. 技能询问用途、长度、内容
3. 用户分享他们的要点和关键信息
4. 技能询问期望感受（印象深刻 + 兴奋）
5. 技能生成 3 种风格预览
6. 用户选择风格 B（霓虹赛博），要求更深的背景
7. 技能生成包含所有幻灯片的完整演示文稿
8. 技能在浏览器中打开演示文稿
9. 用户请求调整特定幻灯片
10. 最终演示文稿交付

转换会话流程

1. 用户："将我的 slides.pptx 转换为网页演示文稿"
2. 技能从 PPT 中提取内容和图片
3. 技能向用户确认提取的内容
4. 技能询问期望感受/风格
5. 技能生成风格预览
6. 用户选择一种风格
7. 技能生成带有保留资源的 HTML 演示文稿
8. 最终演示文稿交付