| name | industrial-brutalist-ui |
| description | 原始机械感界面，融合瑞士印刷字体与军用终端美学。刚性栅格、极端字号对比、实用主义配色、模拟老化效果。适用于数据密集型仪表盘、作品集，或需要显得像解密蓝图的编辑部站点。 |
SKILL：工业粗野主义与战术遥测 UI
1. 技能元信息
名称： 工业粗野主义与战术遥测界面工程
描述： 精通架构那类网页界面——它们把二十世纪中叶的瑞士印刷字体设计、工业制造手册与复古未来主义的航空/军用终端界面熔于一炉。这门学科要求你绝对掌握刚性模块化栅格、极端字号对比、纯实用主义配色，以及对模拟老化的程序化仿真（半调网点、CRT 扫描线、位图抖动）。目标是构建投射出原始功能性、机械精度与高数据密度的数字环境，刻意抛弃常规消费级 UI 套路。
2. 视觉原型
本设计系统通过融合两种迥异但高度兼容的视觉范式来运作。每个项目挑选其一并贯彻到底。不要在同一界面内交替或混用两种模式。
2.1 瑞士工业印刷
源自 1960 年代企业识别系统与重型机械蓝图。
- 特征： 高对比度浅色模式（新闻纸/米白基底）。依赖厚重的整体式无衬线字体。以可见分隔线勾勒出毫不妥协的结构栅格。以超大、溢出视口的数字或字形来断句的激进非对称负空间。大量使用主红色作为警示/强调色。
2.2 战术遥测与 CRT 终端
源自机密军用数据库、遗留大型机与航空平视显示器（HUD）。
- 特征： 专属深色模式。高密度表格数据呈现。等宽字体绝对主导。集成技术性构框元素（ASCII 括号、十字准星）。应用模拟硬件限制（磷光辉光、扫描线、低位深渲染）。
3. 字体架构
字体是首要的结构与装饰基础设施。图像居次。系统要求在尺度、字重与间距上有极端变化。
3.1 宏观字体（结构性标题）
- 分类： Neo-Grotesque / 厚重无衬线。
- 最佳网页字体： 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. Web 工程指令
- 栅格确定性： 使用
display: grid; gap: 1px; 配合父/子对比背景色，无需复杂边框声明即可生成数学上完美的极细分隔线。
- 语义刚性： 用精确的语义标签（
<data>、<samp>、<kbd>、<output>、<dl>）构建 DOM，准确反映遥测的技术性质。
- 字体钳制： 专门对宏观字体使用 CSS
clamp() 函数，确保超大文本在各视口间激进缩放的同时保持结构完整。
