openclaw-slides

📊 零依赖HTML演示,专业动画一键生成

设计榜 #42

生成零依赖单文件HTML演示文稿,支持12种专业预设风格、PPT转换及滚动触发动画,无需构建工具即可离线运行。

收藏
13.6k
安装
3.8k
版本
2.0.0
CLS 安全扫描中
预计需要 3 分钟...

使用说明

核心用法

OpenClaw Slides 是一个专注于创建独立HTML演示文稿的技能,提供三种工作模式:

Mode A — 新建演示:从零构建动画丰富的HTML幻灯片,通过对话收集用途、长度、内容、图片需求等信息,选择12种预设风格(Neon Cyber、Swiss Modern、Paper & Ink等),生成单文件无依赖HTML。

Mode B — PPT转换:使用 python-pptx 库提取 .ppt/.pptx 文件的文本、图片和备注,转换为Web幻灯片格式。

Mode C — 增强现有:读取现有HTML文件进行优化升级,严格保持视口适配。

技术架构特点

  • 零依赖单文件:无npm、无构建工具、无框架,10年后仍可渲染
  • 强制视口适配:每页严格填满视口,禁止内部滚动,通过 clamp() 响应式字体和 100dvh 现代单位实现
  • 12种风格预设:涵盖商务、科技、创意、复古等场景,使用 Fontshare 字体而非通用系统字体
  • 完整交互:键盘导航(方向键/空格)、触摸滑动、滚轮翻页、进度条、导航点
  • 可选在线编辑:按 E 键或悬停热区启用 contenteditable 编辑,自动保存至 localStorage

显著优点

1. 极致便携性:单HTML文件可邮件发送、离线打开、任意浏览器运行
2. 专业视觉设计:预设风格由设计系统驱动,避免"蓝白渐变+Inter字体"的同质化

3. PPT生态兼容:保留现有PowerPoint工作流,转换后获得Web交互性

4. 性能优先:CSS动画+Intersection Observer,无React/Vue运行时开销

5. 可访问性:支持 prefers-reduced-motion、语义化HTML、ARIA标签

潜在局限

  • 内容密度受限:强制视口适配导致单页信息量有限,复杂报告需拆分为多页
  • 高级动画天花板:纯CSS/JS实现,无法达到 After Effects 或专用演示软件的运动图形复杂度
  • PPT转换 fidelity:复杂SmartArt、动画、过渡效果会丢失,仅保留文本和图片
  • 协作编辑缺失:localStorage 保存非实时协作,团队场景需额外同步机制
  • 样式定制门槛:深度定制需直接修改CSS变量,无可视化主题编辑器

适合人群

  • 需要快速产出高颜值幻灯片的创业者、投资人、产品经理
  • 追求技术极简主义的开发者演讲者
  • 希望逃离PowerPoint/Keynote生态的Web原生用户
  • 需要将现有PPT一键现代化的企业培训部门

常规风险

| 风险类型 | 说明 |
|---------|------|
| 依赖安装 | Mode B需Python环境及 `python-pptx`、`Pillow`,企业环境可能受限 |
| 图片版权 | 用户上传图片的合规性由用户自行负责 |
| 浏览器兼容 | 现代CSS特性(`dvh`、`clamp`、`scroll-snap`)需近3年浏览器版本 |
| 文件体积 | 大量图片嵌入或Base64编码可能导致单文件过大 |

openclaw-slides 内容

references文件夹
手动下载zip · 24.3 kB
STYLE_PRESETS.mdtext/markdown
请选择文件