slides

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Slides

幻灯片

Overview

概述

Use PptxGenJS for slide authoring. Do not use
python-pptx
for deck generation unless the task is inspection-only; keep editable output in JavaScript and deliver both the
.pptx
and the source
.js
.
Keep work in a task-local directory. Only copy final artifacts to the requested destination after rendering and validation pass.
使用PptxGenJS进行幻灯片创作。除非任务仅需检视内容,否则不要使用
python-pptx
生成演示文稿;请使用JavaScript编写代码生成可编辑输出,同时交付
.pptx
文件和对应的
.js
源文件。
请在任务专属目录下完成工作,只有经过渲染和校验流程后,才将最终产物复制到要求的目标位置。

Bundled Resources

配套资源

  • assets/pptxgenjs_helpers/
    : Copy this folder into the deck workspace and import it locally instead of reimplementing helper logic.
  • scripts/render_slides.py
    : Rasterize a
    .pptx
    or
    .pdf
    to per-slide PNGs.
  • scripts/slides_test.py
    : Detect content that overflows the slide canvas.
  • scripts/create_montage.py
    : Build a contact-sheet style montage of rendered slides.
  • scripts/detect_font.py
    : Report missing or substituted fonts as LibreOffice resolves them.
  • scripts/ensure_raster_image.py
    : Convert SVG/EMF/HEIC/PDF-like assets into PNGs for quick inspection.
  • references/pptxgenjs-helpers.md
    : Load only when you need API details or dependency notes.
  • assets/pptxgenjs_helpers/
    :将该文件夹复制到演示文稿工作区后本地引入,无需重复实现辅助逻辑。
  • scripts/render_slides.py
    :将
    .pptx
    .pdf
    文件逐页栅格化为PNG图片。
  • scripts/slides_test.py
    :检测内容是否溢出幻灯片画布边界。
  • scripts/create_montage.py
    :生成渲染后幻灯片的联系人表样式拼接图。
  • scripts/detect_font.py
    :上报LibreOffice解析时缺失或被替换的字体。
  • scripts/ensure_raster_image.py
    :将SVG/EMF/HEIC/PDF类资源转换为PNG格式,方便快速检视。
  • references/pptxgenjs-helpers.md
    :仅在需要查询API细节或依赖说明时加载。

Workflow

工作流

  1. Inspect the request and determine whether you are creating a new deck, recreating an existing deck, or editing one.
  2. Set the slide size up front. Default to 16:9 (
    LAYOUT_WIDE
    ) unless the source material clearly uses another aspect ratio.
  3. Copy
    assets/pptxgenjs_helpers/
    into the working directory and import the helpers from there.
  4. Build the deck in JavaScript with an explicit theme font, stable spacing, and editable PowerPoint-native elements when practical.
  5. Run the bundled scripts from this skill directory or copy the needed ones into the task workspace. Render the result with
    render_slides.py
    , review the PNGs, and fix layout issues before delivery.
  6. Run
    slides_test.py
    for overflow checks when slide edges are tight or the deck is dense.
  7. Deliver the
    .pptx
    , the authoring
    .js
    , and any generated assets that are required to rebuild the deck.
  1. 分析需求,确认你是要创建全新演示文稿、复刻现有演示文稿,还是编辑已有演示文稿。
  2. 提前设置幻灯片尺寸,默认使用16:9(
    LAYOUT_WIDE
    ),除非源素材明确使用其他宽高比。
  3. assets/pptxgenjs_helpers/
    复制到工作目录,从中引入所需辅助工具。
  4. 使用JavaScript编写代码构建演示文稿,尽可能使用明确的主题字体、稳定的间距,以及PowerPoint原生可编辑元素。
  5. 运行本技能目录下的配套脚本,或者将需要的脚本复制到任务工作区。使用
    render_slides.py
    渲染结果,检查生成的PNG图片,交付前修复所有布局问题。
  6. 如果幻灯片内容边界紧凑或者内容密度高,运行
    slides_test.py
    检查内容溢出问题。
  7. 交付
    .pptx
    文件、编写的
    .js
    源文件,以及重新构建演示文稿所需的所有生成类资源。

Authoring Rules

创作规则

  • Set theme fonts explicitly. Do not rely on PowerPoint defaults if typography matters.
  • Use
    autoFontSize
    ,
    calcTextBox
    , and related helpers to size text boxes; do not use PptxGenJS
    fit
    or
    autoFit
    .
  • Use bullet options, not literal
    characters.
  • Use
    imageSizingCrop
    or
    imageSizingContain
    instead of PptxGenJS built-in image sizing.
  • Use
    latexToSvgDataUri()
    for equations and
    codeToRuns()
    for syntax-highlighted code blocks.
  • Prefer native PowerPoint charts for simple bar/line/pie/histogram style visuals so reviewers can edit them later.
  • For charts or diagrams that PptxGenJS cannot express well, render SVG externally and place the SVG in the slide.
  • Include both
    warnIfSlideHasOverlaps(slide, pptx)
    and
    warnIfSlideElementsOutOfBounds(slide, pptx)
    in the submitted JavaScript whenever you generate or substantially edit slides.
  • Fix all unintentional overlap and out-of-bounds warnings before delivering. If an overlap is intentional, leave a short code comment near the relevant element.
  • 明确设置主题字体,如果排版要求高,不要依赖PowerPoint默认字体。
  • 使用
    autoFontSize
    calcTextBox
    及相关辅助工具设置文本框尺寸,不要使用PptxGenJS的
    fit
    autoFit
    功能。
  • 使用项目符号配置,不要直接输入
    字符。
  • 使用
    imageSizingCrop
    imageSizingContain
    处理图片尺寸,不要使用PptxGenJS内置的图片大小调整功能。
  • 公式使用
    latexToSvgDataUri()
    处理,语法高亮代码块使用
    codeToRuns()
    处理。
  • 简单的柱状图/折线图/饼图/直方图类可视化内容优先使用PowerPoint原生图表,方便审阅者后续编辑。
  • 对于PptxGenJS无法很好支持的图表或示意图,可在外部渲染为SVG后插入到幻灯片中。
  • 无论你是生成新幻灯片还是大幅编辑现有幻灯片,提交的JavaScript代码中都要包含
    warnIfSlideHasOverlaps(slide, pptx)
    warnIfSlideElementsOutOfBounds(slide, pptx)
    调用。
  • 交付前修复所有非故意的重叠和边界溢出警告。如果重叠是故意设计的,请在相关元素附近添加简短的代码注释。

Recreate Or Edit Existing Slides

复刻或编辑现有幻灯片

  • Render the source deck or reference PDF first so you can compare slide geometry visually.
  • Match the original aspect ratio before rebuilding layout.
  • Preserve editability where possible: text should stay text, and simple charts should stay native charts.
  • If a reference slide uses raster artwork, use
    ensure_raster_image.py
    to generate debug PNGs from vector or odd image formats before placing them.
  • 首先渲染源演示文稿或参考PDF,方便你直观对比幻灯片布局。
  • 重建布局前先匹配原始宽高比。
  • 尽可能保留可编辑性:文本保持为文本格式,简单图表保持为原生图表。
  • 如果参考幻灯片使用了栅格 artwork,插入前先使用
    ensure_raster_image.py
    将矢量或者特殊格式的图片生成调试用PNG。

Validation Commands

校验命令

Examples below assume you copied the needed scripts into the working directory. If not, invoke the same script paths relative to this skill folder.
bash
undefined
以下示例假设你已将需要的脚本复制到工作目录。如果没有,请使用相对于本技能目录的相同脚本路径调用。
bash
undefined

Render slides to PNGs for review

Render slides to PNGs for review

python3 scripts/render_slides.py deck.pptx --output_dir rendered
python3 scripts/render_slides.py deck.pptx --output_dir rendered

Build a montage for quick scanning

Build a montage for quick scanning

python3 scripts/create_montage.py --input_dir rendered --output_file montage.png
python3 scripts/create_montage.py --input_dir rendered --output_file montage.png

Check for overflow beyond the original slide canvas

Check for overflow beyond the original slide canvas

python3 scripts/slides_test.py deck.pptx
python3 scripts/slides_test.py deck.pptx

Detect missing or substituted fonts

Detect missing or substituted fonts

python3 scripts/detect_font.py deck.pptx --json

Load `references/pptxgenjs-helpers.md` if you need the helper API summary or dependency details.
python3 scripts/detect_font.py deck.pptx --json

如果需要辅助工具API概要或者依赖详情,请加载`references/pptxgenjs-helpers.md`。