一份开箱即用的 WorkBuddy AI 办公入门课件 —— 单文件 HTML、浏览器直接翻页、杂志风视觉设计
A ready-to-use, browser-based flip presentation for learning the WorkBuddy AI office assistant.
这是一份面向办公人群的 WorkBuddy AI 助手入门教学幻灯片,用于 AI 普及培训、企业内训、公开课分享。整份课件是单个 HTML 文件,无需安装任何软件,用浏览器打开即可横向翻页演示,适合投屏授课、群发自学、扫码浏览。
视觉上采用「电子杂志 × 电子墨水」风格(靛蓝瓷配色),带 WebGL 流体背景、章节幕封、数据大字报等版式,比传统 PPTX 更有质感。
🌊 在线预览:https://hope0719.github.io/workbuddy-office-tutorial/
- 🖥️ 零门槛演示 —— 单文件 HTML,双击即开,无需 PowerPoint / Keynote
- 📱 全端适配 —— 电脑、平板、手机浏览器均可流畅翻页
- 🎨 杂志风设计 —— 靛蓝瓷主题、衬线标题、WebGL 流体背景,视觉高级
- ⌨️ 丰富交互 —— ← → 翻页、滚轮/触屏滑动、
ESC看索引、B切静态模式(断网/低功耗可用) - 🖼️ AI 生成配图 —— 内置 3 张编辑感杂志风配图,风格统一
- 📦 开箱即用 —— 内容完整的 13 页课件,可直接授课或二次修改
| # | 页面 | 内容 |
|---|---|---|
| 1 | 封面 | WorkBuddy · 你的全能 AI 办公搭子 |
| 2-3 | 认识 WorkBuddy | 是什么 + 核心定位 |
| 4 | 六大核心能力 | 图标卡片总览 |
| 5 | 效率数据 | 8× 效率 / 5min 周报 / 0 代码门槛 |
| 6-8 | 核心办公能力 | 文档创作、写作 vs 数据分析、多模态生成 |
| 9 | 打通办公生态 | 飞书 / 腾讯文档 / 微云 / GitHub / 会议 / 邮箱 |
| 10 | AI 陪你的一天 | 可逐步点亮的时间线 |
| 11 | 提示词技巧 | 5 条实用心法 |
| 12-13 | 金句 + 五步上手 | 收尾行动页 |
方式一:直接在线看(推荐)
👉 打开 https://hope0719.github.io/workbuddy-office-tutorial/
方式二:本地运行
git clone https://github.com/hope0719/workbuddy-office-tutorial.git
cd workbuddy-office-tutorial
# 直接双击 index.html,或起一个本地服务器:
python3 -m http.server 8080
# 浏览器打开 http://localhost:8080方式三:Fork 后改成你自己的课件
编辑 index.html 里的 <section class="slide"> 内容即可,改完 git push,GitHub Pages 会自动更新。
.
├── index.html # 课件主文件(所有内容 + 样式 + 脚本)
├── assets/
│ └── motion.min.js # 动画库本地兜底(离线可用)
├── images/ # AI 生成的杂志风配图
│ ├── 03-concept.png
│ ├── 06-doc.png
│ └── 08-multimodal.png
└── README.md
- AI 培训讲师 —— 直接拿来做公开课 / 内训课件
- 企业 HR / 数字化团队 —— 员工 AI 办公普及
- 办公人群 —— 自学 WorkBuddy 快速上手
- 想学网页 PPT 制作的人 —— 参考单文件 HTML 翻页实现
如果这份课件帮到了你,点一个 Star 🌟 是对作者最大的鼓励,也能让更多需要的人搜到它!
👉 点右上角的 Star 按钮,或 点这里一键收藏
欢迎 Fork 改成你自己的课件,也欢迎提 Issue / PR 一起完善~
本项目基于 MIT License 开源,可自由使用、修改、分发(保留版权声明即可)。
关键词 Keywords
WorkBuddy · AI办公 · AI助手 · AI培训课件 · 办公自动化 · 网页PPT · HTML幻灯片 · AI效率工具 · AI office assistant · productivity · presentation · slides · AI tutorial
Made with ❤️ for AI office productivity · 如果有用,别忘了 ⭐ Star