kscz0000 SKILL: 工业粗野主义与战术遥测 UI
适用场景
- 用户需要粗野主义、工业风、瑞士印刷、CRT 终端或战术遥测界面时使用。
- 构建数据密集型仪表盘、作品集、编辑页面或指挥中心 UI，且要求呈现原始机械感时使用。
- 设计必须拒绝柔和渐变、圆角消费级 UI、毛玻璃效果和通用 SaaS 卡片布局时使用。
局限性
- 此风格刻意追求冷峻严苛，可能不适用于消费级产品、对无障碍敏感的流程，或需要温暖柔和感的品牌。
- CRT、半调、抖动和劣化效果必须针对可读性、对比度和动态敏感度进行测试。
- 除非用户明确要求受控混合，否则不要在同一界面中混用浅色工业和深色遥测调色板。
1. 技能元信息
名称： 工业粗野主义与战术遥测界面工程 描述： 精通构建融合中世纪瑞士排版设计、工业制造手册与复古未来主义航空/军事终端界面的 Web 界面。该领域要求对刚性模块化网格、极端排版尺度对比、纯功利主义配色方案以及模拟劣化效果（半调、CRT 扫描线、位图抖动）的程序化仿真拥有绝对掌控力。目标是构建投射原始功能性、机械精度和高数据密度的数字环境，刻意抛弃传统消费级 UI 模式。
2. 视觉原型
该设计系统通过融合两种截然不同但高度兼容的视觉范式运作。每个项目选择一种并贯彻到底。不得在同一界面内交替或混用两种模式。
2.1 瑞士工业印刷
源自 1960 年代企业识别系统和重型机械蓝图。
- 特征： 高对比浅色模式（新闻纸/未漂白底色）。依赖纪念碑式的重磅无衬线字体。由可见分割线勾勒的不可妥协的结构网格。大量非对称留白，其间穿插溢出视口的超大数字或字母。大量使用纯红色作为警示/强调色。
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-bit 抖动），以破坏矢量的完美感，与干净的无衬线体形成肌理上的并置对比。
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 字符框定数据点。
- 框定：
[ 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. Web 工程指令
- 网格确定性： 使用
display: grid; gap: 1px;配合对比鲜明的父/子背景色，生成数学上精确的极细分隔线，无需复杂的边框声明。 - 语义刚性： 使用精确的语义标签（
<data>、<samp>、<kbd>、<output>、<dl>）构建 DOM，准确反映遥测的技术本质。 - 排版钳位： 仅对宏观排版实现 CSS
clamp()函数，确保超大文本在各视口下激进缩放的同时保持结构完整性。