presentation-generator

用途

Presentation Generator 用于创建新粗野主义（neobrutalism）风格的演示文稿，采用 Agency 品牌配色，并支持 ASCII 艺术装饰。它可以将结构化内容转换为交互式 HTML 演示文稿，也可导出为 PNG 幻灯片或 PDF 文档。

主要能力

输出格式

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

品牌集成

该技能引用 brand-agency 以保持样式一致。

颜色（来自 brand-agency）：

颜色	十六进制	用途
Primary（橙色）	#e85d04	标题页、CTA、强调
Secondary（黄色）	#ffd60a	高亮、强调页
Accent（蓝色）	#3a86ff	信息页、链接
Success（绿色）	#38b000	正面内容
Error（红色）	#d62828	警告、强调
Foreground	#000000	文本、边框
Background	#ffffff	浅色幻灯片

排版：

标题：Geist ExtraBold（800）
正文：EB Garamond
代码/ASCII：Geist Mono

幻灯片类型

标题页（--title）：全屏标题与副标题，可设置彩色背景（primary/secondary/accent/dark）。
内容页（--content）：标题 + 正文 + 可选项目符号列表。
双栏页（--two-col）：分栏布局，用于对比、文字 + 图片、前后对照。
代码页（--code）：深色背景，带标题的语法高亮代码块。
数据页（--stats）：大数字配标签（例如“14 templates | 4 formats | 1 skill”）。
网格页（--grid）：带编号、标题、描述的卡片网格。
ASCII 艺术页（--ascii）：使用 ASCII 制表符的装饰性幻灯片。
图片页（--image）：全出血或内嵌图片，可带说明文字。

ASCII 装饰

使用 ASCII 制表符营造技术感：

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

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

Arrows:   → ← ↑ ↓ ▶ ◀ ▲ ▼

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

Blocks:   █ ▓ ▒ ░

交互特性

生成的 HTML 包含：

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

使用方式

快速开始

从 JSON/YAML 内容创建演示文稿：

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

导出为 PNG 幻灯片：

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

导出为 PDF：

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

内容格式

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

使用示例

创建工作坊总结：

# 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）

适用场景

技术或开发类演示文稿（ASCII 装饰在此类场景中效果较好）。
工作坊总结、会议分享。
需要交互式 HTML 演示或批量导出 PNG/PDF 的场合。

限制与提示

谨慎使用 ASCII：适合技术/开发演示，其他场合可能显得过时。
坚持品牌配色：不要混用自定义颜色，使用 5 色调色板。
标题页使用大号文字：h1 最小应为 4-5rem。
每页一个观点：新粗野主义风格最适合聚焦的内容。
测试交互性：导出前始终预览 HTML。
需 Node.js 18+ 与 Playwright。
关于收费、价格、平台支持范围等信息，资料中暂未提供。