• AI 技能
• AI 插件
• 前端

导读：本文以 Vellum 预览卡 为切入点，完整解读 frontend-slides 技能包中这套以"深靛蓝单一色场 + 暖黄斜体衬线 + 单一灰青点缀"为核心的学术型演示设计系统。你会学到 Vellum 的选题元数据如何决定适用场景、六个签名动作如何构成视觉人格、固定 1920×1080 舞台模型的实现约束，以及中英混排与 CJK 内容适配的完整方案，可直接用于通过 coding agent 生成安静、沉思、学术气质的幻灯片。

Vellum 是 frontend-slides（一个通过编码代理的前端技能创建网页演示稿的 Claude Code 插件）中 Bold Template Pack 提供的 34 套设计系统之一，其定位是一套monochromatic essay-on-a-wall（钉在墙上的单色散文）演示系统：每一页都是同一个深靛蓝底色，配上暖黄衬线文字，像展馆墙面上钉着一篇论文。

一、模板定位：一份先行的"选题元数据"设计卡

在 frontend-slides 的渐进披露流程中，Agent 在 Phase 2 风格发现阶段只读取候选模板的preview.md（轻量风格卡），在用户最终选定后才读取该模板完整的design.md。这一约定记录在 SKILL.md 与 selection-index.json 中：前者规定"预览阶段不得读取任何 design.md"，后者以紧凑元数据帮助 Agent 从 34 套模板中初筛候选。

Vellum 在selection-index.json中的元数据如下（与预览卡一致）：

这套元数据的设计意图很明确：Agent 在初筛时并不预览任何画面，仅凭mood/tone/formality/density/scheme等标签判断"这个模板是否匹配用户的场合与情绪"。比如用户想做一个"沉稳、高正式度的研究报告"，Vellum 的 high formality + low density + dark 就是一个强信号；而用户想要"活泼、高能量"的启动发布会时，avoid_for会直接给出负向信号。

二、视觉快照：单一色场、两种字体、零动态

预览卡给出了 Vellum 的视觉前提（Visual Snapshot）：

• 单一单色场：每一页都是同一个 deep periwinkle（深长春花蓝）色场#2A3870，暖黄 chartreuse-yellow（黄绿色）文字#E8D85C居中浮于其上。没有第二块背景色、没有浅色/深色主题切换、没有反转方案。色场是常量，文字与左下角的一条小注释是其余的全部。
• 斜体衬线即人格：Cormorant Garamond 的斜体承担所有各级标题、数字与"featured serif moment"；意大利斜体衬线在醒目色场上的大字号呈现，读起来像展馆墙面上的文字——个人化、经过斟酌、略带私密。
• 安静支撑：DM Sans 承担正文与导语，让位给斜体标题的引领作用；Courier Prime 等宽字体承担"pin-note"——每页左下角一叠打字风格的归属注记，像钉在墙上便签旁的打字机标签，是整个系统的签名元素。
• 氛围：gallery exhibition wall（展馆展览墙）遇上 archive folder（档案夹）——安静、单色、极度静止。预览卡的原话是 "One color, two warm typefaces, zero motion"（一色、两款暖字体、零动态）。

三、预览成分表：调色板、字体栈与六个签名动作

3.1 调色板

预览卡列出的 Palette 共 7 个色值，完整设计文档 design.md 中补充了三级透明度与 border 色：

design.md 中的color-aliases定义了语义别名映射（c-bg: navy、c-fg: yellow、c-accent: teal、c-border: border等），方便在组件实现中按角色引用而非按色值硬编码。注意这个系统没有颜色语义映射——teal 不是"警告"、yellow 不是"高亮"，yellow 就是文字本身，teal 是注释的声音，emphasis-yellow 只是强调标志。

3.2 字体栈

三套字体角色严格分离：

• Cormorant Garamond（Cormorant Garamond, Noto Serif SC, Georgia, serif）——旧式衬线，斜体轴表现力强。承担 display 到 h3 的全部标题、stat-value 数字、quote-text、quote-mark 字形。display/h1/h2/quote-text 为 weight 400，h3 为 500。
• DM Sans（DM Sans, Noto Sans SC, system-ui, sans-serif）——干净的人本主义无衬线，承担正文、导语、列表正文。它是"内容"而非"声音"。
• Courier Prime（Courier Prime, Courier New, monospace）——打字机风格等宽字体，承担所有 chrome 标签、页码、左下角 pin-note、列表计数器、统计标签。等宽字是"打字注释的声音"，赋予系统档案/展览气质。

字体栈中为每个家族都预置了中文回退（Noto Serif SC / Noto Sans SC），为第六节的 CJK 适配埋下伏笔。

3.3 六个签名动作（Signature Moves）

预览卡把该模板不可妥协的核心语法压缩为六条：

1. 每一页都是单一单色场——navy（deep periwinkle）。没有浅色主题，没有反转。
2. 每个标题、每个数字、每个 featured serif 时刻都是 weight 400 的斜体 Cormorant Garamond。
3. DM Sans 承担正文与导语；Courier Prime 等宽承担 chrome 标签与 pin-note 签名。
4. 黄（#E8D85C）是主文字色；更亮的#F5E168是标题内唯一的<em>强调色。
5. 灰青#3A7878是第二强调色，只出现在五个地方：大引号字形、pin-note 文字、kicker、28px 规则线、列表计数器标记。

3.4 预览卡中的组件速记

预览卡的 "Preview Ingredients" 只给出核心色值、字体家族与签名动作，而完整设计文档则将其扩展为一套组件语法（components），包括：pin-annotation（左下角签名注释，定位在bottom: ~0.9 * pad-y、left: 1 * pad-x，max-width 22vw）、kicker（teal 色等宽小标签）、28px 规则线、chrome-bar/foot-bar（20% 黄色发丝线）、CSS 计数器实现的编号列表、pin-stat 统计瓦片、compare 双面板、图表示例与图片占位框。

四、Fixed-Stage 政策：vw/vh 是设计比例，不是运行时规则

design.md 开头用一整节规定了 frontend-slides 的Fixed-Stage Policy（固定舞台政策），这是本模板在 frontend-slides 语境下落地的最重要约束：

• 最终演示稿以固定 1920×1080 舞台生成，整体均匀缩放到浏览器视口，在任何屏幕（包括手机）上保持 16:9 画布；允许 letterbox/pillarbox（黑边留白），不允许为移动端重排幻灯片内容。
• 即使源模板原本使用100vw、100vh、vw、vh、clamp()这类视口流式 CSS，也应把这些值当作设计比例换算进 1920×1080 舞台坐标，而不是当作生成稿中的实时响应式规则。
• 应使用 deck-stage.js 或等价的行内缩放器：每页以 1920×1080 渲染，用一次transform: scale()缩放整个舞台，并在渲染截图中同时校验文本溢出与面板重叠。

这一政策的源码证据位于deck-stage.js：DESIGN_W_DEFAULT = 1920、DESIGN_H_DEFAULT = 1080，_fit()用Math.min(vw / designWidth, vh / designHeight)计算缩放因子并以scale(s)作用于画布（约 deck-stage.js 附近）；同时 viewport-base.css 为.deck-stage/.slide定义了 1920×1080 的固定几何与.active/.visible的可见性切换机制。也就是说，Vellum 文档里那些11vw、6vw、6vh的单位，在实际生成时都会被翻译为舞台内的绝对像素坐标。

五、预览构建规则：如何生成一张"真实"的标题页

预览卡后半部分是给 Agent 的强制规则（Preview Rules），核心是"预览页看起来必须是用户演讲的真实第一页，而不是模板选择卡"：

• 只构建一张 1920×1080 标题页，位于固定舞台模型内；保留调色板、字体角色、表面节奏与装饰词汇。
• 使用用户的真实标题/副标题/上下文，禁止复制 demo 内容。
• 严禁在幻灯片上出现任何内部工作流文本：不得出现preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径或源文档标签。
• 严禁把模板名或 slug 画到幻灯片上，只能在聊天消息中提及。
• 严禁把用户需求备注（期望氛围、受众、内部使用标签）当作幻灯片内容，除非用户明确要求这些字出现在演示稿中。
• 可见 chrome 只能用真实演讲内容：演示稿标题、真实章节标题、日期、作者、公司、页码或来自用户材料的真实句子。
• 预览阶段不得读取template.html，也不得读取其他模板的design.md；用户选定本模板后，才读取完整的 design.md 再生成最终幻灯片。

这些规则在 SKILL.md 中被升级为对全部预览通用的"Preview authenticity rules（NON-NEGOTIABLE）"，属于整个技能包层面的强制约束。

六、从预览卡到完整设计系统：design.md 的深度配方

预览卡明确指出"最终演示稿生成请读取下方完整设计文档"。design.md 将六条签名动作展开为一套可执行的完整设计语法，以下核心细节在实现 Vellum 幻灯片时都是硬性要求。

6.1 完整字体刻度

design.md 的 Type Scale 表（设计稿基准 1920×1080）：

design.md 还给出了经验性指导："不确定时往大了选（When unsure, lean larger）"——Vellum 是稀疏的，标题往往就是整页，其字号应当足以锚定周围空旷的色场。

6.2 签名处理（Signature Treatments）

这些处理"只要对应元素类型出现就不可省略"：

• 所有标题默认就是斜体。display 级的不斜体衬线在这个系统中不存在（除了<em>强调）。
• <em>是反转机制：斜体标题（display/h1/h2）内的<em>渲染为 upright（正体）Cormorant Garamond、weight 600、#F5E168。这与常规"斜体表示强调"的习惯相反——这里斜体是默认，正体才是强调。设计文档称其为 "non-negotiable"。
• 每一页都带左下角 pin-annotation：一叠 Courier Prime 等宽行（teal 色），通常是页码（如 "03 / 09"）加 1–2 条短钉注。缺少 pin-annotation 的页面"读起来像另一个系统"。
• kicker 用 label 字号（0.72vw）的 Courier Prime，teal 色；用无衬线、斜体或黄色替代均破坏惯例。
• 7vw 大引号字形必须是 teal 色而不是黄色，这是系统内唯一的大号 teal 图形元素。
• 列表用 Courier Prime mono 计数器编号（teal 色），绝不用圆点或破折号。
• 内容一律居中（text-align: center、flex 列居中）；左对齐标题会破坏"钉在墙上的散文"语境。

6.3 布局、间距与纵深

• 间距体系：pad-x6vw、pad-y6vh、gap-lg5vh、gap-md3vh、gap-sm1.5vh；引文页 pad-y ×1.2、pad-x ×1.4；对比布局去掉整页 padding，由面板自带内边距。
• chrome 框架：标准页有顶部/底部 1px 发丝线（20% 黄色）+ 等宽标签；封面、陈述页、引文页、结尾页等大部分布局为无 chrome 的浮动内容，但pin-annotation 是每页都存在的通用元素，无论是否有 chrome 条。
• 密度哲学：内容很少超过画布宽度的 70% 或高度的 60%，其余的海军蓝色场是"墙"本身，是结构性留白而不是负空间。拥挤的 Vellum 会被判定为"破相"。
• 纵深：完全扁平——无投影、无圆角、无渐变、无层级系统。所谓层次只来自三处：海军蓝家族内的色度位移（compare 面板的两色配对）、20% 黄色透明度的发丝线、以及黄色三级不透明度带来的文字对比。
• 圆角：除导航圆点（deck-stage chrome，50%）外一切为 0。
• 动效：幻灯片切换与入场动画时长均为 0。design.md 明确说"系统刻意保持静止"。

6.4 装饰元素类型（Decorative Element Types）

design.md 还规范了一套可复用的装饰构件：斜体 display 标题、pin-annotation、teal 引号字形、kicker、28px 强调线、CSS 计数器编号列表（数字占 2em 列、与正文留 0.5em 间隙）、pin-stat（斜体衬线数字 + 弱黄 mono 标签，行间以 1px 发丝线分隔且末项去线）、compare 双面板（左navy-deep、右navy-mid加 1px 左边框）、图片占位框（1px dashed 边框 + 居中 mono 标签，最小高 28vh）、图表柱（默认 32% 黄、强调时全黄，柱值用 Courier Prime）。

6.5 Do's and Don'ts 速查

• Do：每页填满 navy；所有标题用 400 斜体 Cormorant + 黄色；每页左下角放 pin-annotation；标题内<em>用正体 600 + emphasis-yellow；teal 只给 kicker/计数器/28px 线/引号字形；内容居中；等宽字负责 chrome 与计数器；列表编号；留足空旷色场；按 6vw/6vh 间距并给引文页放大 1.2–1.4 倍。
• Don't：不要引入第二种背景色；不要把标题渲染成正体（正体仅限<em>强调）；不要投影/圆角/渐变；不要在引号字形或 kicker 上用黄（那是 teal 的领地）；不要用圆点或破折号列表；不要让幻灯片动起来；不要省略 pin-annotation；不要引入第三款字体；不要在小字号上用斜体衬线；不要把内容挤到画布边缘。

七、CJK 与国际内容适配

预览卡为预览阶段给出三条 CJK 速记：CJK 字距保持 0、放松行高、CJK 文本不做大写变换；完整适配方案由 design.md 的 CJK 章节提供（选定模板后必读）。

7.1 中文字体配对表

7.2 混合内容策略（Strategy C, literary）

拉丁字形保留原字体，仅在中文字符出现时让 CJK 回退介入，通过字体栈实现：

font-family: 'Cormorant Garamond', 'LXGW WenKai TC', 'Noto Serif SC', Georgia, serif; /* headlines */ font-family: 'DM Sans', 'Noto Serif SC', system-ui, sans-serif; /* body */ font-family: 'Courier Prime', 'Noto Sans Mono CJK SC', 'Courier New', monospace; /* pin-note / chrome */

基线错位警告：Cormorant 斜体的光学中心低于 LXGW WenKai 的光学中心，在 11vw display / 7vw h1 上尤其明显（如Vellum 羊皮纸会让中文字符相对斜体拉丁基线略高）。缓解手段：中文段加font-feature-settings: "palt"；用<span lang="zh">包裹中文并在 display 级 token 上加vertical-align: -0.05em（斜体搭配下偏移可能需要更大）；纯中文标题则无此问题。

7.3 字体加载

<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@400;500&family=Courier+Prime:wght@400;700&family=LXGW+WenKai+TC&family=Noto+Serif+SC:wght@400;500;700&display=swap" rel="stylesheet">

LXGW WenKai TC 是 Google Fonts 上的繁体切面，但覆盖完整 CJK 统一表意文字区，可干净渲染简体中文；Noto Serif SC 负责简体正文。

7.4 通用 CJK 调整

• 行高：正文 1.75–1.85（DM Sans 默认 1.65 略紧）；display 1.15–1.25（7–11vw 的中文需要纵向呼吸）。
• 字距：CJK 一律 0；Latin 上的负字距（-0.01~-0.02em）对中文是错的，会造成笔画重叠。
• 大写变换：CJK 不做 uppercase（Vellum 拉丁文本本也不做）。
• 标点：用全角，。：；！？；中文引号用「…」/『…』替代英文引号，恰好对应系统的 teal 引号时刻。
• 标题句号：中文 display 标题去掉末尾。，标题的视觉闭合已足够。
• 盘古之白：中文与相邻拉丁/数字之间插入薄空格，写使用 Claude而非使用Claude。
• 一句一字体：同一行内不要混用 LXGW WenKai 与 Noto Serif SC，切换会产生度量跳变。

7.5 CJK 已知缺口

• LXGW WenKai 只有单字重，h3 的 500 斜体无法在中文中升重，层级只能靠字号；需要更强子标题强调时可用 Noto Serif SC 500 替代。
• LXGW WenKai 没有斜体轴，Vellum "斜体即默认"的标志性惯例在中文中无法复现，upright kaiti 是最近似替代——这是 CJK 适配最大的美学损失。
• <em>反转机制（斜体→正体）在中文中不存在，等效方案是Noto Serif SC 700 +#F5E168，用更重字重 + 更亮颜色制造同样的"此为重点"信号。
• 繁体切面可能对少量字符渲染成繁体字形（如"設"而非"设"）；纯简体演示稿应优先Noto Serif SC作主中文面，LXGW WenKai 只用于封面/章节标题等点缀。
• teal 引号字形（7vw"）在中文惯例中不存在，用 7vw teal 色的「/『替代。

7.6 中文语境下的美学注记

design.md 评价：LXGW WenKai 与 Vellum 的展览散文气质高度契合——kaiti 的手写暖意与 Cormorant Garamond 斜体的私密个人语气同源；在深靛蓝色场上以 7–11vw 渲染暖黄 kaiti，读起来是"画廊墙上的手写黄粉笔字"，中文气质甚至比英文原版更有诗意。钉注建议在中文演示稿中也保留拉丁文（日期、页码、工作室名），这是中文美术馆展览设计的惯例，显得刻意而非残缺。

八、运行时行为：缩放、演示与打印

design.md 的响应式与运行时说明（配合 deck-stage.js 的实现）：

• 缩放行为：目标 1920×1080 视口，全程使用 vw/vh 单位，布局在 1280×720 到 2560×1440 之间流畅缩放。示例换算：display 11vw 在 1920px 视口约 211px、在 1280px 约 141px；body 1.05vw 在 1920px 约 20px、在 1280px 约 13px。pin-annotation 定位相对 pad-y/pad-x，随 padding 缩放。
• 演示行为：JS 驱动的舞台，但过渡为零时长；幻灯片横向并排、由 deck-stage 的 translateX 驱动导航，观众感知到的是硬切而非动画。[data-anim]属性无对应关键帧（动画时长为 0）。导航圆点与页码固定于视口底部——后者由deck-stage.js的 overlay 实现（.overlay中的计数器与 prev/next/reset 按钮）。
• 打印行为：无内嵌打印样式表；静态导出依赖舞台容器被"展开"以逐页顺序渲染——deck-stage.js的@media print块（约 deck-stage.js）将每页从绝对定位叠放改为文档流排列，配合注入<head>的@page { size: 1920px 1080px; margin: 0 }实现一页一张的 PDF。

九、已知缺口与使用边界

design.md 诚实列出了系统的边界，引用时需注意：

• 字体依赖：三款字体从 Google Fonts 加载，失败时回退到 Georgia / system-ui / Courier New；没有 Cormorant 斜体时系统会失去大半性格。
• Noto Serif SC 无真斜体：中文斜体标题会退回直立，失去系统定义性的斜体时刻。
• .light类为向后兼容保留，但渲染效果与.dark相同（别名 token 指向同一组深色值）。
• 动画基础设施是空转：关键帧与[data-anim]都存在但 duration 为 0，重新启用动效需要改 token 块里的--dur-slide/--dur-enter。
• pin-annotation 在小视口可能贴近边缘：定位用bottom: calc(var(--pad-y) * 0.9)，略小于 pad-y 边界。
• compare 面板的两种近色海军蓝在低对比显示器或强环境光下可能难辨。
• teal#3A7878去饱和，在部分显示器上可能读成暗蓝而非青。
• 没有浅色主题、没有反转、没有备选表面：需要"reset 页"（用不同底色打断长序列）的演示要么接受单色限制，要么走出这套系统。

十、在 frontend-slides 工作流中的完整使用路径

把预览卡放回整个技能包，Vellum 的消费路径是：

1. Phase 2 风格发现：Agent 读取 selection-index.json 初筛，把 Vellum 的mood/tone/best_for与用户场合匹配；若进入候选，只读本 preview.md，按"真实标题页"规则生成一张 1920×1080 预览供用户比较。
2. Phase 3 生成：用户选定后，读取完整 design.md，按 6.1–6.5 的设计配方生成整套演示稿，并把设计文档中的 vw/vh 比例换算进固定舞台坐标。
3. 技术底座：生成稿内嵌 viewport-base.css 的全部内容，配合deck-stage.js或等价缩放器保证 16:9 固定舞台；用bash scripts/export-pdf.sh（见 SKILL.md）可导出每页 1920×1080 的静态 PDF。

小结：Vellum 的全部设计纪律可以压缩成一句——"只有一个表面、一种默认文字色、一个强调机制、一种注释声音，其余全是留白"。这套高度受限的语法（单一 navy 色场、默认斜体、正体<em>反转、每页必带的 teal 钉注、编号列表、居中、零动效）既是它适合学术/白皮书/政策简报的原因，也是它的边界：任何引入第二背景色、正体标题、第三字体或动效的改动都会立即破坏系统身份。对 frontend-slides 的 Agent 而言，掌握 preview.md 的六条签名动作与 design.md 的完整 token 表、组件语法与 CJK 适配规则，就能在任何主题上稳定复现这套安静、深沉、学院派的视觉语言。

• AI 技能
• AI 插件
• 前端