零依赖前端幻灯片
将以下提示词粘贴到你的 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 幻灯片的开发者,要修导航、触摸、滚动捕捉和移动端性能。