Frontend Slides

在演示文稿制作中，我们常陷入两难：要么花费数小时调整 PPT 的对齐和配色，要么套用千篇一律的在线模板，最终呈现出一种“AI 生成的平庸感”——白底、紫色渐变、毫无个性的图标。

对于开发者和技术人员而言，还有一个更深层的痛点：依赖即债务。一个基于复杂框架（如 React + Webpack）构建的幻灯片项目，可能在两年后因依赖库过时而无法运行。

Frontend Slides 是一个Claude Code 技能，它不仅能将现有的 PowerPoint 文件转换为精美的网页演示文稿，更能让非设计人员通过“视觉选择”而非“代码编写”，创造出零依赖、生产级质量的单文件 HTML 幻灯片。

核心理念：展示，而非讲述

Frontend Slides 的设计哲学非常明确：

1. 你无需成为设计师：你只需要对看到的视觉效果做出反应。
2. 拒绝通用美学：精心策划的独特风格，彻底告别“白底紫渐变”的 AI 默认审美。
3. 零依赖即永恒：输出的只是一个包含内联 CSS/JS 的单一 HTML 文件。无需 npm，无需构建工具，无需框架。十年后，它依然能在任何浏览器中完美运行。
4. 代码即善意：生成的代码注释良好、结构清晰，方便未来自行定制。

核心功能亮点

1. 视觉风格探索：无法描述？那就直接选

你是否曾因为无法用语言描述想要的“高级感”或“科技感”而苦恼？Frontend Slides 采用“展示，而非讲述”的工作流：

• 它会根据你的内容主题，先生成 3 种不同视觉风格的预览。
• 你只需像挑选照片一样，点击选择最心仪的一款。
• 系统随即基于该风格生成完整的演示文稿。

2. PPT 无缝转换：保留内容，重塑灵魂

拥有现成的 .pptx 文件？没问题。

• 该技能能自动提取 PPT 中的所有文本、图片和备注。
• 在确认提取内容无误后，你可以为其套用上文提到的精选视觉风格。
• 最终输出为一个功能完备的 HTML 文件，既保留了原始素材，又拥有了网页端的流畅交互。

3. 生产级质量与交互

生成的不仅仅是静态页面，而是具备完整交互逻辑的演示系统：

• 多端导航：支持键盘方向键、空格键、鼠标滚轮、触屏滑动及点击导航圆点。
• 动效系统：内置滚动触发动画（Reveal Animations），支持“减少动效”模式以照顾无障碍需求。
• 响应式设计：完美适配从手机到大屏幕投影的各种分辨率。
• 进度反馈：内置进度条，让观众清晰掌握演讲节奏。

精选风格库：拒绝平庸

Frontend Slides 内置了 10 种经过精心策划的风格预设，覆盖多种场景：

快速上手指南

前置要求

• 已安装 Claude Code CLI。
• （可选）若需转换 PPT，需安装 Python 及 python-pptx 库 (pip install python-pptx)。

安装步骤

只需两条命令，即可将该技能集成到你的环境中：

# 1. 创建技能目录
mkdir -p ~/.claude/skills/frontend-slides

# 2. 复制技能文件（需先下载 SKILL.md 和 STYLE_PRESETS.md）
cp SKILL.md ~/.claude/skills/frontend-slides/
cp STYLE_PRESETS.md ~/.claude/skills/frontend-slides/

使用场景

场景 A：从零创建新演示文稿

在 Claude Code 中输入 /frontend-slides，然后告诉它你的需求：

“我想为我的 AI 初创公司创建一个推介文稿，内容包含市场分析、产品架构和团队介绍。”

系统将执行：

1. 引导你补充具体内容细节。
2. 询问你想要传达的情感基调（如：令人印象深刻、兴奋、平静）。
3. 生成 3 种风格预览供你选择。
4. 基于你的选择，生成完整的单文件 HTML，并自动在浏览器中打开。

场景 B：转换现有 PPT

在 Claude Code 中输入 /frontend-slides，然后指令：

“将我的 presentation.pptx 转换为网页幻灯片。”

系统将执行：

1. 解析 PPTX 文件，提取所有文本、图片和备注。
2. 展示提取结果供你确认。
3. 让你选择一种视觉风格。
4. 生成包含所有原始素材的 HTML 演示文稿。

为什么选择单文件 HTML？

在前端工程化日益复杂的今天，Frontend Slides 反其道而行之，坚持输出单文件 HTML。这并非倒退，而是一种深思熟虑的“长期主义”：

• 可移植性极强：通过邮件发送、U 盘拷贝或在任何服务器上托管，只需一个文件。
• 无维护负担：没有 node_modules 黑洞，没有版本冲突，没有构建脚本失效的风险。
• 完全可控：代码完全内联且开源，你可以随时用记事本打开修改任何细节。