mcpField
I
illustrated-slides-with-nano-banana

illustrated-slides-with-nano-banana

github.com/fluxa-agent-payment文档处理0126 次安装34 周前更新
代码仓库

关于 illustrated-slides-with-nano-banana

illustrated-slides-with-nano-banana 是一项将整页 AI 生成图像用作幻灯片的技能，文字和插图均嵌入图像。它涵盖风格选择、幻灯片规划、图像生成及 PPTX 组装，并可选导出 PDF。

主要功能

  1. 01将文字和视觉内容嵌入幻灯片图像
  2. 02选择多种视觉风格
  3. 03规划演示文稿的幻灯片结构
  4. 04通过 x402 支付流程生成图像
  5. 05将图像组装为 PPTX
  6. 06可选导出为 PDF

适用场景

  1. 01制作插画风格的教育演示文稿
  2. 02准备图像式幻灯片的企业演示
  3. 03将主题整理为幻灯片序列
  4. 04将演示文稿导出为 PPTX 或 PDF

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/fluxa-agent-payment/skills --skill illustrated-slides-with-nano-banana

安装后在 Claude Code 中输入/illustrated-slides-with-nano-banana确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

fluxa-wallet/
PAYMENT-LINK.md
PAYOUT.md
X402-PAYMENT.md
fluxa-wallet/scripts/
fluxa-cli.bundle.js
scripts/
build-image-pptx.js

详细介绍

使用 Nano Banana 制作插画幻灯片

创建演示文稿，其中每张幻灯片都是一张完整的 AI 生成图像，所有文字和内容都直接嵌入图像中。不使用单独的文本图层——演示文稿文件只是一个用于存放整页插画幻灯片的容器。支持从企业风格到创意风格的多种视觉风格。

核心原则

所有内容都嵌入图像中。

不同于带有文字叠加层的传统演示文稿，这项技能会生成完整的幻灯片图像，标题、项目符号、图表和插画都属于生成图像本身——就像儿童图画书中的一页。

行为

触发这项技能时：

1. 获取演示主题

如果用户未指定主题，请询问用户的演示主题。

2. 询问视觉风格

始终请用户选择一种风格：

🎨 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)
3. 规划幻灯片结构

根据主题，规划约 8-12 张幻灯片：

  • 标题页
  • 引言／章节页
  • 内容页（含嵌入的文字和插画）
  • 图表／流程页
  • 总结／统计页
  • 结束页
4. 估算预算并请求批准
  • 每张图像：0.1 USDC
  • 建议预留 1.5 倍预算
  • 告诉用户：“要创建这份包含 X 张幻灯片的演示文稿，我需要 Y USDC 的预算。”
5. 生成幻灯片图像

对于每张幻灯片：

  1. 获取 x402 支付签名
  2. 生成嵌入所有内容（标题、文字、插画）的图像
  3. 下载并保存图像
  4. 对所有幻灯片重复此操作
6. 组装演示文稿
  • 创建 PPTX，每张幻灯片放置一张整页图像
  • 可选择导出为 PDF
  • 打开供用户审阅

通过 x402 生成 AI 图像

API 详情
  • 端点： https://proxy-monetize.fluxapay.xyz/api/nano-banana/gen-image
  • 方法： POST
  • 价格： 每张图像 0.1 USDC（Base 网络）
  • 支付： 使用 FluxA Wallet 的 x402 协议
支付流程

请参阅 ./fluxa-wallet/x402-payment.md，了解 x402 支付流程。

请求格式
{
  "contents": [{
    "parts": [{"text": "Your detailed slide prompt here"}]
  }]
}
响应格式

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

风格指南与提示词

风格 1：可爱风／儿童绘本风

配色方案：

  • 背景：#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
风格 2：专业风／企业风

配色方案：

  • 背景：#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
风格 3：大胆风／创意风

配色方案：

  • 背景：#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
风格 4：极简风／优雅风

配色方案：

  • 背景：#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

幻灯片类型模板

标题页
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] 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] 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] 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] 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] 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.

构建演示文稿

简易 PPTX 构建器
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}`);
}
文件命名规范

为幻灯片图像添加数字前缀，以确定排列顺序：

01-title.png
02-intro.png
03-content-1.png
04-content-2.png
...
10-ending.png

依赖项

本地文件
  • fluxa-wallet/ - x402 支付文档和脚本
    • x402-payment.md - 支付流程文档
    • initialize-agent-id.md - Agent ID 设置
    • error-handle.md - 错误处理指南
    • scripts/fluxa-cli.bundle.js - 用于基于授权的支付的 CLI
  • scripts/ - 这项技能的构建脚本
NPM 包
npm install pptxgenjs
Agent 配置

JWT 存储于：~/.fluxa-ai-wallet-mcp/config.json

const jwt = require(os.homedir() + '/.fluxa-ai-wallet-mcp/config.json').agentId.jwt;

摘要

方面此技能原始技能
幻灯片内容全部嵌入图片中HTML 叠加文本
文本处理属于 AI 生成图片的一部分独立的 HTML 元素
风格用户从 5 个选项中选择暗色科技主题
适用场景视觉演示、儿童内容技术演示
输出带有全页图片的 PPTX/PDF由 HTML 转换生成的 PPTX

评论

支持 Markdown