frontend-slides
无需设计基础，一键生成精美动画网页幻灯片。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：frontend-slides。 它的用途是：无需设计基础，一键生成精美动画网页幻灯片。 完整的 Skill 内容见：https://321skill.com/skills/frontend-slides/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我把这个产品介绍PPT转换成有科技感和流畅动画的网页幻灯片。”，它会先解析你的PPT内容，然后生成几种不同设计风格的预览图供你选择。在你选定风格后，AI会应用独特的字体、配色和动画效果，最终输出一个可以直接在浏览器中打开和演示的独立HTML文件。
介绍
Frontend Slides 解决了非设计师用户创建专业、美观的网页演示文稿的难题。它允许用户从零开始或通过转换 PowerPoint 文件，快速生成包含丰富动画效果的 HTML 幻灯片，整个过程完全在浏览器中运行，无需安装任何依赖或构建工具。
使用方式非常直观：用户只需向 AI 描述想要的幻灯片内容或直接上传 PPT/PPTX 文件，AI 便会根据一套独特的设计美学原则，生成视觉预览供用户选择，最终输出为单个独立的 HTML 文件。
这个技能特别适合演讲者、教师、创业者、市场人员以及任何需要快速制作高质量演示文稿但又缺乏设计技能或时间的非专业人士。
与同类网页幻灯片工具（如 Reveal.js、Slidev）相比，Frontend Slides 的核心区别在于其“展示而非告知”的设计哲学。它通过生成具体的视觉预览来引导用户发现自己的审美偏好，而非让用户在一堆抽象的选项（如字体、配色）中做选择，从而降低了决策门槛，并确保了最终产出具有独特、非模板化的设计感。
核心特点
采用“展示而非告知”的交互方式，通过生成具体视觉预览而非提供抽象选项来引导设计，有效避免了“AI生成式审美疲劳”；同时严格遵循16:9固定画布和非响应式布局原则，确保幻灯片在不同设备上视觉一致性优先。
注意事项
不适合需要根据手机等小屏幕设备自动重新排版内容的响应式幻灯片场景。
常见问题
如何将现有的PPT转换成网页幻灯片？
直接向AI提供你的PPT/PPTX文件，AI会解析内容并应用设计美学，生成一个独立的HTML文件。
生成的幻灯片能在手机上正常播放吗？
可以播放，但为了保持设计一致性，幻灯片会整体缩放以适应屏幕，不会为手机重新布局内容，可能会产生黑边。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/frontend-slides/raw/index.md 读取 frontend-slides 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/frontend-slides/raw/index.md（查看排版版本）