ppt-generator
已认证
工具
v1.0.0 · 小杨
📥 下载 320 次
📦 31.8KB
📅 2026-05-25
PPT Generator
将讲稿转换为HTML格式的演示文稿。
支持的风格
| 风格 | 比例 | 场景 | 技术栈 |
|---|---|---|---|
| 乔布斯极简风 | 9:16 竖屏 | 短视频、社交媒体演示 | TailwindCSS + Vue3 |
| Reveal.js专业风 | 16:9 横屏 | 商务演示、课程培训 | Reveal.js + Font Awesome |
支持的学科模板
当用户需要生成教学课件时，可选择学科主题。每个学科都有独特的主题色、图标风格和设计语言。
| 学科 | 主色调 | 风格 | 视觉元素 | 典型图标 |
|---|---|---|---|---|
| 语文 | 朱红+墨黑 | 中国古典 | 水墨边框、装饰纹样 | 毛笔、诗词、竹简 |
| 数学 | 精密蓝+青 | 几何精密 | 坐标系、公式、网格 | 计算器、几何图形、PI |
| 英语 | 活力橙+蓝 | 国际现代 | 对话气泡、字母装饰 | 地球、对话气泡、证书 |
| 物理 | 靛蓝+紫 | 宇宙科技 | 星空背景、原子模型 | 原子、灯泡、粒子 |
| 化学 | 紫+绿 | 实验科学 | 分子结构、烧瓶 | 分子、试管、烧瓶 |
| 生物 | 生命绿+深绿 | 自然生命 | 细胞结构、叶子 | DNA、细胞、叶子 |
| 地理 | 天空蓝+棕 | 地球自然 | 地球仪、经纬线 | 地球仪、山川、指南针 |
| 政治 | 红色+金色 | 庄重正式 | 徽章、旗帜 | 徽章、旗帜、书本 |
| 历史 | 古铜+棕 | 复古怀旧 | 卷轴、时间线 | 卷轴、文物、书籍 |
| 计算机 | 霓虹青+紫 | 赛博科技 | 代码、终端、电路板 | 代码、芯片、终端 |
支持的职场模板
当用户需要生成职场演示时，可选择职场模板。每个模板都有独特的主题色、图标风格和适用场景。
| 模板 | 主色调 | 风格 | 适用场景 |
|---|---|---|---|
| 工作汇报 | 商务蓝 (#2563eb) | 专业干练 | 月报/季报/年报、项目进度 |
| 商务提案 | 深紫+金 (#7c3aed) | 高端大气 | 招投标、客户提案 |
| 产品发布 | 渐变蓝紫 (#3b82f6) | 科技前沿 | 新品发布会、产品介绍 |
| 企业培训 | 活力橙 (#f97316) | 互动性强 | 内训课程、技能分享 |
| 年度总结 | 金色+黑 (#fbbf24) | 成就导向 | 年会、总结大会 |
| 团队介绍 | 温暖橙 (#f97316) | 亲和友善 | 公司介绍、成员展示 |
| 会议议程 | 极简灰 (#6b7280) | 高效清晰 | 例会、研讨会 |
| 项目案例 | 卡片蓝 (#0ea5e9) | 条理分明 | Case Study、方案展示 |
| 个人简历 | 简约黑 (#000000) | 精英感 | 求职、晋升述职 |
| 排行榜 | 渐变金 (#fbbf24) | 激励风格 | 业绩榜、获奖表彰 |
学科/职场选择规则
- 教学场景（课件、知识点讲解）→ 选择对应学科模板
- 职场场景（工作汇报、培训等）→ 选择对应职场模板
- 非教学/职场场景 → 使用通用乔布斯风或Reveal.js风
- 未指定 → 询问用户偏好
使用场景
- 用户需要创建可分享的网页版PPT
- 用户需要离线可用的演示文稿
- 用户提到"HTML PPT"、"网页PPT"、"在线PPT"等关键词
- 用户需要生成乔布斯风/科技风/极简风的演示
- 用户需要生成教学课件（语文/数学/英语/物理/化学/生物/地理/政治/历史/计算机）
生成流程（必须严格遵循）
Step 1: 收集用户信息
向用户确认以下信息（必须）：
- PPT主要内容：要讲解的核心主题和要点
- 风格选择：
- 乔布斯极简风（竖屏 9:16，适合短视频/社交媒体）
- Reveal.js专业风（横屏 16:9，适合商务/培训）
- 如不指定，默认乔布斯极简风
- 学科选择（仅教学课件）：
- 语文 / 数学 / 英语 / 物理 / 化学 / 生物 / 地理 / 政治 / 历史 / 计算机
- 每个学科有独特的主题色、图标风格和设计语言
- 学科模板基于 Reveal.js 框架
- 非教学场景可忽略
- 职场模板选择（仅职场演示）：
- 工作汇报 / 商务提案 / 产品发布 / 企业培训 / 年度总结 / 团队介绍 / 会议议程 / 项目案例 / 个人简历 / 排行榜
- 每个模板有独特的主题色和页面结构
- 职场模板基于 Reveal.js 框架
- 非职场场景可忽略
- 风格参考资料（可选）：希望参考的视觉风格，支持上传图片作为参考
- 目标受众（可选）：面向谁（决定内容深度和语言风格）
Step 2: 处理参考图片
如有用户上传的风格参考图片：
- 下载保存到本地备用
- 在生成PPT时参考其配色、布局风格
如需产品图片：
- 可从官网（如 apple.com.cn）获取真实产品图
- 在生成时注明图片来源
Step 3: 读取讲稿
读取用户原始讲稿，不修改原稿内容。
Step 4: 生成提炼版讲稿
将内容精简、增强冲击力、适配演示场景，输出 Markdown 格式。
Step 5: 生成演示标题
为每个章节生成标题，必须满足：
- ≤12 字（乔布斯风）/ ≤20 字（Reveal.js风）
- 乔布斯风采用：对比式、问题式、断言式、数字式、比喻式
- Reveal.js风采用：标准章节式标题
- 自检：是否让人想继续听？
Step 6: 设计幻灯片结构
根据选择的风格，参考对应的页面类型：
- 乔布斯风：参考 references/slide-types.md 模式一
- Reveal.js风：参考 references/slide-types.md 模式二
- 学科模板：参考 references/slide-types.md 模式二
- 职场模板：参考 references/slide-types.md 模式二
Step 7: 生成HTML
使用对应的模板生成完整HTML：
- 乔布斯风：assets/template.html
- Reveal.js风：assets/template-reveal.html
- 学科模板：assets/template-subjects.html
- 职场模板：assets/template-workplace.html
Step 8: 填充内容
根据选择的风格/学科/职场模板填充：
- 乔布斯风：动态背景光斑、交互逻辑、平滑切换动画
- Reveal.js风：Font Awesome图标、过渡动画
- 学科模板：对应学科的专属视觉元素
- 职场模板：对应职场场景的专属页面结构
输出顺序（必须依次输出）
- 收集用户信息确认（如尚未确认）
- 提炼后的讲稿（Markdown）
- 幻灯片结构大纲
- 完整HTML代码
视觉规范速查
乔布斯极简风
| 项目 | 规范 |
|---|---|
| 比例 | 9:16 竖屏 |
| 背景 | #000000 或 #0a0a0a + 模糊光斑动画 |
| 主文字 | #ffffff |
| 辅助文字 | #9ca3af |
| 中文字体 | HarmonyOS Sans SC / 思源黑体 |
| 英文字体 | Inter / Roboto |
| 标题字重 | font-black / font-bold |
| 正文字重 | font-light / font-normal |
Reveal.js专业风
| 项目 | 规范 |
|---|---|
| 比例 | 16:9 横屏 |
| 背景 | #000000 + Reveal.js黑色主题 |
| 主文字 | #ffffff |
| 强调色 | #3b82f6 (蓝) / #8b5cf6 (紫) |
| 辅助文字 | #9ca3af |
| 图标库 | Font Awesome 6.4.0 |
| 字体 | 思源黑体 + Inter |
学科模板规范
| 学科 | 主色 | 背景 | 字体 | 特色元素 |
|---|---|---|---|---|
| 语文 | #c41e3a | 深墨色渐变 | 思源宋体 | 装饰边框、水墨效果 |
| 数学 | #2563eb | 深蓝黑+网格 | JetBrains Mono | 坐标系、公式块 |
| 英语 | #f97316 | 深色渐变 | Inter | 对话气泡、字母装饰 |
| 物理 | #6366f1 | 星空径向渐变 | Noto Sans SC | 星空粒子、原子模型 |
| 化学 | #8b5cf6 | 深蓝紫渐变 | Noto Sans SC | 分子结构、烧瓶图标 |
| 生物 | #22c55e | 深绿渐变 | Noto Sans SC | 细胞结构、叶子元素 |
| 地理 | #0ea5e9 | 海洋蓝渐变 | Noto Sans SC | 地球仪、经纬线 |
| 政治 | #dc2626 | 深红渐变 | 思源宋体 | 徽章、金色装饰 |
| 历史 | #b45309 | 深棕渐变 | 思源宋体 | 卷轴、时间线 |
| 计算机 | #06b6d4 | 深黑+矩阵网格 | JetBrains Mono | 代码块、终端 |
详细规范见 references/design-spec.md。
交互要求
乔布斯风
- 键盘 ← → 翻页
- 触摸滑动支持
- 底部进度导航条
Reveal.js风 / 学科模板
- 键盘 ← → 翻页
- 空格键下一页
- 进度条 + 页码显示
- 支持多种过渡动画
技术栈
- 乔布斯风：TailwindCSS（国内CDN）、Vue3（CDN）、单个HTML文件
- Reveal.js风：Reveal.js 4.5.0、Font Awesome 6.4.0、单个HTML文件
- 学科模板：Reveal.js 4.5.0 + Font Awesome 6.4.0 + 学科专属CSS
严禁行为
- 堆字 / 密集排版
- 花哨配色
- 复杂图表
- 偏离极简科技风（乔布斯风）
- 页面无图标（Reveal.js风/学科模板）
- 学科场景使用错误的主题色
默认规则
- 未指定风格：默认乔布斯极简风
- 未指定学科：询问用户学科偏好
- 未指定页数：自动生成 8~20 页
- 未指定受众：使用通用中性语言
页面类型快速参考
乔布斯风页面类型
- 封面页 - 演示开场
- 标题冲击页 - 章节分隔
- 金句强调页 - 引用/名言
- 步骤说明页 - 操作指南
- 对比页 - 变化/差异
- 数据展示页 - 关键数字
- 列表页 - 多点说明（≤5点）
- 结尾行动页 - 呼吁行动
Reveal.js风/学科模板页面类型
- 封面页 - 包含图标、演讲者信息
- 目录页 - 章节列表
- 内容页 - 带图标和要点
- 图表页 - 数据展示
- 对比页 - 方案对比
- 团队/人物页 - 成员介绍
- 时间线页 - 发展历程
- 总结页 - 要点回顾
- 结束页 - 感谢/联系方式
学科模板特色页面
| 学科 | 特色页面 |
|---|---|
| 语文 | 古诗词赏析、文言文解析、阅读理解 |
| 数学 | 公式推导、几何作图、典例分析 |
| 英语 | 对话练习、词汇讲解、语法解析 |
| 物理 | 实验演示、原理图解、现象分析 |
| 化学 | 化学方程式、实验步骤、物质性质 |
| 生物 | 结构图解、生命过程、实验观察 |
| 地理 | 地图分析、气候图表、区位因素 |
| 政治 | 概念解读、案例分析、政策要点 |
| 历史 | 年代轴线、事件回顾、人物评析 |
| 计算机 | 代码演示、算法流程、技术架构 |
更新日志
v1.2.0 (2026-03-21)
- 新增10个学科模板：语文、数学、英语、物理、化学、生物、地理、政治、历史、计算机
- 学科模板基于Reveal.js框架，每个学科有独特的主题色和视觉元素
- 新增 assets/template-subjects.html 学科模板文件
- 更新页面类型说明，增加学科特色页面参考
v1.1.0 (初始版本)
- 支持乔布斯极简风（竖屏）
- 支持Reveal.js专业风（横屏）
💡 安装方法
下载 ZIP 解压到 skills/ 目录即可使用