---

name: industrial-brutalist-ui description: "用于创建原始工业风或战术遥测 UI，具有刚性网格、鲜明排版、CRT 效果和高密度数据。" category: frontend risk: safe source: community source_repo: Leonxlnx/taste-skill source_type: community date_added: "2026-04-17" author: Leonxlnx tags: [frontend, design, brutalism, ui] tools: [claude, cursor, codex, antigravity]

技能：工业粗野主义与战术遥测 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）。
  • 大小写： 专用大写。用于所有元数据、导航、单元 ID 和坐标。

3.3 纹理对比（艺术性打断）

• 分类： 高对比度衬线。
• 最佳 Web 字体： Playfair Display、EB Garamond、Times New Roman。
• 实现参数： 极少使用。必须经过重度后处理（半色调滤镜、1位抖动）以退化矢量完美性，并与整洁的无衬线体创造纹理并置。

4. 色彩系统与视觉处理

根据所选原型应用适当的调色板和视觉效果，确保在整个界面中保持一致性和功能性。