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）

Color	Hex	Usage
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/

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

使用技巧

Use ASCII sparingly - Great for tech/dev presentations, can feel dated otherwise
Stick to brand colors - Don't mix custom colors, use the 5-color palette
Big text on title slides - h1 should be 4-5rem minimum
One idea per slide - Neobrutalism works best with focused content
Test interactivity - Always preview HTML before exporting

适度使用ASCII元素 - 非常适合技术/开发类演示文稿，其他场景可能显得过时
遵循品牌配色 - 不要混用自定义颜色，使用指定的5色调色板
标题页文字要醒目 - h1标题字号至少设置为4-5rem
单页聚焦一个核心观点 - 新野蛮主义风格最适配内容简洁聚焦的页面
测试交互效果 - 导出前务必预览HTML演示文稿的交互功能

presentation-generator

Original

Translation

Presentation Generator

演示文稿生成器

Overview

概述

Quick Start

快速开始

1. Create presentation from JSON/YAML content

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

2. Export to PNG slides

2. 导出为PNG幻灯片

3. Export to PDF

3. 导出为PDF

Brand Integration

品牌集成

Colors (from brand-agency)

配色（来自brand-agency）

Typography

排版

Slide Types

幻灯片类型

1. Title Slide (--title)

1. 标题页（--title）

2. Content Slide (--content)

2. 内容页（--content）

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

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

4. Code Slide (--code)

4. 代码页（--code）

5. Stats Slide (--stats)

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

6. Task Grid Slide (--grid)

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

7. ASCII Art Slide (--ascii)

7. ASCII艺术页（--ascii）

8. Image Slide (--image)

8. 图片页（--image）

ASCII Decorations

ASCII装饰元素

Content Format

内容格式

JSON format:

JSON格式：

YAML format:

YAML格式：

Interactive Features

交互功能

Usage Examples

使用示例

Create workshop summary:

创建研讨会摘要：

Generate from today's session

基于当日会议内容生成

Quick presentation from markdown:

从Markdown快速生成演示文稿：

Convert markdown outline to presentation

将Markdown大纲转换为演示文稿

Batch export:

批量导出：

Export all slides as PNGs

将所有幻灯片导出为PNG

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

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

File Structure

文件结构

Dependencies

依赖项

Tips

使用技巧

1. Title Slide (
`--title`
)

1. 标题页（
`--title`
）

2. Content Slide (
`--content`
)

2. 内容页（
`--content`
）

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

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

4. Code Slide (
`--code`
)

4. 代码页（
`--code`
）

5. Stats Slide (
`--stats`
)

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

6. Task Grid Slide (
`--grid`
)

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

7. ASCII Art Slide (
`--ascii`
)

7. ASCII艺术页（
`--ascii`
）

8. Image Slide (
`--image`
)

8. 图片页（
`--image`
）