illustrated-slides-with-nano-banana

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Illustrated Slides with Nano Banana

基于Nano Banana的插图式幻灯片

Create presentations where each slide is a complete AI-generated image with all text and content embedded directly in the image. No separate text layers — the presentation file is simply a container for full-page illustrated slides. Supports multiple visual styles from corporate to creative.
创建演示文稿,其中每张幻灯片都是嵌入了所有文本和内容的完整AI生成图像。没有单独的文本图层——演示文稿文件只是全页插图幻灯片的容器。支持从商务到创意的多种视觉风格。

Key Principle

核心原则

All content is embedded in the images.
Unlike traditional presentations with text overlays, this skill generates complete slide images where titles, bullet points, diagrams, and illustrations are all part of the generated image itself - like pages in a children's picture book.
所有内容都嵌入在图像中。
与带有文本叠加层的传统演示文稿不同,本技能生成完整的幻灯片图像,其中标题、项目符号、图表和插图都是生成图像的一部分——就像儿童绘本中的页面一样。

Behavior

执行流程

When this skill is triggered:
当触发本技能时:

1. Get Presentation Topic

1. 获取演示主题

Ask the user for their presentation topic if not specified.
如果用户未指定,询问其演示文稿主题。

2. Ask for Visual Style

2. 询问视觉风格

Always ask the user to choose a style:
🎨 What visual style would you like?

1️⃣ **Kawaii / Children's Book**
   Warm pastels, cream background, cute characters with faces
   Best for: Kids content, educational, playful topics

2️⃣ **Professional / Corporate**  
   Clean blues & grays, white background, modern icons
   Best for: Business, finance, tech presentations

3️⃣ **Bold / Creative**
   Vibrant colors, dynamic compositions, artistic flair
   Best for: Marketing, startups, creative pitches

4️⃣ **Minimalist / Elegant**
   Black & white with one accent, lots of whitespace
   Best for: Luxury brands, design, architecture

5️⃣ **Custom**
   Describe your own style preference

Which style would you like? (1-5)
务必让用户选择一种风格:
🎨 您想要哪种视觉风格?

1️⃣ **卡通风 / 儿童绘本风**
   温暖的马卡龙色调,米黄色背景,带表情的可爱角色
   最适合:儿童内容、教育类、趣味主题

2️⃣ **专业 / 商务风**  
   干净的蓝灰色调,白色背景,现代图标
   最适合:商务、金融、科技类演示文稿

3️⃣ **醒目 / 创意风**
   鲜艳色彩,动态构图,艺术感
   最适合:营销、初创企业、创意提案

4️⃣ **极简 / 优雅风**
   黑白配色加一种强调色,大量留白
   最适合:奢侈品牌、设计、建筑类

5️⃣ **自定义**
   描述您自己的风格偏好

您想要哪种风格?(1-5)

3. Plan Slide Structure

3. 规划幻灯片结构

Based on topic, plan ~8-12 slides:
  • Title slide
  • Introduction/Chapter slides
  • Content slides (with embedded text & illustrations)
  • Diagram/flow slides
  • Summary/statistics slides
  • Closing slide
根据主题,规划约8-12张幻灯片:
  • 标题页
  • 介绍/章节页
  • 内容页(含嵌入文本和插图)
  • 图表/流程页
  • 总结/数据统计页
  • 结尾页

4. Estimate Budget & Request Approval

4. 估算预算并请求批准

  • Each image: 0.1 USDC
  • Recommend 1.5x buffer
  • Tell user: "To create this presentation with X slides, I need a budget of Y USDC."
  • 每张图像:0.1 USDC
  • 建议预留1.5倍缓冲金额
  • 告知用户:"要创建包含X张幻灯片的演示文稿,我需要Y USDC的预算。"

5. Generate Slide Images

5. 生成幻灯片图像

For each slide:
  1. Get x402 payment signature
  2. Generate image with ALL content embedded (title, text, illustrations)
  3. Download and save image
  4. Repeat for all slides
对于每张幻灯片:
  1. 获取x402支付签名
  2. 生成嵌入所有内容的图像(标题、文本、插图)
  3. 下载并保存图像
  4. 对所有幻灯片重复上述步骤

6. Assemble Presentation

6. 组装演示文稿

  • Create PPTX with one full-page image per slide
  • Optionally export as PDF
  • Open for user review
  • 创建PPTX文件,每页包含一张全页图像
  • 可选择导出为PDF
  • 供用户查看

AI Image Generation via x402

基于x402的AI图像生成

API Details

API详情

  • Endpoint:
    https://proxy-monetize.fluxapay.xyz/api/nano-banana/gen-image
  • Method: POST
  • Price: 0.1 USDC per image (Base network)
  • Payment: x402 protocol with FluxA Wallet
  • 接口地址:
    https://proxy-monetize.fluxapay.xyz/api/nano-banana/gen-image
  • 请求方法: POST
  • 价格: 每张图像0.1 USDC(Base网络)
  • 支付方式: 使用FluxA Wallet的x402协议

Payment Flow

支付流程

See
./fluxa-wallet/x402-payment.md
for the x402 payment process.
查看
./fluxa-wallet/x402-payment.md
了解x402支付流程。

Request Format

请求格式

json
{
  "contents": [{
    "parts": [{"text": "Your detailed slide prompt here"}]
  }]
}
json
{
  "contents": [{
    "parts": [{"text": "Your detailed slide prompt here"}]
  }]
}

Response Format

响应格式

Image URL at:
response.candidates[0].content.parts[1].inlineData.url

图像URL位于:
response.candidates[0].content.parts[1].inlineData.url

Style Guide & Prompts

风格指南与提示词模板

Style 1: Kawaii / Children's Book

风格1:卡通风 / 儿童绘本风

Color Palette:
  • Background:
    #F5F0E6
    (warm cream)
  • Titles:
    #D35D4E
    (coral red)
  • Cards:
    #E8A095
    (coral),
    #A8DCD1
    (mint),
    #E5C88E
    (mustard),
    #F5D5C8
    (peach)
  • Body text:
    #5C4A3D
    (warm brown)
Prompt Template:
Create a children's book illustration slide.

Title: "[TITLE]" in large friendly coral-red text at top.

Content: [DESCRIBE WHAT SHOULD BE SHOWN]

Style requirements:
- Kawaii/cute aesthetic with warm pastels
- Cream background (#F5F0E6)
- Characters have simple dot eyes and rosy cheeks
- Hand-drawn, friendly illustration style
- Include decorative elements: stars, dots, sparkles
- All text must be part of the image (embedded, not overlay)
- 16:9 aspect ratio suitable for presentation slide

调色板:
  • 背景:
    #F5F0E6
    (温暖米黄)
  • 标题:
    #D35D4E
    (珊瑚红)
  • 卡片:
    #E8A095
    (珊瑚色)、
    #A8DCD1
    (薄荷绿)、
    #E5C88E
    (芥末黄)、
    #F5D5C8
    (桃粉色)
  • 正文文本:
    #5C4A3D
    (暖棕色)
提示词模板:
Create a children's book illustration slide.

Title: "[TITLE]" in large friendly coral-red text at top.

Content: [DESCRIBE WHAT SHOULD BE SHOWN]

Style requirements:
- Kawaii/cute aesthetic with warm pastels
- Cream background (#F5F0E6)
- Characters have simple dot eyes and rosy cheeks
- Hand-drawn, friendly illustration style
- Include decorative elements: stars, dots, sparkles
- All text must be part of the image (embedded, not overlay)
- 16:9 aspect ratio suitable for presentation slide

Style 2: Professional / Corporate

风格2:专业 / 商务风

Color Palette:
  • Background:
    #FFFFFF
    or
    #F7FAFC
    (white/light gray)
  • Titles:
    #1A365D
    (navy blue)
  • Accents:
    #3182CE
    (blue),
    #48BB78
    (green)
  • Body text:
    #2D3748
    (dark gray)
Prompt Template:
Create a professional business presentation slide.

Title: "[TITLE]" in clean navy blue text at top.

Content: [DESCRIBE WHAT SHOULD BE SHOWN]

Style requirements:
- Clean, corporate aesthetic
- White or light gray background
- Modern sans-serif typography
- Simple flat icons and minimal illustrations
- Professional color scheme: navy, blue, white, gray
- All text must be part of the image (embedded, not overlay)
- 16:9 aspect ratio suitable for presentation slide

调色板:
  • 背景:
    #FFFFFF
    #F7FAFC
    (白色/浅灰)
  • 标题:
    #1A365D
    (藏青色)
  • 强调色:
    #3182CE
    (蓝色)、
    #48BB78
    (绿色)
  • 正文文本:
    #2D3748
    (深灰)
提示词模板:
Create a professional business presentation slide.

Title: "[TITLE]" in clean navy blue text at top.

Content: [DESCRIBE WHAT SHOULD BE SHOWN]

Style requirements:
- Clean, corporate aesthetic
- White or light gray background
- Modern sans-serif typography
- Simple flat icons and minimal illustrations
- Professional color scheme: navy, blue, white, gray
- All text must be part of the image (embedded, not overlay)
- 16:9 aspect ratio suitable for presentation slide

Style 3: Bold / Creative

风格3:醒目 / 创意风

Color Palette:
  • Background:
    #1A1A2E
    (dark) or gradients
  • Titles:
    #FF6B6B
    (coral) or
    #4ECDC4
    (teal)
  • Accents:
    #FFE66D
    (yellow),
    #95E1D3
    (mint),
    #F38181
    (pink)
  • Text:
    #FFFFFF
    (white)
Prompt Template:
Create a bold, creative presentation slide.

Title: "[TITLE]" in large dynamic text with creative typography.

Content: [DESCRIBE WHAT SHOULD BE SHOWN]

Style requirements:
- Vibrant, energetic aesthetic
- Bold color combinations: electric blue, hot pink, bright yellow
- Dynamic compositions with visual interest
- Creative illustrations with personality
- Dark or gradient background for contrast
- All text must be part of the image (embedded, not overlay)
- 16:9 aspect ratio suitable for presentation slide

调色板:
  • 背景:
    #1A1A2E
    (深色)或渐变
  • 标题:
    #FF6B6B
    (珊瑚红)或
    #4ECDC4
    (青绿色)
  • 强调色:
    #FFE66D
    (黄色)、
    #95E1D3
    (薄荷绿)、
    #F38181
    (粉色)
  • 文本:
    #FFFFFF
    (白色)
提示词模板:
Create a bold, creative presentation slide.

Title: "[TITLE]" in large dynamic text with creative typography.

Content: [DESCRIBE WHAT SHOULD BE SHOWN]

Style requirements:
- Vibrant, energetic aesthetic
- Bold color combinations: electric blue, hot pink, bright yellow
- Dynamic compositions with visual interest
- Creative illustrations with personality
- Dark or gradient background for contrast
- All text must be part of the image (embedded, not overlay)
- 16:9 aspect ratio suitable for presentation slide

Style 4: Minimalist / Elegant

风格4:极简 / 优雅风

Color Palette:
  • Background:
    #FFFFFF
    (white)
  • Titles:
    #000000
    (black)
  • Accent:
    #C9A227
    (gold) or
    #1A4D2E
    (deep green)
  • Body text:
    #333333
    (dark gray)
Prompt Template:
Create a minimalist, elegant presentation slide.

Title: "[TITLE]" in refined serif typography.

Content: [DESCRIBE WHAT SHOULD BE SHOWN]

Style requirements:
- Minimal and sophisticated aesthetic
- Clean white background with generous whitespace
- Limited color palette: black, white, one accent color
- Thin lines and simple geometric shapes
- Luxurious, refined feel
- All text must be part of the image (embedded, not overlay)
- 16:9 aspect ratio suitable for presentation slide

调色板:
  • 背景:
    #FFFFFF
    (白色)
  • 标题:
    #000000
    (黑色)
  • 强调色:
    #C9A227
    (金色)或
    #1A4D2E
    (深绿色)
  • 正文文本:
    #333333
    (深灰)
提示词模板:
Create a minimalist, elegant presentation slide.

Title: "[TITLE]" in refined serif typography.

Content: [DESCRIBE WHAT SHOULD BE SHOWN]

Style requirements:
- Minimal and sophisticated aesthetic
- Clean white background with generous whitespace
- Limited color palette: black, white, one accent color
- Thin lines and simple geometric shapes
- Luxurious, refined feel
- All text must be part of the image (embedded, not overlay)
- 16:9 aspect ratio suitable for presentation slide

Slide Type Templates

幻灯片类型模板

Title Slide

标题页

Create a [STYLE] title slide.

Main title: "[TITLE]" - large and prominent
Subtitle: "[SUBTITLE]" - smaller, below main title

Visual: [MAIN ILLUSTRATION relevant to topic]

[STYLE-SPECIFIC REQUIREMENTS]
All text embedded in image. 16:9 ratio.
Create a [STYLE] title slide.

Main title: "[TITLE]" - large and prominent
Subtitle: "[SUBTITLE]" - smaller, below main title

Visual: [MAIN ILLUSTRATION relevant to topic]

[STYLE-SPECIFIC REQUIREMENTS]
All text embedded in image. 16:9 ratio.

Content Slide (with points)

内容页(带项目符号)

Create a [STYLE] content slide.

Title: "[TITLE]" at top

Show [NUMBER] key points with icons/illustrations:
1. [POINT 1] - with [visual element]
2. [POINT 2] - with [visual element]  
3. [POINT 3] - with [visual element]
...

Arrange in [grid/list/cards] layout.

[STYLE-SPECIFIC REQUIREMENTS]
All text embedded in image. 16:9 ratio.
Create a [STYLE] content slide.

Title: "[TITLE]" at top

Show [NUMBER] key points with icons/illustrations:
1. [POINT 1] - with [visual element]
2. [POINT 2] - with [visual element]  
3. [POINT 3] - with [visual element]
...

Arrange in [grid/list/cards] layout.

[STYLE-SPECIFIC REQUIREMENTS]
All text embedded in image. 16:9 ratio.

Diagram / Flow Slide

图表 / 流程页

Create a [STYLE] diagram slide.

Title: "[TITLE]" at top

Show a [horizontal/vertical] flow diagram:
Step 1: [LABEL] → Step 2: [LABEL] → Step 3: [LABEL] → Step 4: [LABEL]

Each step has an icon and text label.
Connect with arrows or dotted lines.

[STYLE-SPECIFIC REQUIREMENTS]
All text embedded in image. 16:9 ratio.
Create a [STYLE] diagram slide.

Title: "[TITLE]" at top

Show a [horizontal/vertical] flow diagram:
Step 1: [LABEL] → Step 2: [LABEL] → Step 3: [LABEL] → Step 4: [LABEL]

Each step has an icon and text label.
Connect with arrows or dotted lines.

[STYLE-SPECIFIC REQUIREMENTS]
All text embedded in image. 16:9 ratio.

Comparison Slide

对比页

Create a [STYLE] comparison slide.

Title: "[TITLE]" at top

LEFT column: "[LEFT HEADER]"
- [Item 1]
- [Item 2]
- [Item 3]

RIGHT column: "[RIGHT HEADER]"
- [Item 1]
- [Item 2]
- [Item 3]

Clear visual separation between columns.

[STYLE-SPECIFIC REQUIREMENTS]
All text embedded in image. 16:9 ratio.
Create a [STYLE] comparison slide.

Title: "[TITLE]" at top

LEFT column: "[LEFT HEADER]"
- [Item 1]
- [Item 2]
- [Item 3]

RIGHT column: "[RIGHT HEADER]"
- [Item 1]
- [Item 2]
- [Item 3]

Clear visual separation between columns.

[STYLE-SPECIFIC REQUIREMENTS]
All text embedded in image. 16:9 ratio.

Statistics Slide

数据统计页

Create a [STYLE] statistics slide.

Title: "[TITLE]" at top

Display [NUMBER] impressive statistics:
- "[NUMBER 1]" with label "[LABEL 1]" and icon
- "[NUMBER 2]" with label "[LABEL 2]" and icon
- "[NUMBER 3]" with label "[LABEL 3]" and icon

Make numbers visually prominent and impactful.

[STYLE-SPECIFIC REQUIREMENTS]
All text embedded in image. 16:9 ratio.
Create a [STYLE] statistics slide.

Title: "[TITLE]" at top

Display [NUMBER] impressive statistics:
- "[NUMBER 1]" with label "[LABEL 1]" and icon
- "[NUMBER 2]" with label "[LABEL 2]" and icon
- "[NUMBER 3]" with label "[LABEL 3]" and icon

Make numbers visually prominent and impactful.

[STYLE-SPECIFIC REQUIREMENTS]
All text embedded in image. 16:9 ratio.

Closing Slide

结尾页

Create a [STYLE] closing/ending slide.

Main text: "[CLOSING MESSAGE]" - prominent
Tagline: "[TAGLINE]" at bottom

Visual: [CELEBRATION/CONCLUSION imagery]

Warm, conclusive, memorable feel.

[STYLE-SPECIFIC REQUIREMENTS]
All text embedded in image. 16:9 ratio.

Create a [STYLE] closing/ending slide.

Main text: "[CLOSING MESSAGE]" - prominent
Tagline: "[TAGLINE]" at bottom

Visual: [CELEBRATION/CONCLUSION imagery]

Warm, conclusive, memorable feel.

[STYLE-SPECIFIC REQUIREMENTS]
All text embedded in image. 16:9 ratio.

Building the Presentation

组装演示文稿

Simple PPTX Builder

简易PPTX构建器

javascript
const pptxgen = require('pptxgenjs');
const fs = require('fs');
const path = require('path');

async function buildImagePresentation(slidesDir, outputPath) {
    const pptx = new pptxgen();
    pptx.layout = 'LAYOUT_16x9';
    
    // Get slide images in order (01-*.png, 02-*.png, etc.)
    const slides = fs.readdirSync(slidesDir)
        .filter(f => f.endsWith('.png') && f.match(/^\d{2}-/))
        .sort();
    
    for (const file of slides) {
        const slide = pptx.addSlide();
        slide.addImage({
            path: path.join(slidesDir, file),
            x: 0, y: 0,
            w: '100%', h: '100%',
            sizing: { type: 'contain', w: '100%', h: '100%' }
        });
    }
    
    await pptx.writeFile({ fileName: outputPath });
    console.log(`Saved: ${outputPath}`);
}
javascript
const pptxgen = require('pptxgenjs');
const fs = require('fs');
const path = require('path');

async function buildImagePresentation(slidesDir, outputPath) {
    const pptx = new pptxgen();
    pptx.layout = 'LAYOUT_16x9';
    
    // Get slide images in order (01-*.png, 02-*.png, etc.)
    const slides = fs.readdirSync(slidesDir)
        .filter(f => f.endsWith('.png') && f.match(/^\d{2}-/))
        .sort();
    
    for (const file of slides) {
        const slide = pptx.addSlide();
        slide.addImage({
            path: path.join(slidesDir, file),
            x: 0, y: 0,
            w: '100%', h: '100%',
            sizing: { type: 'contain', w: '100%', h: '100%' }
        });
    }
    
    await pptx.writeFile({ fileName: outputPath });
    console.log(`Saved: ${outputPath}`);
}

File Naming Convention

文件命名规范

Name slide images with numeric prefixes for ordering:
01-title.png
02-intro.png
03-content-1.png
04-content-2.png
...
10-ending.png

为幻灯片图像添加数字前缀以排序:
01-title.png
02-intro.png
03-content-1.png
04-content-2.png
...
10-ending.png

Dependencies

依赖项

Local Files

本地文件

  • fluxa-wallet/
    - x402 payment documentation and scripts
    • x402-payment.md
      - Payment flow documentation
    • initialize-agent-id.md
      - Agent ID setup
    • error-handle.md
      - Error handling guide
    • scripts/fluxa-cli.bundle.js
      - CLI for mandate-based payments
  • scripts/
    - Build scripts for this skill
  • fluxa-wallet/
    - x402支付文档和脚本
    • x402-payment.md
      - 支付流程文档
    • initialize-agent-id.md
      - Agent ID设置指南
    • error-handle.md
      - 错误处理指南
    • scripts/fluxa-cli.bundle.js
      - 基于委托支付的CLI工具
  • scripts/
    - 本技能的构建脚本

NPM Package

NPM包

bash
npm install pptxgenjs
bash
npm install pptxgenjs

Agent Config

Agent配置

JWT stored at:
~/.fluxa-ai-wallet-mcp/config.json
javascript
const jwt = require(os.homedir() + '/.fluxa-ai-wallet-mcp/config.json').agentId.jwt;

JWT存储在:
~/.fluxa-ai-wallet-mcp/config.json
javascript
const jwt = require(os.homedir() + '/.fluxa-ai-wallet-mcp/config.json').agentId.jwt;

Summary

总结

AspectThis SkillOriginal Skill
Slide contentAll embedded in imagesHTML with text overlays
Text handlingPart of AI-generated imageSeparate HTML elements
StyleUser chooses from 5 optionsDark tech theme
Best forVisual presentations, kids contentTechnical presentations
OutputPPTX/PDF with full-page imagesPPTX from HTML conversion
方面本技能原有技能
幻灯片内容全部嵌入图像中带文本叠加层的HTML
文本处理属于AI生成图像的一部分独立的HTML元素
风格用户可从5种选项中选择深色科技主题
适用场景视觉类演示文稿、儿童内容技术类演示文稿
输出格式含全页图像的PPTX/PDF从HTML转换的PPTX