• AI 技能
• AI 插件
• 前端

Retro Windows 是 frontend-slides 技能所内置 Bold Template Pack 中 34 个大胆设计系统之一，它以 Windows 95/98 桌面操作系统为整体隐喻，让每一张幻灯片看起来都是运行在 1995 年 CRT 显示器上的一款软件窗口。本篇指南以模板包内的预览卡片 retro-windows/preview.md 为核心骨架，展开其完整设计文档 retro-windows/design.md，并结合技能工作流与舞台实现源码，讲清楚三件事：如何正确生成 Retro Windows 的标题幻灯片预览、这个模板的设计系统由哪些可复用的组件与令牌构成、以及如何按固定 1920×1080 舞台契约产出最终全套幻灯片。读完你可以直接在编码 Agent 会话中，把任意用户题材套上这套"刻意怀旧"的 Win9x 外壳并跑通完整的渐进式披露流程。

模板定位与选择元数据

在 Bold Template Pack 的索引 selection-index.json 中，Retro Windows 被登记为一个 slug 为retro-windows的候选模板，索引条目与预览卡片 preview.md 里的"Selection Metadata"一节完全对应，构成 Agent 筛选模板时的第一层判断依据。

Slug 与一句话定位

模板的 slug 是retro-windows，官方 tagline 为：

Windows 95 chrome: gray title bars, MS Sans Serif, pixel typography, full nostalgia.

（Windows 95 界面风格：灰色标题栏、MS Sans Serif、像素字体排版、满满的情怀。）

这一定位决定了模板的全部技术决策：灰阶按钮面、蓝渐变标题栏、MS Sans Serif 系统字体栈，以及像素字体的点缀用法。

情绪、语气、正式度与密度

适用与避免场景

Best for（适合）：任何"理应刻意怀旧"的内容——复古游戏、Y2K 美学的品牌、带 90 年代氛围的创作者作品集、科技史演讲、故意玩梗的幻灯片。凡是"一个俏皮的复古梗就是全部卖点"的场景，Retro Windows 都是绝佳选择。

Avoid for（避免）：需要呈现现代、优雅或机构可信度的幻灯片——Win95 的界面质感永远会被读成"穿戏服"，正式场合使用会削弱专业形象。

视觉快照：把整份幻灯片变成 1995 年的桌面

预览卡片用一段"Visual Snapshot"完整描述了模板的视觉设定，它是生成任何一张 Retro Windows 幻灯片（包括预览页）时都必须遵守的视觉纲领：

一种以 Windows 95/98 桌面操作系统美学渲染的演示系统。每一张幻灯片都是一个窗口——斜边金属边框、藏蓝渐变标题栏、MS Sans Serif 正文字体，图表区域、分组框与面板都排列得像 1995 年的软件 UI。调色板采用原始 Win9x 系统色（灰色按钮面、藏蓝标题栏、白色凹陷输入框），并用复古强调色（DOS 绿、砖红、芥末黄、青蓝）保留给状态文本与图表数据。像素字体（Press Start 2P）与终端字体（VT323）仅在怀旧点缀处少量出现。整体效果一半是俏皮怀旧，一半是实用仪表盘——一份读起来像运行在 CRT 显示器上的软件产品的幻灯片。

在完整设计文档 design.md 中，这一设定被提炼为一个贯穿始终的"total conceit"（彻底化的概念设定）：

每一张幻灯片都被构造成一个win-window——带斜边金属边框、右上角三个系统按钮（_、[]、X）的矩形窗口。构图逻辑是"这张幻灯片就是运行在 1995 年桌面上的软件，而内容是这款软件显示的数据"。没有现代意义上的幻灯片标题，只有按文件名风格书写的窗口标题（README.DOC、DATAVIEW.CSV、METRICS.LOG）。

由此派生出两条硬性设计纪律，也是最容易做错的地方：

1. 窗口标题必须是"大写文件名 + 扩展名"，例如PRESENTATION.EXE、AGENDA.TXT、EXPLORER.EXE，禁止使用现代标题的大小写习惯。
2. 密度哲学是"高"。Win9x 的应用 UI 是出了名的紧凑——每个像素都有用途。一张只有居中标题和大量留白的幻灯片，在 Retro Windows 系统里会读作"坏了/没做完"。正确的做法是让窗口体内同时容纳堆叠的面板、分组框、表格、图表、按钮条与状态栏脚注，让每张幻灯片都像同时运行着多个区域的应用屏幕。

渐进式披露：preview.md 在 frontend-slides 工作流中的角色

理解 preview.md，必须先理解 Bold Template Pack 的渐进式披露设计。技能主文档 SKILL.md 在 Phase 2（风格发现）阶段明确要求：

1. 先读 selection-index.json，只依据元数据（mood、tone、best_for、avoid_for、formality、density、scheme）圈定候选；
2. 对入围候选，只读对应的preview.md用于生成标题页预览；
3. 用户最终选定模板后，才读取该模板的完整design.md生成最终幻灯片；
4. 除非选中的 design.md 缺失关键实现细节，否则不得读取或复制template.html，也不得批量读取其他模板的 design.md。

bold-template-pack/README.md 把这个契约说得更直接：design.md是设计系统参考，是"配方"而不是可复制的"内容"；preview.md只是用于生成三个标题页选项的轻量样式卡。而 SKILL.md 规定的三选项预览混合是：

• 1 个来自STYLE_PRESETS.md的安全预设；
• 至少 1 个来自 Bold Template Pack 的大胆模板（本卡片即服务于这个槽位）；
• 1 个通配选项（另一个大胆模板或自定义设计）。

因此，Retro Windows 的 preview.md 承担的是一个非常具体的职能：在不泄露完整设计系统的情况下，指导 Agent 产出一张"看起来真实、可对比"的标题页。这也是为什么预览卡片通篇都在强调"预览必须看起来像真实的第一页，而不是模板选择卡"。

预览成分：调色板、字体与签名动作

"Preview Ingredients"一节给出了生成预览页时最低限度的视觉配方。与完整设计文档 design.md 的 colors/typography 块对照后，可以还原出完整的令牌表。

Win9x 系统调色板

preview.md 中列出的核心色板（8 色），design.md 补充了完整的 14 色令牌与别名：

语义红线：强调色（绿/红/黄/青）有固定语义——绿=OK/在线/增长，红=警告/错误，黄=中度关注，青=第三类数据。它们"是状态信号，不是涂料"，禁止把绿色当装饰色、把红色用于非警告文本。图表配色优先级为：先取藏蓝梯队（blue-navy→blue-bright→blue-light），类别分段才从状态色中取用。

字体栈

三款字体各有明确分工，且后两款是"点缀型"角色：

设计文档强调：italic 不使用、装饰性下划线不使用，强调手段只有字重（400→700）与颜色切换（默认→藏蓝或默认→状态色）。正文级排版一律使用固定整数像素字号（12、13、14、16、18、22、30、32），避免rem/em/clamp——亚像素渲染会立刻戳破 OS-UI 幻觉。

五个签名动作

preview.md 明列了模板的五个"Signature move"，生成任何幻灯片都不可省略：

1. 每张幻灯片都是一个win-window——斜边金属边框 + 藏蓝渐变标题栏 + 三个系统按钮（_、[]、X）。
2. 固定 3px 周期的 CRT 扫描线覆盖层（crt-overlay），以 3% 黑色不透明度盖在所有内容之上，模拟 CRT 显示器磷光行。
3. 基于斜边的深度：凸起（panel-raised、btn-retro）与凹陷（panel-sunken、group-box）——全系统禁止模糊阴影。
4. 字体栈为 MS Sans Serif / Segoe UI / Tahoma 兜底，Press Start 2P 与 VT323 作怀旧点缀。
5. 状态色承载语义：绿=OK、红=警告、黄=中度、青=第三类数据。

中英文 / CJK 预览注意事项

preview.md 的"International / CJK Preview Note"给出了预览阶段的 CJK 规则：若预览使用中文或其他 CJK 文本，CJK 字距保持 0、放宽行高、不对 CJK 段落做大写转换；选定模板后的精确字体配对与脚本级调整则查阅 design.md 的完整 CJK 章节（详见本文"中英混排策略"一节）。

设计系统核心：从预览卡到完整配方

预览页只是冰山一角，真正支撑全套幻灯片生成的是 design.md 中的完整设计系统。这里提炼生成时最常查用的部分。

窗口解剖（Window Anatomy）

每个win-window垂直堆叠三个区域：

1. 标题栏（win-titlebar）——4px×8px 内边距，藏蓝→亮蓝水平渐变，左侧为图标 lockup + 大写文件名，右侧为三按钮簇。
2. 窗口体（win-body）——20px 24px 24px 24px内边距，承载幻灯片内容组合。
3. 可选状态脚注——窗口体底部一条panel-raised或panel-sunken横条，携带元信息（数据来源、最后更新、计数、状态徽标）。

同一张幻灯片可以并排堆叠多个窗口（用于季度时间线或多屏对比）；多窗口时只有一个窗口保留激活态藏蓝标题栏，其余使用灰色渐变标题栏（win-titlebar-inactive）。

斜面深度语法（Bevel Illusion）

全系统的深度都来自双色非对称边框 + 内嵌 box-shadow，这是 1995 年 UI 的经典幻觉：

• 凸起态：2px solid white（上+左）+2px solid black（右+下）+inset 1px 1px 0 white, inset -1px -1px 0 #404040。用于窗口、凸起面板、按钮、导航点。
• 凹陷态：2px solid #404040（上+左）+2px solid white（右+下）。用于分组框、凹陷面板、输入框、进度条轨道、复选框、滚动条轨道。
• 按钮按下态反转斜边方向；不存在 hover 态（该年代先于通用 hover 交互）。

硬性禁令：不使用任何模糊box-shadow、drop-shadow滤镜或 rgba 阴影色调；全系统border-radius: 0，圆角为零；边框永远不上色（只有白色+黑/深灰的双色斜边语法，没有藏蓝边框、没有绿边框）。

核心组件清单

类型刻度表

来自 design.md 的typography块（design.md）：

主标题默认取text-lg（22px）藏蓝 700——藏蓝是"应用标题"的声音，黑色标题会被读成"时代错误"。KPI 卡片模式为：组框标题 + 30px 藏蓝指标 + 绿色增量行（▲ +18.3%）+ 12px 灰色上下文行。

布局与持久化装饰

• 窗口max-width: 1200px、max-height: calc(100vh - 68px)，保证桌面灰边始终可见。
• 幻灯片外内边距24px 32px 44px 32px，底部 44px 为常驻导航装饰让位。
• 三件常驻装饰：底部居中斜边导航点、右下凹陷页码芯片（N / TOTAL，12px）、左下 VT323 导航提示（<-- ARROW KEYS to navigate -->）。
• 图表使用 CDN 加载的 Chart.js（4.4.7），颜色直接映射系统令牌，坐标轴标签用 11–12px MS Sans Seriftext-dark，网格线 1pxbg-gray，在幻灯片激活时懒渲染。

中英混排策略：CJK 与国际化内容

Retro Windows 是系统字体型模板，design.md 的中文配对建议是：所有拉丁系统角色统一搭配单一 CJK 家族思源黑体 Noto Sans SC——因为 Win9x 应用的简体中文本地化本就只用一个系统 CJK 字体（MS YaHei / SimSun），多字体混搭反而破坏"软件 UI"的语域。

<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+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">

font-family: 'MS Sans Serif', 'Segoe UI', Tahoma, Geneva, Verdana, 'Noto Sans SC', sans-serif;

通用 CJK 调整：正文行高 1.75–1.85、展示行高 1.15–1.25；CJK 字距恒为 0；不对 CJK 做大写转换；使用全角标点；展示标题不加句号；盘古之白（使用 Claude而非使用Claude）；一句一种字体。

针对本模板的 CJK 特别注意事项（也是 preview.md 预览阶段规则的延伸）：

• 窗口标题是翻译难题：METRICS.LOG没有地道中文对应。方案一保留拉丁文件名（METRICS.LOG、AGENDA.TXT），方案二用中文描述词 + 拉丁扩展名（季度指标.LOG、议程.TXT）。前者更贴近 Win9x 年代，后者对中文观众更易读。
• 标题栏出现 CJK 时，title-bar的 0.5px 字距必须归零。
• 状态徽标（READY/LIVE/OK/WARNING）可直接翻译为短 CJK 词（就绪/在线/通过/警告），用 700 字重 + 状态色，语义照常传递。
• 组框缺口标题在中文下同样成立（如客户数据），因为缺口遮罩依赖背景色而非字形度量。
• CRT 扫描线层与字形无关，对中文同样有效。

已知缺口：Press Start 2P 与 VT323 本质是拉丁专用字体（8-bit 像素与 CRT 终端是对"需要专门位图字体的时代"的呼应，现代 Web 没有等价物）。需要中文像素展示时刻时，诚实的做法是用大号 Noto Sans SC 并放弃像素字特征，不要用其他"像素风格"中文字体替代（会读成时代错误）。把这两款字体留给拉丁时刻（启动屏LOADING...、页脚ARROW KEYS to navigate），CJK 幻灯片全程使用 Noto Sans SC。

预览规则：让预览成为真实的首页

preview.md 的"Preview Rules"是全篇最可操作的部分，共 9 条，生成标题页预览时必须逐条遵守：

1. 只构建一张 1920×1080 的标题页，基于固定舞台模型（fixed-stage）。
2. 保留上文描述的调色板、类型角色、表面节奏与装饰词汇。
3. 使用用户的真实标题/副标题/上下文，不复制演示幻灯片内容。
4. 渲染结果必须像真实的第一页幻灯片，而不是模板选择卡。
5. 绝不在幻灯片上放置内部工作流文本：preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径、来源文档标签，一律禁止。
6. 绝不在幻灯片上放置模板名或 slug，只允许在对话消息中提及。
7. 绝不在幻灯片上放置用户需求备注（想要的氛围、受众、内部用途标签），除非用户明确要求这些词出现在幻灯片中。
8. 可见的界面元素只用真实内容：幻灯片标题、真实章节名、日期、作者、公司、页码，或来自用户材料的真实短语。
9. 预览生成阶段不得读取template.html，不得读取其他模板的design.md；用户选定模板后，生成最终幻灯片前再读取完整的 design.md。

这 9 条规则与技能级规则完全对齐——SKILL.md 的 "Preview authenticity rules (NON-NEGOTIABLE)" 在技能层面重申了同样的内容，说明"预览即真实首页"是整个 frontend-slides 的不可妥协原则，而非本模板独有。

固定 1920×1080 舞台：源码级验证

preview.md 和 design.md 都要求最终成品遵循"Frontend Slides Fixed-Stage Policy"：以固定 1920×1080 舞台为画布，整体等比缩放到浏览器视口。这一契约在源码中可以得到三重印证。

deck-stage.js 的缩放实现

模板包自带的 deck-stage.js 实现了<deck-stage>Web Component，其核心常量在 deck-stage.js：

const DESIGN_W_DEFAULT = 1920; const DESIGN_H_DEFAULT = 1080;

缩放逻辑在_fit()（deck-stage.js）：

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

即整块 1920×1080 画布用Math.min取最小缩放比，等比缩放、允许信箱/黑边，绝不重排内容。它还内置了键盘导航（←/→、PgUp/PgDn、Space、Home/End、数字键、R 重置）、触摸三分区翻页、@media print每页一屏的 PDF 输出，以及非激活幻灯片用visibility/opacity隐藏而非卸载的状态保留策略。

SKILL.md 的不可协商规则

SKILL.md 把固定舞台列为 "Fixed 16:9 Stage (NON-NEGOTIABLE)"，并在 Fixed Stage Rules 中进一步要求：每张幻灯片在 1920×1080 设计尺寸下使用固定内部度量；不得用响应式断点重排移动端内容；幻灯片可见性必须通过.active/.visible配合visibility、opacity、pointer-events控制（来自 viewport-base.css，并须完整包含进每个成品 HTML），不得使用display: none切换（否则.slide-content { display: flex }这类后置布局类会覆盖它导致全部幻灯片同时可见）；clamp()只用于舞台之外的 UI 或小尺寸后备预览；必须包含prefers-reduced-motion支持。

bold-template-pack/README.md 的实现契约还要求：成品为单个自包含 HTML 文件；若源模板原先是视口流式的（design.md 中确实保留了100vw × 100vh、max-width: 1200px等历史行为），要把这些值当作设计比例翻译进 1920×1080 舞台坐标，而不是当作最终成品的实时响应式规则。

生成后验证

SKILL.md 特别警告：只做scrollHeight溢出检查是不够的，因为网格面板可能视觉上互相遮挡。生成后必须在浏览器截图里同时验证文本溢出与面板重叠，并抽查 1280×720 视口与一个手机视口下的截图。

生成全套幻灯片的工作流与迭代指南

选定 Retro Windows 后，完整工作流如下：

1. 读取 design.md，将其视为设计配方而非待复制的文本。
2. 保留其字体、调色板、装饰词汇、间距节奏与组件语法，但不复制演示幻灯片内容。
3. 将任何视口流式值翻译为 1920×1080 固定舞台坐标，产出单个自包含 HTML 文件。
4. 用 viewport-base.css 完整内容 + html-template.md 规定的 HTML 架构与 animation-patterns.md 的动效参考组织代码。
5. 截图验证文本溢出与面板重叠。

design.md 的"迭代指南"给出了逐项生成的新组件规格，可当作速查表：

• 新幻灯片 →win-window+ 藏蓝标题栏（win-icon单字母 + 大写文件名 + 三按钮簇）；
• 新内容区 →group-box（凹陷+缺口标题）、panel-raised（工具条/仪表盘）或panel-sunken（白色内容井）；
• 新主标题 →text-lg22px 藏蓝 700；启动屏/英雄标题才用text-xl32px 或 Press Start 2P 20–24px；
• 新指标卡 →group-box+metric-xl藏蓝 700 + 绿色增量 + 12px 灰色上下文；
• 新图表 → Chart.js，藏蓝梯队作主数据、状态色作类别段，画布必须包在panel-raised里；
• 新列表/复选框/树 →retro-list（>箭头）/retro-check（字面x）/tree-item（📁📄 图标）；
• 新按钮 →btn-retro，成簇出现（OK/Cancel/Help 或 Export/Print）；
• 新状态徽标 → 状态色 700 字重，永不装饰化；
• 状态脚注 →panel-raised横条，用•分隔 3–4 个数据点（数据来源、最后更新、计数、分类）；
• 每张幻灯片必须视觉饱满——多面板堆叠 + 底部状态脚注 + 按钮条/导航装饰。

已知缺口与使用限制

design.md 末尾列出的 Known Gaps 是生成与演示时必须知情的内容：

• Press Start 2P 与 VT323 从 Google Fonts CDN 加载，可选；正文栈（MS Sans Serif 等系统字体）无任何外部依赖，字体加载失败也不会破坏整体美学。
• Chart.js 4.4.7 从 CDN 加载，失败时幻灯片仍能渲染但图表区为空。
• CRT 扫描线层在真实投影时可能读作噪点而非怀旧质感，投影演示前建议考虑关闭。
• 斜边幻觉依赖合适缩放比——在极端缩放或高 DPI 且浏览器不做亚像素渲染时，1–2px 宽的斜边可能变成实线或消失。
• 无 hover 态是设计使然，但现代观众可能觉得鼠标交互"没反应"。
• >、x、📁、📄是字符型标记，渲染效果随运行时字体度量而定。
• marquee 动画持续运行不可暂停，会被部分无障碍审计标记为prefers-reduced-motion违规；CRT 扫描线层同样应考虑适配prefers-reduced-motion或在无障碍要求高的场合降级。

结语

Retro Windows 是一个把"1995 年软件 UI"演绎到组件级的完整设计系统：从win-window窗口隐喻、斜边深度语法、Win9x 系统调色板，到 MS Sans Serif + Press Start 2P + VT323 的三字体分工，再到 CRT 扫描线、缺口式组框、>箭头列表与x字符复选框这些字符级细节。在 frontend-slides 中，它的正确打开方式是渐进式披露：先用 preview.md 按九条预览规则生成一张真实标题页供用户对比，选定后再读 design.md 展开全套幻灯片，最后通过 deck-stage.js 与 viewport-base.css 的固定舞台约束交付 1920×1080 的单个自包含 HTML。只要守住"每一页都是软件窗口、每个表面都有斜边、每种状态色都有语义、绝不出现现代圆角与模糊阴影"这几条底线，你就能用任何用户题材做出那份"一半俏皮怀旧、一半实用仪表盘"的 CRT 时代幻灯片。

• AI 技能
• AI 插件
• 前端