Back to Details

present

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Present — Narrated Interactive Presentations

Present — 带旁白的交互式演示文稿

Generate a self-contained HTML presentation with dual article/slides mode, ElevenLabs narration, optional GPT Image 2 illustrations, and scroll-reveal animations.
生成包含文章/幻灯片双模式、ElevenLabs旁白、可选GPT Image 2插图及滚动揭示动画的独立HTML演示文稿。

What This Skill Produces

此技能生成的内容

A single 
index.html
file (plus audio and optional image assets) that can be:
  • Opened locally in a browser
  • Deployed to Vercel, Netlify, or any static host
  • Shared as a folder
The output has two modes the viewer can toggle between:
  1. Article mode — long-form scrollable report with Tufte-inspired typography
  2. Slides mode — navigable presentation with keyboard/click navigation and narrated audio playback
单个
index.html
文件（外加音频和可选图像资源），可：
  • 在本地浏览器中打开
  • 部署至Vercel、Netlify或任何静态托管平台
  • 以文件夹形式共享
输出内容支持查看者在两种模式间切换：
  1. 文章模式 — 采用Tufte风格排版的长篇滚动式报告
  2. 幻灯片模式 — 支持键盘/点击导航及旁白音频播放的可导航演示文稿

Quick Start

快速开始

/present "AI adoption research for Arseny" --slides 12 --voice daniel --images risograph
Or with a file:
/present path/to/research.md --detail detailed --voice alice
/present "AI adoption research for Arseny" --slides 12 --voice daniel --images risograph
或使用文件：
/present path/to/research.md --detail detailed --voice alice

Parameters

参数

ParameterValuesDefaultDescription
--slides
5-2012Number of slides
--detail
executive
, 
standard
, 
detailed
standard
Content depth
--voice
ElevenLabs voice name
daniel
Narrator voice
--images
style name or 
none
none
Image generation style
--image-prompt
custom stringautoOverride image prompt prefix
--output
path
./presentation/
Output directory
--deploy
vercel project or 
none
none
Auto-deploy target
--title
stringautoPresentation title
--no-audio
flagfalseSkip audio generation
参数取值默认值说明
--slides
5-2012幻灯片数量
--detail
executive
, 
standard
, 
detailed
standard
内容深度
--voice
ElevenLabs语音名称
daniel
旁白语音
--images
风格名称或
none
none
图像生成风格
--image-prompt
自定义字符串自动覆盖图像提示前缀
--output
路径
./presentation/
输出目录
--deploy
Vercel项目或
none
none
自动部署目标
--title
字符串自动演示文稿标题
--no-audio
标志false跳过音频生成

Detail Levels

细节级别

  • executive
     (5-7 slides): Key findings only. One stat slide, one recommendation slide, sources. Best for busy stakeholders who need the bottom line.
  • standard
     (10-14 slides): Full narrative arc. Problem, evidence, analysis, recommendations, sources. The default for most presentations.
  • detailed
     (15-20 slides): Deep dive. Includes methodology, multiple evidence sections, case studies, detailed recommendations with implementation steps.
  • executive
    （5-7张幻灯片）：仅包含关键结论。一张统计幻灯片、一张建议幻灯片及来源。适合需要快速了解核心内容的忙碌利益相关者。
  • standard
    （10-14张幻灯片）：完整叙事结构。包含问题、证据、分析、建议及来源。是大多数演示文稿的默认选项。
  • detailed
    （15-20张幻灯片）：深度剖析。包含方法论、多个证据章节、案例研究、带实施步骤的详细建议。

Voice Options

语音选项

Uses ElevenLabs API. The key must be available in 
~/claude-skills/elevenlabs-tts/.env
as 
ELEVENLABS_API_KEY
.
Recommended voices for presentations:
  • daniel — Steady Broadcaster, British, formal (default)
  • alice — Clear Educator, British, professional
  • matilda — Knowledgeable, American, upbeat
  • brian — Deep Resonant, American, comforting
  • george — Warm Storyteller, British, mature
使用ElevenLabs API。需在
~/claude-skills/elevenlabs-tts/.env
文件中配置
ELEVENLABS_API_KEY
密钥。
推荐用于演示文稿的语音：
  • daniel — 沉稳的广播腔，英式英语，正式（默认）
  • alice — 清晰的教学腔，英式英语，专业
  • matilda — 知识渊博，美式英语，活泼
  • brian — 低沉有共鸣，美式英语，亲切
  • george — 温暖的叙事腔，英式英语，成熟

Image Styles

图像风格

When 
--images
is set, the skill generates illustrations for key slides using GPT Image 2 (
~/.claude/skills/gpt-image-2/scripts/gpt_image_2.py
). Available styles:
  • risograph
    — Gerd Arntz isotype style, muted colors, sand texture
  • editorial
    — Magazine photography style, dramatic lighting
  • blueprint
    — Technical drawing aesthetic, white on blue
  • ink
    — Black ink illustration, hand-drawn feel
  • constellation
    — Data visualization aesthetic, dots and lines
  • Custom: pass 
    --image-prompt "your style description"
    to override
Images are generated in 
--draft
mode first (~$0.006/image). The skill decides which slides benefit from illustration (typically 3-5 out of 12).
当设置
--images
时，技能会使用GPT Image 2（
~/.claude/skills/gpt-image-2/scripts/gpt_image_2.py
）为关键幻灯片生成插图。可用风格：
  • risograph
    — Gerd Arntz符号风格，柔和色彩，沙质纹理
  • editorial
    — 杂志摄影风格，戏剧性光影
  • blueprint
    — 技术图纸美学，白底蓝字
  • ink
    — 黑色墨水插画，手绘质感
  • constellation
    — 数据可视化美学，点线结构
  • 自定义：传入
    --image-prompt "你的风格描述"
    来覆盖默认风格
图像首先以
--draft
模式生成（约0.006美元/张）。技能会判断哪些幻灯片适合添加插图（通常12张幻灯片中选3-5张）。

Workflow

工作流程

Step 1: Content Analysis

步骤1：内容分析

Read the input content (a topic description, a markdown file, vault notes, meeting transcript, or research). Identify:
  • The core argument or narrative
  • Key data points and statistics
  • Natural section breaks
  • Quotable findings with sources
读取输入内容（主题描述、Markdown文件、知识库笔记、会议记录或研究资料）。识别：
  • 核心论点或叙事主线
  • 关键数据点和统计信息
  • 自然的章节划分
  • 带来源的可引用结论

Step 2: Slide Planning

步骤2：幻灯片规划

Based on 
--detail
and 
--slides
, create a slide plan. Each slide needs:
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]
Slide types: 
title
, 
summary
, 
stat
, 
evidence
, 
comparison
, 
quote
, 
framework
, 
recommendation
, 
case-study
, 
sources
The narration script should be conversational and add context beyond what's displayed. It should NOT just read the slide text aloud — it should explain, connect, and elaborate. Target 15-30 seconds of narration per slide.
根据
--detail
和
--slides
参数创建幻灯片规划。每张幻灯片需包含：
幻灯片N：[类型] — [标题]
内容：[屏幕显示内容]
旁白：[语音内容 — 需比屏幕内容更丰富]
阅读时间：[普通读者消化视觉内容所需的秒数]
图像：[是/否，若为是则附提示词]
幻灯片类型：
title
（标题页）、
summary
（摘要页）、
stat
（统计页）、
evidence
（证据页）、
comparison
（对比页）、
quote
（引用页）、
framework
（框架页）、
recommendation
（建议页）、
case-study
（案例研究页）、
sources
（来源页）
旁白脚本应口语化，并提供超出屏幕显示内容的上下文。不应只是朗读幻灯片文本——而应进行解释、关联和拓展。目标为每张幻灯片15-30秒的旁白内容。

Step 3: Generate Audio

步骤3：生成音频

For each slide, generate narration using ElevenLabs:
bash
python3 ~/.claude/skills/elevenlabs-tts/scripts/elevenlabs_tts.py \
  --voice <voice_name> \
  --text "<narration>" \
  --output <output_dir>/audio/slide-<N>.mp3
Or use the direct API via the script at 
scripts/generate_audio.py
in this skill.
Also generate a transition sound (Rhodes chord) for slide-to-slide transitions.
After generation, get durations with ffprobe to calculate slide timing.
为每张幻灯片使用ElevenLabs生成旁白：
bash
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获取音频时长以计算幻灯片计时。

Step 4: Generate Images (if enabled)

步骤4：生成图像（若启用）

For slides that benefit from illustration, generate images using GPT Image 2:
bash
python3 ~/.claude/skills/gpt-image-2/scripts/gpt_image_2.py --draft --size 1536x1024 \
  "<style prefix> <slide-specific prompt>" \
  <output_dir>/images/<name>.png
Typically generate 3-5 images for a 12-slide deck. Choose slides where a visual metaphor strengthens the point — stat slides, concept slides, and the title slide are good candidates. Don't illustrate every slide.
为适合添加插图的幻灯片使用GPT Image 2生成图像：
bash
python3 ~/.claude/skills/gpt-image-2/scripts/gpt_image_2.py --draft --size 1536x1024 \\
  "<风格前缀> <幻灯片专属提示词>" \\
  <output_dir>/images/<name>.png
通常为12张幻灯片的演示文稿生成3-5张图像。选择视觉隐喻能强化观点的幻灯片——统计页、概念页和标题页是不错的选择。无需为每张幻灯片都添加插图。

Step 5: Build HTML

步骤5：构建HTML

Use the template at 
assets/template.html
as the base. The template includes:
  • Typography: EB Garamond (body) + DM Sans (labels/numbers)
  • Color palette: Configurable via CSS variables in 
    :root
  • Article mode: Tufte-inspired layout with executive summary box, stat cards, two-column sections, data tables
  • Slides mode: Full-viewport slides with fade transitions, keyboard navigation (arrows, space), dot indicators
  • Audio engine: Single reusable 
    <audio>
    element, slide-synced playback with progress bar, transition sounds between slides
  • Auto-hide controls: Top bar (mode switcher + audio) appears when cursor enters top 20% of viewport. Bottom nav appears in bottom 20%. Shift+. toggles always-show/always-hide/zone mode.
  • Scroll-reveal animations: Intersection Observer-based fade-up for sections, staggered stat cards, animated counters, h2 rule-draw effect
  • prefers-reduced-motion
    : All animations disabled when user prefers reduced motion
Populate the template by replacing placeholder sections with the actual slide and article content.
以
assets/template.html
为模板。模板包含：
  • 排版：EB Garamond（正文）+ DM Sans（标签/数字）
  • 调色板：可通过
    :root
    中的CSS变量配置
  • 文章模式：Tufte风格布局，包含执行摘要框、统计卡片、双栏章节、数据表
  • 幻灯片模式：全屏幻灯片，带淡入淡出过渡效果，支持键盘导航（箭头键、空格键）、圆点指示器
  • 音频引擎：单个可复用的
    <audio>
    元素，与幻灯片同步播放的进度条，幻灯片间的切换音效
  • 自动隐藏控件：当光标进入视口顶部20%区域时，顶部栏（模式切换器+音频控件）显示；底部导航在视口底部20%区域显示。Shift+.可切换始终显示/始终隐藏/区域触发模式。
  • 滚动揭示动画：基于Intersection Observer的段落淡入效果、交错显示的统计卡片、动画计数器、h2标题规则绘制效果
  • prefers-reduced-motion
    ：当用户偏好减少动画时，禁用所有动画
通过替换模板中的占位符部分，填入实际的幻灯片和文章内容。

Step 6: Test

步骤6：测试

Open in browser using 
/real-browser
or 
open <path>
. Verify:
  • Article mode renders correctly, images load
  • Slides mode: all slides navigable, text fits within viewport
  • Audio plays when play button is clicked
  • Audio syncs to slide advancement (each slide waits for narration + read time)
  • Transition sounds play between slides
  • Auto-hide works for top and bottom bars
  • Keyboard navigation (arrows, space) works in slide mode
使用
/real-browser
或
open <路径>
在浏览器中打开。验证：
  • 文章模式渲染正确，图像加载正常
  • 幻灯片模式：所有幻灯片可导航，文本适配视口
  • 点击播放按钮后音频正常播放
  • 音频与幻灯片推进同步（每张幻灯片等待旁白播放+阅读时间）
  • 幻灯片间切换音效正常播放
  • 顶部和底部栏的自动隐藏功能正常
  • 幻灯片模式下键盘导航（箭头键、空格键）正常工作

Step 7: Deploy (if requested)

步骤7：部署（若请求）

If 
--deploy
is set, copy output to the target project's 
public/
folder and deploy:
bash
cp -r <output_dir>/* <project_path>/public/<slug>/
cd <project_path> && vercel deploy --prod --yes
若设置了
--deploy
，将输出内容复制到目标项目的
public/
文件夹并部署：
bash
cp -r <output_dir>/* <project_path>/public/<slug>/
cd <project_path> && vercel deploy --prod --yes

HTML Architecture

HTML架构

Audio Sync Model

音频同步模型

Each slide has three timing properties:
  • data-audio="slide-name"
    — maps to audio file
  • data-read-time="N"
    — seconds for reading the visual content
The audio engine calculates: 
slide_duration = max(audio_duration, read_time) + 2s
. After narration ends, it waits for any remaining read time plus a 2-second buffer, plays a transition sound (1.8s), then advances to the next slide.
每张幻灯片有三个计时属性：
  • data-audio="slide-name"
    — 映射到音频文件
  • data-read-time="N"
    — 阅读视觉内容所需的秒数
音频引擎计算：
slide_duration = max(audio_duration, read_time) + 2s
。旁白结束后，等待剩余的阅读时间加上2秒缓冲，播放切换音效（1.8秒），然后切换到下一张幻灯片。

Avoiding AI-Looking Formatting

避免AI生成式格式

The following patterns read as AI-generated and should be avoided:
  • Colored left-bar + bold heading + description blocks (finding cards)
  • Large italic pull quotes with colored left border
  • Uniform card grids with icon + heading + description
  • Gradient text on metrics
Instead use:
  • Natural prose paragraphs with inline emphasis
  • Definition lists (
    <dl>
    ) for structured points
  • Tables for comparisons
  • Direct statements woven into flowing text
以下模式会被识别为AI生成内容，应避免：
  • 彩色左侧栏+粗体标题+描述块（发现卡片）
  • 带彩色左侧边框的大斜体引用
  • 统一的卡片网格（图标+标题+描述）
  • 指标文本渐变效果
应使用：
  • 带有内联强调的自然段落
  • 用于结构化要点的定义列表（
    <dl>
    ）
  • 用于对比的表格
  • 融入流畅文本的直接陈述

Image Paths

图像路径

Use absolute paths from the deployment root: 
/slug/images/name.png
, not relative paths. Relative paths break when URLs load without trailing slashes.
使用部署根目录的绝对路径：
/slug/images/name.png
，而非相对路径。当URL不带尾部斜杠时，相对路径会失效。

Files

文件

  • SKILL.md
    — This file
  • scripts/generate_audio.py
    — ElevenLabs TTS batch generator
  • assets/template.html
    — Base HTML template with all CSS/JS
  • references/slide-types.md
    — Detailed slide type specifications and examples
  • SKILL.md
    — 本文档
  • scripts/generate_audio.py
    — ElevenLabs TTS批量生成器
  • assets/template.html
    — 包含所有CSS/JS的基础HTML模板
  • references/slide-types.md
    — 详细的幻灯片类型规范及示例",