Quick Start

Paste one of these into your coding agent:

Claude Code:

Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/installation/claude.md and follow every step.

Codex:

Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/installation/codex.md and follow every step.

Or use the repo directly if you want to develop on slides-grab itself:

git clone https://github.com/vkehfdl1/slides-grab.git && cd slides-grab
npm ci && npx playwright install chromium

Requires Node.js >= 18.

No-clone install

npm install slides-grab
npx playwright install chromium
npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy

Why This Project?

There are many AI tools that generate slide HTML. Almost none let you visually point at what you want changed and iterate in-place. slides-grab fills that gap:

• Plan — Agent creates a structured slide outline from your topic/files
• Design — Agent generates each slide as a self-contained HTML file
• Edit — Browser-based editor with bbox selection, direct text editing, and agent-powered rewrites
• Export — One command to PDF, plus experimental / unstable PPTX or Figma-export flows

CLI Commands

All commands support --slides-dir <path> (default: slides).

On a fresh clone, only --help, list-templates, and list-themes work without a deck. edit, build-viewer, validate, convert, and pdf require an existing slides workspace containing slide-*.html.

slides-grab edit              # Launch visual slide editor
slides-grab build-viewer      # Build single-file viewer.html
slides-grab validate          # Validate slide HTML (Playwright-based)
slides-grab convert           # Export to experimental / unstable PPTX
slides-grab convert --resolution 2160p  # Higher-resolution raster PPTX export
slides-grab figma             # Export an experimental / unstable Figma Slides importable PPTX
slides-grab pdf               # Export PDF in capture mode (default)
slides-grab pdf --resolution 2160p  # Higher-resolution image-backed PDF export
slides-grab pdf --mode print  # Export searchable/selectable text PDF
slides-grab list-templates    # Show available slide templates
slides-grab list-themes       # Show available color themes

Image Contract

Slides should store local image files in <slides-dir>/assets/ and reference them as ./assets/<file> from each slide-XX.html.

• Preferred: <img src="./assets/example.png" alt="...">
• Allowed: data: URLs for fully self-contained slides
• Allowed with warnings: remote https:// images
• Unsupported: absolute filesystem paths such as /Users/... or C:\\...

Run slides-grab validate --slides-dir <path> before export to catch missing local assets and discouraged path forms.

slides-grab pdf now defaults to --mode capture, which rasterizes each rendered slide into the PDF for better visual fidelity. Use --mode print when searchable/selectable browser text matters more than pixel-perfect parity.

slides-grab pdf and slides-grab convert now default to 2160p / 4k raster output for sharper exports. You can still override with --resolution <preset> using 720p, 1080p, 1440p, 2160p, or 4k when you want smaller or faster artifacts.

Multi-Deck Workflow

Prerequisite: create or generate a deck in decks/my-deck/ first.

slides-grab edit       --slides-dir decks/my-deck
slides-grab validate   --slides-dir decks/my-deck
slides-grab pdf        --slides-dir decks/my-deck --output decks/my-deck.pdf
slides-grab pdf        --slides-dir decks/my-deck --mode print --output decks/my-deck-searchable.pdf
slides-grab convert    --slides-dir decks/my-deck --output decks/my-deck.pptx
slides-grab figma      --slides-dir decks/my-deck --output decks/my-deck-figma.pptx

Warning: slides-grab convert and slides-grab figma are currently experimental / unstable. Expect best-effort output, layout shifts, and manual cleanup in PowerPoint or Figma.

Figma Workflow

slides-grab figma --slides-dir decks/my-deck --output decks/my-deck-figma.pptx

This command reuses the HTML to PPTX pipeline and emits a .pptx deck intended for manual import into Figma Slides via Import. It does not upload to Figma directly. The Figma export path is experimental / unstable and should be treated as best-effort only.

Installation Guides

• Claude detailed guide
• Codex detailed guide

npm Package

Also available as an npm package for standalone CLI + skill usage:

npm install slides-grab

Install shared agent skills with Vercel Agent Skills:

npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy

This npm-install path is enough for normal usage. Clone the repo only when you want to modify or contribute to slides-grab itself.

Project Structure

bin/              CLI entry point
src/editor/       Visual editor (HTML + JS client modules)
scripts/          Build, validate, convert, editor server
templates/        Slide HTML templates (cover, content, chart, ...)
themes/           Color themes (modern-dark, executive, sage, ...)
skills/           Shared Vercel-installable agent skills + references
docs/             Installation & usage guides

License

MIT

Acknowledgment

This project is built based on the ppt_team_agent by Builder Josh. Huge thanks to him!