菜单
从头开始创建令人惊叹、动画丰富的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户想要构建演示文稿、将 PPT/PPTX 转换为网页版，或为演讲/路演创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择来发现他们的审美。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/xu-xiang/everything-claude-code-zh --skill frontend-slides命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | frontend-slides |
| description | 从头开始创建令人惊叹、动画丰富的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户想要构建演示文稿、将 PPT/PPTX 转换为网页版，或为演讲/路演创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择来发现他们的审美。 |
| origin | ECC |
创建完全在浏览器中运行、零依赖、动画丰富的 HTML 演示文稿。
受 zarazhangrui 作品中展示的视觉探索方法的启发（致谢：@zarazhangrui）。
.ppt 或 .pptx 幻灯片转换为 HTML 演示文稿在生成之前，请阅读 STYLE_PRESETS.md 以了解视口安全（Viewport-safe）的 CSS 基础、密度限制、预设目录和 CSS 注意事项。
选择一条路径：
.ppt 或 .pptx仅询问最少需要的信息：
如果用户有内容，请他们在开始设计风格前粘贴内容。
默认采用视觉探索方式。
如果用户已经知道所需的预设，跳过预览并直接使用。
否则：
.ecc-design/slide-previews/ 中生成 3 个单页幻灯片预览文件。在将氛围映射到风格时，请参考 STYLE_PRESETS.md 中的预设指南。
输出：
presentation.html[presentation-name].html仅当幻灯片组包含提取的或用户提供的图像时，才使用 assets/ 文件夹。
必要结构：
STYLE_PRESETS.md 的视口安全 CSS 基础将其视为硬性门槛。
规则：
.slide 必须使用 height: 100vh; height: 100dvh; overflow: hidden;clamp() 缩放使用 STYLE_PRESETS.md 中的密度限制和强制性 CSS 块。
在以下尺寸检查完成的幻灯片组：
如果可以使用浏览器自动化工具，请用它来验证没有幻灯片溢出且键盘导航正常工作。
在交付时：
为当前操作系统使用正确的打开方式：
open file.htmlxdg-open file.htmlstart "" file.html对于 PowerPoint 转换：
python-pptx 的 python3 来提取文本、图像和备注。python-pptx 不可用，询问是否安装它，或者退回到手动/基于导出的工作流。保持转换跨平台。当 Python 可以胜任时，不要依赖仅限 macOS 的工具。
包含：
main, section, nav）prefers-reduced-motion除非用户明确要求更密集的幻灯片且仍保持可读性，否则使用以下最大限制：
| 幻灯片类型 | 限制 |
|---|---|
| 标题（Title） | 1 个主标题 + 1 个副标题 + 可选口号 |
| 内容（Content） | 1 个标题 + 4-6 个项目符号或 2 个短段落 |
| 功能网格（Feature grid） | 最多 6 个卡片 |
| 代码（Code） | 最多 8-10 行 |
| 引言（Quote） | 1 段引言 + 署名 |
| 图像（Image） | 1 张受视口约束的图像 |
-clamp(...)frontend-patterns：用于幻灯片组周围的组件和交互模式liquid-glass-design：当演示文稿有意借用 Apple 玻璃拟态审美时使用e2e-testing：如果需要对最终幻灯片组进行自动化浏览器验证