小七极简演示
把内容组织成可直接打开、演示和打印为 PDF 的 Reveal.js HTML。保持纯白底、中文编辑排版与黑色线稿的统一气质,不复制源 PDF 中的具体图像。中式气质来自中文排版和版面关系,不强加给配图题材或媒介。
开场选择
若用户尚未指定,只问一次并等待选择:
- 字体气质:
A 思源宋体(原稿方向,人文、叙事、编辑感)或B 思源黑体(理性、现代、结构感)。 - 章节配图方式:
A 直接调用生图工具生成章节标题页配图,或B 先给每章配图提示词,由用户确认或自行生成。
用户已经给出选择时不要重复询问。宋体用思源宋体优先;黑体用思源黑体优先,苹方作为 macOS 备用。
必读资源
- 开始设计前读取 references/style-system.md。
- 选择生图或提示词时读取 references/image-prompts.md。
- 以 assets/deck-template.html 为 Reveal.js 起点。
- 需要符号时复用 assets/icons.svg;优先使用线稿,不引入彩色图标库。
- 模板中的
assets/chapter-01.png是待生成路径;先完成当前章节生图或取得用户图片,再进行浏览器验收。
工作流
- 提炼单一主旨与 3-5 个章节;每页只承担一个主要判断。
- 为每页选择版式原型:封面、章节、框架正文、案例截图、巨句、图解或收束。
- 用模板 CSS token 落实字体选择,不同时混用宋体和黑体作为中文正文。
- 用黑底白字标签、留白、位置和字号制造层级;强调词不超过正文的 12%。
- 先为全部章节建立同系列、不同隐喻的“章节视觉母题表”,再按用户选择调用生图工具,或输出提示词等待确认。普通正文页默认不加装饰性配图。
- 输出
index.html和相对路径assets/;不要输出.pptx。 - 保留模板的上一页、下一页、页码、点状导航、索引视图和全屏控件,并按本风格改造,不能只依赖键盘。
- 在浏览器逐页截图检查,再交付 HTML。
内容与版式规则
- 画布固定为
1920 × 1080、16:9;Reveal.js 使用明确width与height。 - 中文主标题短、重、可被旋转或竖排;英文只作小型功能标签或章节副标。
- 章节页以“一幅生图主视觉 + 右侧竖排标题”为标志性构图。
- 正文页用单层细框与顶部黑色页签;正文通常为 55/45 双栏。
- 案例页允许放真实截图,使用 1px 中性边框,不加设备壳和厚阴影。
- 巨句页只留一句核心判断与一个小黑标签;不要补解释性装饰。
- 黑签与其内容共用同一对齐轴:中央巨句、收束主张和框架标题的黑签必须视觉居中;只有元信息或状态标签可以左对齐。禁止用任意
margin-left伪造居中。 - 图表使用细轴线、虚线参考线、剖面线或点,不用渐变、3D、彩色图例。
- 页脚锁定为字距拉开的中文章节名 + 黑底白字英文副标。
- 动效仅用短促淡入或无转场;尊重
prefers-reduced-motion。
章节配图决策
- “配图”默认指每个章节标题页的主视觉,不指给每一页填图。正文页只有真实案例、数据关系或用户明确要求时才加图。
- 需要概念冲击或章节氛围:优先生图,要求
#FFFFFF纯白底、干净黑色线稿、无纸张纹理、无灰度素描、无文字、无品牌标识,并让构图适配右侧中文竖排标题区。不要为“中式”强加建筑、白描、水墨或传统符号。 - 章节标题页不得用 Codex 手写 SVG 代替生图。需要精确关系或数据时,只能在正文图表页使用原生 SVG。
- 用户要自己选择或外部生成:先给首章 2-3 个有明确差异的视觉方向;用户选定后再按同一系列扩展其余章节。
- 不从源 PDF 抽取或复刻现成配图;根据每章论点设计新的视觉隐喻,不让所有章节都退化为通用流场、几何体或飞鸟。
验收
- 检查字体模式与用户选择一致,中文 fallback 完整。
- 检查 1920×1080、边距、页脚位置、竖排方向和长文本溢出。
- 检查所有图片有替代文本,正文与标签对比度足够。
- 检查中央黑签相对主张或画布居中,播放控件可点击、可聚焦、不会遮住页脚。
- 检查没有渐变、玻璃拟态、圆角卡片海、彩色大图标、通用图库照片或无意义装饰线。
- 检查 CDN 或本地 Reveal.js 引用可用,键盘导航、hash 和打印样式正常。
- 最终以浏览器截图确认无裁切、重叠、孤行和不可读的小字。