# Industrial Brutalist UI
> 用于创建原始工业风或战术遥测 UI，采用刚性网格、冷峻排版、CRT 效果和高密度数据。触发词：工业风UI、粗野主义界面、战术遥测、CRT终端、brutalist UI、tactical telemetry
- Skill: `kscz0000/industrial-brutalist-ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/industrial-brutalist-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/industrial-brutalist-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/industrial-brutalist-ui
---
# 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`）划分不同的信息区域。水平分割线（`
`）经常横跨整个容器宽度以隔离操作单元。
* **双模密度：** 布局在极端数据密度（紧密排列的等宽元数据簇）与框定宏观排版的大片计算性留白之间振荡。
* **几何：** 绝对拒绝 `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 工程指令
1. **网格确定性：** 使用 `display: grid; gap: 1px;` 配合对比鲜明的父/子背景色，生成数学上精确的极细分隔线，无需复杂的边框声明。
2. **语义刚性：** 使用精确的语义标签（``、``、``、`