← → Navigate · ESC Index
peng-slide-deck
01 / 09
HTML+CSS SLIDE DECK GENERATOR

peng-slide-deck

With 17 curated visual presets, transforms content into
single-file HTML slide decks

github.com/SwiftSteed/peng-skills
peng-slide-deck · Browser-Native Rendering
— 2026 —
Overview
02 / 09
WHAT

What is
peng-slide-deck?

Built upon two open-source projects:
baoyu-slide-deck (JimLiu) — 17 curated visual presets & reviewable pipeline
guizang-ppt-skill (op7418) — color theme system & Motion One engine
Output
Single HTML File
No backend, open directly in browser
Color Themes
5 presets
Ink · Indigo · Forest · Kraft · Dune
Curated Presets
17 presets
blueprint, corporate, sketch-notes & more
Based on baoyu-slide-deck · Pure HTML Rendering
Overview
Visual Style
03 / 09
CORE INNOVATION

Style
Your Way

17 curated presets × 4 adjustable dimensions — freely combine

Texture
5 options
clean / grid / organic / pixel / paper
Mood
7 options
professional / warm / macaron / cool / vibrant / dark / neutral
Typography
5 options
geometric / humanist / handwritten / editorial / technical
Density
3 options
minimal / balanced / dense
Texture × Mood × Typography × Density
Style System
Presets
04 / 09
17 CURATED PRESETS

Curated Presets,
One-Click Themes

Each preset is a complete :root CSS variable block covering all 4 dimensions

blueprint
Architecture / System Design
corporate
Investors / Business Proposals
minimal
Executive Briefings
sketch-notes
Tutorials / Learning
bold-editorial
Product Launches / Keynotes
dark-atmospheric
Entertainment / Gaming
notion
Product Demos / SaaS
vintage
History / Cultural Heritage
scientific
Biology / Chemistry / Medicine
pixel-art
Gaming / Developer Talks
watercolor
Lifestyle / Wellness
fantasy-animation
Educational Storytelling
17 Curated Presets · Auto-Recommended by Keywords
Presets
Pipeline
05 / 09
WORKFLOW

8-Step Reviewable Pipeline

Every step is traceable and editable—ensuring output quality

Phase 1: Analyze & Confirm
01
Analyze Content
Classify type, detect language, identify style signals
02
Confirm Settings
Style, theme, audience, slide count
03
Generate Outline
With full CSS_STYLE_INSTRUCTIONS
Phase 2: Review & Refine
04
Review Outline
Validate structure, count, and style parsing
05
Edit Outline
Add, remove, or reorder slides
Phase 3: Generate & Ship
06
Generate HTML
Fill template, substitute CSS variables
07
Review HTML
Final quality checkpoint
08
Preview & Ship
Open in browser, Cmd+P to print PDF
Analyze → Confirm → Outline → Review → Generate → Review → Preview → Ship
Pipeline
Comparison
06 / 09
VS

How It Differs from
baoyu-slide-deck

baoyu-slide-deck

AI Image Generation

  • Calls image backend per slide
  • Outputs PNG images
  • Requires PPTX / PDF merging
  • Needs network + backend API key
peng-slide-deck

HTML+CSS Approach

  • Generates HTML file directly
  • Instant browser preview
  • Ctrl+P to print PDF directly
  • Works offline, zero backend deps
Same 17 curated visual presets, same reviewable pipeline, different presentation.
Same Core Design · Different Medium
Comparison
Get Started
07 / 09
QUICK START

Three Steps to Begin

01
Clone the Repo
git clone and symlink the skill into ~/.claude/skills/
02
Prepare Content
A Markdown file, or provide text content directly
03
One Command
/peng-slide-deck article.md --style blueprint
Options: --style, --audience, --lang, --slides, --theme, --outline-only, --html-only
Clone → Prepare → One Command
Get Started
Credits
08 / 09
ACKNOWLEDGMENT

Acknowledgments

This project is built upon two open-source projects:

Style · Pipeline

baoyu-slide-deck

17 curated visual presets,
8-step reviewable pipeline

github.com/JimLiu/baoyu-skills
HTML · Animation

guizang-ppt-skill

5 color theme presets, Motion One engine,
HTML+CSS slide approach

github.com/op7418/guizang-ppt-skill
Based on baoyu-slide-deck + guizang-ppt-skill
Acknowledgments
peng-slide-deck · Demo
09 / 09
THANK YOU

Open in Browser
Is the Best Presentation

Open in Browser · Print to PDF · No Backend, No Image Generation

github.com/SwiftSteed/peng-skills
peng-slide-deck · Demo
— Fin —