企业官网建设流程全解析

• AI 技能
• AI 插件
• 前端

本篇技术指南基于 bold-template-pack/templates/studio/design.md，完整剖析 frontend-slides 技能库中 Studio 模板这一 "类型即图形"（type-as-graphic-mass）设计系统的完整规范。你将掌握 Studio 的二进制双表面配色、单一字重的大字排版体系、固定 1920×1080 舞台的实现约束，以及中文（CJK）场景下的字体配对与适配策略，足以按此设计配方独立复刻一套高对比度的工作室风格幻灯片。

模板定位：Bold Template Pack 中的 "Studio"

Studio 是 frontend-slides 技能所携带的 Bold Template Pack 中的 34 个高表现力设计模板之一。在 bold-template-pack/selection-index.json 中，它的元数据是：

• Slug：studio
• Tagline：Black canvas with electric-yellow type; high-voltage design studio aesthetic（黑底 + 电光黄字，高压设计工作室美学）
• Mood：electric, bold, graphic, design-led, high-contrast
• Tone：graphic, loud, modern, intentional
• Formality：medium；Density：medium；Scheme：dark
• Best for：一切需要"电光感 + 设计主导"的场合——工作室资历介绍、创意代理 Pitch、品牌展示、美术指导评审、时尚/运动鞋品牌作品。同时也适合希望"让演示本身成为品牌宣言"的科技、研究或商务场合
• Avoid for：需要安静、机构化语境的场合——黑黄双色是模板库中最响亮的配色

按 bold-template-pack/README.md 的工作流，模板选择阶段只读取preview.md生成三张风格预览；只有用户最终选定 Studio 后，才读取完整的design.md作为最终生成的设计配方。预览阶段有一条硬性约束：幻灯片上绝不能出现preview、模板名、slug、文件路径等任何内部工作流文本，必须呈现真实的首张幻灯片效果（详见 bold-template-pack/templates/studio/preview.md）。

Frontend Slides Fixed-Stage Policy：不可违背的舞台约束

Studio 的design.md在正文开始前首先声明了一条优先级最高的Fixed-Stage Policy：当该设计系统被 frontend-slides 技能使用时，最终演示必须渲染为固定 1920×1080 舞台，并整体等比缩放到浏览器视口。

这条策略的要点：

• 演示在包括手机在内的所有屏幕上保持 16:9 画布；允许信箱（letterbox）或柱箱（pillarbox），但绝不允许为移动端重排幻灯片内容；
• 该策略优先级高于源模板的任何响应式行为——即使后续章节提到原模板是视口流式布局，也只应视为"源历史"而非 frontend-slides 的目标生成模型；
• 即使源模板使用100vw、100vh、vw、vh或clamp()编写，也要把这些值当作设计比例换算成 1920×1080 舞台坐标，而不是保留为最终的实时响应式规则；
• 最终输出应使用 bold-template-pack/deck-stage.js 或等价的舞台缩放器：每张幻灯片按 1920×1080 渲染，用一次transform整体缩放，并对渲染截图同时检查文本溢出与面板重叠。

这条约束与技能层的要求完全一致。SKILL.md 将"Fixed 16:9 Stage"列为不可协商的第五条核心原则，并要求生成时完整引入 viewport-base.css（其中.deck-stage被固定为1920px × 1080px，.slide以绝对定位堆叠且通过visibility/opacity/pointer-events控制显隐）。与之呼应的是 deck-stage.js 的实现：其_fit()方法计算Math.min(vw / 1920, vh / 1080)并写入transform: scale(s)，同时提供noscale属性（PPTX 导出器用它让 DOM 捕获到未经缩放的几何尺寸）与@media print的一页一页打印支持。

设计哲学：极端减法与 "类型即图形"

Studio 的完整概念是type-as-graphic-mass——当代设计工作室演示的视觉语域（Pentagram、Anti、Order、"Boring Studios" 事务所美学）。其前提是极端到严苛的减法：单一字体（Barlow）、单一字重（900）、严格大写、超大字号，大到文字不再是文字、而是变成图形形状。标题本身就是设计——没有任何装饰元素、强调色或花饰。如果把一张 Studio 幻灯片里其他元素全部删掉只留标题，它依然读作 Studio。

Key Characteristics（核心特征）

• 二元调色板：近黑底 + 酸性黄字，或酸性黄底 + 近黑字，没有第三种颜色；
• Barlow 900 大写承载所有字号的所有标题；Barlow 400/500 用于正文；IBM Plex Mono 只用于元数据 chrome；
• 标题极巨大——封面 display 12vw（1920px 视口下约 230px）、陈述 7.5vw、章节标题 4.8vw；
• 所有显示级字体紧负字距（-0.01 至 -0.03em）；大写不可协商；
• 完全扁平：无投影、无圆角、无渐变，除黄/黑二元外无任何强调色；
• 1px 发丝线用于 chrome；2px用于统计卡顶边、图表基线、对比面板分隔线；
• 封面页的三列 Mono 元数据页脚是系统签名布局；
• 列表项目用**表面强调色的破折号（em-dash）**标记；
• 正文与 chrome 使用同一颜色的不透明度变体（黄 58%/32%、近黑 62%/35%）——系统从不使用独立的灰色。

密度哲学：低而刻意

Studio 天生稀疏。陈述页就是一句标题占据大部分画布，上下面留空；章节页是一个小的 Mono 标签加标题；封面是一张图片占位图背后压着一个 12vw 的词。边距比 Signal 更紧（5vw/5vh 对比 7.5vw/5.5vh），因为字体本身几乎顶到边缘——标题就是空间填充物，而非靠边距撑出来的内容。一张"坏掉的" Studio 幻灯片就是包含多个相互竞争的元素，或塞满整画布的正文段落。正确的语域是："一件巨大的事，只说一次，900 字重大写。"

颜色系统：二元加一的完整调色板

design.md的 YAML front-matter 定义了完整调色板。下面按颜色语义整理：

YAML 中同时提供了color-aliases语义别名层（c-bg、c-fg、c-accent、c-bg-alt、c-bg-light等），把"表面"与"前景"角色解耦——例如c-bg指向 near-black、c-fg指向 acid-yellow、c-bg-light指向 acid-yellow。实现时用 CSS 自定义属性（如--c-bg-alt、--c-bg-light-alt）暴露。

默认值（Defaults）

• 默认表面在近黑与酸性黄之间跨页交替，两种表面同等地位；拿不准时：封面/引言/陈述页用近黑，章节页与结束页用酸性黄；
• 深底主文字：acid-yellow；黄底主文字：near-black；
• 深底次级文字：text-on-dark-2（黄 58%）；黄底次级：text-on-light-2（近黑 62%）；
• 三级文字（Mono 说明文字、图表坐标轴标签、统计备注）：表面强调色的 tier-3 不透明度；
• 深底边框：border-dark；黄底边框：border-light；
• 标题永远使用表面强调色——黄底黑、深底黄，绝不用其他颜色；
• 图表强调填充：表面强调色；"高亮"柱就是主文字色，默认柱是 tier-3 变暗。

没有语义化颜色角色。黄色不代表"警告"，近黑不代表"主要"。它们只是两种表面，选择它们是节奏问题——交替以改变视觉律动，或连续数张深色营造安静段落，再用一张黄做标点时刻。

字体排印：Barlow 内容 + IBM Plex Mono 元数据

字体族：功能二元分离

Studio 严格使用两个字体族、角色完全分离：

• Barlow：当代 grotesque，宽字重轴。承载所有字号的所有标题（display 至 h3）、所有数字（stat-value）、所有引言、所有正文与导语。系统使用 900 字重用于全部显示级与标题 token；h3 用 700；lead 与项目符号用 500；body 与 caption 用 400；
• IBM Plex Mono：精密等宽字体。只用于元数据标签——chrome 栏、页码、章节号、三列封面 lockup、统计备注、cover-meta 内的 Mono 说明。Mono 是系统的"规格表之声"。

情感上的分割是二元的：Barlow 是内容（响亮、大写、主导）；IBM Plex Mono 是规格表元数据（细小、精确、从属）。没有第三个字体面。

Barlow 900 在 display 字号下会停止表现为字体、开始表现为图形形状——字重如此之重，以致字腔（字母内部的孔洞）成为结构性负空间，标题在被人读出是文字之前，先被读作黑色或黄色的几何块。这就是系统的身份。

完整字阶（Type Scale）

字号默认值：主要章节标题 h2（4.8vw）、章节/陈述 h1（7.5vw）、封面 hero display（12vw）、正文 body（1.15vw）、导语 lead（1.6vw）、一切 chrome 标签与计数 label（0.72vw）、统计数字 stat-value（5.5vw 表面强调色）。拿不准时选更大的——4.8vw 的 h2 读作 Studio；用 2.8vw 的 h3 当主标题就变成了另一个系统。

签名处理（Signature Treatments）

只要对应元素类型被使用，以下处理不可省略：

• 所有 display、h1、h2、h3、quote-text、stat-value必须大写。句首大写形式的 display 文字在系统中不存在，连 2.8vw/700 字重的 h3 也大写；
• 所有 display 标题字重必须 900——display、h1、h2、quote-text、stat-value 全部 900，无例外。在 display 字号用 800 或 700 会破坏"类型即图形"效果；
• 所有 display 元素必须负字距——display –0.02em、h1 –0.02em、h2 –0.01em、stat-value –0.03em。没有负字距的 Barlow 900 看起来"未处理"，负字距正是压缩密度的来源；
• 所有 chrome、标签、计数、元数据一律 IBM Plex Mono、0.06em 字距，无例外；
• 标题永远以表面强调色渲染——深底黄、黄底黑，从不用减弱不透明度，也从不换色；
• 正文列表用表面强调色的破折号前缀，从不用圆点、不用其他字形；破折号颜色随表面翻转；
• 统计卡顶部用2px（非 1px）强调色规则（深底一侧可用减弱强调色）。2px 比 chrome 发丝线重，因为统计是锚点；
• 三列 cover-meta lockup 用 IBM Plex Mono：列 1 左对齐、列 2 居中、列 3 右对齐——"Boring Studios" 签名，列结构不可协商。

排印原则

• 字面阶梯固定：Barlow 承担除元数据外的一切；Mono 只在元数据内。Mono 越出元数据角色、或 Barlow 进入元数据角色，都会破坏排印分离；
• 字重阶梯固定：900 / 700 / 500 / 400，不使用 600、800 等中间字重。四层字重就是排版的全部表情域；
• 行高在显示级收紧（display 0.9、h1 0.92），正文放开到 1.5–1.6；字距在显示级统一为负（-0.01 至 -0.03em）、正文为 0、Mono 标签为正 0.06em；
• 不使用斜体、不使用下划线。系统没有字体样式变化；强调完全靠字重对比（900 标题对 400 正文）实现。

布局系统：Canvas、间距、Chrome 与封面 Lockup

Canvas 系统

Studio 目标为100vw × 100vh全视口。每张.slideflex 填满视口，幻灯片在水平条带中并排、导航时左右平移。所有尺寸用视口相对单位（vw/vh）实现流式缩放。在 frontend-slides 的固定舞台模型下，这些值被换算为 1920×1080 的舞台坐标。

间距与间隔刻度（Spacing）

陈述页与章节页会把底部内边距放大到 1.5× pad-y，让标题沉到画布偏下、上方留出刻意空白。封面页外层内边距为 0，因为图片区填满整个画布。

Chrome 框架

标准幻灯片带顶部 chrome 栏与底部 foot 栏：

• Chrome bar——左侧 Mono 标签、右侧 Mono 计数、下方 1px 发丝线。padding-bottom 为gap-sm，margin-bottom 为gap-md；
• Foot bar——镜像 chrome bar：左侧 Mono 标签、右侧 Mono 计数、上方 1px 发丝线。

封面、章节、陈述、引言与结束页省略标准 chrome——它们要么用 cover-meta lockup（封面），要么什么 chrome 都没有（章节/陈述/引言/结束）。

封面 Lockup（系统签名）

封面页是系统的签名布局：

1. 一张图片占位填满整个画布、垫在所有元素之下；
2. 一条 display 级标题（通常一个 12vw 的词）作为cover-type坐在上方区域；
3. 底部三列 Mono 元数据页脚——列 1 左对齐（"studio × client" 与日期）、列 2 居中（演示标题）、列 3 右对齐（工作室名），以一条 25% 不透明度的黄色 1px 发丝线与图片区隔开。

深度与层级：彻底扁平

Studio天生扁平：无投影、无圆角卡片浮起、无渐变，每个元素与表面齐平。

可感知的深度来自三个方面：

• 表面对比——两种表面同框出现时（对比面板、图片占位）；
• 发丝线分隔——1px 与 2px 边框划分区域；
• 重型字体——900 字重的 display 标题创造出在平面表面上读作前景的视觉质量。

系统刻意严苛：如果一个布局需要浮起效果才能读清楚，那这个布局对 Studio 而言就是错的——应当减少内容或重组，让"平面 + 重型字体 + 发丝线"足以提供层级。

形状与处理：直角、2px 锚线与装饰词汇

圆角

Studio 没有任何圆角 chrome。卡片、面板、统计块、图表框、图片占位、对比面板——全部是锐角严格矩形。唯一圆形是导航圆点与底层页码 UI，它们是 deck-stage 的 chrome，不是幻灯片内容。

边框粗细

• 1px solid：border-dark（近黑底）或border-light（黄底）——通用发丝线，用于 chrome 栏、foot 栏、cover-meta 分隔线；
• 2px solid：表面强调色（深底黄、黄底黑）——更重的规则，用于统计卡顶边、对比面板垂直分隔线、图表基线、图表柱轨左侧规则；
• 无虚线边框——系统内所有边框均为实线。

装饰元素类型（Decorative Element Types）

• Display 标题即图形质量：4.8vw 及以上的 Barlow 900 以黑色或黄色几何块呈现，是每张幻灯片的主要装饰元素，没有额外花饰；
• 发丝线：表面边框色的 1px 实线，用于分隔 chrome 与正文、正文与 foot、以及对比面板内部——系统唯一的结构性分隔符；
• 重规则：表面强调色（或减弱强调色）的 2px 实线，用于统计卡顶边、图表基线、对比面板垂直分隔——比 chrome 发丝线重，读作"锚点"而非"分隔符"；
• 统计卡：带 2px 顶边的平面区域，含 5.5vw Barlow 900 统计数字（表面强调色）、1.15vw Barlow 500 统计标签、可选 0.85vw IBM Plex Mono tier-3 统计备注。右、下内边距，左内边距为 0（规则与卡片左缘齐平）；
• Cover-meta lockup：封面底部三列 Mono 页脚——列 1 第 1 行 studio × client 名、第 2 行日期；列 2 居中演示标题；列 3 右对齐工作室名。以 25% 不透明度黄色 1px 发丝线与 cover-type 分隔；
• 图片占位：near-black-alt（深底）或带发丝边框的acid-yellow-alt（黄底）的平面矩形，内含居中的 tier-3 不透明度 IBM Plex Mono 文字，用于未填充的图片槽位；
• 图表柱：减弱文字色的平面竖矩形（默认）或表面强调色（高亮）。无圆角端、无渐变。hi变体用全强调色及其数值标签 900 字重；
• 图表基线：减弱表面强调色的 2px 实线（深底为黄 tier-3、黄底为 border-light），横贯图表容器全宽、位于柱顶之下；
• 破折号项目符号：每个列表项以表面强调色—前缀、0.5em 右间距，颜色随表面翻转。

Do's 与 Don'ts 速查

Do（做）

• 所有字号的所有标题一律 Barlow 900 大写，负字距至少 -0.01em——"类型即图形"效果是系统身份；
• 自由交替近黑与酸性黄表面，两者地位同等；明暗交替的律动就是系统的节奏；
• 标题一律表面强调色——深底黄、黄底黑，永不减弱、永不用第三种色；
• IBM Plex Mono 只用于元数据（chrome 标签、页码、章节号、cover-meta lockup、统计备注、Mono 说明）——Mono 是规格表之声，永远不用它写内容；
• cover-meta 页脚用三列 Mono lockup（左/中/右）——系统签名图案；
• 用不透明度减弱次级文字（深底 0.58、黄底 0.62），而不是单独的灰色——系统没有灰，只有黄与黑的不透明度变体；
• 统计卡顶边、图表基线、对比面板分隔线用 2px 规则——2px 区分"锚点"元素与 chrome 发丝线；
• 项目符号用表面强调色破折号——从不圆点、从不圆圈；
• 幻灯片边距收紧（5vw/5vh）让 display 字体贴近边缘——Studio 依赖字体填满画布，宽松边距会破坏比例效果；
• 陈述页与章节页刻意稀疏——一句巨大标题面对空表面才是正确语域。

Don't（不）

• 不要把标题小写——每个 Barlow 900 元素都必须大写，无例外；
• 不要在 display 字号用 800 或 700——display 永远 900；
• 不要给调色板加第三种颜色——系统是二元加不透明度变体，加红、蓝或任何强调色都破坏二元逻辑；
• 不要圆化任何角落——处处严格矩形，只有导航圆点是圆形；
• 不要加投影或渐变——系统极度扁平，深度来自对比与字重、而非浮起；
• 不要用 Barlow 做 chrome 元数据——Mono 是元数据之声，chrome 用 Barlow 会读作内容而非规格；
• 不要用 Mono 做标题或正文——Mono 只活在元数据角色；
• 不要用斜体、下划线或颜色变体强调——唯一强调机制是字重对比（900 vs 400）；
• 不要引入虚线边框——系统内每条线都是实线；
• 典型幻灯片的内容不要超过约 60% 填充——空表面是结构性的，Studio 一旦拥挤就"坏掉"。

响应式、演示行为与打印

缩放行为

Studio 面向 1920×1080 视口，全程使用视口相对单位，因此在 1280×720 与 2560×1440 之间无需断点即可流畅缩放；唯一固定像素尺寸是 deck chrome 圆点与页码：

• display 标题：12vw → 1920px 视口约 230px、1280px 约 154px；
• 正文：1.15vw → 1920px 约 22px、1280px 约 15px；
• 内边距：pad-x 5vw → 1920px 约 96px、1280px 约 64px。

1px 与 2px 边框权重是固定像素、不随缩放变化；在大视口下边框显得成比例地更细。

演示行为（Presenter Behavior）

源模板为 JS 驱动：幻灯片在水平条带中并排，导航时左右平移；当前幻灯片带is-active，触发任何[data-anim]元素的动画。动画比 Signal 更锐利更短（0.5s 对比 0.65s；切页 0.75s 对比 0.85s）——按源码注释是"事务所的紧迫感，而非编辑式的优雅"。动画关键帧包括 fade-up、fade-in、reveal-right、reveal-left、scale-in，配合 0–6 的data-delay错峰。

在 frontend-slides 的固定舞台实现中，这一交互由 deck-stage.js 承担：该 Web Component 支持 ←/→、PgUp/PgDn、Space、Home/End、数字键跳页、按 R 复位到首页，在移动端提供三分区点按导航（左 1/3 后退、右 1/3 前进），底部居中显示页码浮层（空闲 1.8 秒自动淡出），并通过slidechangeCustomEvent 广播当前页码给宿主应用与演讲者备注渲染器。导航圆点与页码固定在视口底部，刻意做成小而低调的白底深色 UI。

打印行为（Print Behavior）

design.md明确指出源模板没有内置打印样式表——水平条带布局需要"解绕"才能静态导出。这正是 frontend-slides 固定舞台模型要解决的问题：deck-stage.js 的@media print规则把每一张幻灯片按设计尺寸单独排成一页，并注入@page { size: 1920px 1080px; margin: 0 }，配合break-after: page实现浏览器"打印 → 存为 PDF"即可得到每页一张的干净 PDF；viewport-base.css 也提供了等效的打印基线。导出可直接用 scripts/export-pdf.sh（无输出路径时保存到 HTML 同目录）。

CJK 与国际内容：中文场景的完整适配

Studio 支持中文内容，但其"单字体、单字重、大写、负字距"公式在 CJK 上需要系统性调整。

推荐中文配对

混排策略：Strategy A——整元素替换字体

本模板采用Strategy A：渲染中文的元素整体用 CJK 字体替换拉丁字体。理由：Studio 的身份是"类型即图形"，而 Barlow 900不覆盖 CJK 字形；在同一行内用字体栈回退混排 Barlow 拉丁与 NSC 中文字形，在 display 字号会产生度量错配，破坏"单一字体、单一字重"语域。因此凡渲染中文内容的元素应整体替换font-family：

font-family: 'Noto Serif SC', 'Barlow', sans-serif; /* display / headlines — CJK first */ font-family: 'Noto Serif SC', 'Barlow', sans-serif; /* body — CJK first */ font-family: 'IBM Plex Mono', 'Noto Sans Mono CJK SC', monospace; /* mono — Latin first, CJK only if needed */

注意语域转换：全中文演示中，"大写"身份会消失（中文无大小写），Studio 的气质会从"工业事务所宣言"转向"编辑式中文报纸标题"。这是真实的语气转变——中文 Studio 读起来严肃、严苛，但不再像 Pentagram/Anti。接受这一取舍，或将中文限定在特定幻灯片，保持封面与章节分隔页为拉丁 Barlow。

字体加载

在<head>中加入（Google Fonts 提供 Noto Serif SC 与 Noto Sans SC）：

<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=Barlow:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500;700;900&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">

原 design.md 的 Barlow 字体栈已内置 Noto Sans SC 作为 CJK 回退；这里将标题与正文升级为Noto Serif SC，因为宋体 900 字重能承载与 Barlow 900 相当的图形质量，而 Noto Sans SC 同字重读起来过于顺滑/圆润、失去"图形块"特征。纯正文演示仍可保留 Noto Sans SC 的干净无衬线观感。

通用 CJK 调整清单

对任何渲染中文的元素应用（通常通过:lang(zh)或<span lang="zh">限定作用域）：

• 行高：正文 1.75–1.85（Studio 拉丁默认 1.5–1.6 对汉字笔画太紧）；display 1.15–1.25（比拉丁 0.9–0.95 更松，因为 12vw 的中文字形需要垂直呼吸）；
• 字距：中文为 0。Studio 显示级的负字距（-0.01 至 -0.03em）对中文是错的——汉字字形自带间距，负字距在 display 字号会让字形相接或重叠；
• text-transform：中文不做大写。Studio 显示级 token 的text-transform: uppercase对汉字是无操作，但要确保没有父级规则产生意外行为；
• 全角标点：用，。：；！？而非半角,.:;!?——全角形式自带周边空白并对齐 CJK em-box；
• display 标题不加句号：中文标题省略句末。——Studio 拉丁标题从不带句号，此规则延伸到 CJK；
• 盘古之白（Pangu spacing）：在中文与相邻拉丁/数字之间插入细空格。写使用 Claude而非使用Claude；2024 年而非2024年。Studio 的 Mono 元数据常与中文标签并排，此处盘古之白不可或缺；
• 一句话一个字体：同一行内不要混排 NSC 与 Noto Sans SC。衬线/无衬线切换应发生在元素边界。

中文审美备注

Studio 的二元配色（酸性黄对近黑、近黑对酸性黄）在 CJK 下完全保留——色彩决策不变。NSC 700 以酸性黄渲染、置于 12vw 近黑底上，视觉冲击与 Barlow 900 同职等效；饱和黄对暖黑表面的组合让汉字读出同样的海报式权威。

"类型即图形"效果在 CJK 下确实改变，但以一种有趣的方式改变：Barlow 900 大写块读作西方标牌/工业宣言，NSC 700 的 display 字号则读作中文木刻或活字海报——同样严苛、同样图形化，却是另一套文化语域。对中文受众这读作权威、设计良好；对混合受众则把感知语气稍微推向"编辑出版物"而非"设计事务所"。

可直接翻译的构件：破折号项目符号（保持表面强调色—）；三列 Mono cover-meta lockup（中文或拉丁任写，IBM Plex Mono 都能干净渲染，含中文时回退 Noto Sans Mono CJK SC）；统计卡（5.5vw 数字可以是中文数词三百万用 NSC 700、或阿拉伯数字3M用 Barlow）；2px 顶边与 Mono 统计备注不受影响。

已知 CJK 缺口

• "大写 + 负字距 + 900 字重"这一定义系统的公式无法在 CJK 复现：中文只能得到 700 字重（NSC 最重档）、无大小写变换、零字距。纯中文模式下系统约损失 30% 的拉丁个性；
• IBM Plex Mono 完整功能集仅限拉丁；若元数据出现中文字符（Studio 中罕见），回退到 Noto Sans Mono CJK SC 或系统等宽，比例可能与周围 Plex Mono 不一致；
• NSC 900（理论上更接近 Barlow 900）在 Google Fonts 上存在，但在大字号下字腔会开始闭合——12vw display 下 NSC 900 可能把部分字符渲染成近实心块。NSC 700 是推荐上限；极端展示时刻逐个测试 900；
• 明暗表面交替的节奏不受 CJK 影响，但中文读者可能按不同于西方读者的文化阅读惯例来感知这种节奏。

迭代指南：向系统安全地新增内容

design.md给出的 10 条迭代规则，可作为生成整套演示时的逐条自检清单：

1. 任何新标题都用 Barlow 900 大写 + 负字距。三者（字重、大小写、字距）缺一，字体就失去图形质量；
2. 任何新幻灯片都从上一张交替表面——通常不要连续超过 2–3 张深色才插一张黄（反之亦然）。节奏就是设计；
3. 任何新 chrome、元数据、标签或计数用 IBM Plex Mono。Mono 出现在任何其他角色都会破坏元数据分离；
4. 任何新颜色都会给二元调色板引入第三种选择——不要。坚持黄与近黑，用不透明度变体做减弱；
5. 任何新列表用表面强调色破折号标记。圆点项目符号破坏系统；
6. 统计卡用 2px 顶边 + 5.5vw 900 字重数字。更小的数字、句首大写形式的统计、或圆角统计块都破坏模式；
7. 封面页底部用三列 Mono lockup。不要省略它——这是系统最易识别的图案；
8. 章节、陈述、引言与结束页无 chrome；标准页带 chrome 与 foot。不要混用——无 chrome 的引言正确，带 chrome 的引言读作另一个系统；
9. 新布局应追求单一主导元素（标题）+ 最少支撑元素。多元素布局（超过 4–5 个不同区域）会挤坏设计；
10. 2px 规则只预留给锚点（统计顶边、基线、对比分隔线）。chrome 与结构分隔符保持 1px。

已知缺口与实现注意事项

design.md明确记录的已知缺口，对实际生成有直接指导意义：

• 字体依赖：Barlow 与 IBM Plex Mono 都从 Google Fonts 加载。加载失败时回退为 Noto Sans SC / system-ui（Barlow）与 monospace（Plex Mono）；系统会在没有 Barlow 900 时显著退化，因为"类型即图形"依赖特定字形；
• 中文回退字重：Barlow 栈内置的 Noto Sans SC 只发货 400/500/700/900——h3（700）与 lead（500）中文内容渲染干净；中间字重会回退到最近档；
• 保留 token 用途有限：--c-bg-alt、--c-bg-light-alt与若干减弱色 token 已定义但用得少——它们是相邻表面区分的储备；
• 导航 JS 内联：源模板的幻灯片导航 JS 内嵌，负责平移变换与is-active类管理；在 frontend-slides 输出中由 deck-stage.js 等价的舞台组件承担；
• 封面图片占位：使用硬编码的IMAGE PLACEHOLDER标签与平面 near-black-alt 填充；真正插入图片需把占位 div 替换为匹配父画布的 background-image 元素；
• 窄视口边界：5vw/5vh 的内边距刻意紧凑，在小视口下标题可能逼近边缘；系统针对 1280px 及以上的 16:9 显示调优；
• 对比面板不对称：左面板仅右边框 2px（右面板无左边框）——这是刻意的不对称；若扩展到三栏对比，值得注意。

结语：从设计配方到可生成模板

Studio 的design.md是一份"设计系统参考"（design recipe），而非待复制的内容。结合 SKILL.md 与 bold-template-pack/README.md 的实现契约：最终输出是一个自包含的单 HTML 文件，完整包含 viewport-base.css，以固定 1920×1080 舞台整体缩放到视口；设计配方中的vw/vh值作为设计比例换算为舞台坐标；保留选中模板的字体、调色板、装饰词汇、间距节奏与组件语法；用户的真实内容始终优先，模板风格只是塑造呈现、而非覆盖信息与结构；生成后必须同时验证文本溢出与面板重叠。

掌握 Studio 的全部要素——二元双表面、Barlow 900 大写负字距、IBM Plex Mono 元数据、2px 锚线、三列 cover lockup 与 CJK 策略——你就能把它从一份设计文档扩展成一套完整、可验证、风格统一的全演示系统。

• AI 技能
• AI 插件
• 前端