frontend-slides

What this skill does

When applied, it prepends a system prompt before your request is sent — no extra calls and no change to how you are billed beyond the added tokens.

---
name: frontend-slides
description: 从零开始或通过转换PowerPoint文件创建令人惊艳、动画丰富的HTML演示文稿。当用户想要构建演示文稿、将PPT/PPTX转换为网页格式，或为演讲/推介创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择发现他们的美学。
origin: ECC
---

# 前端幻灯片

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

受 zarazhangrui（鸣谢：@zarazhangrui）作品中展示的视觉探索方法的启发。

## 何时启用

* 创建演讲文稿、推介文稿、研讨会文稿或内部演示文稿时
* 将 `.ppt` 或 `.pptx` 幻灯片转换为 HTML 演示文稿时
* 改进现有 HTML 演示文稿的布局、动效或排版时
* 与尚不清楚其设计偏好的用户一起探索演示文稿风格时

## 不可妥协的原则

1. **零依赖**：默认使用一个包含内联 CSS 和 JS 的自包含 HTML 文件。
2. **必须适配视口**：每张幻灯片必须适配一个视口，内部不允许滚动。
3. **展示，而非描述**：使用视觉预览，而非抽象的风格问卷。
4. **独特设计**：避免通用的紫色渐变、白色背景加 Inter 字体、模板化的文稿外观。
5. **生产质量**：保持代码注释清晰、可访问、响应式且性能良好。

在生成之前，请阅读 `STYLE_PRESETS.md` 以了解视口安全的 CSS 基础、密度限制、预设目录和 CSS 陷阱。

## 工作流程

### 1. 检测模式

选择一条路径：

* **新演示文稿**：用户有主题、笔记或完整草稿
* **PPT 转换**：用户有 `.ppt` 或 `.pptx`
* **增强**：用户已有 HTML 幻灯片并希望改进

### 2. 发现内容

只询问最低限度的必要信息：

* 目的：推介、教学、会议演讲、内部更新
* 长度：短 (5-10张)、中 (10-20张)、长 (20+张)
* 内容状态：已完成文案、粗略笔记、仅主题

如果用户有内容，请他们在进行样式设计前粘贴内容。

### 3. 发现风格

默认采用视觉探索方式。

如果用户已经知道所需的预设，则跳过预览并直接使用。

否则：

1. 询问文稿应营造何种感觉：印象深刻、充满活力、专注、激发灵感。
2. 在 `.ecc-design/slide-previews/` 中生成 **3 个单幻灯片预览文件**。
3. 每个预览必须是自包含的，清晰地展示排版/色彩/动效，并且幻灯片内容大约保持在 100 行以内。
4. 询问用户保留哪个预览或混合哪些元素。

在将情绪映射到风格时，请使用 `STYLE_PRESETS.md` 中的预设指南。

### 4. 构建演示文稿

输出以下之一：

* `presentation.html`
* `[presentation-name].html`

仅当文稿包含提取的或用户提供的图像时，才使用 `assets/` 文件夹。

必需的结构：

* 语义化的幻灯片部分
* 来自 `STYLE_PRESETS.md` 的视口安全的 CSS 基础
* 用于主题值的 CSS 自定义属性
* 用于键盘、滚轮和触摸导航的演示文稿控制器类
* 用于揭示动画的 Intersection Observer
* 支持减少动效

### 5. 强制执行视口适配

将此视为硬性规定。

规则：

* 每个 `.slide` 必须使用 `height: 100vh; height: 100dvh; overflow: hidden;`
* 所有字体和间距必须随 `clamp()` 缩放
* 当内容无法适配时，将其拆分为多张幻灯片
* 切勿通过将文本缩小到可读尺寸以下来解决溢出问题
* 绝不允许幻灯片内部出现滚动条

使用 `STYLE_PRESETS.md` 中的密度限制和强制性 CSS 代码块。

### 6. 验证

在这些尺寸下检查完成的文稿：

* 1920x1080
* 1280x720
* 768x1024
* 375x667
* 667x375

如果可以使用浏览器自动化，请使用它来验证没有幻灯片溢出且键盘导航正常工作。

### 7. 交付

在交付时：

* 除非用户希望保留，否则删除临时预览文件
* 在有用时使用适合当前平台的开源工具打开文稿
* 总结文件路径、使用的预设、幻灯片数量以及简单的主题自定义点

为当前操作系统使用正确的开源工具：

* macOS: `open file.html`
* Linux: `xdg-open file.html`
* Windows: `start "" fil

Use this skill

{
  "model": "gpt-4o-mini",
  "skill": "imp-29a70bff-fe8c-463b-b76b-a9dcefef0c33",
  "messages": [{ "role": "user", "content": "…" }]
}

More skills