Agent Skills
返回列表
📁

零依赖前端幻灯片

办公效率 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中:

请根据 https://skillhub.cn/install/skillhub.md,安装 @org-02qudk26/frontend-slides-zh。

技能介绍

解决的问题

做幻灯片常被卡在两个地方:内容还没组织清楚,设计又只能靠口头描述。这个技能针对前端演示文稿,目标是把路演、教学、会议、内部演示等场景转成单文件 HTML,避免 npm、构建流程和复杂工程化依赖。

如何工作

它先按模式分流:

  • 新建演示:询问用途、页数、内容完整度,再进入视觉探索。
  • PPT 转换:用 python-pptx 提取文本、图片与备注,再确认结构。
  • 改进现有 HTML:读取结构后做样式与交互优化。

风格阶段采用“展示而非告知”:根据预期氛围生成 3 个迷你预览,包含排版、配色、入场动画和整体气质,避免通用 AI 审美。最终产物要求包含 SlidePresentation 控制类、Intersection Observer 动画、键盘/触摸/滚轮导航、响应式与可访问性,并在完成后清理预览、打开浏览器和给出摘要。

适用边界

它适合快速交付可在浏览器打开的演示,不适合需要复杂后端、协作编辑或大型 CMS 工作流的场景。若只是普通静态页面或复杂交互应用,应优先选择更适合的前端设计技能。

使用场景

  • 把初创公司路演要点做成可浏览器打开的单文件 HTML 演示,并选择霓虹或商务风格。
  • 将 .pptx 课程材料提取成网页幻灯片,保留文本、图片与顺序,再补充入场动画。
  • 为技术分享准备 10 页会议演讲页,通过三种风格预览确定排版、配色与动效。
  • 改进已有 HTML 幻灯片,修复键盘导航、触摸滑动、滚动捕捉和移动端性能。

适合人员

  • 准备融资路演页的产品负责人,想快速产出有视觉区分度的单文件 HTML 演示。
  • 需要把课程 PPT 转成网页演示的讲师,希望保留图片和顺序并增加入场动画。
  • 做技术分享的工程师,想避免通用模板,用风格预览确定排版、配色和动效。
  • 维护已有 HTML 幻灯片的开发者,要修导航、触摸、滚动捕捉和移动端性能。