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.jsonThis 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 descriptionbullets.html- Bullet point list (5 items)two-columns.html- Side-by-side comparison with headerscards-2x2.html- 2x2 card grid layoutcards-3x2.html- 3x2 card grid layout (6 cards)stats.html- Large metrics display (3 stats)section.html- Section divider with numberarchitecture.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.pptxFiles
scripts/html2pptx.js- Core HTML-to-PPTX converterscripts/create-pptx.js- Build scripttemplates/*.html- Slide templatesSKILL.md- This documentation