Menu
把 N 张已经做好的图（AI 生图 / 截图 / 视觉稿）打包成一个**单页 PPT 风格 HTML 阅读器**：左侧 sidebar 翻页 + 中间大图全屏 + 键盘快捷键 + 浏览器打开即用。不是用 PPT，是用 HTML 模拟 PPT 体验。零依赖、秒加载、可分享链接、跨平台。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
A股每日复盘——获取指数行情、涨停数据、板块资金流、市场情绪，用四层融合框架（L0人性层/L1情绪层/L2产业层/L3证据层）诊断当日市场，分析下周/下月机会方向，输出可视化复盘卡片并存入daily日志。当用户说"复盘大盘""今天大盘怎么样""复盘今日行情""A股收盘分析""下周机会"等话题时使用。
A股持仓诊断——通过截图或文本输入持仓信息，获取实时行情，用四层融合框架（L0人性层/L1情绪层/L2产业层/L3证据层）逐只诊断，分级评级（A/B/C/D），给出短期（下周）和中期（下月）操作建议。当用户要求"分析持仓""诊断持仓""看看我的股票""持仓复盘""我的股票有没有行情"等话题时使用。
以原稿章法为骨架，中国传统色彩为气韵，**直接产出可交互、可迁移的中式 HTML 汇报演示稿**。用于需要梳理叙事逻辑、章节框架、页级结构或版式的演示/汇报，且内容涉及中国文化，或视觉希望采用中国色、中国风、中式/东方审美；点名本 Skill、模板或框架导航格式时也触发。**只支持 HTML 交付**：输出 `index.html` + `assets/` 目录（自包含、字体嵌入、可双击打开）。不生成 PPT/PPTX。 Build a Chinese-style HTML presentation system that maps confirmed source material into faithful reporting logic, sections, slide architecture, and layouts, then renders a self-contained interactive HTML deck. Use when presentation work involves Chinese culture or requests Chinese-color, Chinese-style, or Eastern aesthetics, and when this Skill, template, or framework navigation is named. HTML-only delivery; no PPT/PPTX mode.
公众号端到端交付——把任意选题在 30 分钟内变成可直接粘贴的桌面 8 文件交付物（标题/正文/封面/4 配图），用户手动 30 秒发布。适用场景：用户说"写公众号"/"公众号文章"/"配公众号"/"公众号配图"/自己的公众号名。覆盖 v3.18 launch 实战验证的 5 步流程 + 7 段黄金模板 + 桌面文件夹 + mavis browser 自动化天花板 + 反模式。
小红书文案创作专家。当用户需要创作小红书笔记、生成吸引人的标题、优化文案内容、添加话题标签或学习小红书写作技巧时使用此专家。触发关键词：小红书、笔记、文案、种草、爆款标题、话题标签、xiaohongshu、RED note
用 AI 直接生成 N 张风格统一的图，再嵌入到**真正的 PowerPoint 文件**（.pptx），用户能在 PowerPoint / Keynote / WPS 打开、可编辑、可投屏、可二次加工。这是 2026 年"知识传播 + 真实交付"的最佳组合：AI 出图效率 + PPT 格式兼容性。
| 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 阅读器"] |
重要：本 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 · 任何"图片集"
┌─────────────────────────────────────────────┐
│ [顶部] 品牌 logo + 标题 + badge │
├──────┬──────────────────────────────────────┤
│ │ [tag + 标题 + 副标题] │
│ side │ ┌──────────────────────────────┐ │
│ bar │ │ [大图全屏展示区] │ │
│ │ └──────────────────────────────┘ │
│ │ [← Prev / 1 of N / Next →] │
└──────┴──────────────────────────────────────┘
[角落] 键盘提示 ← → / 1-N
<!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;
}
.header h1 { font-size: 22px; color: #B8860B; }
.badge {
background: #B8860B; color: white;
padding: 4px 12px; border-radius: 12px;
font-size: 13px; font-weight: 600;
}
.layout { display: flex; height: calc(100vh - 64px); }
.sidebar {
width: 280px; padding: 16px;
background: #FAF0EE; border-right: 1px solid #E0D0CC;
overflow-y: auto;
}
.sidebar-title {
font-size: 13px; color: #886; margin-bottom: 8px;
text-transform: uppercase; letter-spacing: 1px;
}
.page-item {
padding: 12px 14px; margin-bottom: 6px;
border-radius: 8px; cursor: pointer;
transition: all 0.2s;
border-left: 3px solid transparent;
}
.page-item:hover { background: #FFEEEE; }
.page-item.active { background: #B8860B; color: white; border-left-color: #8B6608; }
.page-item.active .page-num { color: rgba(255,255,255,0.8); }
.page-num { font-size: 11px; color: #B8860B; font-weight: 700; margin-bottom: 4px; }
.page-title { font-size: 14px; font-weight: 600; line-height: 1.4; }
.main { flex: 1; padding: 24px 32px; display: flex; flex-direction: column; }
.slide-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.slide-tag {
background: #B8860B; color: white; padding: 4px 10px;
border-radius: 4px; font-size: 11px;
}
.slide-title { font-size: 26px; color: #1a1a1a; font-weight: 700; }
.slide-subtitle { color: #666; font-size: 14px; margin-bottom: 16px; }
.slide-frame {
flex: 1; background: white; border-radius: 12px;
box-shadow: 0 8px 24px rgba(184, 134, 11, 0.15);
overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.slide-image {
max-width: 100%; max-height: 100%; object-fit: contain;
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.footer {
margin-top: 16px; display: flex; align-items: center; justify-content: space-between;
}
.nav-btn {
padding: 8px 20px; background: #B8860B; color: white;
border: none; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.keyboard-hint {
position: fixed; bottom: 16px; right: 24px;
background: rgba(0,0,0,0.7); color: white;
padding: 8px 14px; border-radius: 6px; font-size: 12px; opacity: 0.8;
}
</style>
</head>
<body>
<div class="header">
<h1>YOUR TITLE</h1>
<div class="badge">YOUR BADGE</div>
</div>
<div class="layout">
<aside class="sidebar">
<div class="sidebar-title">章节导航</div>
<div id="page-list"></div>
</aside>
<main class="main">
<div class="slide-meta">
<span class="slide-tag" id="tag">P01 · TAG</span>
<h2 class="slide-title" id="title">TITLE</h2>
</div>
<div class="slide-subtitle" id="subtitle">SUBTITLE</div>
<div class="slide-frame">
<img id="slide-img" class="slide-image" src="images/01.png" alt="">
</div>
<div class="footer">
<button class="nav-btn" id="prev">← 上一页</button>
<span id="counter">1 / N</span>
<button class="nav-btn" id="next">下一页 →</button>
</div>
</main>
</div>
<div class="keyboard-hint">← → 翻页 · 1-N 跳转</div>
<script>
// 配置：只改这个数组就能复用
const pages = [
// { file: "01.png", title: "...", subtitle: "...", tag: "..." },
];
let current = 0;
const $ = id => document.getElementById(id);
const $img = () => $("slide-img");
function render() {
const page = pages[current];
$("tag").textContent = `P0${current+1} · ${page.tag}`;
$("title").textContent = page.title;
$("subtitle").textContent = page.subtitle;
$img().src = `images/${page.file}`;
$img().style.animation = 'none';
void $img().offsetWidth; // 重启动画
$img().style.animation = 'fadeIn 0.5s ease-out';
$("counter").textContent = `${current+1} / ${pages.length}`;
$("prev").disabled = current === 0;
$("next").disabled = current === pages.length - 1;
document.querySelectorAll(".page-item").forEach((el, i) => {
el.classList.toggle("active", i === current);
});
}
function renderSidebar() {
const list = pages.map((p, i) => `
<div class="page-item" data-idx="${i}">
<div class="page-num">PAGE ${String(i+1).padStart(2,"0")}</div>
<div class="page-title">${p.title}</div>
</div>
`).join("");
$("page-list").innerHTML = list;
document.querySelectorAll(".page-item").forEach(el => {
el.onclick = () => { current = parseInt(el.dataset.idx); render(); };
});
}
$("prev").onclick = () => { if (current > 0) { current--; render(); } };
$("next").onclick = () => { if (current < pages.length-1) { current++; render(); } };
document.addEventListener("keydown", e => {
if (e.key === "ArrowLeft" && current > 0) { current--; render(); }
if (e.key === "ArrowRight" && current < pages.length-1) { current++; render(); }
if (/^[1-9]$/.test(e.key)) {
const idx = parseInt(e.key) - 1;
if (idx < pages.length) { current = idx; render(); }
}
if (e.key === " ") { e.preventDefault(); $("next").click(); }
});
renderSidebar();
render();
</script>
</body>
</html>
| 元素 | 颜色 | 色值 |
|---|---|---|
| 奶油粉底 | 主背景 | #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 |
index.htmlimages/（命名 01.png, 02.png ...）pages[] 数组（file / title / subtitle / tag）window.print() + @media print，每页一张图 A4）