| name | html-ppt-viewer |
| description | 把 N 张已经做好的图（AI 生图 / 截图 / 视觉稿）打包成一个**单页 PPT 风格 HTML 阅读器**：左侧 sidebar 翻页 + 中间大图全屏 + 键盘快捷键 + 浏览器打开即用。不是用 PPT，是用 HTML 模拟 PPT 体验。零依赖、秒加载、可分享链接、跨平台。 |
| version | 2.0.0 |
| author | Mavis · MiniMax Agent |
| triggers | ["做成 HTML PPT 阅读器","像 PPT 一样的 HTML","图打包成可翻页网页","PPT 风格 HTML 页面","我有一堆图想让人翻页看","可分享的网页 PPT","HTML 阅读器"] |
HTML PPT 阅读器 Skill
⚠️ 出图前必走 · ppt 出图法 V2 7 步
重要：本 skill 只负责"把已有图打包成 HTML"。生图前必须走ppt 出图法 V2 7 步：
1. fetch 完整仓库内容（README + 子目录 + examples 并行）
2. reset todo（明确节奏）
3. 整理 "N 张图主题+核心一句话" 清单（每张 1 行）
4. 单张 prompt ≤ 60 行（不堆字体铁律）
5. 出 P1 hook → 渲染核对清单（10+ 项）→ 走批量
6. 接受 AI 主动加的细节和布局调整
7. 沉淀到 case 文档
ppt 出图法 V2 完整方法论见 ~/.mavis/knowledge/knowhub/domains/visual-creation/methodology/ppt-out-image-method.md。
反例（2026-07-02 how-to-agent-ppt）：因为没走 V2 7 步 → PPT 图字体幼稚、布局不丰富、AI 调整被否定 → 用户反馈"前天的好多了"。
正例（2026-06-30 ai-training-ppt）：走了 V2 7 步 → 60 行 prompt + 接受 AI 加细节 + 渲染核对 → 8 张图一气呵成。
跳过 V2 7 步直接调本 skill = 极大概率翻车。
一句话定位
"我有一堆图，想让人像看 PPT 一样翻页看"
↓
HTML 阅读器（PPT 风格 + 浏览器打开 + 键盘翻页）
↓
chokepoint-ppt · ai-training-ppt · weekly-outlook-html · 任何"图片集"
5 区域架构
┌─────────────────────────────────────────────┐
│ [顶部] 品牌 logo + 标题 + badge │
├──────┬──────────────────────────────────────┤
│ │ [tag + 标题 + 副标题] │
│ side │ ┌──────────────────────────────┐ │
│ bar │ │ [大图全屏展示区] │ │
│ │ └──────────────────────────────┘ │
│ │ [← Prev / 1 of N / Next →] │
└──────┴──────────────────────────────────────┘
[角落] 键盘提示 ← → / 1-N
完整可复用模板（直接复制改 pages[]）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>YOUR TITLE</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Noto Serif CJK SC', 'Songti SC', Georgia, serif;
background: #FFF5F5;
color: #1a1a1a; overflow: hidden; height: 100vh;
}
.header {
height: 64px; padding: 0 32px;
background: linear-gradient(135deg, #FFF5F5 0%, #FFE8E8 100%);
border-bottom: 2px solid #B8860B;
display: flex; align-items: center; justify-content: space-between;
}
{ : ; : ; }
{
: ; : white;
: ; : ;
: ; : ;
}
{ : flex; : ( - ); }
{
: ; : ;
: ; : solid ;
: auto;
}
{
: ; : ; : ;
: uppercase; : ;
}
{
: ; : ;
: ; : pointer;
: all ;
: solid transparent;
}
{ : ; }
{ : ; : white; : ; }
{ : (,,,); }
{ : ; : ; : ; : ; }
{ : ; : ; : ; }
{ : ; : ; : flex; : column; }
{ : flex; : center; : ; : ; }
{
: ; : white; : ;
: ; : ;
}
{ : ; : ; : ; }
{ : ; : ; : ; }
{
: ; : white; : ;
: (, , , );
: hidden; : flex; : center; : center;
}
{
: ; : ; : contain;
: fadeIn ease-out;
}
fadeIn { { : ; } { : ; } }
{
: ; : flex; : center; : space-between;
}
{
: ; : ; : white;
: none; : ; : pointer; : ;
}
{ : ; : not-allowed; }
{
: fixed; : ; : ;
: (,,,); : white;
: ; : ; : ; : ;
}
YOUR TITLE
YOUR BADGE
章节导航
P01 · TAG
TITLE
SUBTITLE
← 上一页
1 / N
下一页 →
← → 翻页 · 1-N 跳转
颜色速记
| 元素 | 颜色 | 色值 |
|---|
| 奶油粉底 | 主背景 | #FFF5F5 |
| 古铜金 | 强调色（标题/badge/按钮） | #B8860B |
| 侧栏 | 浅粉 | #FAF0EE |
| hover | 浅粉 | #FFEEEE |
部署方案
| 方式 | 命令 | 适合 |
|---|
| 本地双击 | open index.html | 自己看 |
| 本地 HTTP server | python3 -m http.server 8080 | 局域网分享 |
| 已有的 nginx 静态目录 | cp -r ./ppt /var/www/html/ | 生产 |
| GitHub Pages | gh repo create my-ppt --public | 免费长期 |
实战案例
| 案例 | 路径 | 特点 |
|---|
| chokepoint-ppt | frontend/public/chokepoint-ppt/ | 7 大卡脖子赛道 · 10 页 · 已部署 Aliyun |
| ai-training-ppt | ai-training-ppt/ | 8 张手绘科教风图 · AI 培训方法论 |
| weekly-outlook-html | frontend/public/weekly-outlook/ | 8 节长图 · 周报内容 |
完整 case 文档（含完整 HTML/Prompt）：
~/.mavis/knowledge/knowhub/domains/visual-creation/cases/2026-07-01-html-ppt-viewer-ai-training.md~/.mavis/knowledge/knowhub/domains/visual-creation/methodology/html-ppt-viewer.md（源头，最全）
常见坑
| 坑 | 避免 |
|---|
| 图片溢出 | .slide-image 加 overflow: hidden |
| Sidebar 太宽挤压主区 | sidebar 固定 280px，主区 flex:1 |
| 中文渲染走样 | font-family 链含 'Noto Serif CJK SC' |
| 动画只触发一次 | 手动重置 style.animation = 'none' 再恢复 |
| Space 翻页滚动页面 | e.preventDefault() 阻止默认行为 |
| Sidebar 内容多挤压 | sidebar 加 overflow-y: auto |
30 秒起步
- 复制上面完整模板到
index.html
- 把图扔进
images/（命名 01.png, 02.png ...）
- 改
pages[] 数组（file / title / subtitle / tag）
- 改顶部标题和 badge
- 双击 index.html 验证
进阶扩展
- sidebar 加"折叠按钮"（280px 偏大时）
- sidebar 顶部加"全文搜索"过滤 page-item
- 进度条（sidebar 顶部 N/N 可视化）
- 全屏模式（F11 / Fullscreen API）
- PDF 导出（
window.print() + @media print，每页一张图 A4）
