ppt-with-nano-banana（纳米香蕉 ppt）

ppt-with-nano-banana

Create whiteboard hand-drawn style presentations using Nano Banana Pro for image generation and PptxGenJS for PPT creation.

Overview

This skill combines:

• Nano Banana Pro - Generate whiteboard hand-drawn style images for each slide
• PptxGenJS - Create professional PPT with images as full-slide backgrounds

Design Principles

1. Whiteboard Hand-Drawn Style

• Every slide uses a whiteboard-style background image
• Hand-drawn marker lines with slight sketchy appearance
• Clean white background, professional presentation style

2. Chinese Content First

• All content in Chinese as primary language
• English as notes in parentheses, e.g., "智能体（Agent）"
• Clear, concise, presentation-ready text

3. Strategic Color Usage

Use colors purposefully to highlight key points, not for decoration:

4. Clean & Professional

• Clear visual hierarchy
• Minimalist design with plenty of white space
• Suitable for professional presentations

Workflow

User Request
    ↓
Generate Images (nano-banana-pro)
    - Create whiteboard-style image for each slide
    - Use strategic colors (red/green/blue) for emphasis
    - Chinese content, clean professional style
    ↓
Create PPT (pptxgenjs)
    - Set up 16:9 layout
    - Add each image as full-slide background
    - Save final presentation
    ↓
Deliver PPT to User

Image Generation Prompt Template

Whiteboard hand-drawn style [content description] on clean white background.
[Specific elements with strategic color accents].
Hand-drawn black marker lines with slight sketchy appearance.
All text in Chinese with English notes in parentheses where appropriate.
Professional whiteboard presentation style, minimalist design, plenty of white space.

Example Prompts

Slide 1 - Title:

Whiteboard hand-drawn style title slide on clean white background.
Large hand-written Chinese title: '智能体（Agent）长期记忆技术架构'.
Subtitle: '让AI拥有持续学习和记忆的能力'.
Red circle accent highlighting the word '记忆' (memory), blue underline beneath '智能体'.
Clean black marker lines, professional whiteboard style.

Slide 2 - Problem Statement:

Whiteboard hand-drawn style diagram on clean white background, all content in Chinese.
Title: '为什么需要长期记忆？'.
Three hand-drawn boxes: Left box with red accent - '上下文丢失（Context Loss）' with broken chain icon and note '每次对话重新开始'.
Middle box with green accent - '知识孤岛（Knowledge Isolation）' with island icons and note '信息无法关联'.
Right box with blue accent - '缺乏个性化（No Personalization）' with person icon and note '无法定制服务'.
Hand-drawn arrows connecting the concepts. Professional whiteboard style.

PPT Creation Code Template

const PptxGenJS = require('pptxgenjs');
const path = require('path');

async function createWhiteboardPPT() {
    const pptx = new PptxGenJS();
    pptx.layout = 'LAYOUT_16x9';
    pptx.author = 'AI Assistant';
    pptx.title = 'Your Title Here';
    pptx.subject = 'Your Subject Here';

    const imgDir = '/path/to/your/images';

    // Slide 1
    const slide1 = pptx.addSlide();
    slide1.addImage({
        path: path.join(imgDir, 'slide1-image.png'),
        x: 0, y: 0, w: 10, h: 5.625
    });

    // Slide 2
    const slide2 = pptx.addSlide();
    slide2.addImage({
        path: path.join(imgDir, 'slide2-image.png'),
        x: 0, y: 0, w: 10, h: 5.625
    });

    // Add more slides as needed...

    // Save PPT
    const outputPath = '/path/to/output/Your-PPT-Name.pptx';
    await pptx.writeFile({ fileName: outputPath });
    console.log('✅ Whiteboard style PPT created successfully!');
    console.log('📁 File path: ' + outputPath);
}

createWhiteboardPPT().catch(err => {
    console.error('❌ Error creating PPT:', err);
    process.exit(1);
});

Dependencies

# Install required packages
npm install pptxgenjs

# For nano-banana-pro (if using locally)
# Ensure uv and nano-banana-pro skill are configured

Best Practices

1. Image Quality: Use 2K resolution for crisp whiteboard images
2. Color Strategy: Plan which elements need color emphasis before generating images
3. Text Clarity: Ensure Chinese characters are clear and readable in generated images
4. Consistency: Maintain consistent visual style across all slides
5. File Organization: Keep generated images organized by project/date

Example Output Structure

project-folder/
├── ppt_images/
│   ├── slide1-title.png
│   ├── slide2-problem.png
│   ├── slide3-architecture.png
│   └── ...
├── create_ppt.js
└── output.pptx

Troubleshooting

Issue: Generated images don't match expected whiteboard style Solution: Refine prompt to emphasize "hand-drawn", "marker sketch", "whiteboard presentation style"

Issue: Chinese text not clear in generated images Solution: Specify "clear Chinese characters" and use higher resolution (2K or 4K)

Issue: Colors not prominent enough Solution: Specify color usage explicitly: "red accent circle", "green checkmark", "blue underline"