SuperAPI AI 工具集

html-ppt

前端与建站

查看项目

更新于 10-16 03:15

技能介绍

用途:把文本或笔记转成专业静态 HTML 演示文稿,输出为纯静态 HTML/CSS/JS 文件,仅依赖 CDN 网络字体,无需构建。

主要能力:提供 37 个主题(assets/themes/*.css)、16 个整套模板(templates/full-decks/)、31 个单页布局(templates/single-page/)、27 个 CSS 入场动画(data-anim)与 20 个 canvas 特效动画(data-fx)。内置键盘运行时(assets/runtime.js)支持方向键翻页、T 切换主题、A 切换动画、F/O 全屏与总览、S 演讲者模式、N 备注抽屉、R 重置计时;FX 运行时在幻灯片进入时自动初始化特效。另含主题/布局/动画/整套模板的展示页,以及无头 Chrome 的 PNG 导出脚本。

使用方式:安装命令为 npx skills add https://github.com/pakco77/html-ppt-skill。从仓库根目录用 ./scripts/new-deck.sh my-talk 生成新演示,打开 examples/my-talk/index.html;主题可硬编码为 <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">,或按 T 循环切换。布局从 templates/single-page/ 复制 <section class="slide"> 块并替换示例数据;动画用 data-anim="fade-up" 或 class="anim-fade-up",列表可用 anim-stagger-list,canvas 特效用 <div data-fx="knowledge-graph"> 并引入 fx-runtime.js。整套模板可复制 templates/full-decks/<name>/ 作为起点。导出 PNG 用 ./scripts/render.sh templates/theme-showcase.html 或 ./scripts/render.sh examples/my-talk/index.html 12。

适用场景:需要幻灯片式输出的任务,如技术分享、产品发布、周报、课程模块、小红书图文、品牌汇报、投资路演等;用户提到演讲、讲稿、逐字稿、演讲者视图或提词器时,可用 presenter-mode-reveal 模板并在每页 <aside class="notes"> 写 150–300 字逐字稿。

限制与规则:应先确认内容与受众、风格主题、起始模板三件事再动手;始终从模板出发,不要从零编写;颜色、圆角、阴影应使用 assets/base.css 中的 CSS 变量而非字面值;不要随意新增布局文件;每页一个 .slide;演讲者专用文字必须放入 <div class="notes">,不能出现在幻灯片可见区域。许可为 MIT,作者 lewis sudolewis@gmail.com,是 lewislulu/html-ppt-skill 的 fork,维护者 @pakco77 增加了交互式风格选择 WebUI、sainstore 主题与品牌整套模板。具体收费、价格与平台支持等资料暂未提供。