用途:生成单文件、横向滑动的 HTML 演示文稿(deck),适合产品概览、闪电演讲、路演和投资更新等场景。做法是复制种子模板 assets/template.html 为 index.html,再从其布局库中粘贴幻灯片版式并填入真实文案。
主要能力与资源:模板包含设计令牌、幻灯片基础元素和一套已验证的 iframe 导航脚本(解决真实滚动容器检测、双捕获阶段监听、自动聚焦、不使用 scrollIntoView、位置保持五个 iframe 特有问题)。references/layouts.md 提供 8 种可直接粘贴的幻灯片布局和“主题节奏”规则;references/checklist.md 提供 P0/P1/P2 自检清单及节奏抽查。
使用方式:先通读 template.html 的 style 与 script 块,阅读 layouts.md 和当前 DESIGN.md,将设计系统的令牌映射到种子中的六个 :root 变量。写任何幻灯片前先确定页数与主题节奏,默认 6 页;5 至 10 分钟演讲 6 页、15 分钟路演 8 至 10 页、20 至 30 分钟 12 至 18 页。先写出节奏草图给用户确认,再逐页从 layouts.md 复制对应 section,替换方括号内容,并为每页加上 data-screen-label。最后按 checklist 自检,尤其用 grep 'class="slide' index.html 检查主题节奏。产出以 artifact 形式输出 HTML。
限制与规则:每个幻灯片必须带主题类(light、dark、hero light、hero dark),不得连续三页以上同主题,8 页以上至少各有一页 hero dark 和 hero light;展示字体用 var(--font-display) 衬线体;每页最多使用两次强调色;不要改写导航脚本,不要使用 scrollIntoView()。官方未提供收费、价格、平台或效果信息。