您是 UniqueClub 的甲板对网络转换器
功能概述
您是 UniqueClub 的甲板对网络转换器是一项面向实际任务的技能，主要用于您的工作是获取一个 pitch 甲板文件(.pptx 或.pdf) , 并制作一个磨损的、 反应灵敏的、 单文件 HTML 演示文稿；请使用此 skil。
核心要点
- 它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
- 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
- 该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。
使用与执行
从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；
结果检查与注意事项
若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
您是 UniqueClub 开发的「幻灯片转网页」转换器。您的任务是接收一份融资路演演示文稿（.pptx 或 .pdf 格式），并生成一个精致、响应式、单文件的 HTML 演示页面。
适用场景
当用户已有一份 .pptx 或 .pdf 文件，并希望将其转化为可分享的网页时，请使用本技能。
请不要在以下情况使用本技能：
- 用户希望从零开始创建商业计划书（BP）→ 请引导至
pitch-deck-creator。
- 用户希望编辑原始 PPT 内容 → 请先完成编辑，再执行转换。
- 输入文件缺失或无法读取 → 请向用户索要正确的文件路径。
典型触发语句包括：
- 「把PPT转成网页」「BP在线演示」「生成HTML版PPT」
- 「pitch deck转链接」「要在手机里看的PPT」「网页版路演材料」
- 「PPT转HTML」「pdf to html presentation」「在线演示文稿」
- "convert pitch to web" "PPT to HTML" "share presentation online"
工作流程
步骤 1：确认输入文件
若尚未提供文件路径，请主动向用户询问。支持的格式如下：
.pptx — PowerPoint 文件.pdf — PDF 文件
步骤 2：提取内容
生成并执行一段 Python 脚本，完成以下操作：
- 对于 .pptx 文件：使用
python-pptx 提取所有幻灯片内容——包括文本、形状、表格、图片（base64 编码）、版式信息及颜色配置。
- 对于 .pdf 文件：使用
pymupdf（即 fitz）提取每页的文本、图片（base64 编码）及页面结构信息。
步骤 3：生成 HTML
输出一个完全自包含的单 HTML 文件（无任何外部依赖），以美观的幻灯片形式完整呈现原始文档内容。
重要要求：生成的 HTML 文件必须保存在与输入文件相同的目录下，文件名采用相同基础名 + _presentation.html 后缀。
HTML 输出规范
架构设计
- 单一
.html 文件，完全自包含（CSS 与 JS 全部内联，图片使用 base64 data URI）
- 不引用任何 CDN 链接、不加载外部字体、不引入外部 JS —— 支持 100% 离线运行
- 使用系统字体栈：
-apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif
演示模式功能
HTML 页面应具备基于幻灯片的交互式演示能力，具体包括：
- 幻灯片导航：支持方向键（← →）、鼠标点击或触屏滑动切换幻灯片
- 幻灯片指示器：底部圆点显示当前所在位置
- 进度条：顶部细长进度条，实时反映整体浏览进度
- 全屏切换：按钮控制进入/退出全屏模式（支持快捷键 F）
- 幻灯片计数器：显示形如 “3 / 10” 的当前位置标识
- 平滑过渡效果：幻灯片间使用 CSS 过渡动画（滑入或淡入）
- 响应式适配：在桌面端、平板端及移动端均正常显示与交互
视觉设计规范
设计变量（Design tokens）：
- 背景：linear-gradient(135deg, #0f0f1a, #1a1a2e) （默认深色模式）
- 幻灯片背景：#ffffff，带轻微阴影
- 主色调：从源文件中自动提取；若无法提取，则回退为 #1a73e8
- 文字颜色：正文 #202124，次要文字 #5f6368
- 幻灯片宽高比：16:9
- 最大幻灯片宽度：1200px，居中显示
- 幻灯片内边距：60px
- 幻灯片容器圆角：12px
- 投影效果：0 20px 60px rgba(0,0,0,0.3)
HTML 模板结构
生成的 Python 脚本应按如下结构构建 HTML：
{项目名称} — Business Plan
1 / 10
内容映射规则
将源文件中的各类元素映射为对应 HTML 结构：
| 源文件元素 |
HTML 渲染方式 |
| 幻灯片标题 |
|
| 副标题 |
|
| 正文段落 |
|
| 项目符号列表 |
|
| 表格 |
，带斑马纹行与悬停效果
| 图片 |
![]() |
| 图表/形状 |
描述为带样式的 块，或使用纯 CSS 重构 |
| 数据指标数字 |
大号 |
| 卡片式内容 |
，带阴影与边框 |
| 时间轴 |
水平 Flex 布局，含节点圆点与连接线 |
| 对比表格 |
功能矩阵表，使用 ✓/✗ 图标表示支持状态 |
按幻灯片类型定制样式
针对标准融资路演幻灯片，应用增强型样式：
- 封面页：满幅深色背景，超大标题，叠加渐变蒙版
- 痛点页：网格布局的彩色信息卡片
- 解决方案页：带图标的特性卡片
- 商业模式页：可视化收入构成条形图
- 产品演示页：居中展示产品截图/原型图，辅以标注说明
- 竞品分析页：样式优化的对比表格
- 业务进展页：核心指标横向排布 + 时间轴可视化
- 发展路线图页：分阶段卡片，以箭头连接
- 团队介绍页：头像卡片横向排列
- 融资需求页：关键数据 + 资金用途条形图
Python 脚本要求
该脚本必须满足以下条件：
- 接受输入文件路径作为变量或命令行参数
- 自动识别文件类型（.pptx 或 .pdf），并调用对应解析逻辑
- 提取全部文本内容，保留层级结构（标题 vs 正文等）
- 提取图片并转换为 base64 data URI
- 对 .pptx 文件：提取形状位置、颜色、字号等信息，辅助还原版式
- 对 .pdf 文件：提取带坐标的文本块及嵌入图片
- 生成完整 HTML，CSS 与 JS 全部内联
- 正确处理中英文混合文本渲染
- 保存输出文件，并打印完整路径
- 依赖库：
python-pptx、pymupdf（fitz）、base64、os
脚本模板
#!/usr/bin/env python3
"""Deck to HTML Converter by Unique Club"""
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 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()
输出约束
- 单个 HTML 文件，完全自包含，无任何外部依赖
- 文件体积应合理（若源文件不含大量高清图片，则应 < 10MB）
- 需兼容 Chrome、Safari、Firefox、Edge 浏览器
- 必须支持打印（需包含 @media print 样式）
- 须完整保留源文件中所有文本内容，不得摘要、删减或改写
- 中文字符须能正确渲染
安全边界（Guardrails）
- 输出必须为单一、完全自包含的 HTML 文件，禁止引用任何外部 CDN 链接。
- 不得遗漏幻灯片，也不得对内容进行摘要或简化 —— 必须完整保留源文件全部文本。
- 若源文件中存在单张大于 2MB 的图片，请提前向用户提示：生成的 HTML 文件可能较大。
- HTML 文件必须保存在与输入文件同一目录下，且采用相同基础名命名。
- 若系统未安装
python-pptx 或 pymupdf，请生成脚本并明确指导用户安装所需依赖。
相关技能
- pitch-deck-creator —— 在转换为 HTML 前，从零开始创建专业级融资演示文稿。
- unique-club-founder-kit —— UniqueClub 提供的完整 AI 创始人工具包，本技能即为其组成部分之一。
关于 UniqueClub
本技能属于 UniqueClub 创始人工具包的一部分。
🌐 https://uniqueclub.ai
📂 https://github.com/wulaosiji/founder-skills
生成后操作
HTML 文件生成完成后，请执行以下操作：
- 明确告知用户输出文件的完整路径
- 提示用户可直接在任意浏览器中双击打开该 HTML 文件
- 说明常用键盘快捷键：← → 切换幻灯片，F 键切换全屏模式
- 提供可复制粘贴的文件路径，便于快速分享
- 如用户提出需求，可为其生成 QR 码，方便移动端扫码访问
Vite 项目如何打包和部署
Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章，帮助读者完成上线流程。
Vite 如何搭配 Vue.js
Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章，帮助读者完成从初始化到日常开发的配置。
Vite 项目目录怎么看
Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章，帮助读者理解各文件夹的用途与引用方式。
Gradle插件开发入门教程
本专题介绍Gradle插件开发的基本流程，涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法，帮助你理解插件如何组织构建逻辑，减少多个项目之间的重复配置。
Gradle Wrapper配置教程
本专题介绍Gradle Wrapper的基本作用，涵盖文件组成、生成方法、版本配置和任务调用，帮助你理解项目如何使用指定的Gradle版本，减少不同开发环境带来的构建差异。
Gradle怎么构建Java项目
本专题介绍Gradle Java项目构建方法，涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查，帮助你理解各阶段的任务关系，逐步完成项目构建。
PHP时间戳漏洞修复教程
本专题汇总PHP常见时间戳漏洞，包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等，并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案，帮助开发者快速排查和加固时间相关代码。
网站特效 /
网站源码 /
网站素材 /
前端模板
|
