frontend-slides 的 Emerald Editorial 模板：从预览卡片到完整杂志封面式商业演示的设计系统与实战指南

• AI 技能
• AI 插件
• 前端

Emerald Editorial 是 frontend-slides 技能中 Bold Template Pack 里的一套「杂志封面式」商业演示模板，以饱和翡翠绿、深藏蓝墨与燕麦纸构成的三色系统，搭配 Bodoni Moda 900 级展示衬线体与标志性的双规则装饰（double-rule ornament）。本文基于该模板的预览卡片与其后的完整设计文档，并结合仓库中的deck-stage.js、viewport-base.css与selection-index.json源码，完整讲解该模板的选择元数据、固定 16:9 舞台渲染策略、调色板与字体令牌、布局与组件语法、CJK 多语言适配，以及生成预览与最终演示时必须遵守的规则，让你能直接用它做出「像严肃杂志封面」的高质量演示。

模板定位与选择元数据

在 frontend-slides 的 Phase 2 样式发现阶段，Agent 会先读取 bold-template-pack/selection-index.json，仅凭元数据（mood、tone、best_for、avoid_for、formality、density、scheme）初筛候选模板；确定候选后才读取对应候选的preview.md，而不会提前读取任何design.md。这一「渐进式披露」约定记录在 SKILL.md 与 bold-template-pack/README.md 中。

Emerald Editorial 在选择索引中登记的核心元数据如下（与 preview.md 完全一致）：

• Slug：emerald-editorial
• Tagline：A magazine-cover business deck: emerald + navy + paper, double-rule masthead ornaments, and a bold Bodoni-style display serif.
• Mood：editorial, considered, confident, magazine-cover
• Tone：literary, authoritative, warm, designed
• Formality：medium-high
• Density：medium
• Scheme：mixed
• Best for：任何需要像严肃杂志封面的场景，包括但不限于领导层读报会（leadership readouts）、规划办公室评审（planning-office reviews）、战略简报（strategy briefs）。双规则报头装饰带来社论式分量又不显僵硬，也非常适合产品发布或研究回顾这类「想要考究感而非企业感」的场合。
• Avoid for：需要安静、中性、机构化克制的场景——翡翠绿底色过于饱和，无法退居背景。

视觉快照：时装刊头与 19 世纪戏单的纸墨语言

从设计文档的 Overview 可以看出，Emerald Editorial 的核心立论是单一字体面孔：Bodoni Moda 以 900 字重、44–460px 的宽幅字阶铺满全片，92px 用于常规标题、130–200px 用于陈述句与章节开场、460px 用于英雄数字。衬线体响亮、戏剧化、自信，每一页都以文字而非图片领起。

配色是一个紧凑的三色编辑部集合：

• 饱和翡翠绿（bg—#3CD896）作为主画面；
• 深藏蓝墨（ink—#0F1A5C）既是最主要的文字色，也是反色面板（inverse panel）的填充色；
• 燕麦纸（paper—#F1E9D6）作为交替瓦片的次表面。

墨绿/藏蓝的对比就是系统的色彩身份：所有正文要么是「藏蓝印在翡翠上」，要么是「翡翠印在藏蓝上」。bg-2、bg-3与ink-2、ink-3是令牌系统中保留的色调变体，但发布页几乎只用三种原色。

支撑字体是Manrope（人文几何无衬线），正文段用 500 字重，标签、眉毛、tag、caption、footline 一律用 700–800 字重的大写并加宽字距。Manrope 永不超过 28px，只待在「chrome 层」，永不进入展示领域。

深度完全依赖平坦的墨色块：没有投影、没有渐变、没有模糊、没有光晕。层次感来自色块反转（翡翠画布上的藏蓝瓦片就是「被抬升」的元素）与分隔章节的 4px 墨色规则线，整体读感是「印在纸上的油墨」而非数字界面。

预览卡片：只做一张真实标题页

预览的用途边界

preview.md 第一行就声明：这个文件只用于标题页预览，最终整副演示必须改读完整设计文档。两版文件在仓库根目录与 插件副本目录 中逐字节一致，内容等价。

预览所需的固定舞台

预览必须遵守 frontend-slides 的固定 16:9 舞台铁律（NON-NEGOTIABLE，见 SKILL.md 与 bold-template-pack/README.md 的 Fixed-Stage Policy）：

• 幻灯片以固定 1920×1080 画布创作；
• 整体缩放适配浏览器视口，允许 letterbox / pillarbox，但绝不为手机重排内容；
• 源模板即使原本使用100vw、clamp()等流式 CSS，也只把这些值当作设计比例翻译成固定坐标，不作为生成的响应式规则。

渲染依赖于 bold-template-pack/deck-stage.js：这是一个deck-stage自定义元素，读取width/height属性（默认 1920×1080），把画布用transform: scale()等比缩放到视口（见_fit()中Math.min(vw / designWidth, vh / designHeight)的逻辑），并为移动端提供左右三分之一的点按翻页区与底部的页码浮层。幻灯片以visibility: hidden+opacity: 0隐藏而非卸载，保留视频/iframe/表单状态；非活动页仍留在 DOM 中。同时 viewport-base.css 提供了必须整段内联的基础样式：.deck-viewport锁定浏览器视口、.deck-stage固定 1920×1080、.slide.active/.visible控制可见性（禁用display:none切换）、@media print每页一张 1920×1080 幻灯片、prefers-reduced-motion降级支持。

预览必须遵守的规则（来自 preview.md）

1. 恰好构建一张 1920×1080 标题页，置于固定舞台模型内。
2. 保留调色板、类型角色、表面节奏与装饰词汇（见下节）。
3. 使用用户的真实标题/副标题/上下文，不得照抄演示示例内容。
4. 渲染结果必须像真实的第一张幻灯片，而不是模板选择卡。
5. 绝不在幻灯片上放内部工作流文字：preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径或源文档标签一律禁止。
6. 绝不在幻灯片上放模板名或 slug，只允许在聊天消息中提及。
7. 绝不在幻灯片上放需求备注（如 desired vibe、audience、internal-use），除非用户明确要求这些词出现在演示里。
8. 可见 chrome 只能用真实演示内容：演示标题、真实章节标题、日期、作者、公司、页码或用户材料中的真实内容短语。
9. 不读取template.html来生成预览。
10. 不读取其他模板的design.md。
11. 用户选定该模板进入完整演示后，先读完整设计文档再生成最终幻灯片。

调色板令牌：三色纪律与默认值

设计文档 Colors 章节给出了完整令牌及使用约定，预览卡中的 Palette 只是它的速记：

默认值要点：默认背景bg；翡翠面上标题默认ink、藏蓝面上标题默认bg（系统唯一的展示字色翻转）；默认规则线是 4px 实线ink；默认反色瓦片为ink底 +bg字；纸瓦片为paper底 +ink字；墨瓦片内的 delta/pill 用bg底 +ink字，在纸瓦片内则反转。严禁引入第四组色相（红、黄、橙、lavender），那会击碎社论承诺。

字体系统：Bodoni Moda 与 Manrope 的严格分工

设计文档 Typography 章节定义了完整的字体阶梯。字体加载请求（来自 Google Fonts）同时包含 Bodoni Moda、Playfair Display、DM Serif Display、Rozha One、Yeseva One 与 Manrope，但实际只有 Bodoni Moda 用于展示，其余衬线家族是休眠的备选变体。

展示/正文/Chrome 字阶

强制签名式处理

• 每个主 Bodoni 标题必须 900 字重 + 负字距（-0.01em 至 -0.03em）+ 紧凑行高（0.9–0.95），三者缺一即读作另一套系统。
• 每个 Manrope 标签/眉毛/tag/caption/footline/credit必须大写且字距 ≥ 0.05em。
• 双规则装饰必须双侧对称（字两侧都有规则），单侧会破坏括弧对称；可用:root[data-ornament]降级为 single 或 none，但默认且推荐形态是 double。
• 章节分隔线与瓦片分隔线一律4px 实线ink，绝不用 1px/2px。
• 反色瓦片恒为ink底 +bg字；纸瓦片恒为paper底 +ink字。
• 200px+ 的巨型 Bodoni 数字必须活在藏蓝反色面板上——460px 数字直接放翡翠画布在视觉上会脱离面板锚定的戏单语言。

布局系统：1920×1080 画布、间距与组件语法

画布与内边距

系统目标固定 1920×1080 画布，幻灯片为<section class="slide">，渲染交给deck-stage.js。内边距令牌：pad-default110px 110px 70px（标准内容页，底部略少给 footline 让位）、pad-cover56px 110px（封面，顶部少给报头让位）、pad-closing80px 110px、masthead-inset56px 顶 / 80px 侧。

Chrome 解剖

封面与结尾页带报头（顶部 Manrope flex 行，两侧各一条标签串）与footline（底部对应行）；内容页通常省略，靠 110px 顶部留白给标题空间。报头定位在top: 56px, left/right: 80px。

组件语法

• Double-Rule Ornament：签名装置。居中衬线字两侧各两条叠置 4px 横线、线间 3px，形成 19 世纪戏单/戏剧海报的括弧效果。ruleHeight 4px、ruleGap 3px、wordWeight 800，由:root[data-ornament]全局切换 double/single/none。
• Vertical Side-Bracket：更小的行内变体，介词两侧各一对 4px 线（8px 间距、64px 条宽），用于句子内联而非居中。
• Masthead / Footline：绝对定位 flex 行，两侧 Manrope 大写字符串（如刊名+日期、章节+页码），建立杂志页身份。
• Inverse Tile：ink底 +bg字矩形，作图表卡容器、KPI 瓦片、流程步骤、侧栏。
• Paper Tile：paper底 +ink字，沿瓦片行轮换以打破全墨瓦片的单调（如四步流程 ink→paper→ink→paper）。
• Mark Pill / Tag Pill / Delta Pill：小号反色或 bg 反相矩形徽章，分别用于分类标记、图表侧栏统计类型、KPI 瓦片角落的方向变化指示（如↑ 12% YoY）。全部零圆角。
• Agenda Row：三列网格行（130px / 1fr / 320px），上下 4px 墨线上边框，左列衬线序号、中列衬线名称、右列 Manrope 类型标签，末行还带 4px 下边框闭合列表。
• Chart Card：藏蓝反色面板内放翡翠+纸双色柱状图，y 轴标签 Bodoni、x 轴 Manrope，网格线为 2px、22% 不透明度 bg-on-ink，形成「杂志数据跨页」。
• Ornament Numeral Panel：全出血的反色半页，居中 460px Bodoni 数字，角落放置 topbar/footline 字符串，仅用作章节开场装置。

规则线权重与「零圆角」纪律

2px 用于图表网格线（细、半透明）；4px 是通用结构规则（章节分隔、列表行边框、瓦片顶线）；5px 用于封面装饰线（在 184px 展示标题旁保持分量）；18px 高（4px 上线+4px 下线）为双规则装饰跨度。系统任何地方没有 border-radius——卡片、瓦片、KPI 面板、装饰线、徽章全部严格矩形，唯一圆形来自 Bodoni 字形本身的曲线。

深度与层次

系统使用零阴影。层次感只来自三点：色块反转（翡翠画布上的藏蓝瓦片即「被抬升」元素）、4px 墨线（像纸面折痕般分隔区域）、实色无圆角面板。没有柔光、玻璃、neumorphism。一个典型的章节开场面板是把整页切成两列全出血网格：左侧藏蓝实色面板放 460px 巨型数字，右侧标准翡翠画布放眉毛+标题+lede+分类标记——重、锚定、仪式化，这是开场模式而非常规布局。

密度哲学与 Do's / Don'ts

设计文档的 Density Philosophy 明确：中满且居中。多数幻灯片携带一个 92–200px 的展示标题外加 3–4 个支撑元素（统计行、KPI 网格、流程、图表卡）。110px 内边距提供呼吸空间，顶部/底部 chrome 锚定页面。一页塞六个小元素读起来是「坏的」；一个大标题加三个支撑瓦片读起来「权威」。例外是议程列表模式（竖排大号编号行、4px 墨线分隔），它天生高密度、应填满纵向空间。

Do：所有 Bodoni 展示标题 900 字重+负字距+紧凑行高；所有 Manrope chrome 大写+≥0.05em 字距；默认bg背景、仅在开场/结尾用ink整页；所有分隔用 4px 实线ink；需要戏剧化框定时用双规则装饰（尤其两个展示标题之间的小连接词 "of/in/for"）；默认抬升用反色瓦片并轮换纸瓦片；展示字阶大胆拉大（130–460px）；色彩翻转只在 ink-on-bg 与 bg-on-ink 之间，不引入第三种翻转；所有形状严格矩形。

Don't：不加 box-shadow/text-shadow/gradient/blur；不引入第三字体（Playfair、DM Serif、Rozha、Yeseva 已加载但不属于发布声音）；不把 Bodoni 跑在 500 或更轻字重（系统只承诺 900、800 于装饰词/瓦片标题、700 于小介词）；不用句例或零字距的 Manrope；不引入第四色相；任何元素不用圆角；结构线不用 1px/2px；不把 460px 数字放翡翠画布而无藏蓝面板锚定；不在一页塞六个小元素；封面与结尾页绝不省略报头/footline。

CJK 与国际化内容：中文配对策略

设计文档为中文内容提供了完整方案（预览卡仅给出摘要：CJK 字距归 0、放宽行高、避免 CJK 大写变换）。

推荐中文配对

混排策略 C

保持 Bodoni Moda 作为拉丁展示字体，让 CJK 字形回落到 LXGW WenKai（展示）或 Noto Serif SC（正文）。设计文档给出的字栈：

/* Bodoni Moda roles (every display moment) */ font-family: 'Bodoni Moda', 'LXGW WenKai TC', 'Noto Serif SC', Georgia, serif; /* Manrope roles (every chrome / body moment) */ font-family: 'Manrope', 'Noto Sans SC', system-ui, sans-serif;

加载方式（追加到现有 Google Fonts<link>或作为第二个 link）：

<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=LXGW+WenKai+TC&family=Noto+Serif+SC:wght@400;700;900&family=Noto+Sans+SC:wght@500;700;800&display=swap" rel="stylesheet">

通用 CJK 调整（对所有中文块适用）

• 放宽行高 0.05–0.08：展示 1.0–1.1、正文 1.55–1.65（拉丁的 0.9–0.95 / 1.45–1.5 对中文太挤）。
• CJK 标题移除负字距：letter-spacing: 0，若视觉太挤可用极小正值0.02em。
• 绝不对 CJK 使用text-transform: uppercase：中文无大小写，且会破坏混排行中 Manrope 部分的大小写意图。
• 中文句内用中文全角标点（，。：；！？「」『』（）），不混用拉丁标点。
• CJK 标题末尾不加句号，正文段落保留。
• Pangu 间距：CJK 与拉丁/数字边界加空格（2026 年 5 月而非2026年5月），可手输或用 pangu.js 式自动空格器。
• 一句一字体：展示层 LXGW WenKai、正文层 Noto Serif SC，同一句子内不切换。

已知 CJK 局限

系统对「Bodoni 900 @ 460px 藏蓝面板数字」的承诺最难翻译——Google Fonts 上没有能复现 Bodoni 900 光学厚重的汉字体。Noto Serif SC 900 最接近，但 460px 汉字的对比轮廓读起来比 Bodoni 数字更重，可能压垮藏蓝面板。中文巨型数字开场页建议：(1) 用中文数字字符（一二三四五六七八九十，视觉更轻），或 (2) 数字保留 Bodoni 拉丁字形、让面板下方的标签承载中文语境。纯中文巨型数字是这套系统风险最高的时刻，建议逐页人工复核。

迭代指南与已知局限

设计文档结尾给出两条可执行的参考清单：

迭代指南（10 条摘要）：新展示标题走展示阶梯（92/104/120/128/130/184/200），不发明新字号；新 chrome 行走 chrome 阶梯（24/26/28）且大写+0.05em–0.18em 字距；新分隔线一律 4px 实线ink；新瓦片用反色或纸填充并沿行轮换；新徽章严格矩形；KPI 数字恒为 144px（+可选 60px 单位后缀）；新装饰默认双规则、仅经:root[data-ornament]全局切换；新开场用半出血反色面板+巨型数字；新颜色只来自三原色（或保留的 2/3 变体）；布局拥挤时增大展示字号而非添加元素。

已知局限（依据 design.md）：Google Fonts 请求加载了六族字体但实际只用两族；依赖deck-stage.js做缩放与导航（design.md不描述该脚本，视为运行时依赖）；data-ornament是全局设定，不能按页/按元素切换；ink-2/3、bg-2/3 令牌已定义但未在发布 CSS 中使用；柱状图高度为手写%，没有数据绑定层，扩展图表需手动计算百分比；离线渲染会回落系统衬线（Bodoni→Georgia），展示声音会被大幅压平，离线/打印建议自托管字体；92px Bodoni 在墨/翡翠对比上保持 WCAG AA，但 24–28px Manrope 小字在同一配对下逼近对比度下限，小字尽量用「藏蓝印翡翠」方向；报头/footline 字符串在源码中是占位符，需逐副编辑；系统无@media print规则、无响应式断点，固定 1920×1080，任何视口适配都交给deck-stage.js。

从预览到最终演示的完整工作流

1. 初筛：读 selection-index.json，从mood/tone/best_for/avoid_for/formality/density/scheme匹配用户目的与氛围。
2. 预览：只读候选的 preview.md，在固定 1920×1080 舞台内构建恰好一张真实标题页，遵守上文全部预览规则，绝不放模板名、路径或工作流文字。
3. 选定后：读完整 design.md，把它当「风格配方」而非内容复制对象。
4. 生成：产出单文件自包含 HTML，内联 viewport-base.css 全文，用deck-stage.js或等价行内缩放器统一缩放舞台，保留字族、调色板、装饰词汇、间距节奏与组件语法，以用户的真实内容为主。
5. 校验：截图核验文本溢出与面板重叠——scrollHeight检查不足以发现网格面板互相遮盖的问题（见 bold-template-pack/README.md）。

在 Emerald Editorial 语境下，最终验收就是三个问题：所有展示文字是否都是 Bodoni 900 + 负字距 + 紧凑行高？所有分割线是否都是 4px 实线墨色？封面是否带双侧双规则装饰、报头/footline，并且全片零圆角、零阴影、零渐变？三者皆「是」，你就拿到了一副真正的杂志封面式演示。

• AI 技能
• AI 插件
• 前端