⚠️ 已迁移: 本技能的优化版本已移至 wulaosiji/founder-skills 的 deck-web-converter，推荐使用新版。本版本保留用于向后兼容。
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
探查 (Probe)
确认输入文件路径和格式。支持 .pptx（PowerPoint）和 .pdf（PDF）。若用户未提供路径，先询问。
约束 (Constrain)
验证输入文件存在且可读。设定不可降级标准：单文件、零外部依赖、完整保留源文件所有文本内容。若依赖缺失（python-pptx / pymupdf），先生成脚本并告知用户安装，不降级交付。
证据 (Evidence)
源文件内容是唯一证据来源。提取所有文本、图片、布局信息，不做总结或省略。图片转为 base64 data URI 嵌入。
执行 (Execute)
生成并执行 Python 脚本：
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.
然后生成单个自包含 HTML 文件（无外部依赖），将 BP 渲染为精美的幻灯片演示。
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>
/* Reset + Base styles */
/* Slide container styles */
/* Navigation styles */
/* Responsive breakpoints */
/* Print styles */
/* Animation keyframes */
</style>
</head>
<body>
<!-- Progress bar -->
<div class="progress-bar"><div class="progress-fill"></div></div>
<!-- Slides container -->
<div class="slides-container">
<div class="slide active" data-index="0">
<!-- Slide content reconstructed from source -->
</div>
<!-- ... more slides ... -->
</div>
<!-- Navigation -->
<div class="nav-dots">
<span class="dot active"></span>
<!-- ... -->
</div>
<div class="slide-counter">1 / 10</div>
<button class="fullscreen-btn" title="Fullscreen (F)">⛶</button>
<button class="nav-arrow prev" title="Previous (←)">‹</button>
<button class="nav-arrow next" title="Next (→)">›</button>
<script>
// Slide navigation logic
// Keyboard shortcuts (←, →, F, Escape)
// Touch/swipe support
// Fullscreen API
// Progress bar update
</script>
</body>
</html>
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
#!/usr/bin/env python3
"""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
# ... extract text, images, layout from each slide
# Return list of slide dicts with content
pass
def extract_from_pdf(filepath):
"""Extract page content from a .pdf file."""
import fitz # pymupdf
# ... extract text blocks, images from each page
# Return list of slide dicts with content
pass
def detect_slide_type(slide_data, index, total):
"""Heuristically detect BP slide type for enhanced styling."""
# Cover (first slide), Fundraising (last slide), etc.
pass
def generate_html(slides, title, accent_color="#1a73e8"):
"""Generate complete self-contained HTML presentation."""
# Build CSS, HTML slides, JS navigation
pass
def main():
input_file = INPUT_FILE # Set by the skill
ext = os.path.splitext(input_file)[1].lower()
if ext == ".pptx":
slides = extract_from_pptx(input_file)
elif ext == ".pdf":
slides = extract_from_pdf(input_file)
else:
print(f"Unsupported format: {ext}")
sys.exit(1)
title = os.path.splitext(os.path.basename(input_file))[0]
html = generate_html(slides, title)
output_file = os.path.splitext(input_file)[0] + "_presentation.html"
with open(output_file, "w", encoding="utf-8") as f:
f.write(html)
print(f"HTML presentation generated: {output_file}")
if __name__ == "__main__":
main()
验证 (Verify)
用不同于生成路径的方式回读输出：检查 HTML 文件存在、可在浏览器中打开、幻灯片数量与源文件一致、中文正确渲染、无外部依赖引用（grep 检查无 http/https CDN 链接）。
交付 (Deliver)
返回结果，清理临时文件：
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)
Output
A single self-contained .html file saved next to the input file, named {basename}_presentation.html. The file includes inline CSS + JS, base64-embedded images, slide navigation (keyboard/click/swipe), progress bar, fullscreen mode, and mobile responsiveness. Works 100% offline in Chrome, Safari, Firefox, and Edge.
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
Anti-patterns
- NEVER output a multi-file HTML solution. 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.
- NEVER use external fonts or JS libraries — everything must be inline or system-native.
Constraints
- 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.
- Clean up temporary Python script files after successful conversion.
Related Skills
- business-plan-generator — Create a professional BP pitch deck from scratch before converting it to HTML.
- unique-club-founder-kit — The complete AI founder toolkit by UniqueClub, including deck conversion and more.
- skill-optimizer — Audit and optimize SKILL.md files for discoverability and routing accuracy.
About UniqueClub
Part of the UniqueClub founder toolkit.
🌐 https://uniqueclub.ai
1---2name: pitch-deck-to-html3description: 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: "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. Cross-references: business-plan-generator, unique-club-founder-kit. Built by UniqueClub 🌐 https://uniqueclub.ai4---56> ⚠️ **已迁移**: 本技能的优化版本已移至 [wulaosiji/founder-skills](https://github.com/wulaosiji/founder-skills) 的 `deck-web-converter`，推荐使用新版。本版本保留用于向后兼容。78You 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.910## When to Use1112Use this skill when the user has an existing `.pptx` or `.pdf` and wants to turn it into a shareable web page.1314Do NOT use this skill if:15- The user wants to create a BP from scratch → redirect to `business-plan-generator`.16- The user wants to edit the source PPT content → edit first, then convert.17- The input file is missing or unreadable → ask for the correct file path.1819Typical triggers:20- 「把PPT转成网页」「BP在线演示」「生成HTML版PPT」21- 「pitch deck转链接」「要在手机里看的PPT」「网页版路演材料」22- "PPT转HTML" "pdf to html presentation" "在线演示文稿"2324## Workflow25261. **探查 (Probe)**27确认输入文件路径和格式。支持 `.pptx`（PowerPoint）和 `.pdf`（PDF）。若用户未提供路径，先询问。28292. **约束 (Constrain)**30验证输入文件存在且可读。设定不可降级标准：单文件、零外部依赖、完整保留源文件所有文本内容。若依赖缺失（python-pptx / pymupdf），先生成脚本并告知用户安装，不降级交付。31323. **证据 (Evidence)**33源文件内容是唯一证据来源。提取所有文本、图片、布局信息，不做总结或省略。图片转为 base64 data URI 嵌入。34354. **执行 (Execute)**36生成并执行 Python 脚本：371. **For .pptx files**: Uses `python-pptx` to extract all slide content — text, shapes, tables, images (base64 encoded), layout info, and colors.382. **For .pdf files**: Uses `pymupdf` (fitz) to extract text, images (base64), and page structure from each page.3940然后生成**单个自包含 HTML 文件**（无外部依赖），将 BP 渲染为精美的幻灯片演示。4142**IMPORTANT**: The output HTML must be saved to the same directory as the input file, with the same base name + `_presentation.html`.4344## HTML Output Specifications4546### Architecture4748- Single `.html` file, fully self-contained (CSS + JS inline, images as base64 data URIs)49- No CDN links, no external fonts, no external JS — works 100% offline50- Use system fonts: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif`5152### Presentation Mode5354The HTML should function as a slide-based presentation with:5556- **Slide navigation**: Arrow keys (← →), click, or swipe to navigate between slides57- **Slide indicator**: Bottom dots showing current position58- **Progress bar**: Thin bar at top showing progress through the deck59- **Fullscreen toggle**: Button to enter/exit fullscreen (F key shortcut)60- **Slide counter**: "3 / 10" indicator61- **Smooth transitions**: CSS transitions between slides (slide or fade)62- **Responsive**: Works on desktop, tablet, and mobile6364### Visual Design6566```67Design tokens:68- Background: linear-gradient(135deg, #0f0f1a, #1a1a2e) (dark mode default)69- Slide background: #ffffff with subtle shadow70- Primary accent: extract from source file, fallback to #1a73e871- Text: #202124 (dark), #5f6368 (secondary)72- Slide aspect ratio: 16:973- Max slide width: 1200px, centered74- Slide padding: 60px75- Border radius: 12px on slide container76- Box shadow: 0 20px 60px rgba(0,0,0,0.3)77```7879### HTML Template Structure8081The generated Python script should build HTML following this structure:8283```html84<!DOCTYPE html>85<html lang="zh-CN">86<head>87 <meta charset="UTF-8">88 <meta name="viewport" content="width=device-width, initial-scale=1.0">89 <title>{Project Name} — Business Plan</title>90 <style>91 /* Reset + Base styles */92 /* Slide container styles */93 /* Navigation styles */94 /* Responsive breakpoints */95 /* Print styles */96 /* Animation keyframes */97 </style>98</head>99<body>100 <!-- Progress bar -->101 <div class="progress-bar"><div class="progress-fill"></div></div>102103 <!-- Slides container -->104 <div class="slides-container">105 <div class="slide active" data-index="0">106 <!-- Slide content reconstructed from source -->107 </div>108 <!-- ... more slides ... -->109 </div>110111 <!-- Navigation -->112 <div class="nav-dots">113 <span class="dot active"></span>114 <!-- ... -->115 </div>116 <div class="slide-counter">1 / 10</div>117 <button class="fullscreen-btn" title="Fullscreen (F)">⛶</button>118 <button class="nav-arrow prev" title="Previous (←)">‹</button>119 <button class="nav-arrow next" title="Next (→)">›</button>120121 <script>122 // Slide navigation logic123 // Keyboard shortcuts (←, →, F, Escape)124 // Touch/swipe support125 // Fullscreen API126 // Progress bar update127 </script>128</body>129</html>130```131132### Content Mapping Rules133134Map source content to HTML elements:135136| Source Element | HTML Rendering |137|---|---|138| Slide title | `<h1>` or `<h2>` with accent underline |139| Subtitle | `<p class="subtitle">` |140| Body text | `<p>` with proper spacing |141| Bullet points | `<ul>` with styled list items |142| Tables | `<table>` with striped rows and hover effects |143| Images | `<img>` with base64 src, responsive sizing |144| Charts/shapes | Describe as styled `<div>` blocks or reconstruct with CSS |145| Stat numbers | Large `<span class="stat">` with label below |146| Cards | `<div class="card">` with shadow and border |147| Timeline | Horizontal flex layout with dots and lines |148| Comparison table | Feature matrix with ✓/✗ icons |149150### Slide-Type Specific Styling151152For standard BP slides, apply enhanced styling:1531541. **Cover slide**: Full-bleed dark background, large title, gradient overlay1552. **Pain points**: Colored cards in a grid1563. **Solution**: Feature cards with icons1574. **Business model**: Revenue breakdown with visual bars1585. **Product demo**: Centered image/mockup with callouts1596. **Competitive analysis**: Styled comparison table1607. **Traction**: Metrics row + timeline visualization1618. **Roadmap**: Phase cards with arrow connectors1629. **Team**: Avatar cards in a row16310. **Fundraising**: Key stats + bar chart for fund usage164165### Python Script Requirements166167The script must:1681691. Accept input file path as variable or argument1702. Detect file type (.pptx or .pdf) and use appropriate extraction1713. Extract ALL text content preserving hierarchy (titles vs body)1724. Extract images and convert to base64 data URIs1735. For .pptx: extract shape positions, colors, font sizes to inform layout1746. For .pdf: extract text blocks with position data, embedded images1757. Generate complete HTML with inline CSS and JS1768. Handle Chinese and English text properly1779. Save output file and print the path17810. Dependencies: `python-pptx`, `pymupdf` (fitz), `base64`, `os`179180### Script Template181182```python183#!/usr/bin/env python3184"""BP to HTML Converter"""185186import os187import sys188import base64189190def extract_from_pptx(filepath):191 """Extract slide content from a .pptx file."""192 from pptx import Presentation193 from pptx.util import Inches, Pt, Emu194 # ... extract text, images, layout from each slide195 # Return list of slide dicts with content196 pass197198def extract_from_pdf(filepath):199 """Extract page content from a .pdf file."""200 import fitz # pymupdf201 # ... extract text blocks, images from each page202 # Return list of slide dicts with content203 pass204205def detect_slide_type(slide_data, index, total):206 """Heuristically detect BP slide type for enhanced styling."""207 # Cover (first slide), Fundraising (last slide), etc.208 pass209210def generate_html(slides, title, accent_color="#1a73e8"):211 """Generate complete self-contained HTML presentation."""212 # Build CSS, HTML slides, JS navigation213 pass214215def main():216 input_file = INPUT_FILE # Set by the skill217 ext = os.path.splitext(input_file)[1].lower()218219 if ext == ".pptx":220 slides = extract_from_pptx(input_file)221 elif ext == ".pdf":222 slides = extract_from_pdf(input_file)223 else:224 print(f"Unsupported format: {ext}")225 sys.exit(1)226227 title = os.path.splitext(os.path.basename(input_file))[0]228 html = generate_html(slides, title)229230 output_file = os.path.splitext(input_file)[0] + "_presentation.html"231 with open(output_file, "w", encoding="utf-8") as f:232 f.write(html)233 print(f"HTML presentation generated: {output_file}")234235if __name__ == "__main__":236 main()237```2382395. **验证 (Verify)**240用不同于生成路径的方式回读输出：检查 HTML 文件存在、可在浏览器中打开、幻灯片数量与源文件一致、中文正确渲染、无外部依赖引用（grep 检查无 http/https CDN 链接）。2412426. **交付 (Deliver)**243返回结果，清理临时文件：2441. Tell the user the output file path2452. Mention they can open it directly in a browser2463. Mention keyboard shortcuts: ← → for navigation, F for fullscreen2474. Ask if they want to adjust the color scheme or layout2485. Offer to serve it locally if needed (`python3 -m http.server`)249250## Output251252A single self-contained `.html` file saved next to the input file, named `{basename}_presentation.html`. The file includes inline CSS + JS, base64-embedded images, slide navigation (keyboard/click/swipe), progress bar, fullscreen mode, and mobile responsiveness. Works 100% offline in Chrome, Safari, Firefox, and Edge.253254### Output Constraints255256- Single HTML file, fully self-contained, zero external dependencies257- File size should be reasonable (< 10MB unless source has many large images)258- Must work in Chrome, Safari, Firefox, Edge259- Must be printable (include @media print styles)260- Preserve all text content from the source — do not summarize or omit261- Chinese characters must render correctly262263## Guardrails264265**Anti-patterns**266- NEVER output a multi-file HTML solution. The output must be a SINGLE self-contained HTML file. No external CDN links.267- Do NOT omit slides or summarize content. Preserve all text from the source file.268- NEVER use external fonts or JS libraries — everything must be inline or system-native.269270**Constraints**271- If the source file contains large images (>2MB each), warn the user that the HTML may be large.272- Always save the HTML next to the input file with the same base name.273- If `python-pptx` or `pymupdf` is missing, generate the script and instruct the user to install the required dependency.274- Clean up temporary Python script files after successful conversion.275276## Related Skills277278- **business-plan-generator** — Create a professional BP pitch deck from scratch before converting it to HTML.279- **unique-club-founder-kit** — The complete AI founder toolkit by UniqueClub, including deck conversion and more.280- **skill-optimizer** — Audit and optimize SKILL.md files for discoverability and routing accuracy.281282## About UniqueClub283284Part of the UniqueClub founder toolkit.285🌐 https://uniqueclub.ai
wulaosiji