使用 WorkBuddy 做杂志风格 HTML-PPT。Magazine Web PPT 技能，5 套主题色、10 种布局，单文件 HTML 直接打开。

使用 PPT 的本质是什么

现在 AI 做 PPT 已经是一个很基础的场景了。大多数模型/产品/Agent 都足够做出一个及格的 PPT 文件。

但距离有质感的商用场景依然还有距离。

当前 AI PPT 的问题

问题	说明
样式呆板	过于朴素，不够高级
不够值钱	视觉效果差
同质化严重	缺乏设计感

AI 生成 PPT 的原理

AI → 生成 JS 代码 → 运行代码 → 生成 PPT 文件

这引出了一个思考：为什么我们需要 PPT？

PPT 的核心价值

价值	说明
结构清晰	逻辑分明、详略得当
直观展示	视觉效果好
信息传递	快速传达信息

HTML 网页的优势

HTML 网页同样具备这些特点：

优势	说明
逻辑清晰	结构化展示
视觉效果	设计感强
网络访问	通过链接访问
部署上线	可发布到线上

唯一的问题：之前非程序员没有制作网页的能力。

HTML-PPT-SKILL 介绍

由于 AI 超强的 Coding 能力，我们可以使用 AI 写出非常棒的效果，甚至惊艳的动效。

核心思路：为什么不直接用 AI 写 HTML 代码呢？

Magazine Web PPT 功能

功能	说明
5 套主题色	不同的视觉风格
10 种页面布局	封面/目录/内容/结尾等
单文件 HTML	直接用浏览器打开
响应式设计	适配不同屏幕
动效支持	页面切换动效

安装与使用

安装 SKILL

# 在 WorkBuddy 中安装
/workbuddy install html-ppt

# 或使用 SKILL 命令
/skill install magazine-web-ppt

基本使用流程

┌─────────────────────────────────────────────────────────────┐
│                HTML-PPT 制作流程                            │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   1. 描述需求                                              │
│      └── 告诉 AI 要做什么主题                              │
│              ↓                                             │
│   2. 选择主题                                              │
│      └── 5 套主题色任选                                    │
│              ↓                                             │
│   3. 生成内容                                              │
│      └── AI 生成 HTML 代码                                  │
│              ↓                                             │
│   4. 预览调整                                              │
│      └── 浏览器预览，随时调整                              │
│              ↓                                             │
│   5. 导出分享                                              │
│      └── 单文件 HTML，随时分享                             │
│                                                             │
└─────────────────────────────────────────────────────────────┘

5 套主题色

主题	风格	适用场景
经典蓝	专业商务	企业汇报
活力橙	活泼年轻	活动展示
极简灰	简洁大方	科技产品
复古棕	复古质感	文化内容
清新绿	自然舒适	生活方式

选择主题

帮我做一个关于[主题]的 HTML-PPT，选择[主题色]主题。

10 种页面布局

布局	用途	说明
封面	首页	标题+副标题+背景
目录	导航	内容概览
图文	内容	左图右文/上文下图
全图	强调	大图+文字叠加
卡片	列表	多个卡片展示
时间轴	历程	时间线展示
对比	比较	左右对比
数据	图表	数据可视化
引用	观点	大段引用
结尾	结束	感谢+联系方式

使用示例

第一页用封面布局，标题是"2024年度汇报"
第二页用目录布局，展示3个章节
第三页用图文布局，展示主要成果
最后一页用结尾布局

进阶技巧

添加动效

帮我加上页面切换的淡入淡出效果。

调整布局

把第三页改成全图布局，背景用这张图。

添加交互

加上点击展开详情的功能。

常见问题

问题	解决方案
文字太小	调整主题或字体大小
动效不显示	检查浏览器兼容性
布局错乱	检查内容长度，删减文字

与传统 PPT 对比

维度	HTML-PPT	传统 PPT
文件格式	.html	.pptx
打开方式	浏览器	PowerPoint
视觉效果	惊艳动效	基础动效
分享方式	链接分享	文件传输
网络访问	✅ 支持	❌ 不支持
响应式	✅ 支持	⚠️ 有限支持

一句话总结

HTML-PPT = 用 AI 写 HTML 代码做 PPT，效果更惊艳，发布更方便。

核心优势：

• 5 套主题色任选
• 10 种页面布局
• 单文件 HTML，直接用浏览器打开
• 支持动效，更惊艳
• 通过链接分享，网络访问

适用场景：产品展示、汇报演示、个人简历、活动介绍等。