SuperAPI AI 工具集

industrial-brutalist-ui

设计与创作

查看项目

更新于 10-16 03:38

技能介绍

用途:构建强调原始功能、机械精度与高数据密度的Web界面,刻意摒弃常规消费级UI模式,融合1960年代瑞士企业标识、工业图纸与军用/航天终端风格。

视觉范式(每项目只选一种,不可混用):一为瑞士工业印刷,浅色底、巨型无衬线字体、可见分隔线、不对称留白、主红作强调;二为战术遥测与CRT终端,纯深色模式、高密度表格、等宽字体主导、技术性取景符号与模拟硬件限制效果。

排版:宏观标题用Neo-Grotesque粗黑体(如Inter Black、Archivo Black),超大尺寸clamp(4rem,10vw,15rem),紧字距、压缩行高、全大写;微排版用等宽字体(如JetBrains Mono、IBM Plex Mono),10–14px、宽字距、全大写用于元数据与坐标。高对比衬线体须经半调/1位抖动处理后才可少量使用。

色彩:禁用渐变、柔和阴影与现代半透明。浅色底#F4F4F0或#EAE8E3,深色底#0A0A0A或#121212(避免纯黑)。强调色仅航空/警示红#E61919或#FF2A2A。终端绿#4AF626仅可用于单一特定元素。禁止在同一界面混用明暗底。

布局:严格CSS Grid,元素锚定网格轨道;用实线边框与整宽<hr>划分信息区;密度在极端密集与大片留白间摆动;所有圆角必须为90度。

组件与符号:用ASCII字符框定数据(如[ DELIVERY SYSTEMS ]、>>>、///);将®©™作为结构性几何元素;网格交叉处用十字准星、重复竖线、警示条纹与随机字符串(如REV 2.6、UNIT / D-01)。

纹理效果:半调与1位抖动、CRT扫描线(如repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px))、全局低透明度SVG噪点滤镜。

工程要点:用display: grid; gap: 1px;配合父子背景色差生成细分割线;用语义标签<data><samp><kbd><output><dl>;宏观排版用clamp()保证跨视口结构完整。

适用场景:数据密集型仪表盘、终端风格界面、工业/技术主题展示页。限制:资料未提供具体平台支持、收费、价格或性能数据,暂未提供。