Create PowerPoint Presentation with Nano Banana (x402)

Create visually appealing PowerPoint presentations by converting styled HTML slides to PPTX format using Playwright and PptxGenJS, with AI-generated images via the Nano Banana API using x402 payments.

Overview

This skill converts HTML slides to PowerPoint with:

Precise positioning and styling
Dark theme with modern color palette
Support for shapes, text, images, and diagrams
Automatic validation of slide dimensions and content placement
AI-generated images (optional) using Nano Banana API with x402 micropayments (0.1 USDC per image)

Behavior

When this skill is triggered:

Get presentation topic from the user if not specified
Ask if they want AI-generated images using AskUserQuestion:

- "Do you want to generate AI images with Nano Banana? (0.1 USDC per image via x402)" - Options: "Yes, generate images" / "No, use solid colors only"

If AI images requested:

- Make x402 payment: see ./fluxa-wallet/x402-payment.md - Call Nano Banana API with X-Payment header - Download and save images to slides directory

Create HTML slides using templates
Build PPTX using html2pptx.js
Open the presentation for the user

Agent Config

The FluxA Wallet agent JWT is stored at:

~/.fluxa-ai-wallet-mcp/.agent-config.json

This config contains the agent_id, token, and JWT needed for x402 payment authorization.

AI Image Generation via x402

When you need to generate images for slides, use the Nano Banana API with x402 payment.

API Details

Endpoint: https://proxy-monetize.fluxapay.xyz/nano-banana/gen-image
Method: POST
Price: 0.1 USDC per image (Base network)
Payment: x402 protocol with FluxA Wallet

Request Format

{
  "contents": [{
    "parts": [{"text": "Your image generation prompt here"}]
  }]
}

Response Format

The API returns a Gemini-style response with the image either as:

Inline base64: response.candidates[0].content.parts[1].inlineData.data
URL reference: response.candidates[0].content.parts[1].inlineData.url

Example Flow

Get payment signature from FluxA Wallet API
Call Nano Banana API with X-Payment header
Extract image from response (base64 or URL)
Save image to slides directory
Reference image in HTML slide

Image Prompt Templates

Slide Background:

Create an abstract futuristic background image for a presentation slide.
Theme: [TOPIC]
Style: Dark theme with #0f0f1a background color.
Elements: Abstract flowing digital elements, subtle geometric patterns, particles of light.
Color accents: Use hints of #667eea, #00d4ff, and #764ba2.
Mood: Professional, modern technology, clean and elegant.
The image should be subtle enough to work as a background with text overlaid on top.
Dimensions: Wide format suitable for a 16:9 presentation slide.
No text, logos, or words in the image.

Icon/Illustration:

Create a minimalist icon representing: [CONCEPT].
Style: Clean, professional, suitable for a business presentation.
Background: Transparent or dark (#0f0f1a).
Colors: Use blues (#667eea, #00d4ff) and purples (#764ba2) on dark background.
Size: Square format, simple and recognizable.
No text in the image.

HTML Slide Requirements

Dimensions (16:9 format)

body {
    margin: 0;
    padding: 0;
    width: 720pt;
    height: 405pt;
}

Critical Rules

Text must be wrapped - All text MUST be in <p>, <h1>-<h6>, <ul>, or <ol> tags
Borders on divs only - Backgrounds, borders, shadows only work on <div> elements
No CSS gradients - Use solid colors or pre-rendered PNG images
Bottom margin - Keep text at least 36pt (0.5") from bottom edge
Safe fonts only - Arial, Helvetica, Times New Roman, Georgia, Courier New, Verdana, Tahoma

Using Generated Images in Slides

<body>
    <!-- Background image with opacity -->
    <img class="background-image" src="background.png"
         style="position:absolute; top:0; left:0; width:720pt; height:405pt; opacity:0.6;" />

    <!-- Content on top -->
    <div class="content">
        <h1 class="title">Your Title</h1>
    </div>
</body>

Color Palette

/* Dark Theme */
--bg-primary: #0f0f1a;
--bg-card: rgba(255, 255, 255, 0.05);

/* Accents */
--accent-blue: #667eea;
--accent-cyan: #00d4ff;
--accent-purple: #764ba2;

/* Text */
--text-white: #ffffff;
--text-light: #d0d0d0;
--text-muted: #a0a0b0;

Available Templates

title.html - Title slide with tagline, title, subtitle, and description
bullets.html - Bullet point list (5 items)
two-columns.html - Side-by-side comparison with headers
cards-2x2.html - 2x2 card grid layout
cards-3x2.html - 3x2 card grid layout (6 cards)
stats.html - Large metrics display (3 stats)
section.html - Section divider with number
architecture.html - Layered architecture diagram (4 layers)
features.html - Feature list with accent bars (6 features)
flow.html - Step-by-step process flow (4 steps with arrows)

Usage

# Install dependencies
npm install pptxgenjs playwright sharp

# Create slides directory with HTML files
mkdir slides

# Generate presentation
node scripts/create-pptx.js

# Open result (macOS)
open output.pptx

Files

scripts/html2pptx.js - Core HTML-to-PPTX converter
scripts/create-pptx.js - Build script
templates/*.html - Slide templates
SKILL.md - This documentation

create-ppt-with-nano-banana

Installation

Similar popular skills

Also in this package

Agent compatibility

Package contents

History

SKILL.md