
关于
从零创建或通过转换 PowerPoint 文件生成精美的、富含动画的 HTML 演示文稿。
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 内容时使用。
核心原则
- 零依赖 — 单个 HTML 文件,内联 CSS/JS。无需 npm,无需构建工具。
- 展示而非描述 — 生成视觉预览,而非抽象选择。人们通过看到来发现他们想要什么。
- 独特设计 — 没有通用的"AI 模板感"。每个演示文稿都必须感觉是定制的。
- 视口适配(不可妥协) — 每张幻灯片必须精确适配 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:修改规则
增强现有演示文稿时,视口适配是最大风险:
- 添加内容前: 计算现有元素,对照密度限制检查
- 添加图片: 必须有
max-height: min(50vh, 400px)。如果幻灯片已达最大内容,拆分为两张幻灯片
兼容工具
Claude CodeCursor
标签
前端开发