ppt-with-nano-banana

使用 Nano Banana Pro 生成白板手绘风格图像，并结合 PptxGenJS 创建演示文稿（PPT）。

概述

本技能整合了以下两个核心组件：

• Nano Banana Pro —— 为每页幻灯片生成白板手绘风格图像
• PptxGenJS —— 将图像作为整页背景，创建专业级 PPT

设计原则

1. 白板手绘风格

• 每页幻灯片均采用白板风格背景图
• 线条为手绘记号笔效果，略带草图质感
• 纯白背景，整体呈现专业、清晰的演示风格

2. 中文优先

• 所有正文内容以中文为主语言
• 英文术语以括号注释形式补充，例如：“智能体（Agent）”
• 文字简洁明确，符合正式演示场景需求

3. 策略性配色

颜色仅用于强调关键信息，而非装饰性用途：

4. 简洁与专业

• 具备清晰的视觉层级结构
• 极简主义设计，留有充足留白
• 适用于正式场合的专业演示

工作流程

User Request
    ↓
Generate Images (nano-banana-pro)
    - 为每页幻灯片生成白板风格图像
    - 按策略使用红/绿/蓝三色进行重点标注
    - 内容为中文，风格简洁专业
    ↓
Create PPT (pptxgenjs)
    - 设置 16:9 幻灯片比例
    - 将每张图像设为整页背景
    - 保存最终演示文稿
    ↓
Deliver PPT to User

图像生成提示词模板

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.

提示词示例

第 1 页 — 标题页：

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.

第 2 页 — 问题陈述：

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 创建代码模板

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

依赖项

# 安装所需包
npm install pptxgenjs

# 对于 nano-banana-pro（如本地运行）
# 请确保已配置 uv 和 nano-banana-pro skill

最佳实践

1. 图像质量：建议使用 2K 分辨率以确保白板图像清晰锐利
2. 配色策略：在生成图像前，预先规划需突出显示的元素及其对应颜色
3. 文字可读性：确保生成图像中的中文字符清晰、易读
4. 风格一致性：保持所有幻灯片在构图、笔触、配色等方面的统一性
5. 文件组织：按项目或日期对生成的图像进行归类管理

示例输出目录结构

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

故障排查

问题：生成的图像未达到预期白板风格 解决方案：优化提示词，明确强调 “hand-drawn”、“marker sketch”、“whiteboard presentation style” 等关键词

问题：生成图像中中文文字不够清晰 解决方案：在提示词中加入 “clear Chinese characters”，并提高图像分辨率（推荐 2K 或 4K）

问题：颜色表现不够醒目 解决方案：在提示词中显式指定颜色用法，例如：“red accent circle”、“green checkmark”、“blue underline”