SuperAPI AI 工具集

industrial-brutalist-ui

通用与其它

查看项目

更新于 10-15 20:29

技能介绍

用途:用于指导构建具有工业粗野主义与战术遥测风格的网页界面,将中世纪瑞士排版、工业制造手册与复古未来军用/航天终端视觉融合,追求原始功能性、机械精度与高数据密度,刻意摒弃常规消费级 UI 模式。

主要能力与视觉体系:系统提供两种互斥视觉原型,每个项目需选其一并贯穿到底,不得混用。一是瑞士工业印刷:高对比浅色底(新闻纸/米白)、厚重无衬线大字、可见分隔线的刚性结构网格、以留白与超大出血数字/字母形成非对称,仅用主红作警示强调色。二是战术遥测与 CRT 终端:仅深色模式、高密度表格数据、等宽字体主导、技术框线(ASCII 括号、十字准星)、模拟硬件限制(磷光、扫描线、低位深渲染)。

字体架构:宏观排版用新怪诞/超粗无衬线(如 Inter Extra Bold、Archivo Black 等),超大尺度用 clamp() 流体字号,字距紧、行高压缩、仅大写。微观排版用等宽字体(JetBrains Mono、IBM Plex Mono 等),字号固定偏小、字距宽松、仅大写,用于元数据、导航、坐标。高对比衬线仅极少量使用并需重后期处理。

色彩:禁止渐变、柔和阴影与透明。每项目仅选一套底色并保持一致,不得混用深浅底。浅色方案底 #F4F4F0 或 #EAE8E3、前景近黑、仅一种航空/危险红强调。深色方案底 #0A0A0A 或 #121212(避免纯黑)、前景白磷色、同款红强调;终端绿 #4AF626 仅可选用于单一特定元素。

布局与组件:使用 CSS Grid,元素精确锚定网格轨道;用 1–2px 实线边框与整宽 <hr> 划分信息区;在极端数据密度与大面积留白间摆动;全部直角、禁止圆角。用 ASCII 字符作装饰与框线,把 ® © ™ 当作几何元素,加入十字准星、条形码式竖线、警告横条与随机字符串(如 REV 2.6、UNIT / D-01)。

纹理效果:用 CSS 与 SVG 滤镜模拟模拟劣化,包括半调/1 位抖动、CRT 扫描线(如 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>;宏观排版使用 CSS clamp()。资料另注明韩语区域覆盖规则:使用该 skill 时须同时应用 korean-frontend-defaults 规则(原文:이 skill 사용 시 반드시 korean-frontend-defaults 규칙을 함께 적용하세요)。

适用场景:需要工业感、仪表盘/遥测、数据密集型或反消费级视觉的网页界面设计。

限制:资料未提供具体安装方式、依赖、平台兼容性、收费与许可信息;两种视觉模式不可混用,深浅底色不可混用。