// HTML 演示文稿生成 Skill。基于 frontend-slides 扩展。 触发词： - "演示文稿"、"PPT" - "幻灯片"、"slides" - "做 PPT"、"转网页" - "/presentation" 使用场景： - PPT 转网页 - 从零创建演示文稿 - 技术分享演示 - 教学课件
[HINT] SKILL.md 및 모든 관련 파일을 포함한 전체 스킬 디렉토리를 다운로드합니다
| name | presentation |
| description | HTML 演示文稿生成 Skill。基于 frontend-slides 扩展。 触发词： - "演示文稿"、"PPT" - "幻灯片"、"slides" - "做 PPT"、"转网页" - "/presentation" 使用场景： - PPT 转网页 - 从零创建演示文稿 - 技术分享演示 - 教学课件 |
HTML 演示文稿生成工作流。
| 能力 | 说明 |
|---|---|
| PPT 转换 | 将 PPT/PPTX 文件转换为 HTML |
| 从零创建 | 文字描述生成完整演示文稿 |
| 风格选择 | 多种预设风格可选 |
| 动画效果 | 丰富的页面切换动画 |
用户: 将这个 PPT 转为网页
上传: presentation.pptx
AI:
1. 提取内容 - 分析 PPT 结构
2. 风格选择 - 让用户选择风格
3. 生成 HTML - 转换为 HTML 演示
用户: 做一个关于 AI 发展的演示文稿
AI:
1. 内容收集 - 询问主题、时长、风格
2. 风格选择 - 展示 3 种风格预览
3. 生成 HTML - 创建演示文稿
| 风格 | 特点 |
|---|---|
| Bold Signal | 大胆、专业 |
| Dark Botanical | 深色、自然 |
| Electric Studio | 科技、炫酷 |
| Paper & Ink | 简约、书卷气 |
<!-- 单文件 HTML 演示 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>演示标题</title>
<style>
/* 所有 CSS 内联 */
</style>
</head>
<body>
<div class="slide active" id="slide-1">
<!-- 幻灯片内容 -->
</div>
<script>
/* 所有 JS 内联 */
</script>
</body>
</html>
| 功能 | 操作 |
|---|---|
| 下一页 | 右箭头键 / 空格键 |
| 上一页 | 左箭头键 |
| 跳转 | 点击导航点 |
| 编辑 | 鼠标悬停左上角 |
整合 tts-universal，为演示添加语音解说：
<!-- 音频解说 -->
<audio id="narration" src="audio/narration.mp3"></audio>
<!-- 字幕显示 -->
<div class="subtitle">
<span class="current">当前文字</span>
</div>
# 导出为 PDF
bash scripts/export-pdf.sh ./presentation/
# 部署到网页
bash scripts/deploy.sh ./presentation/