Back to Details

presentation-generator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Presentation Generator

演示文稿生成器

Overview

概述

Create stunning presentations in neobrutalism style with Agency brand colors. Generate interactive HTML presentations with smooth scrolling navigation, export individual slides as PNG, or create PDF documents.
Output formats:
  • HTML - Interactive presentation with navigation dots, keyboard support, smooth scrolling
  • PNG - Individual slide images via Playwright (1920x1080)
  • PDF - Multi-page document via Playwright
创建采用Agency品牌色调的新野蛮主义风格精美演示文稿。生成带平滑滚动导航的交互式HTML演示文稿，或将单张幻灯片导出为PNG格式，也可创建PDF文档。
输出格式：
  • HTML - 带导航点、键盘支持、平滑滚动的交互式演示文稿
  • PNG - 通过Playwright生成的单张幻灯片图片（1920x1080分辨率）
  • PDF - 通过Playwright生成的多页文档

Quick Start

快速开始

1. Create presentation from JSON/YAML content

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

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

2. Export to PNG slides

2. 导出为PNG幻灯片

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

3. Export to PDF

3. 导出为PDF

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

Brand Integration

品牌集成

This skill references 
brand-agency
for consistent styling:
本技能参考
brand-agency
实现风格一致性：

Colors (from brand-agency)

配色（来自brand-agency）

ColorHexUsage
Primary (Orange)
#e85d04
Title slides, CTAs, accents
Secondary (Yellow)
#ffd60a
Highlights, accent slides
Accent (Blue)
#3a86ff
Info slides, links
Success (Green)
#38b000
Positive content
Error (Red)
#d62828
Warnings, emphasis
Foreground
#000000
Text, borders
Background
#ffffff
Light slides
颜色十六进制值用途
主色（橙色）
#e85d04
标题页、CTA按钮、强调元素
辅助色（黄色）
#ffd60a
高亮内容、强调页
点缀色（蓝色）
#3a86ff
信息页、链接
成功色（绿色）
#38b000
正向内容
错误色（红色）
#d62828
警告、重点强调
前景色
#000000
文本、边框
背景色
#ffffff
浅色页面

Typography

排版

  • Headings: Geist ExtraBold (800)
  • Body: EB Garamond
  • Code/ASCII: Geist Mono
  • 标题：Geist ExtraBold（800字重）
  • 正文：EB Garamond
  • 代码/ASCII：Geist Mono

Slide Types

幻灯片类型

1. Title Slide (
--title
)

1. 标题页（
--title
）

Full-screen title with subtitle, colored background (primary/secondary/accent/dark).
全屏标题页，包含副标题，支持设置主色/辅助色/点缀色/深色背景。

2. Content Slide (
--content
)

2. 内容页（
--content
）

Heading + body text + optional bullet list.
标题 + 正文文本 + 可选项目符号列表。

3. Two-Column Slide (
--two-col
)

3. 双栏页（
--two-col
）

Split layout for comparisons, text + image, before/after.
分栏布局，适用于对比展示、文本+图片、前后对比等场景。

4. Code Slide (
--code
)

4. 代码页（
--code
）

Dark background, syntax-highlighted code block with title.
深色背景，带语法高亮的代码块及标题。

5. Stats Slide (
--stats
)

5. 数据统计页（
--stats
）

Big numbers with labels (e.g., "14 templates | 4 formats | 1 skill").
大数字搭配标签展示（例如："14个模板 | 4种格式 | 1项技能"）。

6. Task Grid Slide (
--grid
)

6. 任务网格页（
--grid
）

Grid of cards with numbers, titles, descriptions.
卡片网格布局，包含数字、标题和描述。

7. ASCII Art Slide (
--ascii
)

7. ASCII艺术页（
--ascii
）

Decorative slide with ASCII box-drawing characters.
采用ASCII框线字符装饰的页面，营造科技感。

8. Image Slide (
--image
)

8. 图片页（
--image
）

Full-bleed or contained image with optional caption.
全屏或限定尺寸的图片展示，支持添加说明文字。

ASCII Decorations

ASCII装饰元素

Use ASCII box-drawing characters for tech aesthetic:
Frames:   ┌─────┐  ╔═════╗  ┏━━━━━┓
          │     │  ║     ║  ┃     ┃
          └─────┘  ╚═════╝  ┗━━━━━┛

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

Arrows:   → ← ↑ ↓ ▶ ◀ ▲ ▼

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

Blocks:   █ ▓ ▒ ░
使用ASCII框线字符打造科技感视觉风格：
Frames:   ┌─────┐  ╔═════╗  ┏━━━━━┓
          │     │  ║     ║  ┃     ┃
          └─────┘  ╚═════╝  ┗━━━━━┛

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

Arrows:   → ← ↑ ↓ ▶ ◀ ▲ ▼

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

Blocks:   █ ▓ ▒ ░

Content Format

内容格式

JSON format:

JSON格式：

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"}
      ]
    }
  ]
}
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 format:

YAML格式：

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

Interactive Features

交互功能

Generated HTML includes:
  • Navigation dots - Fixed right sidebar with clickable dots
  • Keyboard navigation - Arrow keys, Page Up/Down, Home/End
  • Smooth scrolling - CSS scroll-snap and smooth behavior
  • Intersection Observer - Active slide highlighting
  • Responsive - Works on various screen sizes (optimized for 16:9)
生成的HTML演示文稿包含以下交互特性：
  • 导航点 - 固定右侧边栏的可点击导航点
  • 键盘导航 - 支持方向键、Page Up/Page Down、Home/End按键
  • 平滑滚动 - 基于CSS scroll-snap实现的平滑滚动效果
  • 滚动监听 - 自动高亮当前活跃幻灯片
  • 响应式设计 - 适配多种屏幕尺寸（优化16:9比例）

Usage Examples

使用示例

Create workshop summary:

创建研讨会摘要：

bash
undefined
bash
undefined

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
undefined
node scripts/generate-presentation.js
--title "Claude Code Lab — 当日总结"
--footer "公司 / 日期"
--slides slides-content.json
--output workshop-summary.html
undefined

Quick presentation from markdown:

从Markdown快速生成演示文稿：

bash
undefined
bash
undefined

Convert markdown outline to presentation

将Markdown大纲转换为演示文稿

node scripts/md-to-slides.js notes.md --output presentation.html
undefined
node scripts/md-to-slides.js notes.md --output presentation.html
undefined

Batch export:

批量导出：

bash
undefined
bash
undefined

Export all slides as PNGs

将所有幻灯片导出为PNG

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

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

输出结果：slide-01.png, slide-02.png, 等

undefined
undefined

File Structure

文件结构

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
presentation-generator/
├── SKILL.md              # 本说明文档
├── templates/
│   ├── base.html         # 基础HTML模板
│   ├── slides/           # 各类型幻灯片的模板片段
│   │   ├── title.html
│   │   ├── content.html
│   │   ├── code.html
│   │   ├── stats.html
│   │   ├── two-col.html
│   │   ├── grid.html
│   │   └── ascii.html
│   └── styles.css        # 新野蛮主义风格样式
├── scripts/
│   ├── generate-presentation.js  # 主生成脚本
│   ├── export-slides.js          # PNG/PDF导出脚本
│   └── md-to-slides.js           # Markdown转换脚本
└── output/               # 生成文件存放目录

Dependencies

依赖项

  • Node.js 18+
  • Playwright (
    npm install playwright
    )
  • Node.js 18+
  • Playwright (
    npm install playwright
    )

Tips

使用技巧

  1. Use ASCII sparingly - Great for tech/dev presentations, can feel dated otherwise
  2. Stick to brand colors - Don't mix custom colors, use the 5-color palette
  3. Big text on title slides - h1 should be 4-5rem minimum
  4. One idea per slide - Neobrutalism works best with focused content
  5. Test interactivity - Always preview HTML before exporting
  1. 适度使用ASCII元素 - 非常适合技术/开发类演示文稿，其他场景可能显得过时
  2. 遵循品牌配色 - 不要混用自定义颜色，使用指定的5色调色板
  3. 标题页文字要醒目 - h1标题字号至少设置为4-5rem
  4. 单页聚焦一个核心观点 - 新野蛮主义风格最适配内容简洁聚焦的页面
  5. 测试交互效果 - 导出前务必预览HTML演示文稿的交互功能