技能：工业粗野主义与战术遥测界面

1. 技能元数据

名称： 工业粗野主义与战术遥测界面工程
描述： 精通于构建融合了世纪中期瑞士字体设计、工业制造手册以及复古未来主义航天/军事终端界面的网页界面。这一技能要求绝对掌握刚性模块化网格、极端字重对比、纯粹功利主义色彩调色板，以及对模拟模拟退化（半色调、CRT 扫描线、位图抖动）的程序化模拟。目标是构建出展现原始功能性、机械精度和高数据密度的数字环境，刻意摒弃传统的消费者 UI 模式。

2. 视觉原型

该设计系统通过融合两种截然不同但又高度兼容的视觉范式来运作。每个项目选择其中一种并坚持使用。不要在同一界面内交替或混合使用两种模式。

2.1 瑞士工业印刷

源自 20 世纪 60 年代的企业形象系统和重型机械蓝图。

• 特点： 高对比度浅色模式（新闻纸/米色基底）。依赖单块、粗重的无衬线字体。由可见分隔线勾勒出的严苛结构网格。激进的、不对称的负空间，点缀着超大、撑满视口的数字或字母。大量使用红色作为警示/强调色。

2.2 战术遥测与 CRT 终端

源自机密军事数据库、传统大型机和航空航天平视显示器 (HUD)。

• 特点： 仅限深色模式。高密度表格数据展示。完全以等宽字体为主导。集成技术框架元素（ASCII 括号、十字准线）。应用模拟硬件限制（磷光体辉光、扫描线、低比特深度渲染）。

3. 字体架构

字体是主要的结构和装饰基础设施。图像是次要的。该系统要求在字体大小、字重和间距上具有极大的差异性。

3.1 宏观字体（结构标题）

• 分类： 新怪诞 / 粗重无衬线体。
• 推荐网页字体： Neue Haas Grotesk (Black)、Inter (Extra Bold/Black)、Archivo Black、Roboto Flex (Heavy)、Monument Extended。
• 实现参数：
  • 字重： 极重。
  • 尺度： 采用流体字体技术以超大尺寸部署（例如 clamp(4rem, 10vw, 15rem)）。
  • 字间距： 极紧，通常为负值（-0.03em 至 -0.06em），迫使字形形成坚固的架构块。
  • 行高： 高度压缩（0.85 至 0.95）。
  • 大小写： 为实现结构性冲击力，严格使用全大写。

3.2 微观字体（数据与遥测）

• 分类： 等宽 / 技术无衬线体。
• 推荐网页字体： JetBrains Mono、IBM Plex Mono、Space Mono、VT323、Courier Prime。
• 实现参数：
  • 尺度： 固定且较小（10px 至 14px / 0.7rem 至 0.875rem）。
  • 字间距： 宽松（0.05em 至 0.1em），以模拟机械打字机间距或终端矩阵。
  • 行高： 标准至紧凑（1.2 至 1.4）。
  • 大小写： 严格使用全大写。用于所有元数据、导航、单元 ID 和坐标。

3.3 纹理对比（艺术性破坏）

• 分类： 高对比度衬线体。
• 推荐网页字体： Playfair Display、EB Garamond、Times New Roman。
• 实现参数： 极其节制地使用。必须经过重度后期处理（半色调滤镜、1-bit 抖动）以破坏矢量完美性，并与干净的无衬线体形成纹理上的并置。

4. 色彩系统

色彩架构毫不妥协。严格禁止渐变、柔和阴影和现代半透明效果。色彩模拟物理媒介或原始发光显示器。

关键：每个项目选择一种基底调色板并一致使用。切勿在同一界面内混合使用浅色和深色基底。

若为瑞士工业印刷（浅色）：

• 背景： #F4F4F0 或 #EAE8E3（哑光、未漂白的文档纸色）。
• 前景： #050505 至 #111111（碳墨色）。
• 强调色： #E61919 或 #FF2A2A（航空/危险红）。这是唯一的强调色。用于删除线、粗结构分隔线或关键数据高亮。

若为战术遥测（深色）：

• 背景： #0A0A0A 或 #121212（已关闭的 CRT。避免纯 #000000）。
• 前景： #EAEAEA（白色磷光体）。这是主要文本颜色。
• 强调色： #E61919 或 #FF2A2A（航空/危险红）。相同的红色，相同的规则。
• 终端绿 (#4AF626)： 可选。仅用于单个特定 UI 元素（例如，一个状态指示器或一个数据读数）——绝不用作通用文本颜色。如果没有明确用途，则完全省略。

5. 布局与空间工程

布局必须看起来是经过数学设计的。它摒弃了传统的网页内边距，转而采用可视化的分区。

• 蓝图网格： 严格遵循 CSS 网格架构。元素不浮动；它们精确地锚定到网格轨道和交叉点。
• 可视化分区： 大量使用实线边框（1px 或 2px solid）来界定不同的信息区域。水平分割线（<hr>）常横跨整个容器宽度，用以分隔操作单元。
• 双模态密度： 布局在极端数据密度（紧密排列的等宽元数据聚集在一起）和宏大体量字体所框定的大量计算性负空间之间交替。
• 几何形态： 绝对拒绝使用 border-radius。所有角必须恰好为 90 度，以强化机械刚性。

6. UI 组件与符号

标准的网页 UI 惯例被功利主义的、工业化的图形元素所取代。

• 语法装饰： 使用 ASCII 字符来框定数据点。
  • 框架： [ 交付系统 ]、< 重新引入 >
  • 方向： >>>、///、\\\\
• 工业标记： 大量整合注册商标（®）、版权（©）和商标（™）符号，使其作为结构几何元素而非法律文本存在。
• 技术资产： 在网格交叉点集成十字准线（+）、重复的垂直线（条形码）、粗水平警告条纹，以及随机字符串数据（例如 REV 2.6、UNIT / D-01），以模拟活跃的机械过程。

7. 纹理与后期处理效果

为防止设计看起来纯粹是数字化的，通过 CSS 和 SVG 滤镜将模拟的模拟退化工程化到前端中。

• 半色调与 1 位抖动： 将连续色调图像或大的衬线字体转换为点阵图案。通过预处理或结合 CSS mix-blend-mode: multiply 叠加与 SVG 径向点状图案实现。
• CRT 扫描线： 对于终端界面，向背景应用 repeating-linear-gradient 以模拟水平电子束扫描（例如 repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)）。
• 机械噪点： 一个全局的、低不透明度的 SVG 静态/噪点滤镜，应用于 DOM 根元素，为深色和浅色模式引入统一的物理颗粒感。

8. 网页工程指令

1. 网格确定性： 利用 display: grid; gap: 1px; 配合父子元素背景色的对比，生成数学上完美、细如刀锋的分割线，无需复杂的边框声明。
2. 语义刚性： 使用精确的语义标签（<data>、<samp>、<kbd>、<output>、<dl>）构建 DOM，以准确反映遥测数据的技术本质。
3. 字体钳制： 仅在宏观字体上实现 CSS clamp() 函数，以确保大标题在不同视口下能激进地缩放，同时保持结构完整性。