SuperAPI AI 工具集

aicr-creating-slide-decks

前端与建站

查看项目

更新于 10-16 09:46

技能介绍

用途:用于构建一个自包含的 HTML 幻灯片或可视化讲解稿(例如 demos/*.html),全屏展示或投屏,也可作为读者日后自行点阅的留存材料。不适用于散文式文档(用 Markdown)、需要真实 Web 应用或构建的内容,以及实时数据仪表盘。

主要能力:一份幻灯片就是一个自包含 HTML 文件,内联 CSS 与内联 SVG,无构建、无依赖、无网络,任意浏览器可打开并能干净投屏。支持整屏幻灯片与导航:键盘(←/→/Space、Home/End)、屏幕上的 ‹ ›、进度条、幻灯片计数、F 全屏、#n 深链接,均由骨架脚本提供。每张幻灯片一个观点;内联 SVG 承载概念,使用 node/node-g、edge/edge-g、nlabel/nsub/elabel 类手工编写,配 viewBox 与 max-height 以缩放。采用深色 NVIDIA 主题,:root 调色板含绿色 #76b900 强调色与 NVIDIA Sans 及系统回退,文字水印,无虚构标志。

使用方式:复制 skeleton.html(已是一个可用幻灯片,含调色板、界面、键盘导航、标题页、内容页与 SVG 图占位),为每个观点添加一个 <section class="slide">,脚本自动计数并导航。文件放在 demos/ 下。提交前需验证:将每个内联 <svg> 按 XML 解析(内联 SVG 标准更严格,裸 &、未闭合标签或多余属性会导致整个 SVG 不渲染,& 应转义为 &,</> 转义为 </>):

python3 - <<'PY' import re; from xml.dom import minidom html = open("demos/your-deck.html").read() for n, s in enumerate(re.findall(r'<svg\b.*?</svg>', html, re.DOTALL), 1): minidom.parseString(s); print(f"svg #{n}: well-formed") PY

随后在浏览器中逐页翻看,确认每张图表或代码块适配视口。

适用场景与限制:适合讲解或教学技术概念与工作流、作为可自行点阅的留存材料。限制包括:必须是单个自包含文件,任何外部依赖都会破坏离线/投屏承诺;每张幻灯片只放一个观点,溢出就拆分;内容须真实准确、不夸大、不写营销空话;不得使用个人或机器特定信息与虚构标志;若无法打开浏览器,至少确认每张图的 viewBox 高度不超过其 max-height 上限。工作示例参见 demos/evidence-demo-slides.html(九张幻灯片、四张手工 SVG 图、键盘导航、深色主题)。