industrial-brutalist-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SKILL: Industrial Brutalism & Tactical Telemetry UI

技能：工业粗野主义与战术遥测UI

1. Skill Meta

1. 技能元信息

Name: Industrial Brutalism & Tactical Telemetry Interface Engineering Description: Advanced proficiency in architecting web interfaces that synthesize mid-century Swiss Typographic design, industrial manufacturing manuals, and retro-futuristic aerospace/military terminal interfaces. This discipline requires absolute mastery over rigid modular grids, extreme typographic scale contrast, purely utilitarian color palettes, and the programmatic simulation of analog degradation (halftones, CRT scanlines, bitmap dithering). The objective is to construct digital environments that project raw functionality, mechanical precision, and high data density, deliberately discarding conventional consumer UI patterns.

名称： 工业粗野主义与战术遥测界面工程 描述： 精通构建融合中世纪瑞士排版设计、工业制造手册风格与复古未来主义航空/军用终端界面的网页界面。这一领域要求完全掌握严谨的模块化网格、极端的字体尺寸对比、纯粹实用主义的色彩方案，以及编程实现的模拟信号老化效果（半色调、CRT扫描线、位图抖动）。目标是构建能展现硬核功能性、机械精度与高数据密度的数字环境，刻意摒弃传统消费级UI模式。

2. Visual Archetypes

2. 视觉原型

The design system operates by merging two distinct but highly compatible visual paradigms. Pick ONE per project and commit to it. Do not alternate or mix both modes within the same interface.

该设计系统通过融合两种截然不同但高度兼容的视觉范式运作。每个项目选择其中一种并坚持使用，请勿在同一界面中交替或混合两种模式。

2.1 Swiss Industrial Print

2.1 瑞士工业印刷风格

Derived from 1960s corporate identity systems and heavy machinery blueprints.

Characteristics: High-contrast light modes (newsprint/off-white substrates). Reliance on monolithic, heavy sans-serif typography. Unforgiving structural grids outlined by visible dividing lines. Aggressive, asymmetric use of negative space punctuated by oversized, viewport-bleeding numerals or letterforms. Heavy use of primary red as an alert/accent color.

源自20世纪60年代企业标识系统与重型机械蓝图。

特征： 高对比度浅色模式（新闻纸/米白色底色）。依赖厚重的无衬线字体。由可见分割线勾勒的严苛结构网格。以超大、超出视口的数字或字母为点缀的激进、不对称留白运用。大量使用鲜红色作为警示/强调色。

2.2 Tactical Telemetry & CRT Terminal

2.2 战术遥测与CRT终端风格

Derived from classified military databases, legacy mainframes, and aerospace Heads-Up Displays (HUDs).

Characteristics: Dark mode exclusivity. High-density tabular data presentation. Absolute dominance of monospaced typography. Integration of technical framing devices (ASCII brackets, crosshairs). Application of simulated hardware limitations (phosphor glow, scanlines, low bit-depth rendering).

源自机密军事数据库、遗留大型机与航空平视显示器（HUD）。

特征： 仅支持深色模式。高密度表格数据呈现。等宽字体的绝对主导地位。技术框架元素的整合（ASCII括号、十字准线）。模拟硬件限制效果的应用（磷光 glow、扫描线、低比特深度渲染）。

3. Typographic Architecture

3. 排版架构

Typography is the primary structural and decorative infrastructure. Imagery is secondary. The system demands extreme variance in scale, weight, and spacing.

排版是主要的结构与装饰基础。图像是次要元素。该系统要求尺寸、字重与间距的极端差异。

3.1 Macro-Typography (Structural Headers)

3.1 宏观排版（结构标题）

Classification: Neo-Grotesque / Heavy Sans-Serif.
Optimal Web Fonts: Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended.
Implementation Parameters:
- Scale: Deployed at massive scales using fluid typography (e.g.,
```
clamp(4rem, 10vw, 15rem)
```
  ).
- Tracking (Letter-spacing): Extremely tight, often negative (
```
-0.03em
```
  to
```
-0.06em
```
  ), forcing glyphs to form solid architectural blocks.
- Leading (Line-height): Highly compressed (
```
0.85
```
  to
```
0.95
```
  ).
- Casing: Exclusively uppercase for structural impact.

分类： 新怪诞体/粗体无衬线字体。
最优网页字体： 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
```
  ），使字形形成坚实的结构块。
- 行高（Leading）： 高度压缩（
```
0.85
```
  至
```
0.95
```
  ）。
- 大小写： 为增强结构冲击力，全部使用大写。

3.2 Micro-Typography (Data & Telemetry)

3.2 微观排版（数据与遥测）

Classification: Monospace / Technical Sans.
Optimal Web Fonts: JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime.
Implementation Parameters:
- Scale: Fixed and small (
```
10px
```
  to
```
14px
```
  /
```
0.7rem
```
  to
```
0.875rem
```
  ).
- Tracking: Generous (
```
0.05em
```
  to
```
0.1em
```
  ) to simulate mechanical typewriter spacing or terminal matrices.
- Leading: Standard to tight (
```
1.2
```
  to
```
1.4
```
  ).
- Casing: Exclusively uppercase. Used for all metadata, navigation, unit IDs, and coordinates.

分类： 等宽字体/技术无衬线字体。
最优网页字体： 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 Textural Contrast (Artistic Disruption)

3.3 纹理对比（艺术化干扰）

Classification: High-Contrast Serif.
Optimal Web Fonts: Playfair Display, EB Garamond, Times New Roman.
Implementation Parameters: Used exceedingly sparingly. Must be subjected to heavy post-processing (halftone filters, 1-bit dithering) to degrade vector perfection and create textural juxtaposition against the clean sans-serifs.

分类： 高对比度衬线字体。
最优网页字体： Playfair Display、EB Garamond、Times New Roman。
实现参数： 极少使用。必须经过重度后期处理（半色调滤镜、1位抖动）以降低矢量完美度，与简洁的无衬线字体形成纹理对比。

4. Color System

4. 色彩系统

The color architecture is uncompromising. Gradients, soft drop shadows, and modern translucency are strictly prohibited. Colors simulate physical media or primitive emissive displays.

CRITICAL: Choose ONE substrate palette per project and use it consistently. Never mix light and dark substrates within the same interface.

色彩架构毫不妥协。严格禁止渐变、柔和投影与现代半透明效果。色彩模拟物理介质或原始发光显示器。

重要提示： 每个项目选择一种底色方案并保持一致。切勿在同一界面中混合浅色与深色底色。

If Swiss Industrial Print (Light):

若选择瑞士工业印刷风格（浅色）：

Background:
```
#F4F4F0
```
or
```
#EAE8E3
```
(Matte, unbleached documentation paper).
Foreground:
```
#050505
```
to
```
#111111
```
(Carbon Ink).
Accent:
```
#E61919
```
or
```
#FF2A2A
```
(Aviation/Hazard Red). This is the ONLY accent color. Used for strike-throughs, thick structural dividing lines, or vital data highlights.

背景：
```
#F4F4F0
```
或
```
#EAE8E3
```
（哑光未漂白文档纸色）。
前景：
```
#050505
```
至
```
#111111
```
（碳墨色）。
强调色：
```
#E61919
```
或
```
#FF2A2A
```
（航空/危险红色）。这是唯一的强调色。用于删除线、粗结构分割线或关键数据高亮。

If Tactical Telemetry (Dark):

若选择战术遥测风格（深色）：

Background:
```
#0A0A0A
```
or
```
#121212
```
(Deactivated CRT. Avoid pure
```
#000000
```
).
Foreground:
```
#EAEAEA
```
(White phosphor). This is the primary text color.
Accent:
```
#E61919
```
or
```
#FF2A2A
```
(Aviation/Hazard Red). Same red, same rules.
Terminal Green (
#4AF626
): Optional. Use ONLY for a single specific UI element (e.g., one status indicator or one data readout) — never as a general text color. If it doesn't serve a clear purpose, omit it entirely.

背景：
```
#0A0A0A
```
或
```
#121212
```
（未激活CRT色。避免纯黑色
```
#000000
```
）。
前景：
```
#EAEAEA
```
（白色磷光色）。这是主要文本颜色。
强调色：
```
#E61919
```
或
```
#FF2A2A
```
（航空/危险红色）。同一种红色，规则相同。
终端绿（
#4AF626
）：可选。仅用于单个特定UI元素（例如一个状态指示器或一个数据读数）——绝不能用作常规文本颜色。如果没有明确用途，请完全省略。

5. Layout and Spatial Engineering

5. 布局与空间工程

The layout must appear mathematically engineered. It rejects conventional web padding in favor of visible compartmentalization.

The Blueprint Grid: Strict adherence to CSS Grid architectures. Elements do not float; they are anchored precisely to grid tracks and intersections.
Visible Compartmentalization: Extensive utilization of solid borders (
```
1px
```
or
```
2px solid
```
) to delineate distinct zones of information. Horizontal rules (
```
<hr>
```
) frequently span the entire container width to segregate operational units.
Bimodal Density: Layouts oscillate between extreme data density (tightly packed monospace metadata clustered together) and vast expanses of calculated negative space framing macro-typography.
Geometry: Absolute rejection of
```
border-radius
```
. All corners must be exactly 90 degrees to enforce mechanical rigidity.

布局必须呈现出数学化的工程感。摒弃传统网页内边距，转而采用可见的分区设计。

蓝图网格： 严格遵循CSS Grid架构。元素不浮动；它们被精确锚定到网格轨道与交叉点。
可见分区： 大量使用实线边框（
```
1px
```
或
```
2px solid
```
）划分不同的信息区域。水平线（
```
<hr>
```
）经常跨越整个容器宽度以分隔操作单元。
双模式密度： 布局在极端数据密度（紧密排列的等宽元数据）与围绕宏观排版的大量计算留白之间切换。
几何形状： 绝对拒绝
```
border-radius
```
。所有角落必须精确为90度以强化机械刚性。

6. UI Components and Symbology

6. UI组件与符号

Standard web UI conventions are replaced with utilitarian, industrial graphic elements.

Syntax Decoration: Utilization of ASCII characters to frame data points.
- Framing:
```
[ DELIVERY SYSTEMS ]
```
  ,
```
< RE-IND >
```
- Directional:
```
>>>
```
  ,
```
///
```
  ,
```
\\\\
```
Industrial Markers: Prominent integration of registration (
```
®
```
), copyright (
```
©
```
), and trademark (
```
™
```
) symbols functioning as structural geometric elements rather than legal text.
Technical Assets: Integration of crosshairs (
```
+
```
) at grid intersections, repeating vertical lines (barcodes), thick horizontal warning stripes, and randomized string data (e.g.,
```
REV 2.6
```
,
```
UNIT / D-01
```
) to simulate active mechanical processes.

标准网页UI惯例被实用主义的工业图形元素取代。

语法装饰： 使用ASCII字符框选数据点。
- 框选：
```
[ DELIVERY SYSTEMS ]
```
  ,
```
< RE-IND >
```
- 方向指示：
```
>>>
```
  ,
```
///
```
  ,
```
\\\\
```
技术资产： 在网格交叉点整合十字准线（
```
+
```
）、重复垂直线（条形码）、粗水平警示条纹与随机字符串数据（例如
```
REV 2.6
```
,
```
UNIT / D-01
```
），以模拟活跃的机械流程。

7. Textural and Post-Processing Effects

7. 纹理与后期处理效果

To prevent the design from appearing purely digital, simulated analog degradation is engineered into the frontend via CSS and SVG filters.

Halftone and 1-Bit Dithering: Transforming continuous-tone images or large serif typography into dot-matrix patterns. Achieved via pre-processing or CSS
```
mix-blend-mode: multiply
```
overlays combined with SVG radial dot patterns.

CRT Scanlines: For terminal interfaces, applying a

repeating-linear-gradient

to the background to simulate horizontal electron beam sweeps (e.g.,

repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)

Mechanical Noise: A global, low-opacity SVG static/noise filter applied to the DOM root to introduce a unified physical grain across both dark and light modes.

为避免设计显得过于数字化，通过CSS与SVG滤镜在前端实现模拟的模拟信号老化效果。

半色调与1位抖动： 将连续色调图像或大型衬线字体转换为点阵图案。通过预处理或结合SVG径向点阵图案的CSS
```
mix-blend-mode: multiply
```
叠加层实现。

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 Engineering Directives

8. 网页工程准则

Grid Determinism: Utilize
```
display: grid; gap: 1px;
```
with contrasting parent/child background colors to generate mathematically perfect, razor-thin dividing lines without complex border declarations.
Semantic Rigidity: Construct the DOM using precise semantic tags (
```
<data>
```
,
```
<samp>
```
,
```
<kbd>
```
,
```
<output>
```
,
```
<dl>
```
) to accurately reflect the technical nature of the telemetry.
Typography Clamping: Implement CSS
```
clamp()
```
functions exclusively for macro-typography to ensure massive text scales aggressively while maintaining structural integrity across viewports.

网格确定性： 使用
```
display: grid; gap: 1px;
```
结合对比鲜明的父/子元素背景色，生成数学上完美的极细分割线，无需复杂的边框声明。
语义严谨性： 使用精确的语义标签（
```
<data>
```
,
```
<samp>
```
,
```
<kbd>
```
,
```
<output>
```
,
```
<dl>
```
）构建DOM，以准确反映遥测数据的技术本质。
排版自适应： 仅对宏观排版实现CSS
```
clamp()
```
函数，确保大尺寸文本在不同视口中既能激进缩放又能保持结构完整性。