用 AI 将 PPT 转换为极具设计感的 HTML 动态演示文稿

解决传统 PPT 风格呆板、难以在网页端流畅展示的问题：通过 AI 构建零依赖、动画丰富且严格适配视口的 HTML 幻灯片，支持从零创建或直接将 .pptx 文件转换为现代化网页演示稿。

为什么需要这个技能

传统的 PPT 在分享时需要安装特定软件，且视觉风格往往受限于模板，容易产生“AI 模版感”或陈旧感。

本技能通过前端技术实现演示文稿，具有以下核心优势：

零依赖：所有 CSS 和 JS 均内联在单个 HTML 文件中，无需安装 npm 或构建工具，直接用浏览器打开即可。
极致适配：强制执行 100vh 视口适配规则，确保内容在任何屏幕上都不会出现滚动条，像原生 App 一样流畅。
设计感突破：摒弃 Arial 等通用字体，采用动态排版、CSS 变量主题和精巧的 staggered 动画，提升演示的专业度和视觉冲击力。

适用场景

产品路演 (Pitch Deck)：需要向投资人展示具有现代感、高冲击力的视觉方案。
技术分享/教程：将代码片段与讲解文本结合，在浏览器中直接演示。
PPT 现代化改造：将现有的 .pptx 文件快速迁移至 Web 端，以便于在线分发和访问。
极简演示：不需要复杂软件，仅凭一个 HTML 文件即可完成高质量演讲。

核心工作流

需求探测：AI 判定是“从零创建”、“PPT 转换”还是“现有 HTML 增强”。
内容挖掘与评估：
- 如果有图片，AI 会先扫描图片内容，根据图片主题反向设计幻灯片结构。
- 确定演示目的（如：教学、路演）和预估篇幅。
风格探索（Show, Don't Tell）：
- AI 不会询问你喜欢什么颜色，而是基于你选择的“情绪（Vibe）”直接生成 3 个不同风格的单页 HTML 预览。
- 你通过视觉对比选择最心仪的一款。
严格生成：
- 引入 viewport-base.css 确保 100% 视口填充。
- 遵循内容密度限制（例如：内容页最多 4-6 个要点），若内容过多，AI 将自动将其拆分为多页。
交付与微调：生成最终文件，并支持开启“浏览器内编辑模式”，允许你直接在页面上修改文字并保存。

下载和安装

下载 frontend-slides 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐