• AI 技能
• AI 插件
• 前端

Frontend Slides 是一个面向编码代理（coding agent）的开源演示文稿技能包，它通过"渐进披露（progressive disclosure）"机制帮助非设计师先看后选：轻量的preview.md预览卡只负责产出"看起来像真实第一张幻灯片"的风格预览，用户选定后才会加载完整的design.md设计系统。本文以 Bold Template Pack 中 Creative Mode（slug 为creative-mode）的预览卡 preview.md 为主体，完整解读其选择元数据、视觉配方、CJK 注意事项与预览硬性规则，并结合 design.md、selection-index.json、deck-stage.js 与 viewport-base.css 等仓库源码，说明一张预览卡如何被真正渲染、校验，并最终扩张成一套完整的 1920×1080 neo-brutalist 演示系统。读完本文，你将掌握：预览卡与完整设计文档的分工边界、Creative Mode 的四色/三字体/硬阴影设计配方，以及从预览到成稿的每一步落地规范。

一、预览卡在项目中的定位：渐进披露工作流的第一层

1.1 为什么需要一张"预览卡"

在frontend-slides技能的设计哲学中，用户不该用抽象词汇描述审美偏好，而应通过"看到"来决策（Show, Don't Tell）。为此，技能包把样式信息拆成两层：

• 轻量预览层：bold-template-pack/templates/*/preview.md，每张卡只有几十行，只允许用于标题幻灯片的风格预览；
• 完整设计层：bold-template-pack/templates/*/design.md，包含色板 token、完整字号阶梯、间距、组件、CJK 方案等，只在用户选定模板后才读取。

预览卡的第一句话就划定了边界："Use this small file for title-slide previews only. For final deck generation, read the full design doc listed below."（本文件仅用于标题幻灯片预览；最终生成请阅读下方列出的完整设计文档。）这一约束与 SKILL.md 的流程完全对应：Phase 2（风格发现）只读候选项的preview.md，Phase 3（正式生成）才读取用户选中的那一个模板的完整design.md（见 SKILL.md 与 SKILL.md）。

1.2 索引文件如何指向预览卡

frontend-slides在风格发现阶段先读紧凑索引 selection-index.json，从中按 mood / tone / formality / density / scheme 等字段为候选模板排序。Creative Mode 在索引中对应条目（见 selection-index.json），其中preview_md与design_md字段分别指向两张文档：

{ "slug": "creative-mode", "name": "Creative Mode", "preview_md": "bold-template-pack/templates/creative-mode/preview.md", "design_md": "bold-template-pack/templates/creative-mode/design.md" }

也就是说，preview.md是索引与完整设计系统之间的"网关"：它既承接索引里的元数据，又负责在选定后把读者导向 design.md。预览卡自身的Files一节也显式列出这两份文件，方便后续引用。

二、选择元数据：如何判断 Creative Mode 是否适合当前简报

预览卡中的Selection Metadata一节把该模板的可检索画像完整列出，这些字段与索引条目的字段一一对应，是代理在 Phase 2 为候选排序的依据：

2.1 Best for / Avoid for 的匹配规则

预览卡给出了非常具体的适用与回避场景：

• 适合（Best for）：一切需要"设计主导、自信表达"的场景——创意代理 pitch、设计工作室作品集、广告代理 credentials、品牌创意评审、艺术指导评审；同时它也是技术演讲、研究成果汇报、财务复盘中的"出人意料之选"——当演讲者想以品位而非惯例开路时。
• 回避（Avoid for）：要求"机构克制与安静权威"的语境——饱和的多色强调会把表达力拉满，读起来是"表现主义"而非"正式"。

需要说明的是，SKILL.md 明确把best_for标记为"软信号（soft signals）而非严格行业过滤"，因此上述举例只用于倾向判断，不应机械套用为行业白名单。

三、视觉快照：Creative Mode 是什么

预览卡用两段话点明这套系统的核心美学："a neo-brutalist editorial presentation system built for 1920x1080 slides"——新粗野主义（neo-brutalist）编辑式演示系统。其根本美学主张是"技术上的克制 × 表达上的激进"：

• 没有圆角卡片、没有渐变、没有暗示光源的模糊阴影；
• 只有纯色色块（flat color-blocking）与硬偏移投影（hard offset drop-shadows）——即"Risograph / 丝网印刷"那种实色同色偏移；
• 视觉血统是"一半 Bauhaus 网格、一半朋克小志（punk zine）、一半瑞士编辑风（Swiss editorial）"。

画布是暖奶油色cream（#EFE9D9），近黑墨水ink（#0F0F0F）负责边框、文字与分隔线。四种强调色以全饱和状态出场：森林绿、热粉、焦橙、阳光黄，"它们从不融合，而是在页面上相撞——碰撞本身就是设计"。

3.1 视觉配方（Preview Ingredients）

预览卡把三种关键配方压缩为最简形式：

• 调色板：cream #EFE9D9；cream-2 #E4DCC4；ink #0F0F0F；ink-2 #2A2A2A；green #1F8A4C；green-dark #136636；pink #F06CA8；pink-dark #D14E8B（橙色与黄色也出现在预览快照的 accent 描述中，完整十色定义见 design.md 的 colors token）；
• 字体三角：Archivo Black（展示大字）、Space Grotesk（正文）、JetBrains Mono（等宽标签）；
• 签名手法（Signature moves）：
  1. cream 画布作为通用背景；绿色只用于收尾页（closing slide）；
  2. 所有结构元素使用4px 实色 ink 边框——卡片、面板、表格单元格、图表轴线；
  3. 用硬偏移 box-shadow 替代模糊投影：featured 块为24px 24px 0 color, 24px 24px 0 4px ink；
  4. Archivo Black 展示字一律大写，行高 0.92，压缩到极限；
  5. 四种强调色只做纯色填充，每页只用其中两到三种，绝不同时用全四个。

四、CJK（中文等文字）预览注意

预览卡用一节特别提醒：如果预览使用中文或其他 CJK 文字，有三条立即生效的调整：

• letter-spacing 归零：CJK 文字不施加字距（保留给拉丁字符）；
• 放宽 line-height：汉字需要比拉丁小写字母更多的垂直呼吸空间；
• 不要对 CJK 片段施加text-transform: uppercase：中文没有大小写，强制大写对汉字无意义，反而会破坏内部混合的拉丁缩写渲染。

预览卡同时声明："Use the fulldesign.mdCJK section after selection for exact font pairings and script-specific adjustments."（选定后，请使用完整 design.md 的 CJK 章节获取精确字体配对与脚本级调整。）这套完整方案——包括 Archivo Black 配思源宋体 Noto Serif SC 900、Space Grotesk 配 NSC 400、单一字体栈 fallback 策略、Pangu spacing 等——都收录在 design.md 的 CJK & International Content 章节，预览阶段无需展开。

五、预览硬性规则：一张"真实第一页"的验收标准

Preview Rules是全卡最重要的可执行规范，任何代理在产出预览前都必须逐条对照：

1. 只构建一张 1920×1080 的标题幻灯片，且必须在固定舞台模型（fixed-stage）内完成；
2. 保留调色板、字体角色、表面节奏（surface rhythm）与装饰语汇——预览不是自由发挥；
3. 使用用户真实的标题/副标题/上下文，不复制演示示例内容；
4. 渲染结果必须像真实的第一页幻灯片，而不是一张"模板选择卡"；
5. 绝不把内部工作流文字放到幻灯片上：包括preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径、源文档标签；
6. 绝不把模板名或 slug 印在幻灯片上，只能出现在与用户的聊天消息中；
7. 绝不把用户需求备注（如期望的氛围、受众、内部用途标签）当作幻灯片内容，除非用户明确要求那些原词出现在 deck 中；
8. 可见的 chrome 只允许使用真实 deck 内容：deck 标题、真实章节标题、日期、作者、公司、页码，或来自用户材料的真实措辞；
9. 预览生成阶段不要读template.html；
10. 不要读其他模板的design.md；
11. 用户选定该模板后，先读完整 design.md 再生成正式幻灯片。

这套规则与 SKILL.md 的"预览真实性规则（Preview authenticity rules, NON-NEGOTIABLE）"完全同源：预览必须是一张"真实首屏"，任何诊断式内部元数据都是违规。它解释了为什么预览卡要刻意保持轻量——读得越少，越不容易把内部标记泄漏进成品。

六、固定舞台：预览与成稿的同一套渲染底座

预览卡要求预览"构建在固定舞台模型内"，这一步的实际执行由仓库的两份基础设施保证。

6.1 deck-stage.js 的整画布缩放

deck-stage.js 是<deck-stage>自定义元素，硬编码设计尺寸默认值1920×1080（见 deck-stage.js），并通过_fit()计算缩放因子：

const vw = window.innerWidth; const vh = window.innerHeight; const s = Math.min(vw / this.designWidth, vh / this.designHeight); this._canvas.style.transform = `scale(${s})`;

这段逻辑（见 deck-stage.js）正是预览卡所依赖的"scale-stage-to-viewport"模型：每页在 1920×1080 下排版，整体用一次transform: scale()适配视口，宁可 letterbox / pillarbox 也绝不重排内容。它对手机同样成立——SKILL.md 将"固定 16:9 舞台"列为不可妥协的全局不变量。

6.2 viewport-base.css 的舞台与翻页

viewport-base.css 是每份成品都必须整体内联的强制 CSS：.deck-stage固定为 1920×1080（见 viewport-base.css），.slide初始visibility: hidden; opacity: 0，仅.slide.active / .slide.visible切换到可见（见 viewport-base.css）——这正是预览卡"单页标题幻灯片"在预览阶段与成品阶段共享的渲染底座。预览卡中"不要在预览阶段读取 template.html"的约束，也与 SKILL.md 中"除非选定的 design.md 缺失关键实现细节，否则不读 template.html"的策略一致，进一步保证预览产出不抄袭实现、只忠实于视觉配方。

七、选定之后：从预览卡扩张为完整设计系统

一旦用户选定 Creative Mode，预览卡的最后一条规则触发：读取 design.md。这份完整文档把预览卡的全部配方展开为可直接执行的 token 化规格，预览卡中的每一条"签名手法"都能在其中找到数值定义。

7.1 色板 token：十色全表

预览卡列出了八种主要颜色，design.md 的 YAML frontmatter 补全了全部十色及其角色（见 design.md）：

7.2 字体三角的 token 化

design.md 将三字体角色固化为严格分工（见 design.md）：

• Archivo Black：仅承担展示位——大标题、步骤序号、统计数字、表格标签，一律大写、行高 0.92、字距 -0.01em；该字体本身极重，无需额外 font-weight；
• JetBrains Mono：全部元数据——顶栏标签、页脚 meta、kicker、图表轴、图例、图注，统一 24px，字距在 0.06em–0.16em 之间按用途取值（topbar 0.08em、meta footer 0.06em、kicker 0.14em、chart 0.08em、layer tags 0.1em）；
• Space Grotesk：仅正文——列文本、统计格描述、图表副文本、步骤描述、收尾 strap。

展示字号从 72px 到 220px 共七级（display-xs → display-jumbo），加上 step-num 140px、stat-num 96px、stamp-num 64px、marker-label 46px、badge-label / table-head 28px 等辅助刻度——这套数值是预览卡"font sizes are far larger than web norms"说法的实证来源。

7.3 硬阴影与边框的精确规格

预览卡的签名手法在设计文档中细化为唯一两种硬阴影规格：

• 大偏移（24px 24px）：仅用于 featured 块（marker、poster switch）——box-shadow: 24px 24px 0 {colors.orange}, 24px 24px 0 4px {colors.ink}，第一层是彩色偏移，第二层是它的 4px 墨线描边；
• 中偏移（18px 18px）：仅用于图表中的叠块——box-shadow: 18px 18px 0 {colors.ink}，纯墨色。

边框按结构角色分级：结构元素一律4px 实线 ink；表格内部行/列、图表轴线、柱条为3px 实线 ink；顶栏 pill 徽章为2px 实线 ink；流程页顶栏与卡片之间用3px 虚线 ink。圆角只有三种取值：0px（全部结构元素）、50%（装饰圆与 meta 分隔点）、999px（唯一的顶栏 pill 徽章）。

7.4 从"两到三种 accent"到颜色纪律

预览卡要求"每页只出现两到三种 accent"，design.md 把这条纪律扩展为系统的 Do's and Don'ts（见 design.md），其中最容易触雷的红线包括：

• 不要圆角卡片（圆角读起来像"友好 SaaS"，直角才表达"编辑式精确"）；
• 不要渐变、模糊投影、辉光——深度只来自硬偏移或颜色对比；
• 不要对 Archivo Black 用小写或句子大小写；不要给它加字距；
• 不要引入第五种强调色；不要用纯白 #ffffff 做背景；
• Space Grotesk 不承担标签位；不要中心对齐正文；
• 不要把徽章 -4deg、印章 -6deg 的旋转"软化"掉。

7.5 CJK 成稿方案与已知差距

选定后，预览卡的 CJK 提醒升级为完整策略（见 design.md）：

• 字体配对表：展示/大标题用 Noto Serif SC 900（对应 Archivo Black），正文用 NSC 400（对应 Space Grotesk），等宽 chrome 保持拉丁/数字（JetBrains Mono 本无汉字形）；
• Strategy A 单一字体栈 fallback：把 NSC 声明在拉丁字体之后，拉丁字形走 Archivo/Space Grotesk，CJK 字形自动落到 NSC；
• 通用调整：CJK 正文行高提到 ~1.55；Hanzi 片段字距归零；去掉 uppercase transform；中文句子用全角标点、标题不加句号；Hanzi 与拉丁/数字相邻处加 Pangu 空格；一句话内不混用两套 CJK 字体；
• 已知差距：Archivo Black 220px 的粗犷密度没有精确的汉字等价物，NSC 900 读起来更"文学衬线"而非"朋克 grotesk"，文档估算中文版会比拉丁原版少约 30% 的 punk-zine 味道——补偿手段是加重色块、硬阴影和旋转徽章/印章元素，并明确避免使用 Smiley Sans Oblique（其斜切与系统严格的直角几何冲突）。

八、版本与依赖边界：仓库实际状态

依据 design.md 的 Known Gaps 一节与仓库实现，本模板有以下需要了解的边界：

• 翻页（键盘、点击）由外部依赖 deck-stage.js 提供，该脚本不在 design.md 内展开；
• 模板本身不定义动画与转场，所有幻灯片为静态；
• 标题页的开关插图是纯装饰性嵌套 div，无功能状态；
• 图表与表格数据为硬编码占位，无数据绑定层；
• --rule这个 CSS 变量与--ink同值（#0F0F0F），当前定义了但未被显式使用，可视为 ink 的别名；
• Archivo Black 的 fallback 是sans-serif，字体必须从 Google Fonts 加载才能正确渲染。

这些限制同时解释了为什么 SKILL.md 要求成稿后必须做渲染截图验证——scrollHeight检查无法发现网格面板互相遮挡的问题，这正是预览卡反复强调"面节奏、装饰语汇必须保留"的最终目的：让预览与成稿共享同一套视觉语言，避免选定后的成品"叛离"预览。

结语

Creative Mode 的预览卡是一个被刻意约束在"单页、真实、轻量"三个词上的文件：它靠元数据做匹配，靠配方做表达，靠规则做验收。在 frontend-slides 的渐进披露架构里，它是用户与完整设计系统之间最短的决策链路——读它只需片刻，但它要求的视觉纪律（cream 画布、4px 墨线、硬偏移投影、每页两到三色、大写 Archivo Black）会一直延续到成稿的每一页。对想要产出"设计主导、自信表达"型演示的开发者与代理而言，理解这张预览卡，就等于理解了 Creative Mode 整套系统的最小可执行内核。

• AI 技能
• AI 插件
• 前端