SKILL：Industrial Brutalism & Tactical Telemetry UI
1. Skill 基本数据
名称： Industrial Brutalism & Tactical Telemetry Interface Engineering 说明： 高端的网页接口架构能力，融合二十世纪中期的瑞士字体排版设计（Swiss Typographic design）、工业制造手册，以及复古未来感的航太／军用终端机接口。这门功夫要求你彻底掌握刚性的模块化 grid、极端的字体排版尺度对比、纯粹实用主义的色盘，以及用程序仿真模拟劣化效果（halftone 网点、CRT 扫描线、bitmap dithering 抖动）。目标是打造出散发粗犷功能性、机械精准度与高数据密度的数字环境，并刻意舍弃一般消费级 UI 的惯用模式。
2. 视觉原型（Visual Archetypes）
这套设计系统靠融合两种截然不同但高度兼容的视觉典范来运作。每个项目只挑一种，然后贯彻到底。不要在同一个接口里交替或混用两种模式。
2.1 Swiss Industrial Print（瑞士工业印刷）
源自 1960 年代的企业识别系统与重型机械蓝图。
- 特征： 高对比的 light mode（新闻纸／米白纸材质感）。仰赖厚重如磐石的粗黑无衬线字体排版。用可见的分隔线勾勒出毫不留情的结构性 grid。负空间的运用强势而不对称，并以超大尺寸、直接出血到 viewport 边缘的数字或字母点题。大量使用原色红作为警示／点缀色。
2.2 Tactical Telemetry & CRT Terminal（战术遥测与 CRT 终端机）
源自机密军用数据库、老式大型主机，以及航太的擡头显示器（HUD）。
- 特征： 只用 dark mode。高密度的表格式数据呈现。等宽（monospace）字体排版绝对主导。集成技术性的框饰组件（ASCII 括号、准星）。套用仿真的硬件限制（荧光余晖、扫描线、低比特深度渲染）。
3. 字体排版架构
字体排版就是主要的结构与装饰基础建设，影像只是次要的。这套系统要求尺度、字重与间距上都有极端落差。
3.1 Macro-Typography（结构性标题）
- 分类： Neo-Grotesque／粗黑无衬线。
- 最佳网页字体： Neue Haas Grotesk (Black)、Inter (Extra Bold/Black)、Archivo Black、Roboto Flex (Heavy)、Monument Extended。
- 实现参数：
- 尺度（Scale）： 用流动字体排版（fluid typography）拉到超大尺寸（例如
clamp(4rem, 10vw, 15rem)）。 - 字距（Tracking／Letter-spacing）： 极度紧缩，常常是负值（
-0.03em到-0.06em），逼字符挤成实心的建筑式量体。 - 行距（Leading／Line-height）： 高度压缩（
0.85到0.95）。 - 大小写（Casing）： 一律全大写，强化结构冲击力。
- 尺度（Scale）： 用流动字体排版（fluid typography）拉到超大尺寸（例如
3.2 Micro-Typography（数据与遥测）
- 分类： Monospace／技术感无衬线。
- 最佳网页字体： JetBrains Mono、IBM Plex Mono、Space Mono、VT323、Courier Prime。
- 实现参数：
- 尺度： 固定且小（
10px到14px／0.7rem到0.875rem）。 - 字距： 放宽（
0.05em到0.1em），仿真机械打字机的间距或终端机的字符矩阵。 - 行距： 标准到偏紧（
1.2到1.4）。 - 大小写： 一律全大写。所有 metadata、导览、单元编号与座标都用它。
- 尺度： 固定且小（
3.3 质地对比（艺术性破坏）
- 分类： 高对比衬线体。
- 最佳网页字体： Playfair Display、EB Garamond、Times New Roman。
- 实现参数： 极度节制地使用。必须经过重度后制（halftone 滤镜、1-bit dithering）来破坏矢量的完美感，跟干净的无衬线体形成质地上的对照。
4. 色彩系统
色彩架构毫不妥协。严禁渐层、柔和的 drop shadow 与现代感的半透明效果。颜色是用来仿真实体媒材或原始的发光显示器。
关键：每个项目只选一种基底（substrate）色盘，并贯彻使用。绝不在同一个接口里混用亮色与暗色基底。
若采 Swiss Industrial Print（Light）：
- 背景：
#F4F4F0或#EAE8E3（雾面、未漂白的文档用纸）。 - 前景：
#050505到#111111（碳墨黑）。 - 点缀色：
#E61919或#FF2A2A（航空／警示红）。这是唯一的点缀色。用于删除线、粗的结构性分隔线，或关键数据的强调。
若采 Tactical Telemetry（Dark）：
- 背景：
#0A0A0A或#121212（关机状态的 CRT。避免纯#000000）。 - 前景：
#EAEAEA（白色荧光）。这是主要的文本颜色。 - 点缀色：
#E61919或#FF2A2A（航空／警示红）。同一个红，同一套规则。 - 终端机绿（
#4AF626）： 可选。只用在单一个特定的 UI 元素上（例如一个状态指示灯或一个数据读数）——绝不当成通用文本颜色。如果它没有明确的用途，就整个不要用。
5. 布局与空间工程
布局必须看起来像经过数学计算设计出来的。它拒绝惯例的网页 padding，改用看得见的分区隔间。
- 蓝图 Grid： 严格遵守 CSS Grid 架构。元素不会漂浮；它们精准锚定在 grid 的轨道与交会点上。
- 可见的分区隔间： 大量使用实线边框（
1px或2px solid）来划分不同的信息区域。水平线（<hr>）常常横跨整个容器宽度，用来区隔各个作业单元。 - 双峰密度（Bimodal Density）： 布局在两个极端之间摆荡——一边是极高的数据密度（紧密堆栈在一起的等宽 metadata），一边是大片经过计算、用来衬托 macro-typography 的负空间。
- 几何： 彻底拒绝
border-radius。所有转角都必须是精确的 90 度，以贯彻机械式的刚性。
6. UI 组件与符号系统
标准的网页 UI 惯例，一律换成实用主义的工业图形元素。
- 语法装饰： 用 ASCII 字符把数据点框起来。
- 框饰：
[ DELIVERY SYSTEMS ]、< RE-IND > - 方向指示：
>>>、///、\\\\
- 框饰：
- 工业标记： 大量集成注册商标（
®）、著作权（©）与商标（™）符号，把它们当成结构性的几何元素，而不是法律声明文本。 - 技术素材： 在 grid 交会点放上准星（
+）、重复的垂直线（条码）、粗的水平警示条纹，以及随机字符串数据（例如REV 2.6、UNIT / D-01），来仿真机械正在运转的感觉。
7. 质地与后制效果
为了避免设计看起来太纯数字，要通过 CSS 与 SVG 滤镜，把仿真的模拟劣化效果实现进前端。
- Halftone 与 1-Bit Dithering： 把连续色调的影像或大尺寸衬线字体转成点矩阵图样。做法是预先处理影像，或用 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 噪音滤镜，让 dark mode 与 light mode 都带有统一的实体颗粒感。
8. 网页工程指令
- Grid 决定论： 用
display: grid; gap: 1px;搭配父子元素对比的背景色，不必写复杂的 border 声明，就能产生数学上完美、细如刀锋的分隔线。 - 语意刚性： 用精确的语意标签（
<data>、<samp>、<kbd>、<output>、<dl>）来建构 DOM，准确反映遥测数据的技术本质。 - Typography Clamping： CSS
clamp()函数只用在 macro-typography 上，确保超大文本能强势缩放，同时在各种 viewport 下都维持结构完整性。
