present

Present — 旁白式交互演示文稿

生成独立的 HTML 演示文稿，支持文章／幻灯片双模式、ElevenLabs 旁白、可选的 GPT Image 2 插图和滚动显现动画。

此技能的产物

一个 index.html 文件（以及音频和可选的图像资源），可用于：

• 在浏览器中本地打开
• 部署到 Vercel、Netlify 或任何静态托管服务
• 作为文件夹分享

输出包含两种可由观看者切换的模式：

1. 文章模式 — 采用 Tufte 风格字体排版的长篇可滚动报告
2. 幻灯片模式 — 可导航的演示文稿，支持键盘／点击导航和旁白音频播放

快速开始

/present "AI adoption research for Arseny" --slides 12 --voice daniel --images risograph

或使用文件：

/present path/to/research.md --detail detailed --voice alice

参数

参数	值	默认值	描述
--slides	5-20	12	幻灯片数量
--detail	executive、standard、detailed	standard	内容深度
--voice	ElevenLabs 声音名称	daniel	旁白声音
--images	风格名称或 none	none	图像生成风格
--image-prompt	自定义字符串	auto	覆盖图像提示词前缀
--output	路径	./presentation/	输出目录
--deploy	Vercel 项目或 none	none	自动部署目标
--title	字符串	auto	演示文稿标题
--no-audio	标志	false	跳过音频生成

详细程度

• executive（5-7 张幻灯片）：仅包含关键发现。包含一张数据幻灯片、一张建议幻灯片和来源。最适合只需了解要点的繁忙利益相关者。
• standard（10-14 张幻灯片）：完整的叙事脉络。包括问题、证据、分析、建议和来源。适用于大多数演示文稿。
• detailed（15-20 张幻灯片）：深入探讨。包括方法论、多个证据部分、案例研究，以及附带实施步骤的详细建议。

声音选项

使用 ElevenLabs API。密钥必须以 ELEVENLABS_API_KEY 的名称配置在 ~/claude-skills/elevenlabs-tts/.env 中。

推荐用于演示文稿的声音：

• daniel — 稳健的播音员，英国口音，正式
• alice — 清晰的教育者，英国口音，专业
• matilda — 知识渊博，美国口音，活泼
• brian — 深沉浑厚，美国口音，令人安心
• george — 温暖的故事讲述者，英国口音，成熟

图像风格

设置 --images 后，此技能会使用 GPT Image 2（~/.claude/skills/gpt-image-2/scripts/gpt_image_2.py）为重点幻灯片生成插图。可用风格：

• risograph — Gerd Arntz 象形图风格，柔和色彩，沙质纹理
• editorial — 杂志摄影风格，戏剧性灯光
• blueprint — 技术制图美学，蓝底白线
• ink — 黑色墨水插画，手绘质感
• constellation — 数据可视化美学，点与线
• 自定义：传入 --image-prompt "your style description" 以覆盖风格

图像首先以 --draft 模式生成（每张约 $0.006）。此技能会判断哪些幻灯片适合配图（通常为 12 张中的 3-5 张）。

工作流程

第 1 步：内容分析

阅读输入内容（主题描述、Markdown 文件、知识库笔记、会议记录或研究资料）。识别：

• 核心论点或叙事
• 关键数据点和统计信息
• 自然的章节划分
• 带有来源、值得引用的发现

第 2 步：幻灯片规划

根据 --detail 和 --slides 制定幻灯片计划。每张幻灯片需要：

Slide N: [Type] — [Title]
Content: [what appears on screen]
Narration: [what the voice says — always more than what's on screen]
Read time: [seconds for an average reader to absorb the visual content]
Image: [yes/no, with prompt if yes]

幻灯片类型：title、summary、stat、evidence、comparison、quote、framework、recommendation、case-study、sources

旁白脚本应采用对话式表达，并补充屏幕显示内容之外的背景信息。不要只把幻灯片文字照读出来，而应加以解释、衔接和展开。每张幻灯片的旁白时长以 15-30 秒为目标。

第 3 步：生成音频

为每张幻灯片使用 ElevenLabs 生成旁白：

python3 ~/.claude/skills/elevenlabs-tts/scripts/elevenlabs_tts.py \
  --voice <voice_name> \
  --text "<narration>" \
  --output <output_dir>/audio/slide-<N>.mp3

也可以通过此技能中的 scripts/generate_audio.py 脚本直接调用 API。

另外，为幻灯片之间的转场生成一段声音（Rhodes 和弦）。

生成完成后，使用 ffprobe 获取时长，以计算幻灯片的时间安排。

第 4 步：生成图片（如果启用）

为适合配图的幻灯片使用 GPT Image 2 生成图片：

python3 ~/.claude/skills/gpt-image-2/scripts/gpt_image_2.py --draft --size 1536x1024 \
  "<style prefix> <slide-specific prompt>" \
  <output_dir>/images/<name>.png

对于包含 12 张幻灯片的演示文稿，通常生成 3-5 张图片。选择能通过视觉隐喻强化要点的幻灯片，例如数据统计页、概念页和标题页。不要为每张幻灯片都配图。

第 5 步：构建 HTML

使用 assets/template.html 中的模板作为基础。模板包含：

• 字体排版：EB Garamond（正文）+ DM Sans（标签/数字）
• 配色方案：通过 :root 中的 CSS 变量进行配置
• 文章模式：受 Tufte 启发的布局，包含执行摘要框、统计卡片、双栏区块和数据表格
• 幻灯片模式：全视口幻灯片，带淡入淡出转场、键盘导航（方向键、空格键）和圆点指示器
• 音频引擎：单个可重复使用的 <audio> 元素，播放与幻灯片同步，并在幻灯片之间播放转场音效
• 自动隐藏控件：光标进入视口顶部 20% 区域时，顶部栏（模式切换器 + 音频控件）会显示；进入底部 20% 区域时，底部导航会显示。按 Shift+. 可切换始终显示/始终隐藏/区域模式。
• 滚动显示动画：基于 Intersection Observer 的区块淡入上移、统计卡片交错显示、数字计数动画，以及 h2 横线绘制效果
• prefers-reduced-motion：用户偏好减少动态效果时，禁用所有动画

将实际的幻灯片和文章内容填入模板，替换占位区块。

第 6 步：测试

使用 /real-browser 或 open <path> 在浏览器中打开。检查：

• 文章模式渲染正确，图片正常加载
• 幻灯片模式：所有幻灯片均可导航，文本在视口内完整显示
• 点击播放按钮后音频能够播放
• 音频与幻灯片切换同步（每张幻灯片会等待旁白播放完毕并留出阅读时间）
• 幻灯片之间会播放转场音效
• 顶部栏和底部栏均能自动隐藏
• 幻灯片模式下可使用键盘导航（方向键、空格键）

第 7 步：部署（如有要求）

如果设置了 --deploy，将输出复制到目标项目的 public/ 文件夹并部署：

cp -r <output_dir>/* <project_path>/public/<slug>/
cd <project_path> && vercel deploy --prod --yes

HTML 架构

音频同步模型

每张幻灯片有三个计时属性：

• data-audio="slide-name" — 映射到音频文件
• data-read-time="N" — 阅读视觉内容所需的秒数

音频引擎会计算：slide_duration = max(audio_duration, read_time) + 2s。旁白结束后，系统会等待剩余阅读时间并额外缓冲 2 秒，播放转场音效（1.8 秒），然后切换到下一张幻灯片。

避免呈现 AI 生成的格式感

以下格式容易显得像 AI 生成，应避免使用：

• 彩色左侧边框 + 粗体标题 + 描述文本块（发现卡片）
• 带彩色左边框的大号斜体引述
• 带图标、标题和描述的统一网格卡片
• 指标上的渐变文字

应改用：

• 带行内强调的自然段落
• 用于呈现结构化要点的定义列表（<dl>）
• 用于比较的表格
• 融入行文流畅文本中的直接陈述

图片路径

使用相对于部署根目录的绝对路径：/slug/images/name.png，不要使用相对路径。URL 加载时如果末尾没有斜杠，相对路径会失效。

文件

• SKILL.md — 本文件
• scripts/generate_audio.py — ElevenLabs TTS 批量生成器
• assets/template.html — 包含所有 CSS/JS 的基础 HTML 模板
• references/slide-types.md — 详细的幻灯片类型规范和示例