技能：工业粗野主义与战术遥测界面工程
1. 技能元信息
名称： 工业粗野主义与战术遥测界面工程 描述： 精通构建融合20世纪中叶瑞士排印设计、工业制造手册与复古未来航空航天/军用终端界面的Web界面。这门学科要求对刚性模块化网格、极端字体比例对比、纯功能性调色板以及模拟模拟退化效果（半色调、CRT扫描线、位图抖动）的编程化模拟有绝对掌握。目标是构建展现原始功能性、机械精度和高数据密度的数字环境，刻意摒弃常规消费UI模式。
2. 视觉原型
设计系统通过融合两种截然不同但高度兼容的视觉范式运作。每个项目选择其中一种并坚持使用。请勿在同一界面交替或混合两种模式。
2.1 瑞士工业印刷
源自20世纪60年代的企业标识系统和重型机械蓝图。
- 特征： 高对比度浅色模式（新闻纸/米白底材）。依赖整体、重型无衬线字体。由可见分隔线勾勒出的刚性结构网格。激进的、不对称的负空间使用，配以超大的、溢出视口的数字或字母。大量使用原色红作为警报/强调色。
2.2 战术遥测与CRT终端
源自机密军事数据库、遗留大型机及航空航天平视显示器（HUD）。
- 特征： 独占深色模式。高密度表格数据呈现。绝对主导的等宽排版。集成技术性框架元素（ASCII括号、十字准线）。应用模拟硬件限制效果（荧光辉光、扫描线、低色深渲染）。
3. 排版架构
排版是主要的结构和装饰性基础设施。图像是次要的。系统要求极端的缩放、字重和间距差异。
3.1 宏排印（结构性标题）
- 分类： 新怪诞/重型无衬线。
- 推荐Web字体： Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended。
- 实现参数：
- 缩放： 使用流体排版（例如
clamp(4rem, 10vw, 15rem)）以超大比例部署。 - 字符间距（letter-spacing）： 极其紧凑，通常为负值（
-0.03em至-0.06em），迫使字形形成坚固的建筑块。 - 行高（line-height）： 高度压缩（
0.85至0.95）。 - 大小写： 为营造结构性冲击，独占大写。
- 缩放： 使用流体排版（例如
3.2 微排印（数据与遥测）
- 分类： 等宽/技术无衬线。
- 推荐Web字体： JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime。
- 实现参数：
- 缩放： 固定且小（
10px至14px/0.7rem至0.875rem）。 - 字符间距： 宽松（
0.05em至0.1em）以模拟机械打字机间距或终端矩阵。 - 行高： 标准至紧凑（
1.2至1.4）。 - 大小写： 独占大写。用于所有元数据、导航、单位标识和坐标。
- 缩放： 固定且小（
3.3 纹理对比（艺术性破坏）
- 分类： 高对比度衬线。
- 推荐Web字体： Playfair Display, EB Garamond, Times New Roman。
- 实现参数： 极其罕见地使用。必须经受重度后处理（半色调滤镜、1位抖动）以破坏矢量完美性，并与干净的无衬线字体形成纹理并置。
4. 色彩系统
色彩架构毫不妥协。严格禁止渐变、软阴影和现代半透明效果。色彩模拟物理介质或原始发光显示器。
关键：每个项目选择一种底材调色板并一致使用。切勿在同一界面混合浅色和深色底材。
若为瑞士工业印刷（浅色）：
- 背景：
#F4F4F0或#EAE8E3（哑光、未漂白的文件纸）。 - 前景：
#050505至#111111（碳墨）。 - 强调色：
#E61919或#FF2A2A（航空/危险红色）。这是唯一的强调色。用于删除线、粗的结构性分隔线或重要数据高亮。
若为战术遥测（深色）：
- 背景：
#0A0A0A或#121212（停用的CRT。避免纯#000000）。 - 前景：
#EAEAEA（白色荧光粉）。这是主要文本颜色。 - 强调色：
#E61919或#FF2A2A（航空/危险红色）。相同的红色，相同的规则。 - 终端绿色（
#4AF626）： 可选。仅用于一个特定的UI元素（例如，一个状态指示器或一个数据读数）——切勿用作常规文本颜色。如果它没有明确用途，则完全省略。
5. 布局与空间工程
布局必须看起来像经过数学工程设计。它拒绝常规Web内边距，转而采用可见的区间划分。
- 蓝图网格： 严格遵循CSS Grid架构。元素不浮动；它们精确地锚定到网格轨道和交叉点。
- 可见的区间划分： 广泛使用实线边框（
1px或2px solid）来划分不同的信息区域。水平分隔线（<hr>）通常跨越整个容器宽度以分隔操作单元。 - 双模态密度： 布局在极端数据密度（紧密排列的等宽元数据聚集）和包围宏排印的巨大计算负空间之间摆动。
- 几何形状： 绝对拒绝
border-radius。所有角必须恰好90度以强制机械刚性。
6. UI组件与符号
标准Web UI惯例被功利主义的、工业性的图形元素取代。
- 语法装饰： 使用ASCII字符来框定数据点。
- 框架：
[ 交付系统 ]，< 重新索引 > - 方向指示：
>>>，///，\\
- 框架：
- 工业标记： 显著集成注册（
®）、版权（©）和商标（™）符号，作为结构几何元素而非法律文本。 - 技术资产： 集成网格交叉点处的十字准线（
+）、重复垂直线（条形码）、粗水平警告条纹以及随机字符串数据（例如REV 2.6，UNIT / D-01）以模拟活动的机械过程。
7. 纹理与后处理效果
为防止设计显得纯粹数字化，通过CSS和SVG滤镜在前端工程化地模拟模拟退化效果。
- 半色调与1位抖动： 将连续色调图像或大尺寸衬线字体转换为点阵图案。通过预处理或结合SVG径向点图案的CSS
mix-blend-mode: multiply叠加层实现。 - 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. Web工程指令
- 网格确定性： 利用
display: grid; gap: 1px;及对比鲜明的父/子背景色，生成数学上完美的、纤薄的分割线，而无需复杂的边框声明。 - 语义严谨性： 使用精确的语义标签（
<data>、<samp>、<kbd>、<output>、<dl>）构建DOM，以准确反映遥测的技术本质。 - 排版钳制： 仅对宏排印实现CSS
clamp()函数，以确保超大文本尺寸随视口积极缩放，同时保持结构完整性。