产品经理如何使用 HTML PPT Skill
🎯 HTML PPT Skill — 产品经理完全使用指南
一句话概述： 用 Claude Code 对话就能生成专业级 HTML 演示文稿，支持 36 种主题风格、15 套完整模板、31 种页面布局、47 种动画效果，零设计基础也能做出高水准 PPT。
📋 目录
这是什么？
html-ppt 是一个 Claude Code Skill（技能插件），它能让你通过自然语言对话，快速生成精美的单文件 HTML 演示文稿（PPT / Slide Deck）。
核心能力
| 维度 | 数量 | 说明 |
|---|---|---|
| 🎨 主题风格 | 36 种 | 从极简白到赛博朋克，覆盖所有场景 |
| 📄 页面布局 | 31 种 | 封面、目录、数据图表、时间线、架构图等 |
| 🗂️ 完整模板 | 15 套 | 路演、产品发布、周报、技术分享等 |
| ✨ 动画效果 | 47 种 | CSS 动画 27 + Canvas 特效 20 |
| 🎤 演讲模式 | 内置 | 提词器 + 计时器 + 下一页预览 |
| 🔤 语言支持 | 中英双语 | 预加载 Noto Sans SC + JetBrains Mono |
技术特点
- 零构建：纯静态 HTML / CSS / JS，浏览器直接打开
- 单文件输出：一个 .html 文件包含全部内容
- 键盘操控：方向键翻页、F 全屏、O 鸟瞰、T 换肤
- 响应式：适配不同屏幕尺寸
为什么产品经理需要它
💡 痛点直击
| 传统痛点 | html-ppt 的解法 |
|---|---|
| 做 PPT 花太多时间在排版上 | 对话式生成，专注内容不碰设计 |
| 找模板 → 改模板 → 调格式循环 | 36 种主题一键切换，T 键实时预览 |
| 数据图表手动做 | Chart.js 内置，自动渲染柱状/折线/饼图/雷达图 |
| 不会做架构图/流程图 | 内置 31 种布局含 flow-diagram、arch-diagram |
| 演讲紧张忘词 | 演讲者模式内置提词器 + 计时器 |
| 导出 PDF 还要装软件 | 浏览器直接打印为 PDF，或脚本导出 PNG |
| 协作困难，版本混乱 | 单文件，Git 管理，版本清晰 |
⚡ 效率提升
- PRD → PPT：把需求文档内容直接喂给 Claude，秒出汇报 PPT
- 竞品分析：给 URL，自动抓取内容生成竞品对比幻灯片
- 周报/月报：数据 + 要点，自动生成带 KPI 卡片的周报
- 产品发布：选 product-launch 模板，填入产品信息即出活
安装方式
在 Claude Code 终端中运行：
npx skills add https://github.com/lewislulu/html-ppt-skill安装完成后，直接在对话中使用即可，无需额外配置。
触发方式
直接说关键词
以下任何表述都会触发 html-ppt 技能：
| 中文 | English |
|---|---|
| 生成 PPT | Make a presentation |
| 做个演示文稿 | Create a slide deck |
| 做个 slide | Build slides |
| HTML 幻灯片 | HTML slideshow |
| 产品介绍页 | Product intro page |
| 发布会页面 | Launch page |
| 从链接生成 PPT | Generate PPT from URL |
| 汇报 PPT | Report slides |
| 分享页面 | Sharing page |
| 展示页 | Showcase page |
隐式触发场景
即使不说"PPT"，只要给了内容并需要可视化展示，也会触发：
- "帮我把这个竞品分析做个展示"
- "给老板做一个季度汇报"
- "整理一下产品路线图，做成演示"
产品经理高频使用场景
1. 🚀 产品发布 / 宣传
场景： 新产品/功能上线，需要做发布会 PPT 或宣传页
推荐模板： product-launch（8 页产品发布专用）
推荐主题： glassmorphism、aurora、sunset-warm
Prompt 示例：用 html-ppt 做一个产品发布演示，主题是「XX 功能上线」， 目标用户是运营团队，8 页左右，用 glassmorphism 主题。 内容包括：产品介绍、核心功能亮点（3 个）、使用场景、 上线时间线、Q&A。
2. 📊 周报 / 月报 / 季度汇报
场景： 向上级或团队汇报产品数据和工作进展
推荐模板： weekly-report（KPI 网格 + 数据图表）
推荐布局： kpi-grid、stat-highlight、chart-bar、chart-line
推荐主题： minimal-white、arctic-cool、swiss-grid
Prompt 示例：用 html-ppt 做一个本月产品数据汇报，用 minimal-white 主题。 数据如下： - DAU：128 万（环比 +12%） - 转化率：3.8%（环比 +0.5%） - 客单价：¥68（环比 -2%） - NPS：72（环比 +8） 重点展示数据变化趋势，配合柱状图和折线图， 最后总结本月三个关键成果和下月计划。
3. 🏗️ 产品路线图 / 版本规划
场景： 展示产品未来 3-6 个月的版本规划
推荐布局： roadmap、timeline、gantt
推荐主题： nord、arctic-cool、minimal-white
Prompt 示例：做一个产品路线图 PPT，展示未来两个季度的规划： Q3：用户体系重构、支付流程优化、运营工具 2.0 Q4：AI 推荐引擎、海外版 MVP、数据中台 用 roadmap 布局，主题用 nord，包含里程碑节点和优先级标注。
4. 🔍 竞品分析
场景： 对比自家产品与竞品的优劣
推荐布局： comparison、chart-radar、pros-cons
推荐主题： tokyo-night、dracula、catppuccin-mocha
Prompt 示例：做一个竞品分析 PPT，对比我们和 A、B、C 三家竞品。 对比维度：功能完整度、用户体验、价格、技术架构、市场份额 用雷达图展示各维度评分，用对比表格展示功能差异， 最后给结论和建议。主题用 tokyo-night。
5. 💡 方案提案 / PRD 可视化
场景： 把 PRD 文档转成可视化演示，向研发/设计讲需求
推荐模板： tech-sharing、course-module
推荐布局： flow-diagram、arch-diagram、process-steps
推荐主题： catppuccin-latte、solarized-light
Prompt 示例：把以下 PRD 转成一个需求评审演示文稿，用 flow-diagram 展示用户流程， 用 arch-diagram 展示系统架构，最后用 todo-checklist 列出开放问题。 [粘贴 PRD 内容]
6. 🎤 产品分享 / 内部培训
场景： 团队内部知识分享、新员工培训、产品理念宣讲
推荐模板： presenter-mode-reveal（带演讲者模式）
推荐布局： big-quote、bullets、image-hero
推荐主题： editorial-serif、soft-pastel、aurora
Prompt 示例：我要做一场 20 分钟的内部分享，主题是「如何用数据驱动产品决策」， 大概 12 页。 请用 presenter-mode-reveal 模板，每个页面加上演讲者备注（notes）， 主题用 aurora。 大纲： 1. 为什么要数据驱动 2. 数据驱动决策框架 3. 实际案例（3 个） 4. 工具和方法论 5. 常见误区 6. 行动建议
7. 📱 小红书 / 内容营销素材
场景： 制作小红书风格图文卡片用于产品宣传
推荐模板： xhs-post、xhs-white-editorial、xhs-pastel-card
推荐主题： xiaohongshu-white、sunset-warm、soft-pastel
Prompt 示例：做一组小红书图文卡片，主题是「5 个提升效率的产品技巧」， 用 xhs-post 模板，竖屏比例 3:4，每张卡片一个技巧， 配emoji和简洁文案，主题用 xiaohongshu-white。
8. 🤝 投资人路演 / 融资 BP
场景： 创业公司融资路演
推荐模板： pitch-deck（YC/VC 风格 10 页）
推荐主题： neo-brutalism、sharp-mono、swiss-grid
Prompt 示例：做一个融资路演 BP，10 页，用 pitch-deck 模板，主题 neo-brutalism。 我们是一家 AI 教育公司： - 痛点：传统教育一对一成本高，效果难衡量 - 方案：AI 自适应学习引擎 + 游戏化体验 - 市场：K12 在线教育 3000 亿市场 - 数据：10 万注册用户，完课率 78%，续费率 65% - 团队：前阿里 P9 + 前好未来教研负责人 - 融资：Pre-A 轮，目标 500 万
实战 Prompt 模板库
以下是可以直接复制使用的 Prompt 模板：
模板 1：从 URL 生成
请从这个链接 [URL] 提取内容，用 html-ppt 生成一个演示文稿。
主题用 [主题名]，大概 [N] 页，重点展示 [关注点]。模板 2：从文本/文档生成
以下是 [类型：周报/PRD/竞品分析/...] 的内容，请用 html-ppt
做成演示文稿。要求：
- 主题：[主题名]
- 页数：[N] 页左右
- 重点布局：[布局名，如 kpi-grid、timeline]
- 语言：[中文/英文/双语]
- 风格：[严肃/轻松/专业]
[粘贴内容]模板 3：从零创建
用 html-ppt 做一个 [场景] 演示，给 [受众] 看的。
主题用 [主题名]，大概 [N] 页。
内容大纲：
1. [章节 1]
2. [章节 2]
3. [章节 3]
...
每个章节请使用合适的布局，数据部分用图表展示。
如果可以，请加演讲者备注。模板 4：快速生成（最简）
做个 PPT，主题是 [主题]，用 [模板名] 模板，[主题名] 主题。主题选择指南
按受众选主题
| 受众 | 推荐主题 | 风格特点 |
|---|---|---|
| 高管/老板 | minimal-white、swiss-grid、arctic-cool | 克制、高级、不花哨 |
| 研发团队 | catppuccin-mocha、tokyo-night、dracula | 深色护眼、代码友好 |
| 设计师 | editorial-serif、aurora、soft-pastel | 有审美感、温暖 |
| 客户/投资人 | neo-brutalism、sharp-mono、glassmorphism | 大胆、有冲击力 |
| 运营/市场 | sunset-warm、memphis-pop、xiaohongshu-white | 活泼、亲切 |
| 小红书用户 | xiaohongshu-white、soft-pastel、sunset-warm | 符合平台审美 |
按氛围选主题
| 氛围 | 推荐主题 |
|---|---|
| 🧊 冷静理性 | arctic-cool、nord、minimal-white |
| 🔥 热情大胆 | neo-brutalism、sharp-mono、bauhaus |
| 🌈 温暖柔和 | sunset-warm、soft-pastel、aurora |
| 🌑 科技深色 | tokyo-night、dracula、cyberpunk-neon |
| 📰 杂志编辑 | editorial-serif、xiaohongshu-white |
| 🏗️ 工程严肃 | blueprint、gruvbox-dark、swiss-grid |
全部 36 种主题一览
| 分类 | 主题名称 |
|---|---|
| 浅色/极简 | minimal-white、editorial-serif、soft-pastel、xiaohongshu-white、solarized-light、catppuccin-latte |
| 大胆/宣言 | sharp-mono、neo-brutalism、bauhaus、swiss-grid、memphis-pop |
| 深色/冷静 | catppuccin-mocha、dracula、tokyo-night、nord、gruvbox-dark、rose-pine、arctic-cool |
| 温暖/活力 | sunset-warm、aurora、glassmorphism、gradient-joy、retro-synthwave |
| 自然/舒适 | forest-zen、sandstone、lavender、ocean-depths |
| 科技/终端 | terminal-green、cyberpunk-neon、blueprint |
| 奢华/品牌 | obsidian-luxury、champagne-gold、velvet-noir |
| 趣味/创意 | vaporwave、hacker-neon、neon-noir |
页面布局速查
产品经理最常用的布局：
| 场景 | 推荐布局 | 说明 |
|---|---|---|
| 开场封面 | cover | 大标题 + 副标题 + 标签 |
| 内容目录 | toc | 2×3 编号卡片网格 |
| 章节分隔 | section-divider | 大号编号 + 章节名 |
| 要点列表 | bullets | 经典带卡片包裹的项目列表 |
| 并列对比 | two-column / three-column | 双栏 / 三栏并列 |
| 金句引用 | big-quote | 全幅大字引言 |
| 核心数据 | stat-highlight | 一个大数字 + 副标题（带数字跳动动画） |
| KPI 看板 | kpi-grid | 4 个 KPI 并排 + 涨跌箭头 |
| 数据表格 | table | 带悬停高亮的数据表 |
| 柱状图 | chart-bar | Chart.js 柱状图 |
| 折线图 | chart-line | Chart.js 双线面积图 |
| 饼图 | chart-pie | Chart.js 环形图 + 要点卡片 |
| 雷达图 | chart-radar | Chart.js 雷达对比图 |
| 流程图 | flow-diagram | 流程步骤图 |
| 架构图 | arch-diagram | 系统架构图 |
| 时间线 | timeline | 纵向时间节点 |
| 路线图 | roadmap | 产品路线图 |
| 甘特图 | gantt | 项目排期甘特图 |
| 功能对比 | comparison | 双栏特性对比 |
| 优劣分析 | pros-cons | 优势/劣势双栏 |
| 待办清单 | todo-checklist | 勾选项列表 |
| 图片展示 | image-hero / image-grid | 大图 / 图片网格 |
| 行动号召 | cta | Call to Action 结尾页 |
| 致谢页 | thanks | 结束致谢 |
完整模板推荐
产品经理必知 Top 5
| 排名 | 模板名 | 页数 | 最佳场景 | 风格 |
|---|---|---|---|---|
| 1️⃣ | pitch-deck | 10 | 融资路演、项目提案 | YC/VC 风格 |
| 2️⃣ | product-launch | 8 | 产品发布、功能上线 | 现代、有冲击力 |
| 3️⃣ | weekly-report | 7+ | 周报、月报、季度汇报 | 数据驱动、KPI 网格 |
| 4️⃣ | presenter-mode-reveal | 自定义 | 线上线下演讲、带提词器 | 演讲者友好 |
| 5️⃣ | xhs-post | 8+ | 小红书图文、内容营销 | 竖屏 3:4、平台原生 |
其他场景模板
| 模板名 | 场景 | 风格特点 |
|---|---|---|
| tech-sharing | 技术分享 | 代码块友好、深色可选 |
| course-module | 培训课程 | 学习目标 + MCQ 互动 |
| xhs-white-editorial | 小红书杂志风 | 白底彩虹条、渐变标题 |
| xhs-pastel-card | 小红书柔和风 | 马卡龙色系卡片 |
| graphify-dark-graph | 知识图谱展示 | 深色、力导向图 |
| knowledge-arch-blueprint | 架构图展示 | 奶油蓝图、工程感 |
| hermes-cyber-terminal | 技术测评 | 终端赛博朋克 |
| obsidian-claude-gradient | 开发工具展示 | GitHub 暗紫渐变 |
演讲者模式（隐藏大招）
什么是演讲者模式？
按 S 键 打开一个独立窗口，包含 4 个可拖拽、可缩放的磁贴卡片：
| 卡片 | 功能 |
|---|---|
| 📺 当前幻灯片 | 像素级精确预览（iframe 隔离，零色差） |
| 👀 下一页预览 | 提前看到下一张，丝滑衔接 |
| 📝 演讲者备注 | 每页的提示文字（观众看不到） |
| ⏱️ 计时器 | 计时提醒，控制演讲节奏 |
使用方式
在生成 PPT 时加上提示：
请加上演讲者备注，每个页面写 150-300 字的提示要点（不是逐字稿），
用口语化风格。演讲者备注最佳实践
- ✅ 写提示要点，不要写逐字稿
- ✅ 每页 150-300 字 为宜
- ✅ 用口语化表达
- ✅ 标注转场提示（如 "接下来看数据..."）
- ❌ 不要把备注文字放在幻灯片正文上
导出与分享
浏览器直接使用
生成的 HTML 文件可以直接在浏览器中打开：
| 快捷键 | 功能 |
|---|---|
| ← → | 翻页 |
| F | 全屏 |
| S | 演讲者模式 |
| O | 鸟瞰总览 |
| T | 切换主题 |
| A | 播放动画 |
| N | 显示备注 |
导出为 PDF
- 在浏览器中打开 HTML 文件
- Cmd + P（Mac）/ Ctrl + P（Windows）
- 选择「另存为 PDF」
- 调整页面设置（建议横向、100% 缩放）
导出为 PNG
使用内置脚本（需要 Chrome）：
./scripts/render.sh path/to/deck.html # 导出第一页
./scripts/render.sh path/to/deck.html --all # 导出全部页面分享方式
- 链接分享：上传到任意静态托管（GitHub Pages / Vercel / 内网），发送链接
- 文件分享：单文件，直接发送 .html 文件
- 截图分享：导出 PNG 后插入文档或发到群聊
- 嵌入网页：用 iframe 嵌入到内部 Wiki 或 Notion
最佳实践 & 避坑指南
✅ Do
| 建议 | 说明 |
|---|---|
| 先确认大纲再生成 | 告诉 Claude 你的章节结构，效果更好 |
| 指定主题和模板 | 明确说出主题名和模板名，避免不满意反复改 |
| 利用数据布局 | 有数据就用 kpi-grid、chart-* 布局，比纯文字更有说服力 |
| 加演讲备注 | 做分享时务必加 notes，演讲者模式会自动显示 |
| 用 T 键实时换肤 | 生成后不满意主题？按 T 键实时切换，找到最合适的 |
❌ Don't
| 避坑 | 说明 |
|---|---|
| 不要一上来就说"做得好看" | 好看是主观的，指定主题/风格更有效 |
| 不要塞太多文字 | 每页一个核心观点，用布局控制信息密度 |
| 不要手动改 HTML 样式 | 用主题系统换色，不要硬编码颜色值 |
| 不要在幻灯片上放备注文字 | 备注放进 <div class="notes">，观众不会看到 |
| 不要忽视受众 | 给老板用 minimal-white，给年轻人可以用 memphis-pop |
🎯 高效工作流
1. 准备内容大纲和关键数据
2. 选择合适的模板和主题
3. 给 Claude 发送 Prompt（含大纲 + 主题 + 模板）
4. Claude 生成初稿 HTML
5. 浏览器打开，用 T 键试不同主题
6. 用 O 键鸟瞰整体结构
7. 如需调整，回到对话继续修改
8. 确认后导出 PDF/PNG 或直接使用对比传统工具
| 维度 | PowerPoint / Keynote | html-ppt + Claude |
|---|---|---|
| 制作速度 | 小时级 | 分钟级（对话即出） |
| 设计能力要求 | 需要 | 零要求 |
| 数据图表 | 手动制作 | 自动生成（Chart.js） |
| 主题切换 | 逐页改样式 | 一键全局换肤（T 键） |
| 演讲者模式 | 系统依赖 | 内置跨平台（S 键） |
| 协作 | 文件传来传去 | Git 版本管理 |
| 在线分享 | 需上传云盘 | 发链接即看 |
| 多端查看 | 装软件 | 任何浏览器 |
| 动画丰富度 | ⭐⭐⭐⭐ | ⭐⭐⭐（47 种，够用） |
| 排版灵活度 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐（模板内灵活） |
| 学习成本 | 高 | 低（会说话就会用） |
| 最适合 | 精细排版、大型汇报 | 快速出活、内容驱动 |
快速开始 Checklist
💬 最后提示： html-ppt 的核心价值是「对话即设计」。作为产品经理，你只需要想清楚「讲什么」和「给谁看」，剩下的排版、配色、图表、动画都交给 Claude 来完成。把精力放在内容和逻辑上，PPT 交给 AI。
