industrial-brutalist-ui by leonxlnx/taste-skill
npx skills add https://github.com/leonxlnx/taste-skill --skill industrial-brutalist-ui名称: 工业粗野主义与战术遥测界面工程 描述: 精通构建融合了世纪中叶瑞士字体设计、工业制造手册以及复古未来主义航空航天/军事终端界面的网页界面。此学科要求绝对掌握严格的模块化网格、极端的字体比例对比、纯粹实用的调色板,以及模拟信号衰减(半色调、CRT扫描线、位图抖动)的程序化模拟。目标是构建能体现原始功能性、机械精度和高数据密度的数字环境,刻意摒弃传统的消费级用户界面模式。
该设计体系通过融合两种不同但高度兼容的视觉范式来运作。每个项目选择一种并坚持使用。切勿在同一界面内交替或混合两种模式。
源自 1960 年代的企业识别系统和重型机械蓝图。
源自机密军事数据库、遗留大型机和航空航天平视显示器。
字体是主要的结构性和装饰性基础设施。图像是次要的。该体系要求字体在比例、字重和间距上具有极大的变化。
clamp(4rem, 10vw, 15rem))。广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
-0.03em 到 -0.06em),迫使字形形成坚实的建筑块。0.85 到 0.95)。10px 到 14px / 0.7rem 到 0.875rem)。0.05em 到 0.1em)以模拟机械打字机间距或终端矩阵。1.2 到 1.4)。色彩架构是毫不妥协的。渐变、柔和的阴影和现代的透明度效果被严格禁止。色彩模拟物理介质或原始的发光显示。
关键:每个项目选择一种基底调色板并始终如一地使用。切勿在同一界面内混合浅色和深色基底。
#F4F4F0 或 #EAE8E3(哑光、未漂白的文档纸)。#050505 到 #111111(碳素墨水)。#E61919 或 #FF2A2A(航空/危险红)。这是唯一的强调色。用于删除线、粗结构分隔线或重要数据高亮。#0A0A0A 或 #121212(已关闭的 CRT。避免纯 #000000)。#EAEAEA(白色荧光粉)。这是主要文本颜色。#E61919 或 #FF2A2A(航空/危险红)。相同的红色,相同的规则。#4AF626): 可选。仅用于单个特定的 UI 元素(例如,一个状态指示器或一个数据读数)——切勿用作常规文本颜色。如果它没有明确用途,则完全省略。布局必须呈现出数学工程化的外观。它摒弃了常规的网页内边距,转而采用可见的分区。
1px 或 2px solid)来划分不同的信息区域。水平分隔线(<hr>)经常横跨整个容器宽度以分隔操作单元。border-radius。所有角必须恰好是 90 度,以强化机械刚性。标准的网页 UI 惯例被实用的工业图形元素所取代。
[ DELIVERY SYSTEMS ], < RE-IND >>>>, ///, \\\\®)、版权符号(©)和商标符号(™),它们作为结构性几何元素而非法律文本发挥作用。+)、重复的垂直线(条形码)、粗水平警告条纹和随机字符串数据(例如 REV 2.6, UNIT / D-01)以模拟活跃的机械过程。为防止设计显得纯粹数字化,模拟的模拟信号衰减通过 CSS 和 SVG 滤镜被工程化地融入前端。
mix-blend-mode: multiply 叠加结合 SVG 径向点图案实现。repeating-linear-gradient 以模拟水平电子束扫描(例如 repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px))。display: grid; gap: 1px; 并结合对比的父/子背景色,以生成数学上完美、细如发丝的分隔线,而无需复杂的边框声明。<data>, <samp>, <kbd>, <output>, <dl>)构建 DOM,以准确反映遥测的技术性质。clamp() 函数,以确保大尺寸文本在不同视口中保持结构完整性的同时具有侵略性的缩放效果。每周安装量
1.7K
代码库
GitHub 星标数
5.7K
首次出现
6 天前
安全审计
安装于
codex1.7K
gemini-cli1.7K
opencode1.7K
github-copilot1.7K
cursor1.7K
kimi-cli1.7K
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.
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.
Derived from 1960s corporate identity systems and heavy machinery blueprints.
Derived from classified military databases, legacy mainframes, and aerospace Heads-Up Displays (HUDs).
Typography is the primary structural and decorative infrastructure. Imagery is secondary. The system demands extreme variance in scale, weight, and spacing.
clamp(4rem, 10vw, 15rem)).-0.03em to -0.06em), forcing glyphs to form solid architectural blocks.0.85 to 0.95).10px to 14px / 0.7rem to 0.875rem).0.05em to 0.1em) to simulate mechanical typewriter spacing or terminal matrices.1.2 to 1.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.
#F4F4F0 or #EAE8E3 (Matte, unbleached documentation paper).#050505 to #111111 (Carbon Ink).#E61919 or #FF2A2A (Aviation/Hazard Red). This is the ONLY accent color. Used for strike-throughs, thick structural dividing lines, or vital data highlights.#0A0A0A or #121212 (Deactivated CRT. Avoid pure #000000).#EAEAEA (White phosphor). This is the primary text color.#E61919 or #FF2A2A (Aviation/Hazard Red). Same red, same rules.#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.The layout must appear mathematically engineered. It rejects conventional web padding in favor of visible compartmentalization.
1px or 2px solid) to delineate distinct zones of information. Horizontal rules (<hr>) frequently span the entire container width to segregate operational units.border-radius. All corners must be exactly 90 degrees to enforce mechanical rigidity.Standard web UI conventions are replaced with utilitarian, industrial graphic elements.
[ DELIVERY SYSTEMS ], < RE-IND >>>>, ///, \\\\®), copyright (©), and trademark (™) symbols functioning as structural geometric elements rather than legal text.+) at grid intersections, repeating vertical lines (barcodes), thick horizontal warning stripes, and randomized string data (e.g., , ) to simulate active mechanical processes.To prevent the design from appearing purely digital, simulated analog degradation is engineered into the frontend via CSS and SVG filters.
mix-blend-mode: multiply overlays combined with SVG radial dot patterns.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)).display: grid; gap: 1px; with contrasting parent/child background colors to generate mathematically perfect, razor-thin dividing lines without complex border declarations.<data>, <samp>, <kbd>, <output>, <dl>) to accurately reflect the technical nature of the telemetry.clamp() functions exclusively for macro-typography to ensure massive text scales aggressively while maintaining structural integrity across viewports.Weekly Installs
1.7K
Repository
GitHub Stars
5.7K
First Seen
6 days ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex1.7K
gemini-cli1.7K
opencode1.7K
github-copilot1.7K
cursor1.7K
kimi-cli1.7K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
AI智能体长期记忆系统 - 精英级架构,融合6种方法,永不丢失上下文
1,200 周安装
AI新闻播客制作技能:实时新闻转对话式播客脚本与音频生成
1,200 周安装
Word文档处理器:DOCX创建、编辑、分析与修订痕迹处理全指南 | 自动化办公解决方案
1,200 周安装
React Router 框架模式指南:全栈开发、文件路由、数据加载与渲染策略
1,200 周安装
Nano Banana AI 图像生成工具:使用 Gemini 3 Pro 生成与编辑高分辨率图像
1,200 周安装
SVG Logo Designer - AI 驱动的专业矢量标识设计工具,生成可缩放品牌标识
1,200 周安装
REV 2.6UNIT / D-01