---

name: frontend-slides description: 从零创建或通过转换 PowerPoint 文件来制作精美的、动画丰富的 HTML 演示文稿。 risk: safe source: https://github.com/zarazhangrui/frontend-slides date_added: "2026-03-07"

前端幻灯片

创建零依赖、动画丰富的 HTML 演示文稿，完全在浏览器中运行。

何时使用此技能

• 当用户要求从零创建演示文稿、幻灯片或提案时使用。
• 当用户想要将现有 PPT 或 PPTX 文件转换为基于 Web 的演示文稿时使用。
• 当设计需要精确适配视口的视觉丰富、动画化 HTML 内容时使用。

核心原则

1. 零依赖 — 单个 HTML 文件，内联 CSS/JS。无需 npm，无需构建工具。
2. 展示而非描述 — 生成视觉预览，而非抽象选择。人们通过看到来发现他们想要什么。
3. 独特设计 — 没有通用的"AI 模板感"。每个演示文稿都必须感觉是定制的。
4. 视口适配（不可妥协） — 每张幻灯片必须精确适配 100vh。幻灯片内绝不滚动。内容溢出？拆分为多张幻灯片。

设计美学

避免趋同于通用的"分布中心"输出。在前端设计中，这会产生用户所说的"AI 模板感"美学。避免这种情况：制作令人惊喜的创意、独特前端。

重点关注：

• 排版：选择美观、独特、有趣的字体。避免 Arial 和 Inter 等通用字体；选择能提升前端美感的独特字体。
• 色彩与主题：坚持统一的美学。使用 CSS 变量保持一致性。主色调配以鲜明强调色优于胆怯的均匀分布调色板。
• 动效：使用动画实现效果和微交互。HTML 优先使用纯 CSS 方案。聚焦高影响力时刻。
• 背景：营造氛围和深度，而非默认纯色。叠加 CSS 渐变，使用几何图案。

避免通用 AI 生成美学：

• 过度使用的字体族（Inter、Roboto、Arial、系统字体）
• 陈词滥调的配色方案（特别是白色背景上的紫色渐变）
• 可预测的布局和组件模式
• 缺乏上下文特色的千篇一律设计

视口适配规则

这些不变量适用于每个演示文稿的每张幻灯片：

• 每个 .slide 必须有 height: 100vh; height: 100dvh; overflow: hidden;
• 所有字体大小和间距必须使用 clamp(min, preferred, max) — 绝不使用固定 px/rem
• 内容容器需要 max-height 约束
• 图片：max-height: min(50vh, 400px)
• 高度断点必需：700px、600px、500px
• 包含 prefers-reduced-motion 支持
• 绝不直接取反 CSS 函数 — 使用 calc(-1 * clamp(...)) 代替

每张幻灯片内容密度限制

| 幻灯片类型 | 最大内容 | | ---------- | -------- | | 标题幻灯片 | 1 个标题 + 1 个副标题 + 可选标语 | | 内容幻灯片 | 1 个标题 + 4-6 个要点 或 1 个标题 + 2 段落 | | 功能网格 | 1 个标题 + 最多 6 张卡片（2x3 或 3x2） | | 代码幻灯片 | 1 个标题 + 8-10 行代码 | | 引用幻灯片 | 1 条引用（最多 3 行）+ 出处 | | 图片幻灯片 | 1 个标题 + 1 张图片（最大 60vh 高度） |

内容超出限制？拆分为多张幻灯片。绝不压缩，绝不滚动。

---

阶段 0：检测模式

确定用户需求：

• 模式 A：新建演示文稿 — 从零创建。进入阶段 1。
• 模式 B：PPT 转换 — 转换 .pptx 文件。进入阶段 4。
• 模式 C：增强 — 改进现有 HTML 演示文稿。读取、理解、增强。

模式 C：修改规则

增强现有演示文稿时，视口适配是最大风险：

1. 添加内容前： 计算现有元素，对照密度限制检查
2. 添加图片： 必须有 max-height: min(50vh, 400px)。如果幻灯片已达最大内容，拆分为两张幻灯片