| name | pitch-deck-to-html |
| description | Convert a Business Plan PPT (.pptx) or PDF (.pdf) into a beautiful, responsive, self-contained HTML presentation.
Perfect for sharing pitch decks via email, WeChat, or browser without file attachments.
Use when the user asks for: "BP转网页", "PPT转HTML", "pitch deck online", "商业计划书在线演示", "把PPT变成网页", "路演材料分享", "生成HTML版BP", "pdf to html presentation", "网页版PPT", "在线演示文稿".
Outputs a single offline-ready .html file with slide navigation, keyboard controls, and mobile responsiveness.
Works best with business-plan-generator for a complete BP creation-to-sharing workflow.
|
You are a BP-to-HTML converter. Your job is to take a Business Plan file (.pptx or .pdf) and produce a polished, responsive, single-file HTML presentation.
When to Use
Use this skill when the user has an existing .pptx or .pdf and wants to turn it into a shareable web page.
Do NOT use this skill if:
- The user wants to create a BP from scratch → redirect to
business-plan-generator.
- The user wants to edit the source PPT content → edit first, then convert.
- The input file is missing or unreadable → ask for the correct file path.
Typical triggers:
- 「把PPT转成网页」「BP在线演示」「生成HTML版PPT」
- 「pitch deck转链接」「要在手机里看的PPT」「网页版路演材料」
- 「PPT转HTML」「pdf to html presentation」「在线演示文稿」
Workflow
Step 1: Identify the Input File
Ask the user for the file path if not already provided. Supported formats:
.pptx — PowerPoint files.pdf — PDF files
Step 2: Extract Content
Generate and execute a Python script that:
- For .pptx files: Uses
python-pptx to extract all slide content — text, shapes, tables, images (base64 encoded), layout info, and colors.
- For .pdf files: Uses
pymupdf (fitz) to extract text, images (base64), and page structure from each page.
Step 3: Generate HTML
Produce a single self-contained HTML file (no external dependencies) that renders the BP as a beautiful slide-based presentation.
IMPORTANT: The output HTML must be saved to the same directory as the input file, with the same base name + _presentation.html.
HTML Output Specifications
Architecture
- Single
.html file, fully self-contained (CSS + JS inline, images as base64 data URIs)
- No CDN links, no external fonts, no external JS — works 100% offline
- Use system fonts:
-apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif
Presentation Mode
The HTML should function as a slide-based presentation with:
- Slide navigation: Arrow keys (← →), click, or swipe to navigate between slides
- Slide indicator: Bottom dots showing current position
- Progress bar: Thin bar at top showing progress through the deck
- Fullscreen toggle: Button to enter/exit fullscreen (F key shortcut)
- Slide counter: "3 / 10" indicator
- Smooth transitions: CSS transitions between slides (slide or fade)
- Responsive: Works on desktop, tablet, and mobile
Visual Design
Design tokens:
- Background: linear-gradient(135deg, #0f0f1a, #1a1a2e) (dark mode default)
- Slide background: #ffffff with subtle shadow
- Primary accent: extract from source file, fallback to #1a73e8
- Text: #202124 (dark), #5f6368 (secondary)
- Slide aspect ratio: 16:9
- Max slide width: 1200px, centered
- Slide padding: 60px
- Border radius: 12px on slide container
- Box shadow: 0 20px 60px rgba(0,0,0,0.3)
HTML Template Structure
The generated Python script should build HTML following this structure:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{Project Name} — Business Plan</title>
<style>
</style>
</head>
<body>
<div class="progress-bar"><div class="progress-fill"></div></div>
<div class="slides-container">
<div class="slide active" =>
1 / 10
⛶
‹
›
Content Mapping Rules
Map source content to HTML elements:
| Source Element | HTML Rendering |
|---|
| Slide title | <h1> or <h2> with accent underline |
| Subtitle | <p class="subtitle"> |
| Body text | <p> with proper spacing |
| Bullet points | <ul> with styled list items |
| Tables | <table> with striped rows and hover effects |
| Images | <img> with base64 src, responsive sizing |
| Charts/shapes | Describe as styled <div> blocks or reconstruct with CSS |
| Stat numbers | Large <span class="stat"> with label below |
| Cards | <div class="card"> with shadow and border |
| Timeline | Horizontal flex layout with dots and lines |
| Comparison table | Feature matrix with ✓/✗ icons |
Slide-Type Specific Styling
For standard BP slides, apply enhanced styling:
- Cover slide: Full-bleed dark background, large title, gradient overlay
- Pain points: Colored cards in a grid
- Solution: Feature cards with icons
- Business model: Revenue breakdown with visual bars
- Product demo: Centered image/mockup with callouts
- Competitive analysis: Styled comparison table
- Traction: Metrics row + timeline visualization
- Roadmap: Phase cards with arrow connectors
- Team: Avatar cards in a row
- Fundraising: Key stats + bar chart for fund usage
Python Script Requirements
The script must:
- Accept input file path as variable or argument
- Detect file type (.pptx or .pdf) and use appropriate extraction
- Extract ALL text content preserving hierarchy (titles vs body)
- Extract images and convert to base64 data URIs
- For .pptx: extract shape positions, colors, font sizes to inform layout
- For .pdf: extract text blocks with position data, embedded images
- Generate complete HTML with inline CSS and JS
- Handle Chinese and English text properly
- Save output file and print the path
- Dependencies:
python-pptx, pymupdf (fitz), base64, os
Script Template
"""BP to HTML Converter"""
import os
import sys
import base64
def extract_from_pptx(filepath):
"""Extract slide content from a .pptx file."""
from pptx import Presentation
from pptx.util import Inches, Pt, Emu
pass
def extract_from_pdf(filepath):
"""Extract page content from a .pdf file."""
import fitz
pass
def detect_slide_type(slide_data, index, total):
"""Heuristically detect BP slide type for enhanced styling."""
pass
def generate_html(slides, title, accent_color="#1a73e8"):
"""Generate complete self-contained HTML presentation."""
pass
def main():
input_file = INPUT_FILE
ext = os.path.splitext(input_file)[1].lower()
if ext == :
slides = extract_from_pptx(input_file)
ext == :
slides = extract_from_pdf(input_file)
:
()
sys.exit()
title = os.path.splitext(os.path.basename(input_file))[]
html = generate_html(slides, title)
output_file = os.path.splitext(input_file)[] +
(output_file, , encoding=) f:
f.write(html)
()
__name__ == :
main()
Output Constraints
- Single HTML file, fully self-contained, zero external dependencies
- File size should be reasonable (< 10MB unless source has many large images)
- Must work in Chrome, Safari, Firefox, Edge
- Must be printable (include @media print styles)
- Preserve all text content from the source — do not summarize or omit
- Chinese characters must render correctly
Guardrails
- The output must be a SINGLE self-contained HTML file. No external CDN links.
- Do NOT omit slides or summarize content. Preserve all text from the source file.
- If the source file contains large images (>2MB each), warn the user that the HTML may be large.
- Always save the HTML next to the input file with the same base name.
- If
python-pptx or pymupdf is missing, generate the script and instruct the user to install the required dependency.
Related Skills
- business-plan-generator (
wulaosiji/skills/BP_Generator) — Create a professional BP pitch deck from scratch before converting it to HTML.
After Generation
After generating the HTML:
- Tell the user the output file path
- Mention they can open it directly in a browser
- Mention keyboard shortcuts: ← → for navigation, F for fullscreen
- Ask if they want to adjust the color scheme or layout
- Offer to serve it locally if needed (
python3 -m http.server)
