single-slide-ppt

OverviewHistoryStatsSecurity

npx skills add ...

Documentation

SKILL.md

Quick professional single-slide PowerPoint creator for concept visualization, comparisons, feature showcases, and decision frameworks. Use when users need to create "one-page PPT", "single slide presentation", "快速做个PPT", "做一页PPT", or want to visualize concepts like "before/after", "problem/solution", "feature grid", "process flow" in presentation format. Ideal for creating visual summaries, product pitches, architecture diagrams, or comparison slides.

npx skills add huyansheng3/ppt-skills --skill single-slide-ppt

Documentation

SKILL.mdView source

Single-Slide PowerPoint Creator

Create professional, visually engaging single-slide PowerPoint presentations using PptxGenJS.

When to Use This Skill

User requests "做一页PPT", "single slide", "create a PPT slide"
Visualizing comparisons (before/after, old vs new, problem/solution)
Feature showcases (grid layouts, capability matrices)
Concept illustrations (workflows, architectures, frameworks)
Decision frameworks or process flows

Core Workflow

1. Understand Content Structure

Analyze the user's request to identify:

Main message/title
Key points or sections (typically 2-6 items)
Natural groupings (left/right, grid, sequential)
Visual metaphors (arrows, icons, cards)

2. Choose Design Pattern

Select a layout that matches the content structure:

Comparison Layouts (2 columns):

Problem → Solution
Before → After
Old → New
Plugin → IDE

Grid Layouts (2x2, 2x3, 3x3):

Feature showcase
Capability matrix
Multi-option comparison

Sequential Flow:

Process steps
Timeline
Decision tree

Single Focus:

Key metric
Core concept
Quote or statement

3. Design Color Palette

Select 3-5 colors based on content theme:

Content-driven palettes:

Technology: Deep blue (#1a1a2e), purple (#4a00e0), accent (#8e2de2)
Problem/Solution: Red (#ff6b6b) for problems, Green (#51cf66) for solutions
Professional: Navy (#2C3E50), teal (#16A085), gold (#F39C12)
Creative: Purple (#722880), pink (#D72D51), orange (#EB5C18)

Color assignment:

Background: Dark (#1a1a2e) or light (#f5f5f5)
Header: Primary brand color or gradient
Problem/negative: Red/orange tones
Solution/positive: Green/blue tones
Accent: Complementary color for highlights

4. Enhance with Relevant Images (Optional)

When creating slides about technical concepts, products, or comparisons, consider adding relevant images to strengthen the message.

When to use images:

Technical architecture diagrams (from official documentation)
Product screenshots (before/after comparisons)
Logo or brand assets (for product slides)
Illustrations (to explain abstract concepts)
Charts or graphs (data visualization)

How to find and download images:

// Example: Download VSCode architecture diagram
// Use curl to download images from official sources
const { execSync } = require('child_process'

Strategy for finding images:

Official documentation: Search for "[Product Name] architecture documentation" or "[Product Name] official API documentation"
GitHub repositories: Look for diagrams in README.md or docs/ folders
Technical blogs: Find explanation diagrams from reputable sources
Use search_web and fetch_web: Search for relevant content and extract image URLs

Adding images to slides:

Best practices for images:

✅ Use official sources (company websites, documentation)
✅ Maintain aspect ratio when resizing
✅ Add captions for context
✅ Ensure images support the narrative
❌ Don't use low-resolution images
❌ Don't overcrowd slides with too many images
❌ Don't use images without permission

5. Create Slide with PptxGenJS

Design Patterns Library

Pattern: Comparison Cards (Left vs Right)

Pattern: Feature Grid (2x3)

Pattern: Visual Comparison Boxes

Pattern: Arrow Connector

Visual Design Best Practices

Typography

Titles: 22-28pt, bold, high contrast
Section headers: 12-16pt, bold
Body text: 9-11pt, medium weight
Captions: 8-9pt, lighter color

Spacing & Alignment

Header height: 0.7-0.9 inches
Section margins: 0.4-0.5 inches from edges
Card padding: 0.1-0.15 inches internal
Grid gaps: 0.08-0.15 inches

Color Usage

Maximum 5 colors per slide
Use transparency for layering: rgba(R,G,B,0.1) becomes RRGGBB + lighter fill
Ensure text contrast ratio > 4.5:1 (use #e0e0e0 text on dark backgrounds)

Visual Hierarchy

Title/header (largest, highest contrast)
Section headers (medium, color-coded)
Content cards (grouped, bordered)
Supporting text (smallest, lower contrast)

Common Slide Types

1. Problem → Solution Slide

Left: Problem cards (red theme)
Middle: Arrow connector
Right: Solution features (green theme)
Bottom: Core value proposition

2. Feature Showcase

Header with product name
2x3 or 3x3 grid of features
Each cell: icon + short description
Optional: Key benefit card at bottom

3. Before/After Comparison

Title explaining transformation
Side-by-side comparison boxes
Visual indicators (emoji/icons)
Arrow showing progression

4. Process Flow

Sequential numbered cards
Arrows between steps
Color progression (gradient)
End state highlighted

5. Technical Architecture Slide (with Images)

Header with architecture name
Official architecture diagram (downloaded from docs)
Caption with source attribution
Key points or limitations highlighted in cards

Example: VSCode Extension Limitations Slide

Execution Checklist

File Output

Save files in a dedicated workspace:

Generate preview:

Modifying Existing PPT Files

Why PptxGenJS Can't Edit Existing Files?

Technical Reasons:

Design Focus: PptxGenJS is a "generation" library focused on creating PPTs from scratch
Complex File Structure: .pptx files are ZIP archives containing multiple XML files (Office Open XML format)
Relationship Handling: Editing requires parsing complex relationships between slides, shapes, media, etc.

Solution: Use `pptx-automizer` for Editing Existing Files

pptx-automizer is a powerful Node.js library specifically designed for editing and merging existing .pptx files.

Installation

Core Capabilities

Feature	Description
Load Templates	Import existing .pptx files as templates
Merge Slides	Selectively add slides from multiple templates
Modify Elements	Locate and modify shapes by name or creationId
Modify Text	Replace text, use tag-based replacement
Modify Images	Replace image sources, resize
Modify Tables	Update table data and styles
Modify Charts	Update chart data (including extended chart types)
Import Slide Masters	Preserve original styles and layouts
PptxGenJS Integration	Use PptxGenJS to create elements on templates

Basic Example: Load and Modify Existing PPT

Modify Single Slide in Existing PPT

Modify Chart Data in Existing PPT

Replace Images in Existing PPT

Use Tag-Based Text Replacement

PowerPoint shapes can contain placeholder tags like {{title}} that get replaced:

Comparison: PptxGenJS vs pptx-automizer

Feature	PptxGenJS	pptx-automizer
Create from scratch	✅ Excellent	⚠️ Limited (wraps PptxGenJS)
Edit existing files	❌ No	✅ Yes
Merge templates	❌ No	✅ Yes
Preserve styles	❌ N/A	✅ Yes
Modify charts	❌ No	✅ Yes
Tag replacement	❌ No	✅ Yes
Learning curve	Low	Medium

Recommended Workflow

For creating new PPTs: Use PptxGenJS For editing existing PPTs: Use pptx-automizer For hybrid workflows: Use pptx-automizer with PptxGenJS integration

Shape Selection Methods

By Shape Name (Simple)

By creationId (Robust)

With Fallback

Best Practices

Template Management: Keep a library of well-designed .pptx templates
Shape Naming: Give shapes meaningful names in PowerPoint (ALT+F10 to open Selection Pane)
Tag Convention: Use consistent tag format like {{tagName}}
Version Control: Track changes to templates in git
Preview After Edit: Always generate thumbnails to verify changes
Error Handling: Handle missing shapes gracefully

Notes

No # prefix in colors: Use "ff6b6b" not "#ff6b6b" (causes corruption)
Web-safe fonts only: Arial, Helvetica, Times New Roman, Georgia, Courier New, Verdana
Test emoji support: Some emoji may not render on all platforms
16:9 aspect ratio: Standard for most presentations (10 x 5.625 inches)
pptx-automizer: Use for editing existing .pptx files
PptxGenJS: Use for creating new presentations from scratch

npx skills add huyansheng3/ppt-skills --skill single-slide-ppt

Documentation

SKILL.md

single-slide-ppt skill by huyansheng3 | SkillBundle

// After downloading the image, add it to the slide
slide.addImage({
  path: 'workspace/downloaded-image.png',
  x: 0.5,    // X position in inches
  y: 1.5,    // Y position in inches
  w: 4.8,    // Width in inches
  h: 2.7     // Height in inches (maintain aspect ratio)
});
 
// Optional: Add caption
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'
});

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();
  
  // Background
  slide.background = { color: '1a1a2e' };
  
  // Header bar
  slide.addShape(pptx.shapes.RECTANGLE, {
    x: 0, y: 0, w: 10, h: 0.8,
    fill: { color: '4a00e0' }
  });
  
  // Title
  slide.addText('Your Title Here', {
    x: 0.5, y: 0.18, w: 9, h: 0.5,
    fontSize: 26, bold: true, color: 'ffffff',
    fontFace: 'Arial'
  });
  
  // Optional: Add downloaded image
  // slide.addImage({
  //   path: 'workspace/image.png',
  //   x: 0.5, y: 1.5, w: 4.8, h: 2.7
  // });
  
  // Content sections...
  // [Add your content here following the patterns below]
  
  await pptx.writeFile({ fileName: 'output.pptx' });
}
 
createSlide().catch(console.error);

// Left section - Problem/Before
slide.addText('🚫 Current State', {
  x: 0.4, y: 1.0, w: 4, h: 0.4,
  fontSize: 14, bold: true, color: 'ff6b6b'
});
 
// Card with left border accent
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
});
 
// Right section - Solution/After (mirror structure with green)
slide.addText('✅ New State', {
  x: 5.3, y: 1.0, w: 4, h: 0.4,
  fontSize: 14, bold: true, color: '51cf66'
});
// [Add cards using green color scheme]

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'
  });
});

// Before box (dashed border)
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'
});
 
// After box (solid border)
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'
});

// Arrow between sections
slide.addText('➔', {
  x: 4.5, y: 2.5, w: 0.8, h: 0.6,
  fontSize: 36, color: '8e2de2',
  align: 'center', valign: 'middle'
});

const pptxgen = require('pptxgenjs');
const { execSync } = require('child_process');
const path = require('path');
 
async function createTechnicalSlide() {
  const pptx = new pptxgen();
  pptx.layout = 'LAYOUT_16x9';
  
  // Download VSCode architecture image
  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' };
  
  // Header
  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'
  });
  
  // Left: Architecture image
  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'
  });
  
  // Right: Limitation cards
  slide.addText('API 限制', {
    x: 5.5, y: 1.2, w: 4.2, h: 0.4,
    fontSize: 18, bold: true, color: 'fc5a1f'
  });
  
  // Add limitation cards...
  
  await pptx.writeFile({ fileName: 'technical-slide.pptx' });
}
 
createTechnicalSlide().catch(console.error);

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

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

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

import Automizer from 'pptx-automizer';
 
const automizer = new Automizer({
  templateDir: 'path/to/templates',
  outputDir: 'path/to/output',
  // Keep existing slides (don't truncate)
  removeExistingSlides: false,
});
 
let pres = automizer
  // Load root template (output will be based on this)
  .loadRoot('MyPresentation.pptx')
  // Load same file again to modify its slides
  .load('MyPresentation.pptx', 'myPres');
 
// Add slide 2 from template and modify it
pres.addSlide('myPres', 2, (slide) => {
  // Modify element by shape name
  slide.modifyElement('Title', [
    modify.setText('Updated Title Text'),
  ]);
  
  slide.modifyElement('ContentBox', [
    modify.replaceText([{
      replace: '{{placeholder}}',
      by: { text: 'Dynamic Content' }
    }])
  ]);
});
 
// Write output
pres.write('UpdatedPresentation.pptx').then(summary => {
  console.log(summary);
});

import Automizer, { modify, ModifyTextHelper } from 'pptx-automizer';
 
async function modifySingleSlide(inputFile, slideNumber, modifications) {
  const automizer = new Automizer({
    templateDir: './',
    outputDir: './',
    removeExistingSlides: true, // Start fresh
  });
 
  // Load the file twice - as root and as template
  let pres = automizer
    .loadRoot(inputFile)
    .load(inputFile, 'source');
 
  // Get all slide numbers
  const slideNumbers = await pres
    .getTemplate('source')
    .getAllSlideNumbers();
 
  // Re-add all slides, modifying only the target slide
  for (const num of slideNumbers) {
    if (num === slideNumber) {
      // Apply modifications to target slide
      pres.addSlide('source', num, modifications);
    } else {
      // Keep other slides unchanged
      pres.addSlide('source', num);
    }
  }
 
  // Write to new file (or same file)
  await pres.write(inputFile.replace('.pptx', '-modified.pptx'));
}
 
// Usage:
await modifySingleSlide('plugin-to-ide.pptx', 1, (slide) => {
  slide.modifyElement('Title', [
    ModifyTextHelper.setText('New Title'),
  ]);
});

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] },
      ],
    }),
  ]);
});

import Automizer, { ModifyImageHelper, ModifyShapeHelper, CmToDxa } from 'pptx-automizer';
 
const automizer = new Automizer({
  templateDir: 'templates',
  outputDir: 'output',
  mediaDir: 'images', // Directory for external images
});
 
let pres = automizer
  .loadRoot('Template.pptx')
  .loadMedia(['new-image.png']) // Load external image
  .load('Template.pptx', 'template');
 
pres.addSlide('template', 1, (slide) => {
  slide.modifyElement('ImagePlaceholder', [
    // Replace image source
    ModifyImageHelper.setRelationTarget('new-image.png'),
    // Optionally adjust size
    ModifyShapeHelper.setPosition({
      w: CmToDxa(8),
      h: CmToDxa(6),
    }),
  ]);
});
 
pres.write('UpdatedWithNewImage.pptx');

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' } },
    ]),
  ]);
});

// pptx-automizer can wrap PptxGenJS for creating new elements
pres.addSlide('template', 1, (slide) => {
  // Use pptxgenjs to add new shapes from scratch
  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 */ ]);

// More stable - survives slide rearrangement
slide.modifyElement('{E43D12C3-AD5A-4317-BC00-FDED287C0BE8}', [ /* modifiers */ ]);

slide.modifyElement({
  creationId: '{E43D12C3-AD5A-4317-BC00-FDED287C0BE8}',
  name: 'MyShapeName', // Fallback if creationId not found
}, [ /* modifiers */ ]);

single-slide-ppt

Documentation

Documentation

Single-Slide PowerPoint Creator

When to Use This Skill

Core Workflow

1. Understand Content Structure

2. Choose Design Pattern

3. Design Color Palette

4. Enhance with Relevant Images (Optional)

5. Create Slide with PptxGenJS

Design Patterns Library

Pattern: Comparison Cards (Left vs Right)

Pattern: Feature Grid (2x3)

Pattern: Visual Comparison Boxes

Pattern: Arrow Connector

Visual Design Best Practices

Typography

Spacing & Alignment

Color Usage

Visual Hierarchy

Common Slide Types

1. Problem → Solution Slide

2. Feature Showcase

3. Before/After Comparison

4. Process Flow

5. Technical Architecture Slide (with Images)

Execution Checklist

File Output

Modifying Existing PPT Files

Why PptxGenJS Can't Edit Existing Files?

Solution: Use pptx-automizer for Editing Existing Files

Installation

Core Capabilities

Basic Example: Load and Modify Existing PPT

Modify Single Slide in Existing PPT

Modify Chart Data in Existing PPT

Replace Images in Existing PPT

Use Tag-Based Text Replacement

Comparison: PptxGenJS vs pptx-automizer

Recommended Workflow

Shape Selection Methods

By Shape Name (Simple)

By creationId (Robust)

With Fallback

Best Practices

Notes

Documentation

single-slide-ppt

Documentation

Single-Slide PowerPoint Creator

When to Use This Skill

Core Workflow

1. Understand Content Structure

2. Choose Design Pattern

3. Design Color Palette

4. Enhance with Relevant Images (Optional)

5. Create Slide with PptxGenJS

Design Patterns Library

Pattern: Comparison Cards (Left vs Right)

Pattern: Feature Grid (2x3)

Pattern: Visual Comparison Boxes

Pattern: Arrow Connector

Visual Design Best Practices

Typography

Spacing & Alignment

Color Usage

Visual Hierarchy

Common Slide Types

1. Problem → Solution Slide

2. Feature Showcase

3. Before/After Comparison

4. Process Flow

5. Technical Architecture Slide (with Images)

Execution Checklist

File Output

Modifying Existing PPT Files

Why PptxGenJS Can't Edit Existing Files?

Solution: Use pptx-automizer for Editing Existing Files

Installation

Solution: Use `pptx-automizer` for Editing Existing Files

Solution: Use `pptx-automizer` for Editing Existing Files