frontend-slides 的 Retro Zine 设计系统实战：在 HTML 演示文稿中复刻 Riso 印刷的 Zine 质感

• AI 技能
• AI 插件
• 前端

导读

Retro Zine 是frontend-slides技能中 Bold Template Pack 提供的一套risograph-zine（Riso 孔版印刷小志）编辑设计系统：暖卡其纸张画布 + 深森林绿强调 + 墨水黑结构 + 三字体排（Bebas Neue / Space Grotesk / Caveat）+ SVG 颗粒覆盖层。本篇指南以 retro-zine 完整设计文档 为骨架，结合仓库中的 deck-stage.js、viewport-base.css 与 SKILL.md 源码级佐证，说明如何在固定 1920×1080 舞台上生成一套真正具备"手工印刷感"的完整演示文稿：从色板、三字体栈、类型尺度、边框系统、纸张叠压深度手法，到 CJK 中文字体配对与逐页迭代检查清单。读完你既能准确实现该模板的每一处细节，也能掌握 frontend-slides 固定舞台的生成规范。

Retro Zine 是什么：一套"印刷小志"的 HTML 设计系统

按 selection-index.json 的元数据，Retro Zine（slug：retro-zine）是一套以温暖卡其纸为底、深森林绿为强调、墨水黑为结构的 risograph-zine 编辑系统。它的气质关键词是 crafted（手工）、lo-fi（低保真）、underground（地下）、warm-retro（暖复古）；语气是 scrappy（粗砺）、warm（温暖）、intentional（刻意）、DIY。设计文档将其定位为"由小型出版社排印的一张编辑版面"（an editorial spread typeset by a small press）。

其美学来源横跨三个传统：

• 独立出版（independent press）：自印刊物、限量印刷的版面习惯；
• 世纪中叶行动主义海报（mid-century activist posters）：粗壮的印刷字、醒目的色块；
• DIY Zine 文化：轻微旋转的印章痕迹、拼贴布局中的遮蔽胶带、段首大写字母（drop cap）、纸张叠压的错位阴影。

设计文档的 preview.md 给出了模板使用边界：最适合需要"看起来是印刷品、低保真、手工感"的场景——独立杂志与出版物、音乐/艺术品牌、创作者作品集、小批量手作发布、社群类演示；对于追求数字原生精致感或快节奏现代技术感的场合则应避免，因为分层拼贴美学是刻意显得手工的。也就是说，技术、研究、商业演示同样可以使用它——前提是你想要 Riso 印刷的温度而不是数字化的光洁。

整套系统的核心特征是：

• 暖卡其纸画布（bg#C8B99A）+ 深森林绿强调（green#008F4D）+ 墨水黑结构（black#1A1A1A）；
• 0.07 透明度的 SVG 颗粒覆盖层（grain-overlay）盖在每一页上；
• 所有展示级文字都用 Bebas Neue 大写加字距；正文用小字号 Space Grotesk；手写强调用 Caveat；
• 3px 黑色实线分隔区域，2px / 1.5px 细分；
• 纸张叠压卡片：绿色色板通过::before垫在白卡身后 12px；
• 印章与拼贴块带小幅旋转（-8°、+6°、-5°～+5°）；
• 半透明遮蔽胶带片覆盖拼贴构图；
• 绿色段首大写字母、绿色丝带条、绿色行内高亮标记编辑强调。

设计文档还特别声明了密度哲学：中高密度。Zine 的语言依赖视觉丰富度——拼贴构图、多栏编辑版面、正文里的段首大写字母、带色彩分类 chip 的表格账目、斜贴的丝带条标题。一张只放一个居中大标题的幻灯片会被视为"设计不足"；正确的密度是"一个主视觉文字焦点 + 多个从属组件（装饰印章、眉题标签、分隔短条、手写署名、段首大写字母）"。真正的留白只保留给宣言/陈述页——单一巨引文占据一整块纯绿底。

Frontend Slides Fixed-Stage Policy：固定 1920×1080 舞台

Retro Zine 的 design.md 开头第一段就是Frontend Slides Fixed-Stage Policy，这是本系统在整个 frontend-slides 生态里生效的顶层约束：

• 最终演示文稿必须在固定 1920×1080 舞台上生成，整体等比缩放到浏览器视口；
• 16:9 画布在任何屏幕上（包括手机）都保持不变；允许 letterbox 或 pillarbox，但禁止为移动端重排幻灯片内容；
• 该策略优先级高于设计文档后续描述的任何响应式行为；文档里提到原始模板是 viewport-fluid（如100vw、100vh、vw、vh、clamp()），那只是源模板的历史，不是 frontend-slides 的生成目标；
• 要把这些视口流体值当作"设计比例"翻译成 1920×1080 舞台坐标，而不是作为最终的实时响应式规则；
• 最终输出要使用 deck-stage.js 或等价的行内舞台缩放器：每页按 1920×1080 渲染，用一次transform缩放整个舞台，并截图验证文本溢出与面板重叠。

这条策略与 SKILL.md 中"Fixed 16:9 Stage（不可协商）"的全局原则一致：每套演示都用 1920×1080 画布整体缩放，不按设备重排内容。

源码中的舞台实现

deck-stage.js 是可复用的<deck-stage>Web Component，其缩放逻辑（_fit()，见 deck-stage.js 第 527-540 行）正是策略要求的实现方式：

const DESIGN_W_DEFAULT = 1920; const DESIGN_H_DEFAULT = 1080; // ... _fit() { if (this.hasAttribute('noscale')) { this._canvas.style.transform = 'none'; return; } const vw = window.innerWidth; const vh = window.innerHeight; const s = Math.min(vw / this.designWidth, vh / this.designHeight); this._canvas.style.transform = `scale(${s})`; }

值得注意的实现细节：

• width/height属性决定设计尺寸，默认 1920×1080（见 deck-stage.js 第 288-293 行）；
• 非激活幻灯片保留在 DOM 中（visibility: hidden+opacity: 0），而不是被卸载，以保留视频、iframe、表单输入等状态（见 deck-stage.js 第 18-21 行 注释）；
• 组件在切换时派发slidechange自定义事件，detail 携带index、previousIndex、total、slide、reason（'init' | 'keyboard' | 'click' | 'tap' | 'api'）；
• 键盘导航支持 ←/→、PageUp/PageDown、Space、Home/End、数字键跳页、R 键回到第一页（见 deck-stage.js 第 559-590 行）；
• @media print会把每页按设计尺寸排成独立页面，浏览器"打印 → 存为 PDF"即可得到一页一页的干净 PDF（见 deck-stage.js 第 223-265 行）。

如果你不用 Web Component，也可以用 viewport-base.css 中.deck-viewport/.deck-stage/.slide的固定舞台基础样式，配合 html-template.md 里的SlidePresentation控制器：scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080)，用一次translate(...) scale(...)变换完成缩放。这套方案与 SKILL.md 的要求一致——幻灯片切换必须用visibility/opacity/pointer-events控制（.active/.visible），禁止使用display: none，避免被其他布局类覆盖导致全部幻灯片同时可见。

配色系统：大地与森林

色板

Retro Zine 的全部颜色集中在设计文档 frontmatter 的colors区块，共六个语义色：

设计文档同时给出了color-aliases：line: black——即"线条"一律取黑色。

默认值约定

设计文档定义了非常明确的使用默认值，实现时无需每次纠结：

• 默认幻灯片背景：colors.bg（暖卡其纸）；
• 默认主标题颜色：colors.green（主栏标题与主视觉标题）；双栏或分栏布局中与正文配对的标题用colors.black。拿不准时选绿色——绿色标题是这套系统最响亮的编辑信号；
• 默认正文字色：colors.black；
• 默认边框色：colors.black（所有结构边框一律黑色）；
• 强调面（陈述、主视觉呼出块）默认：colors.green底 +colors.white字；
• 绿面上的默认文字：colors.white（奶油色）；
• 黑面上的默认文字：colors.bg（卡其画布色）——即使反白，文字仍读作"纸上的墨"；黑面上的绿色强调（收尾页眉题 + 手写字）为反白提供活力；
• 默认眉题/标签色：Bebas Neue 标签用colors.green；letter-spaced 的 Space Grotesk 标签用colors.black；
• 默认段首大写字母色：colors.green（这是系统的编辑指纹，永远是绿色）；
• 默认手写色：卡其/奶油面上colors.black，黑面上colors.green（收尾页）；
• 默认行内高亮：黑底卡其字（inline-highlight），如同笔在段落里划了一笔。

最关键的一条设计纪律是：绿色与黑色不可互换——绿色 = 强调（"这是希望你看的东西"），黑色 = 结构（"这是撑起整页的东西"）。把它们反过来用（黑色做强调、绿色做结构）会翻转整个系统的语气。

排版系统：三字体栈的节奏

字体角色分配

系统将三种 Google Fonts 分为三个具有明确情感角色的声部：

• Bebas Neue（展示声部）：紧凑的全大写工业无衬线，单一字重 400，靠密集的垂直笔画读出粗壮感。用于每个展示时刻——标题、陈述、数据、序数词、眉题标签，统一大写并带 0.02–0.04em 字距。窄身 + 加字距的 Bebas 是这个系统"一眼 zine"的关键；替换任何其他展示无衬线都会失去 zine 的嗓音。
• Space Grotesk（正文声部）：带微妙怪比例的人文几何无衬线。正文段落用 300–500 字重、小字号（13–18px），保持杂志栏目的文字密度；letter-spaced 的全大写小标签用 600 字重。它为 Bebas 的表现性密度提供可读的反差。
• Caveat（手写声部）：休闲圆珠笔手写体，400–700 字重。用于作者署名（如"— Our founding principle since day one"）、旁注、展示元素上的装饰性说明、RSVP 表单里的"手写填充值"。它提供一套排版化系统里稀缺的"人手温度"。

设计文档特别强调：没有第四种字体；没有斜体（Caveat 是手写体而非斜体）；没有下划线。强调只通过两种方式实现——换字体（正文 Space Grotesk → 手写 Caveat 表达私人笔记，或 → Bebas Neue 表达呼出）或换颜色（黑 → 绿）。

完整类型尺度

design.md 提供了完整 token 级类型尺度，实现时应逐一映射：

各 token 的字重/行高/字距/大小写细节见 design.md frontmatter 的 typography 区块：展示级行高 0.85–1.1、字距 0.02–0.04em、一律textTransform: uppercase；正文行高 1.6–1.7；手写体行高 1.3。

排版默认值与签名处理

默认值：主章节标题用headline（42–90px）绿色；封面用display-cover（48–140px）绿色；正文用body（13–16px）——zine 语言期待小号正文而非现代 18px+；引语段用body-md；眉题用label-eyebrow绿色 0.2em 字距；主视觉数字用number-hero绿色；任何手写署名用hand-script。Bebas 展示元素字重永远是 400（Bebas Neue 只有一个字重）；正文默认 400，全大写小标签 600。拿不准headline与title时选headline——title只用于幻灯片内部拼贴块/区域级副题。

签名处理（只要对应元素类型出现就不可省略）：

• 每个 Bebas Neue 元素都必须大写——小写 Bebas 不在系统词汇表里；
• 每个 Bebas Neue 元素都带至少 0.02em 的正字距，眉题/标签拉到 0.2–0.25em；
• 每个主章节标题都是绿色；
• 每个开启栏目的编辑段可以带段首大写字母——永远绿色、Bebas Neue、行高 0.8、左浮动；
• 每个手写元素都用 Caveat；
• 引文/陈述页中，手写署名跟随展示标题——没有署名引文读起来不完整；
• 正文内的行内高亮用黑底卡其（inline-highlight），不是绿底——绿底行内高亮像排版错误，黑底才像马克笔划痕。

排印节奏来自三字体对比：紧凑工业的 Bebas 展示（响、加字距、大写）→ 干净的 Space Grotesk 正文（静、小、句子大小写）→ 表现性的 Caveat 手写（私人、松散、签名风格）。只用一个字体面的页面是单调的；单页混齐三种字体才是 zine 正确。行高不能反转：展示紧（0.85–1.1）、正文宽（1.6–1.7）、手写松（1.3）。

布局系统：画布、间距、持久化 Chrome 与边框原理

画布与导航

设计文档描述的原型是100vw × 100vh全视口画布：每个.slide绝对定位铺满视口，只有.active可见（opacity 1，其余 0）；过渡用 0.6s opacity + translateY(20px) 制造"纸页轻翻"感；导航由 JS 驱动（方向键、空格、点击、触摸滑动）；底部边缘有一道 4px 高的绿色进度条。

需要再次强调：在 frontend-slides 生态里，这些100vw/100vh是设计比例，最终实现必须翻译为固定 1920×1080 舞台坐标（见上文 Fixed-Stage Policy）。clamp()只用于舞台之外的 UI 或小尺寸回退预览（SKILL.md 第 48 行）。

间距刻度

design.md frontmatter 的spacing区块定义了完整间距体系：

持久化 Chrome

三个持久元素位于幻灯片构图之外：

• 进度条：沿底部左侧，4px 高，绿色填充，随演示推进增长；
• 幻灯片计数器：右下角——2px 边框奶油色 chip 里的 Bebas Neue 14px 卡其墨字；
• 导航提示：底部居中——黑色填充药丸形 + 奶油文字，仅在body:hover时淡入（0.4s opacity 过渡）。

边框即分隔线（Region Borders vs Internal Padding）

系统遵循"边框即分隔线"原则：网格容器用 3px 黑色外框，每个子宫格用 1.5px 黑色边框形成发丝级的"宫格对宫格"分隔线。区域在幻灯片边缘相接（分割画面布局）时，分界线是 3px 黑色实线，两侧区域直接贴着它，不留缝隙。而自由构图（拼贴、主视觉、宣言页）中，区域以绝对定位 + 旋转 + 重叠布置，边框落在每个独立块上，而不是幻灯片网格上。

深度与层次：无阴影的纸张叠压

Retro Zine 的深度语法只有三种手法，刻意排除现代软阴影：

纸张叠压错位色块（主手法）

签名式深度处理是错位色块：卡片承载一个::before伪元素，绝对定位，向下向右各偏移 12px，填充绿色（或其他强调色），z-index垫在卡片之后（注意实现时需z-index: -1）。视觉结果是层叠的"纸张叠压"——卡片像压在一张略大的绿色纸上，绿色从右下边缘露出。用于 RSVP 主视觉卡与主要呼出容器。参考组件定义：

card-offset: background: "{colors.white}" border: "3px solid {colors.black}" positionBefore: offset: "12px down, 12px right" background: "{colors.green}" zIndex: -1

旋转（次级手法）

小幅旋转（-8° 印章、+6° 印章 alt、-5°～+5° 拼贴块）施加在印章标记、RSVP 标签、视觉覆盖呼出、拼贴块上，制造"手工摆放"的能量。旋转必须是刻意的——绝不像是意外歪斜——并且只用于要读作物理实物的元素（印章、贴纸、贴上去的标签）。

颗粒覆盖层（氛围质感）

一个内联 SVG fractal-noise 覆盖层以 0.07 透明度盖在每一页上，让所有表面带印刷颗粒。严格说这不是"深度"，而是把每块平涂色都锚定到印刷纸感层面的表面质感。去掉颗粒会立刻破坏 zine 的嗓音。

无 Web 阴影

系统深度语法禁止box-shadow、drop-shadow、rgba 阴影色调。任何现代软阴影都会破坏印刷美学。

色块对比（次级深度信号）

在阴影与旋转之外，绿对卡其、黑对卡其的对比提供区域级深度：卡其区域内的绿色丝带条视觉上向前突进；白卡背后的黑色区域视觉上后退。高对比色板是第二深度信号。

形状与装饰：零圆角、固定边框权重、完整组件词汇表

无圆角

系统没有任何圆角。卡片、丝带条、印章、RSVP 卡、表格单元格、段首大写字母、chip、分隔短条——全部是严格矩形。border-radius全局为 0。

边框权重体系

边框永远是黑色；唯一的彩色边框例外是stamp-mark批准章上的绿色边框。

装饰元素类型

design.md 完整列出了每个组件的视觉契约（components区块）：

• Line box（line-box）：卡其底上的通用 3px 黑框卡，系统的默认内容容器；
• Card with offset（card-offset）：奶油白卡 + 3px 黑框 +::before垫 12px 绿色错位板——签名式纸叠卡；
• Stamp（stamp/stamp-mark）：任意元素可旋转 -8°（stamp）或 +6°（stamp-alt）读作手压标记；stamp-mark变体是黑底、绿字、绿 2px 边框——用于批准印章、"CONTACT US" 徽章、编辑印章；
• Collage piece（collage-piece）：自由定位面板，3px 黑框 + 小幅旋转；背景在各块间轮换：绿、奶油白、暗卡其、黑底反白；
• Tape（tape）：半透明白矩形，锐角（-40°～+35°）层叠在拼贴块上，暗示"胶带贴纸"；永远半透明、永远带锐角；
• Ribbon bar（ribbon-bar）：实心绿块 + 奶油文字——眉题条、强调条、行内章节标签；
• Drop cap（drop-cap）：开篇编辑段的超大绿色 Bebas Neue 首字母，左浮动、行高 0.8、正文环绕；
• Inline highlight（inline-highlight）：正文段落内的黑底卡其马克笔划痕；
• RSVP field（rsvp-field）：表单行模式——Bebas Neue 绿色小标签 + Caveat 手写"书写值"落在 2px 黑下划线上，模拟手填表单；
• Ledger row（ledger-row）：横向数据行模式，date / title / edition / track / nr 五列；表头行 1.5px 黑下划线，数据行 1px 发丝分隔；每行可带一个分类彩色 chip；
• Chip（chip）：等宽字体色块（JetBrains Mono，否则默认等宽）标记行类别；填充色为绿色 + 分类调色板扩展（见下文 Known Gaps 的约束）；
• Divider stub（divider-stub）：短 4px 实心水平短线（60–80px 宽），居中，作为主视觉标题/陈述上方下方的"视觉呼吸"；绿面上用白色、黑面上用绿色；
• Hand-script element：任何 Caveat 文字——系统"人声"的信号，用于署名、旁注、说明、RSVP 填充、收尾页签名。

Do's and Don'ts：十条必做与十条禁忌

设计文档用 Do's and Don'ts 总结了最容易出错的纪律，逐条列出如下。

必做（Do）：

1. 每页保留 0.07 透明度的 SVG 颗粒覆盖层——它是把整套演示锚定在印刷纸感上的质感；
2. 所有展示、标题、陈述、数据、数字、眉题标签都用 Bebas Neue 大写 + 0.02–0.04em 字距；
3. 主章节标题默认取绿色——绿对卡其是最响亮的编辑信号；
4. 主视觉呼出与 RSVP 卡用纸叠错位模式（::before绿板垫白卡 12px）；
5. 对要读作物理实物的元素施加小幅旋转（-8° 印章、-5°～+5° 拼贴），旋转必须始终显得刻意；
6. 用段首大写字母开启编辑正文栏——系统的编辑指纹；
7. 单页构图混合三种字体——三字体对比就是排印节奏；
8. 正文内行内高亮用黑底卡其，模拟马克笔划痕；
9. 每条引文/陈述下方配 Caveat 手写署名——把引文锚定为人的声音；
10. 在拼贴构图的接缝处用锐角叠加半透明胶带片。

禁忌（Don't）：

1. 不给任何角落加圆角——border-radius 全局为 0；
2. 不用模糊box-shadow——深度只来自错位色块、旋转与颗粒层；
3. 不用其他展示字体替换 Bebas Neue——紧凑工业的加字距大写嗓音就是系统身份；
4. 不让 Bebas Neue 出现句子大小写——它永远大写；
5. 不用其他手写体替换 Caveat——Lobster、Pacifico 等落在系统之外；
6. 不引入第三种品牌色——卡其 + 绿 + 黑 + 奶油就是系统；蓝或红会破坏大地与森林色板；chip 调色板扩展（橙/粉/蓝/红）只保留给账目表里的分类 chip 标签，不能作为通用强调；
7. 行内高亮不用绿底卡其——马克笔划痕是黑底的，绿底读作排印错误；
8. 元素倾斜不超过 ±8°——再大就从"手工摆放"变成"坏了"；
9. 正文字号不超过 18px——zine 的栏目密度依赖小号正文（13–16px），20px+ 现代正文显得过度放大；
10. 卡片不用纯白 #FFFFFF——奶油白（#F4EFE6）维持纸叠纸的基调，纯白读作"数字化"。

响应式行为与演示行为

design.md 说明，原始模板是100vw × 100vh并用clamp()流体缩放，单条max-width: 768px媒体查询会把多栏布局重排为单栏、把栏间边框替换为底边框、并把幻灯片内距压到 32px。在 frontend-slides 中这些只作为源模板历史，最终生成必须遵守 Fixed-Stage Policy（不按设备重排内容）。

缩放行为参考：展示标题 48px（最小）到 140–160px（最大）；正文 13px 到 16–18px；内距 32px（移动端）到 60–80px（桌面端）；边框、胶带尺寸、印章旋转固定，不随视口缩放。

演示行为：前进用 ArrowRight / ArrowDown / Space / Enter / PageDown 或点击视口右半；后退用 ArrowLeft / ArrowUp / PageUp 或点击左半；活动页带.active，非活动页 opacity 0 + translateY(20px)；移动端横向触摸滑动前进/后退；导航提示在body:hover时淡入（0.4s）。这些行为与 deck-stage.js 中的键盘实现一一对应（还额外支持 Home/End、数字键、R 键复位）。

打印行为：模板本身没有@media print规则（web/viewport-first），但 frontend-slides 的舞台实现提供了打印支持——deck-stage.js 的 print 媒体查询 会把每页按设计尺寸铺成一页，浏览器"打印 → 存为 PDF"即可直接输出一页一页的 PDF；viewport-base.css 第 80-123 行 的打印规则同理。

CJK 与国际化：中文内容的配对方案

design.md 为中文内容提供了完整方案，核心决策是：单一 CJK 字体思源宋体（Noto Serif SC）承担所有排版角色。理由是 Bebas Neue 的紧凑工业大写嗓音没有能保持重海报感的中文无衬线对应物，而 Noto Serif SC 的 900 字重带有真正的印刷重量，其深衬线笔画呼应活字印刷与木版印刷，比任何中文无衬线都更接近系统的世纪中叶行动主义海报美学。

字体配对表

组合读作"同一本 zine 的翻译版"，而不是两套竞争系统。正文用同族 400 字重在小字号（13–16px）下保持杂志栏目密度。

字体加载代码

CJK 加载直接使用设计文档给出的方式：

<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&display=swap" rel="stylesheet">

然后追加到对应字体栈：

/* Display roles */ font-family: 'Bebas Neue', 'Noto Serif SC', sans-serif; /* Body roles */ font-family: 'Space Grotesk', 'Noto Serif SC', sans-serif;

通用 CJK 调整清单

• 行高：正文 1.75–1.85，展示 1.15–1.25；
• CJK 上字距为 0；
• CJK 上不做 uppercase；
• 使用全角标点；
• 展示标题不加句号；
• Pangu 间距（盘古之白）："使用 Claude" 而非 "使用Claude"；
• 一句话只用一个字体。

本系统特有的 CJK 美学注意点

• Bebas 的 0.02–0.04em 正字距在 CJK 上必须降到 0——中文加字距会把每个字视觉拆成独立单词，Bebas 的压缩 + 加字距签名无法迁移，只能靠 900 字重独自撑起展示声部；
• 展示行高要从 0.85–0.95 打开到 1.15–1.25——Bebas 的紧行高是拉丁展示惯例；CJK 字符完全占据 em-box，需要垂直呼吸空间；
• 段首大写字母需要重新思考：Bebas 段首大写左浮动在正文旁，而同尺寸的 Noto Serif SC 段首大写（clamp(48px, 6vw, 80px)绿色）视觉可行但缺乏编辑传统共鸣——中文排印历史上不用段首大写。要么保留作为西方编辑风格的点缀，要么替换为沿开场段并排的绿色竖侧条（3px 宽、绿色填充）；
• 行内高亮、丝带条、印章标记都能干净迁移——它们是色块处理，不依赖字形；
• Caveat 手写是系统的"人声"，且没有能保留圆珠笔手写性格的中文替代——把 Caveat 时刻视为纯拉丁：即使中文页，署名与旁注也用拉丁；RSVP 表单填写用拉丁。中文排印正文与拉丁手写边注的对比反而能加深 zine 嗓音（读作"译者注释"，契合小出版机构的语域）；
• 编辑正文字号（13–16px）依然适用——Noto Serif SC 在这个尺寸下读作密集杂志栏文字，正是 zine 语域所需。

已知 CJK 差距

三字体对比（Bebas 展示 + Space Grotesk 正文 + Caveat 手写）是一个拉丁排印论点；塌缩为单一中文衬线会失去一种节奏、获得另一种节奏。选择衬线（Noto Serif SC）而非无衬线（Noto Sans SC）是刻意的——zine 的世纪中叶印刷血统比中文几何无衬线更接近中文衬线传统。中英混排的演示文稿必须接受：英文 Bebas 声部与中文衬线声部是不同语域，这是任何重海报风格 CJK 适配都不可避免的。

迭代指南：逐页生成检查清单

design.md 以 10 步迭代指南总结了实现顺序，也是生成时最可靠的逐页自检清单：

1. 每张新页都带 0.07 透明度的 SVG 颗粒覆盖层——去掉颗粒立刻破坏 zine 嗓音；
2. 任何新标题用 Bebas Neue 大写、字重 400、字距 0.02–0.04em；页面的主时刻选headline绿色；分栏/双栏中与正文配对的标题用黑色；
3. 任何新正文用 Space Grotesk 13–16px（引语段 14–18px），行高 1.6–1.7，不放大超过 18px；
4. 任何新眉题标签用label-eyebrow（Bebas Neue 14–18px、0.2em 字距）绿色用于最强眉题；次级标签改用label-spaced（Space Grotesk 600、0.25em 字距）；
5. 任何新卡片用奶油白或卡其底 + 3px 黑色实线；主视觉呼出加::before12px 绿色错位板；
6. 任何新编辑栏可带段首大写——绿色 Bebas Neue、左浮动、行高 0.8；段首大写字是编辑指纹；
7. 任何新陈述/引文页把 Bebas Neue 大写引文与 Caveat 手写署名配对——署名不是可选项；
8. 任何拼贴构图用 3px 边框拼贴块小幅旋转（-5°～+5°），在接缝处用锐角半透明胶带片，背景轮换：绿、奶油白、暗卡其、黑底反白；
9. 任何表格账目用ledger-row模式：表头 1.5px 下划线、数据行 1px 发丝分隔；分类标签用等宽chip，绿色或分类 chip 调色板；
10. 状态/批准章用stamp-mark——黑底、绿字、绿 2px 边框、旋转 -8°；只留给值得盖章的时刻，过度使用会稀释信号。

已知差距（Known Gaps）：实现时必须知道的前提

设计文档末尾诚实列出了本系统的已知限制，这些对实现质量至关重要：

• Google Fonts CDN 依赖：系统从 CDN 加载三种 Google Fonts（Bebas Neue、Caveat、Space Grotesk）；Bebas Neue 只有 400 一个字重，尝试更重字重会回退；生产环境建议自托管；
• 颗粒覆盖层渲染差异：颗粒是带feTurbulence的内联 SVG data URI，各浏览器渲染略有差异，尤其老版本 Safari 与 Firefox；
• 纸叠错位块的实现约束：错位依赖::before+z-index: -1；卡片必须有position: relative，父容器不能裁剪溢出，否则错位板会被切掉；
• chip 调色板扩展边界：账目行的 chip 颜色扩展（红/粉/橙/蓝/绿）只用于表内分类标签，不属于系统通用调色板，不得出现在幻灯片构图的其他地方；
• Caveat 的文化语域：Caveat 带有明显的文化特征（休闲美式手写），与非拉丁文字配不拢；CJK 或西里尔演示需要不同的手写替代；
• 导航提示的触摸短板：body:hover淡入不会在触屏设备触发，移动端用户可能永远看不到导航提示——把提示视为仅桌面端的 chrome；
• 收尾页的颗粒可见性：收尾页是黑底卡其字，颗粒覆盖层仍然存在但在 0.07 透明度下几乎不可见——收尾页的印刷语域比卡其底页面弱；
• RSVP 表单的下划线实现：表单字段用字符下划线（_________）作"空行"，是基于字符的而非真正的<input>下划线，跨系统字体不会完美对齐。

与 frontend-slides 工作流的衔接

bold-template-pack/README.md 的"Implementation Contract"把 Retro Zine 的用法固定在完整流程中：

1. 先读 selection-index.json 候选清单，只用元数据（mood、tone、best_for、avoid_for、formality、density、scheme）初筛；
2. 生成标题页预览时只读候选的preview.md（Retro Zine 的预览卡见 preview.md——它明确要求只建一张 1920×1080 的标题页、不把模板名/文件名/流程文案渲染到页面里）；
3. 用户选定模板后，才读取该模板完整的design.md（即本文档）；不批量读其他模板；
4. 最终输出保持单个自包含 HTML 文件，包含 viewport-base.css 全文，固定 1920×1080 舞台等比缩放；design.md是风格配方而非可抄内容，用户内容永远第一——风格只塑造呈现，不覆盖信息或结构；
5. 生成后验证渲染输出：既要查文本溢出也要查面板重叠——卡片可能通过scrollHeight检查却仍被另一网格面板盖住。

把这份指南与设计文档、舞台实现结合起来，你就能稳定地产出真正有"小出版社手印编辑感"的 HTML 演示——从色值到字距，从纸张叠压到胶带拼贴，每一处都是可执行、可检验的明确规则。

• AI 技能
• AI 插件
• 前端