illustrated-slides-with-nano-banana
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseIllustrated 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:
- Get x402 payment signature
- Generate image with ALL content embedded (title, text, illustrations)
- Download and save image
- Repeat for all slides
对于每张幻灯片:
- 获取x402支付签名
- 生成嵌入所有内容的图像(标题、文本、插图)
- 下载并保存图像
- 对所有幻灯片重复上述步骤
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 for the x402 payment process.
./fluxa-wallet/x402-payment.md查看了解x402支付流程。
./fluxa-wallet/x402-payment.mdRequest 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.urlStyle Guide & Prompts
风格指南与提示词模板
Style 1: Kawaii / Children's Book
风格1:卡通风 / 儿童绘本风
Color Palette:
- Background: (warm cream)
#F5F0E6 - Titles: (coral red)
#D35D4E - Cards: (coral),
#E8A095(mint),#A8DCD1(mustard),#E5C88E(peach)#F5D5C8 - Body text: (warm brown)
#5C4A3D
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 slideStyle 2: Professional / Corporate
风格2:专业 / 商务风
Color Palette:
- Background: or
#FFFFFF(white/light gray)#F7FAFC - Titles: (navy blue)
#1A365D - Accents: (blue),
#3182CE(green)#48BB78 - Body text: (dark gray)
#2D3748
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 slideStyle 3: Bold / Creative
风格3:醒目 / 创意风
Color Palette:
- Background: (dark) or gradients
#1A1A2E - Titles: (coral) or
#FF6B6B(teal)#4ECDC4 - Accents: (yellow),
#FFE66D(mint),#95E1D3(pink)#F38181 - Text: (white)
#FFFFFF
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 slideStyle 4: Minimalist / Elegant
风格4:极简 / 优雅风
Color Palette:
- Background: (white)
#FFFFFF - Titles: (black)
#000000 - Accent: (gold) or
#C9A227(deep green)#1A4D2E - Body text: (dark gray)
#333333
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 slideSlide 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.pngDependencies
依赖项
Local Files
本地文件
- - x402 payment documentation and scripts
fluxa-wallet/- - Payment flow documentation
x402-payment.md - - Agent ID setup
initialize-agent-id.md - - Error handling guide
error-handle.md - - CLI for mandate-based payments
scripts/fluxa-cli.bundle.js
- - Build scripts for this skill
scripts/
- - x402支付文档和脚本
fluxa-wallet/- - 支付流程文档
x402-payment.md - - Agent ID设置指南
initialize-agent-id.md - - 错误处理指南
error-handle.md - - 基于委托支付的CLI工具
scripts/fluxa-cli.bundle.js
- - 本技能的构建脚本
scripts/
NPM Package
NPM包
bash
npm install pptxgenjsbash
npm install pptxgenjsAgent Config
Agent配置
JWT stored at:
~/.fluxa-ai-wallet-mcp/config.jsonjavascript
const jwt = require(os.homedir() + '/.fluxa-ai-wallet-mcp/config.json').agentId.jwt;JWT存储在:
~/.fluxa-ai-wallet-mcp/config.jsonjavascript
const jwt = require(os.homedir() + '/.fluxa-ai-wallet-mcp/config.json').agentId.jwt;Summary
总结
| Aspect | This Skill | Original Skill |
|---|---|---|
| Slide content | All embedded in images | HTML with text overlays |
| Text handling | Part of AI-generated image | Separate HTML elements |
| Style | User chooses from 5 options | Dark tech theme |
| Best for | Visual presentations, kids content | Technical presentations |
| Output | PPTX/PDF with full-page images | PPTX from HTML conversion |
| 方面 | 本技能 | 原有技能 |
|---|---|---|
| 幻灯片内容 | 全部嵌入图像中 | 带文本叠加层的HTML |
| 文本处理 | 属于AI生成图像的一部分 | 独立的HTML元素 |
| 风格 | 用户可从5种选项中选择 | 深色科技主题 |
| 适用场景 | 视觉类演示文稿、儿童内容 | 技术类演示文稿 |
| 输出格式 | 含全页图像的PPTX/PDF | 从HTML转换的PPTX |