industrial-brutalist-ui

Name: industrial-brutalist-ui
Author: rheinmir

github.com/rheinmir设计与 UI10240 次安装2 周前更新

代码仓库

关于 industrial-brutalist-ui

用于构建瑞士工业印刷风或暗色战术遥测风网页界面的设计技能，规定字体、配色、网格、组件及模拟质感效果，并要求撰写 Wiki 草案报告。

主要功能

01瑞士工业印刷风或战术 CRT 风格
02严格网格与分区布局
03超大字体与等宽字体
04受限配色与直角设计
05网点、扫描线与噪点效果
06Wiki 草案及索引记录

适用场景

01设计机械说明书风格界面
02制作高密度暗色遥测仪表盘
03为网页界面添加 CRT 或印刷质感

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/rheinmir/setup --skill industrial-brutalist-ui

安装后在 Claude Code 中输入/industrial-brutalist-ui确认已加载。

详细介绍

以 [[design-foundation]] 为基础 — hallmark 的 6 项准则 + slop-test 是共同的底线（不可协商）；此技能在此基础上增添风格，而非取代底线。

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

1. 技能元信息

名称： 工业粗野主义与战术遥测界面工程 描述： 精通构建 Web 界面的高级能力，将中世纪瑞士字体设计、工业制造手册和复古未来主义航空／军事终端界面融为一体。这一规范要求绝对掌握刚性模块化网格、极端的字体尺寸对比、纯功能性的配色，以及模拟类比介质劣化效果（半色调、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-bit 抖动），以削弱矢量的完美感，并与整洁的无衬线字体形成纹理对比。

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() 函数，确保大号文本能够大幅缩放，同时在不同视口中保持结构完整。

输出报告

完成所有主要技能任务后，将拟定的草稿写入 wiki。

步骤

1. 构建文件名：

格式：DDMMYY-<ten>.md
DDMMYY = 今天的日期（例如，2026 年 6 月 2 日对应 020626）
<ten> = 用 2–4 个 kebab-case 单词概括所做的工作（例如，landing-page-coteccons、brand-kit-fintech、ingest-auth-spec）

2. 写入 llmwiki/wiki/draft/uiux/DDMMYY-<ten>.md：

# DDMMYY-<ten>
**Type:** draft
**Status:** proposed
**Tags:** <skill-name>, output-report
**Proposed:** YYYY-MM-DD

## What
<One sentence — what this skill invocation produced or decided>

## Output
<Key artefacts, files created/modified, or decisions made>

## Files
| File | Action |
|------|--------|
| `path/to/file` | created / modified |

## Notes
- Invoked via: `/<skill-name>` skill

## Origin
- **Draft:** `wiki/draft/uiux/DDMMYY-<ten>.md`
- **Commit:** _(filled by verify-before-commit)_
- **Date promoted:** _(filled by verify-before-commit)_

3. 更新 wiki 索引和日志：

llmwiki/wiki/index.md — 追加一行：| [DDMMYY-<ten>](draft/uiux/DDMMYY-<ten>.md) | draft | YYYY-MM-DD |
llmwiki/wiki/log.md — 追加：## YYYY-MM-DD — <skill-name> — <ten>

仅当该技能未产出任何工件且未作出任何决策时才跳过（例如，像 /caveman-stats 这样的纯显示模式）。

支持 Markdown

登录后评论