메뉴
HTML 演示文稿生成 Skill。基于 frontend-slides 扩展。 触发词： - "演示文稿"、"PPT" - "幻灯片"、"slides" - "做 PPT"、"转网页" - "/presentation" 使用场景： - PPT 转网页 - 从零创建演示文稿 - 技术分享演示 - 教学课件
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/kyirexy/CodeMotion-Skill --skill presentation명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
完整的科普动画视频生成 Skill。整合 script-to-scene + tts-universal + remotion-pro。 触发词： - "科普视频"、"科普动画" - "制作视频"、"创建动画" - "3Blue1Brown 风格" - "/science-animation" 使用场景： - 数学/物理概念讲解 - AI/机器学习可视化 - 数据结构与算法动画 - 技术教程视频
根据场景配置生成 Remotion React 组件代码。 触发词： - "生成 Remotion 代码" - "生成场景组件" - "创建视频代码" 使用场景： - 科普动画视频生成 - 技术教程视频制作 - 数据可视化视频
将自然语言脚本拆分为结构化场景配置。 触发词： - "拆分场景"、"场景配置" - "分镜"、"场景规划" - "脚本转场景" 使用场景： - 科普视频脚本拆解 - 教程视频分镜 - 长文本自动分段
SOC 직업 분류 기준
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/