illustrated-slides-with-nano-banana

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. 予算を見積もり、承認を依頼

• 画像1枚あたり：0.1 USDC
• 1.5倍のバッファを推奨
• ユーザーに伝えます：「X枚のスライドでこのプレゼンテーションを作成するには、Y USDCの予算が必要です。」

5. スライド画像を生成

スライドごとに：

1. x402の支払い署名を取得
2. すべてのコンテンツ（タイトル、テキスト、イラスト）を埋め込んだ画像を生成
3. 画像をダウンロードして保存
4. すべてのスライドで繰り返す

6. プレゼンテーションを組み立て

• 各スライドにページ全体の画像を1枚配置したPPTXを作成
• 必要に応じてPDFとしてエクスポート
• ユーザーが確認できるように開く

x402 による AI 画像生成

API の詳細

• エンドポイント： https://proxy-monetize.fluxapay.xyz/api/nano-banana/gen-image
• メソッド： POST
• 価格： 画像1枚あたり0.1 USDC（Baseネットワーク）
• 支払い： FluxA Walletを使用するx402プロトコル

支払いフロー

x402の支払い手順については、./fluxa-wallet/x402-payment.md を参照してください。

リクエスト形式

{
  "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

エージェント設定

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