A Claude Code plugin for building professional PowerPoint presentations with AI-generated images, icons, screenshots, and HTML-to-PPTX conversion.
- HTML to PPTX Conversion - Convert styled HTML slides to PowerPoint with accurate positioning
- Screenshot Capture - Capture authenticated app screenshots with Playwright
- Icon Rendering - Convert react-icons to PNG for use in slides
- Image Processing - Process images with Sharp for backgrounds and effects
- AI Image Generation - Optional Go Bananas integration for hero images
- 4 Color Themes - Corporate Blue, Modern Red, Tech Green, Warm Orange
# Add to your Claude Code plugins
claude plugins add github:davendra/presentation-builder- Clone this repository
- Copy to
~/.claude/plugins/presentation-builder/ - Restart Claude Code
/new-presentation
This will:
- Ask for project name, title, and theme
- Create project folder with all necessary files
- Set up package.json with dependencies
- Create 5 starter slides
Edit HTML files in the slides/ directory. Each slide uses 720pt x 405pt (16:9) dimensions:
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 720pt;
height: 405pt;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: #f8fafc;
}
</style>
</head>
<body>
<!-- Your content here -->
</body>
</html>/build-presentation
Or run manually:
npm install
npm run build| Command | Description |
|---|---|
/new-presentation |
Scaffold a new presentation project |
/build-presentation |
Build PPTX from HTML slides |
/capture-screenshots |
Configure and run Playwright screenshot capture |
/render-icons |
Generate PNG icons from react-icons |
When you run /new-presentation, it creates:
my-presentation/
├── build-presentation.js # Main build script
├── html2pptx.js # HTML-to-PPTX converter
├── render-icons.js # Icon rendering script
├── package.json # Dependencies
├── slides/
│ ├── slide01-title.html
│ ├── slide02-overview.html
│ └── ...
└── assets/
└── icons/ # Rendered PNG icons
Four professional color themes are included:
- Primary: #1e3a5f (navy)
- Secondary: #f8fafc (light gray)
- Accent: #3b82f6 (blue)
- Primary: #E31B23 (red)
- Secondary: #1e293b (dark gray)
- Accent: #fbbf24 (amber)
- Primary: #10b981 (teal)
- Secondary: #0f172a (dark)
- Accent: #06b6d4 (cyan)
- Primary: #f97316 (orange)
- Secondary: #fef3c7 (cream)
- Accent: #78350f (brown)
See examples/themes/ for CSS files you can copy into your project.
- Edit
render-icons.jsto configure the icons you need:
const { FaShoppingCart, FaUsers } = require('react-icons/fa');
const ICONS = [
{ component: FaShoppingCart, name: 'icon-orders', color: '#E31B23' },
{ component: FaUsers, name: 'icon-customers', color: '#1e3a5f' },
];- Run the renderer:
npm run icons- Reference icons in HTML slides:
<img src="../assets/icons/icon-orders.png" width="60" height="60" />Browse icons at: https://react-icons.github.io/react-icons/
Use /capture-screenshots to set up Playwright screenshot capture for appendix slides:
const PAGES = [
{ url: '/dashboard', filename: 'screenshot-dashboard.png', description: 'Dashboard' },
{ url: '/orders', filename: 'screenshot-orders.png', description: 'Orders', extraDelay: 5000 },
];If you have Go Bananas MCP configured, you can generate AI images for hero backgrounds:
generate_image({
prompt: "Professional business meeting, modern office, cinematic lighting",
aspect_ratio: "16:9",
n: 3
})The plugin works without Go Bananas - you can use any images.
Process images for slide backgrounds:
const sharp = require('sharp');
// Darken image for text overlay
await sharp('hero.jpg')
.resize(1920, 1080, { fit: 'cover' })
.composite([{
input: Buffer.from(`
<svg width="1920" height="1080">
<rect width="1920" height="1080" fill="black" opacity="0.4" />
</svg>
`),
blend: 'over'
}])
.jpeg({ quality: 90 })
.toFile('hero-darkened.jpg');{
"pptxgenjs": "^3.12.0",
"playwright": "^1.40.0",
"sharp": "^0.33.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.0.0"
}The plugin includes detailed guides in skills/presentation-builder/references/:
| Guide | Description |
|---|---|
html2pptx-guide.md |
HTML-to-PPTX conversion details |
icons-guide.md |
React icons library & rendering |
sharp-guide.md |
Image processing operations |
go-bananas-guide.md |
AI image generation prompts |
screenshots-guide.md |
Playwright screenshot capture |
slide-templates.md |
Complete HTML slide templates |
See examples/sample-presentation/ for a complete 5-slide example:
cd examples/sample-presentation
npm install
npm run build
# Open output.pptx in PowerPoint/KeynoteMIT
Davendra Patel
Built with the Claude Code Plugin System