html-ppt-taste-brutalist

HTML PPT — 战术遥测 / CRT 终端

适用于项目复盘、安全审查、基础设施事故记录、运维演练，以及任何“我们不是来推销，而是来汇报”的演示文稿。整体风格如同一份解密后的任务档案，而非推销演示文稿。

本技能只采用一种基底（暗色 CRT）——绝不在同一作品中混用浅色瑞士印刷风格。

来源

内容提炼自 Leonxlnx/taste-skill — skills/brutalist-skill/SKILL.md §2.2（战术遥测与 CRT 终端）。幻灯片系统遵循项目现有的 html-ppt 约定（16:9 幻灯片，直接打开时采用垂直堆叠的回退布局）。

硬性规则

• **基底：**停用状态 CRT 炭灰色 #0A0A0A / #121212。绝不使用纯黑。
• **前景：**白色荧光粉 #EAEAEA。次要文字 #9A9A98。
• **强调色：**仅一种颜色——危险红 #E61919。用于警报、密级标记和最新数据点。绝不作为幻灯片背景填充色。
• **可选：**终端绿 #4AF626，用于整个演示文稿中的一个特定 UI 元素（例如单个状态指示灯）。如果没有必要，则省略。
• **字体：**以等宽字体为主。正文和元信息使用 JetBrains Mono / IBM Plex Mono。仅幻灯片标题使用厚重的窄体无衬线字体（Archivo Black / Inter Black）。
• 标题字号：clamp(56px, 7vw, 96px)，大写，字距 -0.04em，行高 0.9。
• 几何：border-radius: 0。显示 1px 细线（炭灰底色上使用 #2A2A28）。使用 display: grid; gap: 1px，并将背景设为细线颜色，以呈现完美网格单元。
• **扫描线叠加层：**使用微妙的 repeating-linear-gradient，周期为 2px / 4px，不透明度 ≤ 0.08，作为固定的、禁用指针事件的图层应用。
• **荧光粉噪点：**可选 SVG 颗粒伪元素，不透明度 ≤ 0.06。
• **幻灯片装饰：**每张幻灯片都带有顶部标记条——密级、幻灯片 ID、时间戳、坐标——以及底部栏，其中包含序列号和页码。

禁用项

• border-radius 大于 0。
• 投影、渐变、玻璃拟态、辉光。
• 炭灰色、荧光粉色、危险红之外的颜色；最多只能额外使用一个终端绿元素。
• 无衬线正文。正文必须使用等宽字体。
• 推销演示文稿式的“讨喜”元素——表情符号、插画、图库照片、友好图标。
• 同一演示文稿中出现任何浅色模式幻灯片。
• 除瞬间切换外的幻灯片转场。

必需的幻灯片原型（共 10–14 张）

1. 密级封面——左侧放置醒目的大号数字或呼号，标题上方放置涂黑条，右侧设置等宽字体元信息栏。
2. 简报条——由八个单元格组成的等宽字体标记栏，包含任务 ID、日期、负责人、密级。
3. 编号目标——三到五条以细线分隔的论点，每条带有 >>> 标记。
4. 遥测网格——使用 display: grid; gap: 1px 构建等宽字体键值单元格；用红色突出显示偏离趋势的变体。
5. 威胁 / 风险登记表——带细线的表格，严重程度列用红色显示。
6. 序列 / 时间线——纵向排列的等宽字体列表，左侧设 2px 垂直线，关键事件使用危险标记。
7. 图表 / 布线图——纯 CSS 方框与连线示意图；矩形使用细线，并以 ASCII 箭头连接。
8. 样本——使用一个等宽字符或单词，放大至超出视口边界，作为视觉支点。
9. 警报——包含斜向危险条纹的区块（repeating-linear-gradient(135deg, ...)），展示整份演示文稿中最重要的句子。
10. 审计日志——只追加的等宽字体记录，包含时间戳 + 操作者 + 事件。
11. 收尾题记——操作员、系统、构建版本、密级、签署栏。

动效

这种美学讲究机械感和瞬时响应。

• 幻灯片之间瞬间切换——不使用淡入淡出。可选 60ms 闪烁（opacity: 0.85 → 1）。
• 封面上显示闪烁光标（▌），实时状态点只闪烁一次。其他元素不得移动。

预检

• 基底为炭黑色，前景为磷光色，唯一的强调色为警示红
• 所有 border-radius 均为 0；所有拐角均为 90°
• 标题页包含密级 + 序列号 + 时间戳 + 坐标
• 至少有一个 display: grid; gap: 1px 遥测模块
• 扫描线叠层作为固定的 pointer-events-none 元素应用，不透明度 ≤ 0.08
• 至少有一个对角警示条纹警报块
• ASCII 语法装饰（[ ... ]、>>>、///）在整套演示文稿中至少出现四次
• 数值数据使用 tabular-nums + 等宽字体
• 不使用表情符号、曲线、渐变或阴影效果
• 终端绿仅用于零个或一个元素——绝不作为正文文字颜色