颜色分配：

• 背景：深色 (#1a1a2e) 或浅色 (#f5f5f5)
• 标题：主品牌色或渐变
• 问题/负面：红色/橙色色调
• 解决方案/正面：绿色/蓝色色调
• 强调色：用于高亮的互补色

4. 使用相关图像增强（可选）

当创建关于技术概念、产品或比较的幻灯片时，考虑添加相关图像以强化信息。

何时使用图像：

• 技术架构图（来自官方文档）
• 产品截图（前后对比）
• 徽标或品牌资产（用于产品幻灯片）
• 插图（用于解释抽象概念）
• 图表或图形（数据可视化）

如何查找和下载图像：

// 示例：下载 VSCode 架构图
// 使用 curl 从官方来源下载图像
const { execSync } = require('child_process');

function downloadImage(url, outputPath) {
  try {
    execSync(`curl -o ${outputPath} "${url}"`, { stdio: 'inherit' });
    console.log(`Downloaded: ${outputPath}`);
    return true;
  } catch (error) {
    console.error(`Failed to download image: ${error.message}`);
    return false;
  }
}

// 示例用法：
downloadImage(
  'https://code.visualstudio.com/assets/api/ux-guidelines/examples/architecture-containers.png',
  'workspace/vscode-architecture.png'
);

查找图像的策略：

1. 官方文档：搜索"[产品名称] architecture documentation"或"[产品名称] official API documentation"
2. GitHub 仓库：在 README.md 或 docs/ 文件夹中查找图表
3. 技术博客：从可靠来源查找解释性图表
4. 使用 search_web 和 fetch_web：搜索相关内容并提取图像 URL

将图像添加到幻灯片：

// 下载图像后，将其添加到幻灯片
slide.addImage({
  path: 'workspace/downloaded-image.png',
  x: 0.5,    // X 位置（英寸）
  y: 1.5,    // Y 位置（英寸）
  w: 4.8,    // 宽度（英寸）
  h: 2.7     // 高度（英寸）（保持宽高比）
});

// 可选：添加标题
slide.addText('Image caption or source attribution', {
  x: 0.5, y: 4.25, w: 4.8, h: 0.3,
  fontSize: 9, color: '707070', italic: true,
  align: 'center'
});

图像最佳实践：

• ✅ 使用官方来源（公司网站、文档）
• ✅ 调整大小时保持宽高比
• ✅ 添加上下文说明
• ✅ 确保图像支持叙述
• ❌ 不要使用低分辨率图像
• ❌ 不要用过多图像使幻灯片拥挤
• ❌ 不要未经许可使用图像

5. 使用 PptxGenJS 创建幻灯片

const pptxgen = require('pptxgenjs');
const { execSync } = require('child_process');
const path = require('path');

async function createSlide() {
  const pptx = new pptxgen();
  pptx.layout = 'LAYOUT_16x9';
  pptx.author = 'Your Name';
  pptx.title = 'Slide Title';
  
  const slide = pptx.addSlide();
  
  // 背景
  slide.background = { color: '1a1a2e' };
  
  // 标题栏
  slide.addShape(pptx.shapes.RECTANGLE, {
    x: 0, y: 0, w: 10, h: 0.8,
    fill: { color: '4a00e0' }
  });
  
  // 标题
  slide.addText('Your Title Here', {
    x: 0.5, y: 0.18, w: 9, h: 0.5,
    fontSize: 26, bold: true, color: 'ffffff',
    fontFace: 'Arial'
  });
  
  // 可选：添加下载的图像
  // slide.addImage({
  //   path: 'workspace/image.png',
  //   x: 0.5, y: 1.5, w: 4.8, h: 2.7
  // });
  
  // 内容部分...
  // [在此处添加您的内容，遵循以下模式]
  
  await pptx.writeFile({ fileName: 'output.pptx' });
}

createSlide().catch(console.error);

设计模式库

模式：对比卡片（左 vs 右）

// 左侧部分 - 问题/之前
slide.addText('🚫 Current State', {
  x: 0.4, y: 1.0, w: 4, h: 0.4,
  fontSize: 14, bold: true, color: 'ff6b6b'
});

// 带左侧边框强调的卡片
slide.addShape(pptx.shapes.RECTANGLE, {
  x: 0.4, y: 1.5, w: 4.2, h: 0.95,
  fill: { color: '2d1f1f' }
});
slide.addShape(pptx.shapes.RECTANGLE, {
  x: 0.4, y: 1.5, w: 0.08, h: 0.95,
  fill: { color: 'ff6b6b' }
});
slide.addText('Issue Title', {
  x: 0.6, y: 1.55, w: 3.8, h: 0.3,
  fontSize: 12, bold: true, color: 'ff6b6b'
});
slide.addText('Detailed description...', {
  x: 0.6, y: 1.85, w: 3.8, h: 0.5,
  fontSize: 9, color: 'a0a0a0', wrap: true
});

// 右侧部分 - 解决方案/之后（镜像结构，使用绿色）
slide.addText('✅ New State', {
  x: 5.3, y: 1.0, w: 4, h: 0.4,
  fontSize: 14, bold: true, color: '51cf66'
});
// [使用绿色配色方案添加卡片]

模式：功能网格（2x3）

const features = [
  { icon: '🔧', text: 'Feature 1' },
  { icon: '⚡', text: 'Feature 2' },
  { icon: '💻', text: 'Feature 3' },
  { icon: '📝', text: 'Feature 4' },
  { icon: '👻', text: 'Feature 5' },
  { icon: '🎨', text: 'Feature 6' }
];

const startX = 1.0;
const startY = 1.5;
const itemW = 2.6;
const itemH = 0.7;
const gapX = 0.15;
const gapY = 0.12;

features.forEach((feat, idx) => {
  const col = idx % 3;
  const row = Math.floor(idx / 3);
  const x = startX + col * (itemW + gapX);
  const y = startY + row * (itemH + gapY);
  
  slide.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
    x, y, w: itemW, h: itemH,
    fill: { color: '1a2a1a' },
    line: { color: '51cf66', width: 0.5 },
    rectRadius: 0.08
  });
  
  slide.addText(feat.icon + ' ' + feat.text, {
    x: x + 0.1, y: y + 0.15, w: itemW - 0.2, h: itemH - 0.3,
    fontSize: 11, color: 'e0e0e0', valign: 'middle'
  });
});

模式：视觉对比框

// 之前框（虚线边框）
slide.addShape(pptx.shapes.RECTANGLE, {
  x: 1.5, y: 3.0, w: 2.5, h: 1.5,
  fill: { color: '2a1a1a' },
  line: { color: 'ff6b6b', width: 1, dashType: 'dash' }
});
slide.addText('Before', {
  x: 1.5, y: 3.1, w: 2.5, h: 0.3,
  fontSize: 12, bold: true, color: 'ff6b6b', align: 'center'
});
slide.addText('🧩', {
  x: 1.5, y: 3.5, w: 2.5, h: 0.5,
  fontSize: 32, align: 'center'
});
slide.addText('Old approach', {
  x: 1.5, y: 4.0, w: 2.5, h: 0.3,
  fontSize: 9, color: '888888', align: 'center'
});

// 之后框（实线边框）
slide.addShape(pptx.shapes.RECTANGLE, {
  x: 6.0, y: 3.0, w: 2.5, h: 1.5,
  fill: { color: '1a2a1a' },
  line: { color: '51cf66', width: 2 }
});
slide.addText('After', {
  x: 6.0, y: 3.1, w: 2.5, h: 0.3,
  fontSize: 12, bold: true, color: '51cf66', align: 'center'
});
slide.addText('👑', {
  x: 6.0, y: 3.5, w: 2.5, h: 0.5,
  fontSize: 32, align: 'center'
});
slide.addText('New approach', {
  x: 6.0, y: 4.0, w: 2.5, h: 0.3,
  fontSize: 9, color: '888888', align: 'center'
});

模式：箭头连接器

// 各部分之间的箭头
slide.addText('➔', {
  x: 4.5, y: 2.5, w: 0.8, h: 0.6,
  fontSize: 36, color: '8e2de2',
  align: 'center', valign: 'middle'
});

视觉设计最佳实践

排版

• 标题：22-28pt，粗体，高对比度
• 部分标题：12-16pt，粗体
• 正文：9-11pt，中等粗细
• 说明文字：8-9pt，较浅颜色

间距与对齐

• 标题高度：0.7-0.9 英寸
• 部分边距：距边缘 0.4-0.5 英寸
• 卡片内边距：内部 0.1-0.15 英寸
• 网格间隙：0.08-0.15 英寸

颜色使用

• 每张幻灯片最多 5 种颜色
• 使用透明度进行分层：rgba(R,G,B,0.1) 变为 RRGGBB + 较浅填充
• 确保文本对比度 > 4.5:1（在深色背景上使用 #e0e0e0 文本）

视觉层次

1. 标题/标题（最大，对比度最高）
2. 部分标题（中等，颜色编码）
3. 内容卡片（分组，带边框）
4. 辅助文本（最小，对比度较低）

常见幻灯片类型

1. 问题 → 解决方案幻灯片

• 左侧：问题卡片（红色主题）
• 中间：箭头连接器
• 右侧：解决方案功能（绿色主题）
• 底部：核心价值主张

2. 功能展示

• 带产品名称的标题
• 2x3 或 3x3 功能网格
• 每个单元格：图标 + 简短描述
• 可选：底部关键优势卡片

3. 前后对比

• 解释转换的标题
• 并排对比框
• 视觉指示器（表情符号/图标）
• 显示进展的箭头

4. 流程

• 顺序编号卡片
• 步骤之间的箭头
• 颜色进展（渐变）
• 突出显示最终状态

5. 技术架构幻灯片（带图像）

• 带架构名称的标题
• 官方架构图（从文档下载）
• 带来源归属的说明
• 在卡片中突出显示关键点或限制

示例：VSCode 扩展限制幻灯片

const pptxgen = require('pptxgenjs');
const { execSync } = require('child_process');
const path = require('path');

async function createTechnicalSlide() {
  const pptx = new pptxgen();
  pptx.layout = 'LAYOUT_16x9';
  
  // 下载 VSCode 架构图像
  const imageUrl = 'https://code.visualstudio.com/assets/api/ux-guidelines/examples/architecture-containers.png';
  const imagePath = 'workspace/vscode-architecture.png';
  
  try {
    execSync(`curl -o ${imagePath} "${imageUrl}"`, { stdio: 'inherit' });
  } catch (error) {
    console.log('Image download failed, continuing without image');
  }
  
  const slide = pptx.addSlide();
  slide.background = { color: 'FFFFFF' };
  
  // 标题
  slide.addShape(pptx.shapes.RECTANGLE, {
    x: 0, y: 0, w: 10, h: 0.8,
    fill: { color: 'fc5a1f' }
  });
  
  slide.addText('VSCode 插件架构限制', {
    x: 0.5, y: 0.18, w: 9, h: 0.45,
    fontSize: 26, bold: true, color: 'ffffff',
    fontFace: 'Arial'
  });
  
  // 左侧：架构图像
  slide.addImage({
    path: imagePath,
    x: 0.5, y: 1.2, w: 4.8, h: 2.7
  });
  
  slide.addText('VSCode 只对插件开放固定的"插槽"（Containers）', {
    x: 0.5, y: 4.0, w: 4.8, h: 0.3,
    fontSize: 10, color: '707070', italic: true,
    align: 'center'
  });
  
  // 右侧：限制卡片
  slide.addText('API 限制', {
    x: 5.5, y: 1.2, w: 4.2, h: 0.4,
    fontSize: 18, bold: true, color: 'fc5a1f'
  });
  
  // 添加限制卡片...
  
  await pptx.writeFile({ fileName: 'technical-slide.pptx' });
}

createTechnicalSlide().catch(console.error);

执行清单

• 分析内容以确定结构
• 选择合适的设计模式
• 选择与主题匹配的配色方案
• 搜索相关图像（如果技术/产品内容需要）
• 使用 curl 或网络工具下载图像
• 创建 PptxGenJS 脚本（包含图像路径）
• 运行脚本生成 .pptx
• 生成缩略图预览
• 验证视觉质量
• 将文件和预览交付给用户

文件输出

将文件保存在专用工作区中：

mkdir -p workspace
cd workspace
node generate-slide.js

生成预览：

python3 /path/to/pptx/scripts/thumbnail.py output.pptx preview --cols 1

修改现有的 PPT 文件

为什么 PptxGenJS 无法编辑现有文件？

技术原因：

1. 设计重点：PptxGenJS 是一个专注于从头创建 PPT 的"生成"库
2. 复杂的文件结构：.pptx 文件是包含多个 XML 文件的 ZIP 存档（Office Open XML 格式）
3. 关系处理：编辑需要解析幻灯片、形状、媒体等之间的复杂关系

解决方案：使用 pptx-automizer 编辑现有文件

pptx-automizer 是一个专门设计用于编辑和合并现有 .pptx 文件的强大 Node.js 库。

安装

npm install pptx-automizer
# 或
yarn add pptx-automizer

核心功能

基本示例：加载和修改现有 PPT

import Automizer from 'pptx-automizer';

const automizer = new Automizer({
  templateDir: 'path/to/templates',
  outputDir: 'path/to/output',
  // 保留现有幻灯片（不截断）
  removeExistingSlides: false,
});

let pres = automizer
  // 加载根模板（输出将基于此）
  .loadRoot('MyPresentation.pptx')
  // 再次加载同一文件以修改其幻灯片
  .load('MyPresentation.pptx', 'myPres');

// 从模板添加幻灯片 2 并修改它
pres.addSlide('myPres', 2, (slide) => {
  // 按形状名称修改元素
  slide.modifyElement('Title', [
    modify.setText('Updated Title Text'),
  ]);
  
  slide.modifyElement('ContentBox', [
    modify.replaceText([{
      replace: '{{placeholder}}',
      by: { text: 'Dynamic Content' }
    }])
  ]);
});

// 写入输出
pres.write('UpdatedPresentation.pptx').then(summary => {
  console.log(summary);
});

修改现有 PPT 中的单张幻灯片

import Automizer, { modify, ModifyTextHelper } from 'pptx-automizer';

async function modifySingleSlide(inputFile, slideNumber, modifications) {
  const automizer = new Automizer({
    templateDir: './',
    outputDir: './',
    removeExistingSlides: true, // 重新开始
  });

  // 加载文件两次 - 作为根和作为模板
  let pres = automizer
    .loadRoot(inputFile)
    .load(inputFile, 'source');

  // 获取所有幻灯片编号
  const slideNumbers = await pres
    .getTemplate('source')
    .getAllSlideNumbers();

  // 重新添加所有幻灯片，仅修改目标幻灯片
  for (const num of slideNumbers) {
    if (num === slideNumber) {
      // 对目标幻灯片应用修改
      pres.addSlide('source', num, modifications);
    } else {
      // 保持其他幻灯片不变
      pres.addSlide('source', num);
    }
  }

  // 写入新文件（或同一文件）
  await pres.write(inputFile.replace('.pptx', '-modified.pptx'));
}

// 用法：
await modifySingleSlide('plugin-to-ide.pptx', 1, (slide) => {
  slide.modifyElement('Title', [
    ModifyTextHelper.setText('New Title'),
  ]);
});

修改现有 PPT 中的图表数据

import Automizer, { modify } from 'pptx-automizer';

pres.addSlide('charts', 2, (slide) => {
  slide.modifyElement('ColumnChart', [
    modify.setChartData({
      series: [
        { label: 'Q1 Sales' },
        { label: 'Q2 Sales' },
      ],
      categories: [
        { label: 'Product A', values: [150, 180] },
        { label: 'Product B', values: [200, 220] },
        { label: 'Product C', values: [130, 160] },
      ],
    }),
  ]);
});

替换现有 PPT 中的图像

import Automizer, { ModifyImageHelper, ModifyShapeHelper, CmToDxa } from 'pptx-automizer';

const automizer = new Automizer({
  templateDir: 'templates',
  outputDir: 'output',
  mediaDir: 'images', // 外部图像目录
});

let pres = automizer
  .loadRoot('Template.pptx')
  .loadMedia(['new-image.png']) // 加载外部图像
  .load('Template.pptx', 'template');

pres.addSlide('template', 1, (slide) => {
  slide.modifyElement('ImagePlaceholder', [
    // 替换图像源
    ModifyImageHelper.setRelationTarget('new-image.png'),
    // 可选调整大小
    ModifyShapeHelper.setPosition({
      w: CmToDxa(8),
      h: CmToDxa(6),
    }),
  ]);
});

pres.write('UpdatedWithNewImage.pptx');

使用基于标签的文本替换

PowerPoint 形状可以包含占位符标签，如 {{title}}，这些标签会被替换：

pres.addSlide('template', 1, (slide) => {
  slide.modifyElement('TextWithTags', [
    modify.replaceText([
      { replace: 'title', by: { text: 'My Dynamic Title' } },
      { replace: 'date', by: { text: '2026-02-28' } },
      { replace: 'author', by: { text: 'Your Name' } },
    ]),
  ]);
});

比较：PptxGenJS vs pptx-automizer

推荐工作流

创建新 PPT：使用 PptxGenJS 编辑现有 PPT：使用 pptx-automizer 混合工作流：使用 pptx-automizer 与 PptxGenJS 集成

// pptx-automizer 可以包装 PptxGenJS 以创建新元素
pres.addSlide('template', 1, (slide) => {
  // 使用 pptxgenjs 从头添加新形状
  slide.generate((pptxGenJSSlide, pptxGenJs) => {
    pptxGenJSSlide.addText('New Text Box', {
      x: 1, y: 1, w: 3, h: 0.5,
      fontSize: 14, color: '333333'
    });
    
    pptxGenJSSlide.addChart(pptxGenJs.ChartType.bar, chartData, {
      x: 4, y: 1, w: 5, h: 3
    });
  });
});

形状选择方法

按形状名称（简单）

slide.modifyElement('MyShapeName', [ /* modifiers */ ]);

按 creationId（稳健）

// 更稳定 - 在幻灯片重新排列后仍然有效
slide.modifyElement('{E43D12C3-AD5A-4317-BC00-FDED287C0BE8}', [ /* modifiers */ ]);

带后备

slide.modifyElement({
  creationId: '{E43D12C3-AD5A-4317-BC00-FDED287C0BE8}',
  name: 'MyShapeName', // 如果未找到 creationId 则回退
}, [ /* modifiers */ ]);

最佳实践

1. 模板管理：维护一个设计良好的 .pptx 模板库
2. 形状命名：在 PowerPoint 中为形状指定有意义的名称（ALT+F10 打开选择窗格）
3. 标签约定：使用一致的标签格式，如 {{tagName}}
4. 版本控制：在 git 中跟踪模板的更改
5. 编辑后预览：始终生成缩略图以验证更改
6. 错误处理：优雅地处理缺失的形状

注意事项

• 颜色中不使用 # 前缀：使用 "ff6b6b" 而不是 "#ff6b6b"（会导致损坏）
• 仅限 Web 安全字体：Arial、Helvetica、Times New Roman、Georgia、Courier New、Verdana
• 测试表情符号支持：某些表情符号可能无法在所有平台上渲染
• 16:9 宽高比：大多数演示文稿的标准（10 x 5.625 英寸）
• pptx-automizer：用于编辑现有的 .pptx 文件
• PptxGenJS：用于从头创建新演示文稿

每周安装次数

99

仓库

huyansheng3/ppt-skills

首次出现

2026年2月28日

安全审计

Gen Agent Trust HubFailSocketWarnSnykWarn

安装于

opencode99

kimi-cli98

amp98

cline98

github-copilot98

codex98