frontend-slides
使用动画创建 HTML 演示文稿
非设计专业人士在创建视觉吸引力强的演示文稿时常常感到困难。本技能通过引导式视觉探索工作流程，生成具有独特样式和流畅动画的生产级 HTML 幻灯片。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“frontend-slides”。 为我的 AI 初创公司创建路演幻灯片
预期结果:
您的演示文稿已准备就绪！文件：ai-startup-pitch.html。样式：霓虹赛博风格，深色背景。12 张幻灯片，带有入场动画、进度条和导航点。使用方向键或滚动进行导航。
正在使用“frontend-slides”。 将我的 quarterly-report.pptx 转换为 Web 格式
预期结果:
已从您的 PowerPoint 中提取 15 张幻灯片。现在选择样式 - 我已创建 3 个预览选项（企业优雅、深色行政、简洁极简）。哪种美学风格符合您的需求？
安全审计
安全This skill generates HTML presentations and converts PowerPoint files. Static analysis detected external_commands, network, and filesystem patterns, but evaluation confirms these are false positives. The 'external_commands' are documentation strings showing file paths. Network access is limited to loading font resources from legitimate CDNs. Filesystem operations are for extracting PPT content. No malicious intent or security risks identified.
质量评分
你能构建什么
会议演讲幻灯片
为技术演讲或主题演讲创建视觉冲击力强的幻灯片，具有自定义动画和独特美学效果，从普通演示文稿中脱颖而出。
初创公司路演幻灯片
生成具有精致视觉设计的专业路演幻灯片，以最少的设计工作给投资者和客户留下深刻印象。
将现有 PPT 转换为 Web 格式
将传统的 PowerPoint 演示文稿转换为现代 HTML 格式，增强动画效果并提高浏览器兼容性。
试试这些提示
创建一个关于 [TOPIC] 的新 HTML 演示文稿。我需要用于 [PURPOSE]。使其具有视觉冲击力，带有流畅的动画。
我想创建具有 [VIBE] 感觉的幻灯片。生成一些样式预览，以便我可以选择合适的美学风格。
将我的 PowerPoint 文件 [FILE_PATH] 转换为具有独特样式的 HTML 演示文稿。
改进我现有的 HTML 演示文稿 [FILE_PATH]，添加更好的动画和视觉设计。
最佳实践
- 在样式设计之前先明确内容结构 - 首先了解您的信息
- 利用样式预览阶段让用户发现自己的视觉偏好
- 保持动画微妙且有目的性 - 增强体验，不要分散注意力
- 在移动设备上测试，并为较小屏幕禁用重量级效果
避免
- 避免使用通用字体选择如 Inter 或 Roboto - 努力使用独特的排版
- 不要过度使用动画 - 它们应该增强而非延迟信息传达
- 避免在白色背景上使用紫色渐变 - 这是通用的 AI 美学
- 不要跳过样式预览阶段 - 用户在完整生成之前需要视觉确认