关于 industrial-brutalist-ui
这是一个用于构建网页界面的 skill，指导 Agent 采用工业野兽派与战术遥测风格进行设计。它面向需要高密度数据展示和粗粝版式的前端项目，并要求在瑞士印刷风格与 CRT 终端风格之间二选一，保持视觉统一。
主要功能
- 01瑞士工业印刷与 CRT 终端两种视觉模式
- 02大号粗体无衬线标题与等宽数据排版
- 03单一基础色板与唯一强调色红色
- 04CSS Grid 网格与可见边框分隔
- 05网点、扫描线与噪点等模拟老化效果
适用场景
- 01为技术产品或数据看板设计高密度终端式界面
- 02制作带有工业说明书风格的展示页面
- 03在前端项目中统一应用模拟模拟拟物化纹理效果
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/industrial-brutalist-ui确认已加载。
附带文件agents/openai.yaml
详细介绍
技能：工业粗野主义与战术遥测 UI
1. 技能元信息
名称： 工业粗野主义与战术遥测界面工程 描述： 精通构建 Web 界面，将 20 世纪中期的瑞士字体设计、工业制造手册，以及复古未来主义航空／军事终端界面融为一体。这门学科要求全面掌握刚性的模块化网格、极端的字体尺寸对比、纯粹实用的配色方案，以及对模拟信号劣化效果（半色调、CRT 扫描线、位图抖动）的程序化模拟。目标是构建彰显原始功能性、机械精度和高数据密度的数字环境，并有意摒弃传统的消费级 UI 模式。
2. 视觉原型
该设计系统通过融合两种迥异但高度兼容的视觉范式来运作。每个项目只选择一种并坚持使用。不要在同一界面中交替或混合两种模式。
2.1 瑞士工业印刷风格
源自 20 世纪 60 年代的企业形象系统和重型机械蓝图。
- 特点： 高对比度的浅色模式（新闻纸／米白色底材）。大量采用厚重、整体感强的无衬线字体。以醒目的分隔线勾勒出毫不妥协的结构网格。激进、不对称地运用留白，并以超大、延伸至视口边缘的数字或字母点缀。大量使用原色红作为警报／强调色。
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)）。 - 字距（字符间距）： 极窄，通常为负值（
-0.03em至-0.06em），让字形形成坚实的建筑块面。 - 行距： 高度压缩（
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. 色彩系统
色彩架构不容妥协。严格禁止使用渐变、柔和的投影和现代半透明效果。颜色应模拟实体介质或原始发光显示器。
关键：每个项目只能选择一种基底配色，并始终保持一致。切勿在同一界面中混用浅色和深色基底。
如果选择瑞士工业印刷风格（浅色）：
- 背景：
#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 位抖动： 将连续色调图像或大型衬线字体转换为点阵图案。可通过预处理，或将 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()函数，确保大字号文本能够大幅缩放，同时在不同视口尺寸下保持结构完整。