SKILL: 工业粗野主义与战术遥测 UI
1. 技能元数据
名称： 工业粗野主义与战术遥测界面工程 描述： 精通构建网页界面的架构设计，该界面融合世纪中叶瑞士排版设计、工业制造手册与复古未来主义航空航天/军事终端界面。这一学科要求绝对掌握刚性模块化网格、极端排版比例对比、纯实用主义色彩，以及模拟退化效果（半色调、CRT 扫描线、位图抖动）的程序化模拟。目标是构建传达原始功能、机械精度和高数据密度的数字环境，刻意摒弃常规消费级 UI 模式。
2. 视觉原型
该设计系统通过融合两种不同但高度兼容的视觉范式来运作。每个项目选择一种并坚持使用。不要在同一界面中交替或混合两种模式。
2.1 瑞士工业印刷
源自 1960 年代企业标识系统与重型机械蓝图。
- 特征： 高对比度浅色模式（新闻纸/米白色基底）。依赖整体性、厚重的无衬线排版。由可见分隔线勾勒出的严苛结构网格。以超大、超出视口的数字或字形来强调激进且不对称的负空间运用。大量使用主红色作为警示/强调色。
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)）。 - 字距（letter-spacing）： 极紧，通常为负值（
-0.03em到-0.06em），迫使字形形成坚实的建筑块。 - 行距（line-height）： 高度压缩（
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 Grid 架构。元素不浮动；它们精确锚定于网格轨道与交叉点。
- 可见分区： 大量使用实线边框（
1px或2px solid）来界定不同的信息区域。水平规则（<hr>）经常横跨整个容器宽度，以分隔操作单元。 - 双模密度： 布局在极端数据密度（紧密聚集的等宽元数据）与广阔、经过计算的负空间（用于框定宏观排版）之间摆动。
- 几何： 绝对拒绝
border-radius。所有角落必须严格为 90 度，以强化机械刚性。
6. UI 组件与符号
标准网页 UI 惯例被替换为实用主义的工业图形元素。
- 句法装饰： 使用 ASCII 字符来框定数据点。
- *框定：*
[ DELIVERY SYSTEMS ],< RE-IND > - *方向：*
>>>,///,\\\\ - 工业标记： 显著整合注册商标符号（
®）、版权符号（©）与商标符号（™），使其作为结构几何元素发挥作用，而非法律文本。 - 技术资产： 在网格交叉点整合准星（
+）、重复竖线（条形码）、粗水平警示条纹，以及随机字符串数据（例如REV 2.6、UNIT / D-01），以模拟正在运行的机械过程。
7. 质感与后期处理效果
为防止设计显得纯粹数字化，通过 CSS 与 SVG 滤镜将模拟退化效果工程化地融入前端。
- 半色调与 1-bit 抖动： 将连续色调图像或大型衬线排版转换为点阵图案。通过预处理，或 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)）。 - 机械噪声： 在 DOM 根节点应用全局低不透明度 SVG 静态/噪点滤镜，以便在深色与浅色模式之间引入统一的物理颗粒感。
8. 网页工程指令
- 网格确定性： 使用
display: grid; gap: 1px;，并配合对比的父/子背景色，以生成数学上完美、极细的分隔线，而无需复杂边框声明。 - 语义刚性： 使用精确的语义标签（
<data>、<samp>、<kbd>、<output>、<dl>）构建 DOM，以准确反映遥测的技术属性。 - 排版钳制： 仅对宏观排版实现 CSS
clamp()函数，以确保巨大文本在跨视口保持结构完整性的同时激进缩放。