菜单
将 .md 或 .docx 文件转换为可投屏的单文件 HTML 演示文稿。设计风格：暖奶油×赭红×深棕黑，Cormorant Garamond + Noto Serif SC，键盘翻页+导航点。用法：/ppt <文件路径>
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | ppt |
| description | 将 .md 或 .docx 文件转换为可投屏的单文件 HTML 演示文稿。设计风格：暖奶油×赭红×深棕黑，Cormorant Garamond + Noto Serif SC，键盘翻页+导航点。用法：/ppt <文件路径> |
| tools | Read, Write, Bash |
将 $ARGUMENTS 转换为演示文稿。
检查 $ARGUMENTS 是否包含 --pptx：
--pptx：提取文件路径（去掉 --pptx 标志），走 PPTX 分支（见文件末尾）--pptx：走现有 HTML 分支（第一步至第三步），逻辑不变HTML 输出路径：将输入文件的扩展名替换为 .html，保存到同目录。
例：/path/to/report.md → /path/to/report.html
PPTX 输出路径：将输入文件的扩展名替换为 .pptx，保存到同目录。
例：/path/to/report.md --pptx → /path/to/report.pptx
如果是 .docx，用以下方式解包提取文本和图片：
import zipfile, os
with zipfile.ZipFile('input.docx') as z:
imgs = [f for f in z.namelist() if f.startswith('word/media/')]
z.extractall('/tmp/docx_extracted/')
# 解析 word/document.xml 获取正文
# 映射 word/_rels/document.xml.rels 获取图片与段落的对应关系
图片以 base64 嵌入 HTML，不依赖外部路径。
如果是 .md，直接读取文本内容。
内容原则（最重要，必须严格遵守）：
幻灯片类型选择：
| 类型 | 背景 | 用途 |
|---|---|---|
dark | #231510 深棕黑 | 核心判断、金句，一句话站满一张 |
terra | #B05A42 赭红 | 章节分隔页（用大编号 01/02/03） |
cream | #F4EDE3 暖奶油 | 正文、数据、表格、列表 |
节奏规则：
典型结构：
封面（dark） 标题 + 副标题 + 日期/来源
章节页（terra） 大编号 + 章节名
内容页（cream） caption → 40px 分隔线 → 主体内容
核心判断页（dark）单句 pull-light，字号放大，留白充足
图表页（cream） 左：文字判断 / 右：图表（base64）
结尾页（cream） 收尾信息
使用以下完整模板，填入实际幻灯片内容：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示文稿标题</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Noto+Serif+SC:wght@300;400;600&display=swap" rel="stylesheet">
<style>
:root {
--cream: #F4EDE3;
--terra: #B05A42;
--terra-dim: #C4795F;
--ink: #231510;
--ink-soft: #5C3D30;
--ink-faint: #9E7B6E;
--rule: #D4BFB0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #000;
font-family: 'Cormorant Garamond', 'Noto Serif SC', serif;
overflow: hidden;
width: 100vw; height: 100vh;
}
.presentation { width: 100vw; height: 100vh; position: relative; }
.slide {
position: absolute; inset: 0;
display: flex; flex-direction: column;
justify-content: center; align-items: flex-start;
padding: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 10vw, 7rem);
opacity: 0; pointer-events: none;
transition: opacity 0.45s ease;
}
.slide.active { opacity: 1; pointer-events: all; }
.slide.dark { background: var(--ink); color: var(--cream); }
.slide.terra { background: var(--terra); color: var(--cream); }
.slide.cream { background: var(--cream); color: var(--ink-soft); }
/* 章节页大数字 */
.display-num {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(5rem, 15vw, 12rem);
font-weight: 300; line-height: 0.85;
color: rgba(255,255,255,0.2);
}
.chapter-title {
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 300; color: var(--cream); margin-top: 1.5rem;
}
/* 封面 */
.cover-title {
font-size: clamp(2rem, 4.5vw, 3.8rem);
font-weight: 300; color: var(--cream);
line-height: 1.35; max-width: 75%;
}
.cover-meta {
font-size: clamp(0.75rem, 1.1vw, 0.95rem);
color: rgba(244,237,227,0.4);
margin-top: 2.5rem; letter-spacing: 0.08em; line-height: 1.9;
}
/* Pull quotes */
.pull-light {
font-size: clamp(1.6rem, 3.2vw, 2.6rem);
font-weight: 300; line-height: 1.55;
color: var(--cream); max-width: 80%;
}
.pull-quote {
font-size: clamp(1.4rem, 2.8vw, 2.2rem);
font-weight: 300; line-height: 1.55;
color: var(--ink-soft); max-width: 70%;
}
/* Caption + 分隔线 */
.caption {
font-size: clamp(0.62rem, 0.85vw, 0.72rem);
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-faint); margin-bottom: 1.4rem;
}
.caption-light {
font-size: clamp(0.62rem, 0.85vw, 0.72rem);
letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(244,237,227,0.4); margin-bottom: 1.4rem;
}
.rule { width: 40px; height: 1px; background: var(--terra); margin-bottom: 2rem; }
.rule-light { width: 40px; height: 1px; background: var(--terra-dim); margin-bottom: 2rem; }
/* 正文 */
.body-text {
font-size: clamp(0.9rem, 1.5vw, 1.15rem);
line-height: 1.95; color: var(--ink-soft); max-width: 62ch;
}
.body-text-light {
font-size: clamp(0.9rem, 1.5vw, 1.15rem);
line-height: 1.95; color: rgba(244,237,227,0.6);
max-width: 62ch; margin-top: 1.5rem;
}
/* 表格 */
.data-table { border-collapse: collapse; width: 100%; max-width: 640px; margin-top: 0.5rem; }
.data-table th {
font-size: clamp(0.6rem, 0.82vw, 0.7rem); letter-spacing: 0.12em;
text-transform: uppercase; color: var(--ink-faint);
padding: 0.5rem 2rem 0.5rem 0; text-align: left;
font-weight: 400; border-bottom: 1px solid var(--rule);
}
.data-table td {
font-size: clamp(0.85rem, 1.3vw, 1rem); color: var(--ink-soft);
padding: 0.7rem 2rem 0.7rem 0; border-bottom: 1px solid var(--rule);
line-height: 1.5;
}
/* 大数字统计 */
.big-stat {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(4rem, 11vw, 8rem); font-weight: 300; line-height: 1;
}
.stat-label { font-size: clamp(0.8rem, 1.2vw, 1rem); color: var(--ink-faint); margin-top: 0.4rem; }
/* 图表页（左文右图） */
.chart-slide { flex-direction: row !important; align-items: stretch !important; padding: 0 !important; }
.chart-left { flex: 1; display: flex; flex-direction: column; justify-content: center;
padding: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 4vw, 3.5rem); }
.chart-right { flex: 1; display: flex; align-items: center; justify-content: center;
background: #1a0d08; padding: 2rem; }
.chart-right img { max-width: 100%; max-height: 80vh; object-fit: contain; }
/* 进度条 */
#progress-bar {
position: fixed; top: 0; left: 0; height: 2px;
background: var(--terra); transition: width 0.35s ease; z-index: 100;
}
/* 导航点 */
#nav-dots {
position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
display: flex; gap: 6px; z-index: 100;
}
.dot {
width: 5px; height: 5px; border-radius: 50%;
background: rgba(156,123,110,0.3); cursor: pointer;
transition: background 0.3s, transform 0.2s;
}
.dot:hover { transform: scale(1.4); }
.dot.active { background: var(--terra); }
/* 页码 */
#slide-counter {
position: fixed; bottom: 1.4rem; right: 2rem;
font-family: 'Cormorant Garamond', serif;
font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-faint); z-index: 100;
}
</style>
</head>
<body>
<div id="progress-bar"></div>
<div class="presentation">
<!-- 在此填入幻灯片 -->
<!-- 封面示例 -->
<div class="slide dark active">
<div class="caption-light">副标题或来源</div>
<div class="cover-title">主标题</div>
<div class="cover-meta">日期 · 数据来源</div>
</div>
<!-- 章节页示例 -->
<div class="slide terra">
<div class="display-num">01</div>
<div class="chapter-title">章节名称</div>
</div>
<!-- 内容页示例（cream）-->
<div class="slide cream">
<div class="caption">小标题 CAPTION</div>
<div class="rule"></div>
<div class="body-text">正文内容……</div>
</div>
<!-- 核心判断页示例（dark）-->
<div class="slide dark">
<div class="caption-light">可选 caption</div>
<div class="rule-light"></div>
<div class="pull-light">这里是最重的那一句判断。</div>
</div>
<!-- 图表页示例（chart）-->
<div class="slide cream chart-slide">
<div class="chart-left">
<div class="caption">图表说明</div>
<div class="rule"></div>
<div class="pull-quote">左侧放对图表的判断文字</div>
</div>
<div class="chart-right">
<img src="data:image/png;base64,..." alt="图表">
</div>
</div>
</div><!-- .presentation -->
<div id="nav-dots"></div>
<div id="slide-counter"></div>
<script>
const slides = document.querySelectorAll('.slide');
const progressBar = document.getElementById('progress-bar');
const navDots = document.getElementById('nav-dots');
const slideCounter = document.getElementById('slide-counter');
let cur = 0;
slides.forEach((_, i) => {
const dot = document.createElement('div');
dot.className = 'dot' + (i === 0 ? ' active' : '');
dot.addEventListener('click', () => go(i));
navDots.appendChild(dot);
});
function updateUI() {
progressBar.style.width = ((cur + 1) / slides.length * 100) + '%';
document.querySelectorAll('.dot').forEach((d, i) => d.classList.toggle('active', i === cur));
slideCounter.textContent = (cur + 1) + ' / ' + slides.length;
const isDark = slides[cur].classList.contains('dark') || slides[cur].classList.contains('terra');
slideCounter.style.color = isDark ? 'rgba(244,237,227,0.35)' : 'var(--ink-faint)';
}
function go(n) {
slides[cur].classList.remove('active');
cur = Math.max(0, Math.min(n, slides.length - 1));
slides[cur].classList.add('active');
updateUI();
}
document.addEventListener('keydown', e => {
if (['ArrowRight','ArrowDown',' '].includes(e.key)) { e.preventDefault(); go(cur + 1); }
if (['ArrowLeft','ArrowUp'].includes(e.key)) { e.preventDefault(); go(cur - 1); }
if (e.key === 'Home') go(0);
if (e.key === 'End') go(slides.length - 1);
});
let touchStartX = 0;
document.addEventListener('touchstart', e => { touchStartX = e.touches[0].clientX; }, { passive: true });
document.addEventListener('touchend', e => {
const dx = e.changedTouches[0].clientX - touchStartX;
if (Math.abs(dx) > 50) go(dx < 0 ? cur + 1 : cur - 1);
});
updateUI();
</script>
</body>
</html>
--pptx 时执行，以下替代第一步至第三步）与 HTML 分支相同：.docx 解包提取文本，.md 直接读取。图片保存到 /tmp/ 供后续嵌入。
与 HTML 分支的内容原则和幻灯片类型完全相同（dark / terra / cream 三种类型，节奏规则不变）。
python3 -c "import pptx" 2>/dev/null || pip3 install python-pptx
根据规划好的幻灯片内容，生成一个完整 Python 脚本，写入 /tmp/gen_pptx_<timestamp>.py，再执行：
python3 /tmp/gen_pptx_<timestamp>.py
脚本模板如下（填入实际幻灯片内容）：
from pptx import Presentation
from pptx.util import Inches, Pt, Emu
from pptx.dml.color import RGBColor
from pptx.enum.text import PP_ALIGN
from pptx.oxml.ns import qn
from lxml import etree
import copy, os
# ── 颜色常量（与 HTML CSS 变量一一对应）──────────────────────────────────
CREAM = RGBColor(0xF4, 0xED, 0xE3)
TERRA = RGBColor(0xB0, 0x5A, 0x42)
TERRA_DIM = RGBColor(0xC4, 0x79, 0x5F)
INK = RGBColor(0x23, 0x15, 0x10)
INK_SOFT = RGBColor(0x5C, 0x3D, 0x30)
INK_FAINT = RGBColor(0x9E, 0x7B, 0x6E)
RULE = RGBColor(0xD4, 0xBF, 0xB0)
W = Inches(13.33)
H = Inches(7.5)
prs = Presentation()
prs.slide_width = W
prs.slide_height = H
blank_layout = prs.slide_layouts[6] # 完全空白布局
# ── 工具函数 ─────────────────────────────────────────────────────────────
def set_bg(slide, color: RGBColor):
"""设置幻灯片背景色"""
bg = slide.background
fill = bg.fill
fill.solid()
fill.fore_color.rgb = color
def add_textbox(slide, text, left, top, width, height,
font_name="Georgia", font_size=18, bold=False, italic=False,
color=INK_SOFT, align=PP_ALIGN.LEFT,
line_spacing=None, zh_font="Noto Serif SC"):
"""添加文本框，同时设置西文字体和中文字体"""
txBox = slide.shapes.add_textbox(left, top, width, height)
tf = txBox.text_frame
tf.word_wrap = True
p = tf.paragraphs[0]
p.alignment = align
run = p.add_run()
run.text = text
f = run.font
f.name = font_name
f.size = Pt(font_size)
f.bold = bold
f.italic = italic
f.color.rgb = color
# 设置东亚字体（中文）
rPr = run._r.get_or_add_rPr()
ea = etree.SubElement(rPr, qn('a:ea'))
ea.set('typeface', zh_font)
if line_spacing:
from pptx.util import Pt as _Pt
from pptx.oxml.ns import nsmap
pPr = p._pPr
if pPr is None:
pPr = p._p.get_or_add_pPr()
lnSpc = etree.SubElement(pPr, qn('a:lnSpc'))
spcPct = etree.SubElement(lnSpc, qn('a:spcPct'))
spcPct.set('val', str(int(line_spacing * 100000)))
return txBox
def add_rule(slide, left, top, width=Inches(0.56), height=Pt(1), color=TERRA):
"""添加细分隔线（用扁矩形实现）"""
shape = slide.shapes.add_shape(
1, # MSO_SHAPE_TYPE.RECTANGLE
left, top, width, height
)
shape.fill.solid()
shape.fill.fore_color.rgb = color
shape.line.fill.background() # 无描边
return shape
def add_alpha_textbox(slide, text, left, top, width, height,
font_name="Cormorant Garamond", font_size=120,
color_hex="F4EDE3", alpha_pct=20,
zh_font="Noto Serif SC"):
"""添加带透明度的文字（用于章节页大数字）"""
txBox = slide.shapes.add_textbox(left, top, width, height)
tf = txBox.text_frame
p = tf.paragraphs[0]
run = p.add_run()
run.text = text
rPr = run._r.get_or_add_rPr()
# 设置字号
rPr.set(qn('sz'), str(font_size * 100))
rPr.set(qn('b'), '0')
# 设置字体
latin = etree.SubElement(rPr, qn('a:latin'))
latin.set('typeface', font_name)
ea = etree.SubElement(rPr, qn('a:ea'))
ea.set('typeface', zh_font)
# 设置带透明度的颜色
solidFill = etree.SubElement(rPr, qn('a:solidFill'))
srgbClr = etree.SubElement(solidFill, qn('a:srgbClr'))
srgbClr.set('val', color_hex)
alpha = etree.SubElement(srgbClr, qn('a:alpha'))
alpha.set('val', str(alpha_pct * 1000)) # 20% → 20000
return txBox
# ── 幻灯片生成函数 ────────────────────────────────────────────────────────
def make_dark_slide(prs, title, caption=None):
"""Dark 页：封面或金句页"""
slide = prs.slides.add_slide(blank_layout)
set_bg(slide, INK)
L = Inches(1.0); T_start = Inches(2.5)
W_box = Inches(10.5)
if caption:
add_textbox(slide, caption.upper(), L, T_start, W_box, Inches(0.4),
font_size=9, color=RGBColor(0x9E,0x7B,0x6E))
T_start += Inches(0.55)
add_rule(slide, L, T_start, color=TERRA_DIM)
T_start += Inches(0.25)
add_textbox(slide, title, L, T_start, W_box, Inches(2.5),
font_name="Cormorant Garamond", font_size=40,
color=CREAM, line_spacing=1.55)
return slide
def make_cover_slide(prs, title, subtitle=None, meta=None):
"""封面（dark）：标题 + 副标题 + 日期/来源"""
slide = prs.slides.add_slide(blank_layout)
set_bg(slide, INK)
L = Inches(1.0)
if subtitle:
add_textbox(slide, subtitle.upper(), L, Inches(2.2), Inches(10), Inches(0.4),
font_size=9, color=RGBColor(0x9E,0x7B,0x6E))
add_textbox(slide, title, L, Inches(2.8), Inches(9), Inches(2.2),
font_name="Cormorant Garamond", font_size=44,
color=CREAM, line_spacing=1.35)
if meta:
add_textbox(slide, meta, L, Inches(5.3), Inches(8), Inches(0.6),
font_size=9, color=RGBColor(0x9E,0x7B,0x6E))
return slide
def make_terra_slide(prs, chapter_num, chapter_title):
"""Terra 章节页：大编号 + 章节标题"""
slide = prs.slides.add_slide(blank_layout)
set_bg(slide, TERRA)
L = Inches(1.0)
add_alpha_textbox(slide, chapter_num, L, Inches(0.6), Inches(6), Inches(3.5),
font_size=120, color_hex="F4EDE3", alpha_pct=20)
add_textbox(slide, chapter_title, L, Inches(4.4), Inches(10), Inches(1.2),
font_name="Cormorant Garamond", font_size=28,
color=CREAM, line_spacing=1.4)
return slide
def make_cream_slide(prs, body_text, caption=None):
"""Cream 内容页：caption → 分隔线 → 正文"""
slide = prs.slides.add_slide(blank_layout)
set_bg(slide, CREAM)
L = Inches(1.0); T = Inches(2.0)
if caption:
add_textbox(slide, caption.upper(), L, T, Inches(10), Inches(0.35),
font_size=9, color=INK_FAINT)
T += Inches(0.45)
add_rule(slide, L, T)
T += Inches(0.25)
add_textbox(slide, body_text, L, T, Inches(10.5), Inches(4.0),
font_size=14, color=INK_SOFT, line_spacing=1.9)
return slide
def make_image_slide(prs, img_path, caption=None, quote=None):
"""图表页：左文右图"""
slide = prs.slides.add_slide(blank_layout)
set_bg(slide, CREAM)
L = Inches(0.8); T = Inches(1.8)
if caption:
add_textbox(slide, caption.upper(), L, T, Inches(5.5), Inches(0.35),
font_size=9, color=INK_FAINT)
T += Inches(0.45)
add_rule(slide, L, T)
T += Inches(0.25)
if quote:
add_textbox(slide, quote, L, T, Inches(5.5), Inches(3.0),
font_name="Cormorant Garamond", font_size=22,
color=INK_SOFT, line_spacing=1.55)
slide.shapes.add_picture(img_path, Inches(7.0), Inches(0.8),
Inches(5.8), Inches(5.8))
return slide
# ══ 在此填入实际幻灯片 ════════════════════════════════════════════════════
# 示例（Claude 应根据内容替换为真实幻灯片）：
make_cover_slide(prs,
title = "主标题",
subtitle = "副标题或来源",
meta = "日期 · 数据来源"
)
make_terra_slide(prs, "01", "第一章节名")
make_cream_slide(prs,
caption = "Caption 小标题",
body_text = "正文内容……"
)
make_dark_slide(prs,
caption = "可选 caption",
title = "这里是最重的那一句判断。"
)
# ══ 结束幻灯片定义 ════════════════════════════════════════════════════════
OUTPUT_PATH = "OUTPUT_PATH_PLACEHOLDER" # Claude 替换为实际输出路径
prs.save(OUTPUT_PATH)
print(f"已保存：{OUTPUT_PATH}")
注意：Claude 必须将示例部分替换为根据源文件内容规划的真实幻灯片，删除所有示例占位符。
OUTPUT_PATH_PLACEHOLDER替换为实际输出路径（与源文件同目录，扩展名.pptx）。
prs.slide_layouts[非6] 带入默认占位框——始终用 blank_layoutprint 调试信息（除最终保存确认）add_textbox——超长文本拆成多张幻灯片#231510，terra=#B05A42，cream=#F4EDE3）Pt(1)）而非粗条.pptx）