presentation-generator

演示文稿生成器

概述

以新粗野主义风格和 Agency 品牌色彩创建精美演示文稿。生成带有平滑滚动导航的交互式 HTML 演示文稿，将各张幻灯片导出为 PNG，或创建 PDF 文档。

输出格式：

• HTML - 带导航圆点、键盘支持和平滑滚动的交互式演示文稿
• PNG - 通过 Playwright 导出的单张幻灯片图像（1920x1080）
• PDF - 通过 Playwright 导出的多页文档

快速开始

1. 根据 JSON/YAML 内容创建演示文稿

node scripts/generate-presentation.js --input content.json --output presentation.html

2. 导出为 PNG 幻灯片

node scripts/export-slides.js presentation.html --format png --output ./slides/

3. 导出为 PDF

node scripts/export-slides.js presentation.html --format pdf --output presentation.pdf

品牌集成

此技能引用 brand-agency，以保持风格一致：

颜色（来自 brand-agency）

颜色	十六进制值	用途
主色（橙色）	#e85d04	标题幻灯片、CTA、点缀
次色（黄色）	#ffd60a	突出显示、点缀幻灯片
强调色（蓝色）	#3a86ff	信息幻灯片、链接
成功色（绿色）	#38b000	正向内容
错误色（红色）	#d62828	警告、强调
前景色	#000000	文本、边框
背景色	#ffffff	浅色幻灯片

字体排版

• 标题：Geist ExtraBold (800)
• 正文：EB Garamond
• 代码/ASCII：Geist Mono

幻灯片类型

1. 标题幻灯片（--title）

全屏标题，包含副标题和彩色背景（主色/次色/强调色/深色）。

2. 内容幻灯片（--content）

标题 + 正文 + 可选项目符号列表。

3. 双栏幻灯片（--two-col）

用于对比、文本 + 图像、前后对照的分栏布局。

4. 代码幻灯片（--code）

深色背景，带标题和语法高亮的代码块。

5. 统计数据幻灯片（--stats）

带标签的大号数字（例如，“14 个模板 | 4 种格式 | 1 项技能”）。

6. 任务网格幻灯片（--grid）

由带编号、标题和描述的卡片组成的网格。

7. ASCII 艺术幻灯片（--ascii）

使用 ASCII 边框绘制字符装饰的幻灯片。

8. 图像幻灯片（--image）

全幅或嵌入式图像，可选配说明文字。

ASCII 装饰

使用 ASCII 边框绘制字符，营造科技感：

Frames:   ┌─────┐  ╔═════╗  ┏━━━━━┓
          │     │  ║     ║  ┃     ┃
          └─────┘  ╚═════╝  ┗━━━━━┛

Lines:    ─ │ ═ ║ ━ ┃ ━━━ ───

Arrows:   → ← ↑ ↓ ▶ ◀ ▲ ▼

Shapes:   ● ○ ■ □ ▲ △ ★ ☆ ◆ ◇

Blocks:   █ ▓ ▒ ░

内容格式

JSON 格式：

{
  "title": "Presentation Title",
  "footer": "Company / Date",
  "slides": [
    {
      "type": "title",
      "bg": "primary",
      "title": "Main Title",
      "subtitle": "Subtitle text"
    },
    {
      "type": "content",
      "title": "Section Title",
      "body": "Introduction paragraph",
      "bullets": ["Point 1", "Point 2", "Point 3"]
    },
    {
      "type": "code",
      "title": "Code Example",
      "language": "javascript",
      "code": "const x = 42;"
    },
    {
      "type": "stats",
      "items": [
        {"value": "14", "label": "templates"},
        {"value": "4", "label": "formats"},
        {"value": "∞", "label": "possibilities"}
      ]
    }
  ]
}

YAML 格式：

title: Presentation Title
footer: Company / Date
slides:
  - type: title
    bg: primary
    title: Main Title
    subtitle: Subtitle text

  - type: content
    title: Section Title
    body: Introduction paragraph
    bullets:
      - Point 1
      - Point 2

交互功能

生成的 HTML 包含：

• 导航圆点 - 固定在右侧边栏的可点击圆点
• 键盘导航 - 方向键、Page Up/Down、Home/End
• 平滑滚动 - CSS scroll-snap 和平滑滚动行为
• Intersection Observer - 高亮显示当前幻灯片
• 响应式 - 适用于各种屏幕尺寸（针对 16:9 优化）

使用示例

创建研讨会摘要：

# Generate from today's session
node scripts/generate-presentation.js \
  --title "Claude Code Lab — Day Summary" \
  --footer "29.11.2025" \
  --slides slides-content.json \
  --output workshop-summary.html

根据 Markdown 快速创建演示文稿：

# Convert markdown outline to presentation
node scripts/md-to-slides.js notes.md --output presentation.html

批量导出：

# Export all slides as PNGs
node scripts/export-slides.js presentation.html --format png --output ./export/

# Result: slide-01.png, slide-02.png, etc.

文件结构

presentation-generator/
├── SKILL.md              # This file
├── templates/
│   ├── base.html         # Base HTML template
│   ├── slides/           # Slide type partials
│   │   ├── title.html
│   │   ├── content.html
│   │   ├── code.html
│   │   ├── stats.html
│   │   ├── two-col.html
│   │   ├── grid.html
│   │   └── ascii.html
│   └── styles.css        # Neobrutalism styles
├── scripts/
│   ├── generate-presentation.js  # Main generator
│   ├── export-slides.js          # PNG/PDF export
│   └── md-to-slides.js           # Markdown converter
└── output/               # Generated files

依赖项

• Node.js 18+
• Playwright（npm install playwright）

提示

1. 少用 ASCII - 非常适合科技/开发主题的演示文稿，但过多使用会显得过时
2. 坚持使用品牌色 - 不要混用自定义颜色，请使用 5 色调色板
3. 标题幻灯片使用大号文本 - h1 至少应为 4-5rem
4. 每张幻灯片只表达一个观点 - 新粗野主义最适合重点突出的内容
5. 测试交互功能 - 导出前务必预览 HTML