Modern PPT · 现代投屏网页 deck
生成一份单文件 HTML 的横向翻页 deck:专业极简风、干净克制的排版,内置 12 版式 + 交互 + 3 套配色(默认安全橙,放映按 1/2/3 切明亮蓝 / 柔和粉)。键盘 ← →、滚轮、触屏翻页,ESC 出索引,B 切静态模式。默认就是"能直接投屏放映 / 发给别人 fork 改"的成品。
来源与许可(必读):本 skill 衍生自 规藏 guizang-ppt-skill(© op7418,AGPL-3.0)——复用了它的 Swiss 模板底盘、WebGL/ASCII 背景、翻页/索引/动效引擎。在其上做了:安全橙主题(现扩为 3 套可切配色)、一整套投屏排版规范(下文)、12 版式 + 交互动效、已验证版式裁剪、已修模板 bug。因此本 skill 整体仍是 AGPL-3.0:再分发须保留
LICENSE+ 本段署名 + 注明改动;放公司内部仓前先过开源合规(AGPL 常被禁)。生成出来的最终 deck 不必写署名。模板示例页只用通用/公开内容,别烤进项目私货(否则再分享前要现场清洗——本 skill 踩过)。
工作流(动手前先走)
- 澄清(用户只给主题/模糊想法时):受众与场景?时长(15min≈10页 / 30min≈18-22页)?默认配色(❶ 黑+橙 / ❷ 明亮蓝 / ❸ 柔和三文鱼粉——3 套都内置,放映时按
1/2/3随时切,这里只是先定个默认;不确定就用默认黑橙)?有无素材/数据?有无硬约束(必须含 X / 不能出现 Y)?数字一律来自用户素材,缺就标「待补」,绝不编造。 - 先定大纲再动手:从源文档 / URL 做 deck,先找出那一句 thesis 当锚点(如「上下文会填满就变笨」),全篇结论先行、围着它转。每页一个观点(标题即观点);用"叙事弧"(钩子→定调→主体→转折→收束);分幕的长 deck 每 4-5 页插一张 divider(深墨底 + 幽灵编号,见排版规范 §9)。和用户对齐大纲再写。先砍后写:第一版总会过载,删页 / reframe 比堆料更出彩(comprehensive ≠ persuasive)。
- 拷模板:
cp assets/template.html 项目/index.html。它是完整成品——18 页展示全部 12 版式 + 3 套配色 + 交互(count-up / Chart.js / 缩略图墙 / 章节 divider),已含全部 CSS/JS。改<title>,留下要用的版式页、删掉不用的,把内容替换成用户的。 - 先样页后放量:先做封面 + 2-3 张代表页 → 截图 review(见下"验证") → 用户拍板 → 再批量产剩余页。每轮都截图。
- 自检:逐条过下方硬规则 +
references/排版规范.md;grep 裸font-size(正文级应趋近 0)。
排版硬规则(产出一致的关键 · 详见 references/排版规范.md)
- 正文走单一
--fs-bodytoken(投屏 ≈21px;视频剪辑改 32px)。所有描述/段落/卡片说明/表格单元格都var(--fs-body),禁止各写各的裸 font-size。 - 每页字号 ≤ 几档:页标题 / 卡片标题 / 正文 / mono 角标 + 大数字特例。字号编码层级。
- 栏目标题靠"分隔线 + 留白 + 角色对比"立住,不靠加大字号。用
.col-head(安静灰字 +border-bottom:2px solid ink)。加大加粗反而和正文打架、更难读。 - 正文不上色:accent / 品牌色只给标题关键词、图表数据、1px 分隔线;正文强调 = 黑色加粗,不用斜体。
- 内容紧跟标题连排,不锚底:禁止
margin-top:auto把内容推到卡片底,造成"标题在天上、内容在地下"。 - 底部安全区 ≥6vh(
.canvas-card底 padding):满高内容块不要贴右下角导航提示/分页点。 - 编号列表(01/02/03)用单一 grid 共享列轨 +
font-feature-settings:'tnum',否则比例字体下数字宽度不同、各行标题左缘参差。 - 强弱用 5 格方块刻度(领跑=5 满格),可横向扫读;别只写文字。
- 卡片"小标在上"而非右上角标(长标题会和角标重叠);一组卡别随手单格高光(高光要么有数据/焦点语义,要么别加)。
- accent 不满屏铺(安全橙满屏刺眼):封面/幕封用深墨底 + 关键词上色;split 收束页半屏橙可接受。
12 个版式(模板已内置示例页,cp 后改文案即可)
三层分类,每层 divider 分幕(见排版规范 §9):
- ① 基础骨架:Cover 封面 · Agenda 目录 · Page divider 章节页 · Closing 收束
- ② 数据·对比·图表:Stat grid(大数字 count-up 从 0 滚)· Chart(Chart.js 柱状+折线,逐柱升起/自动绘线 + hover tooltip + 折线标 QoQ%)· Comparison 对比矩阵(标准×选项 + 5 格刻度,主推列高亮)
- ③ 叙事·流程·内容:Two-column 图文分栏(右栏可换 图/mock/图表/代码终端)· Three-column 三栏卡(3-grid)· Strategy house 战略房子图(SVG OGSM:橙屋顶使命 + 主题列×编号目标卡 + 价值观地基)· Process/Timeline 流程时间线 · Quote 金句
- 外加 缩略图墙:live 克隆全部版式,一屏预览,自动跟随配色。
已验证版式组件(只用这些,别发明)
- 卡片:
.sub-card(.accent/.ink)、.sub-grid-3-2(六格)、.triad(3-grid 三栏卡) - 数据:
.cnt(count-up 数字)、.stat-card、canvas[data-chart="bar|line"](Chart.js)、5 格方块刻度、.cmp(对比矩阵) - 结构:
.stack-row/.stack-block、.duo-compare(双轨对照 +.vrule)、.timeline-v/.timeline-h、.house-svg(战略房子图) - 文字:
.h-xl-zh(页标题)、.lead/.body(正文)、.t-cat/.t-meta(mono 角标)、.mk(accent 关键词) - 版面:
.split-half(收束)、slide.dark+ 幽灵大编号(章节 divider)、.code-card(终端)、.chart-card、.dot-mat(点阵) - 18 页示例就是这些组件的活样例,直接 copy 改文案最快。
交互 / 动效(模板已接好,</body> 前的 IIFE 自动跑)
- 数字 count-up:
<span class="cnt" data-to="85" data-dec="0">85</span>→ 翻到该页从 0 滚到 85(tnum 防抖)。 - 图表:
<canvas data-chart="bar">/data-chart="line",进页自动初始化,逐柱升起 / 自动绘线 + hover tooltip;折线每点标 QoQ%。改数据在 IIFE 的chartConfig。 - Agenda 逐项点亮:
.agenda-list[data-agenda-steps]→←→每次只点亮一项,到最后一项再翻页。 - 缩略图墙:
.thumb-wall[data-thumb-wall]→ 进页克隆全部版式做缩略图,自动跟随配色。
配色(3 套 · 放映时按 1/2/3 或 URL ?scheme=)
- 1 = 黑+橙(默认,深色页保留)· 2 = 明亮蓝(纯白底)· 3 = 柔和三文鱼粉(暖白底)。
- 蓝/粉两套自动给
<body>加.lite→ 深色页(封面/数据/章节/金句)翻浅底。换/加配色:改 IIFE 的SCHEMES对象(覆盖--paper/--ink/--accent等 CSS 变量)。单套配色只用一个 accent。 - 设默认配色(用户在澄清步选了蓝/粉时):在 IIFE 末尾加一行
applyScheme('blue')(或'salmon'),这份 deck 打开就是那套;1/2/3仍可现场切。
已知坑(别重踩)
- 截图验证陷阱:Chrome 后台标签会冻结动画时钟,截图会拍到"动画第一帧=空白"——不是 bug,前台放映正常。验证动效先按
B切静态模式(window.__setLowPowerMode(true,{persist:false}))再逐页截图。 - 只用上面列的组件:模板未带 CSS 的花式版式(matrix/four-cards/loop 等)直接用会崩。
- 改单文件用脚本/正则时:锚唯一串,改完数 section 数自检(定位串撞车会误删页)。
- 配色翻浅底(
.lite)覆盖内联白字:motion 动效会把内联color:#fff归一化成color: rgb(255, 255, 255),body.lite .slide.dark的选择器要同时匹配#fff和rgb(255, 255, 255)两种写法,否则白字在浅底上隐身。
预览
open 项目/index.html # macOS,无需服务器;断网时 motion 自动降级为无动画可读