以下为本文档的中文说明该技能用于创建原始机械风格的用户界面融合瑞士字体印刷工艺与军事终端美学。它采用刚性网格布局、高对比度配色方案和技术感强烈的字体选择营造出工业设备控制台的视觉感受。该技能适用于需要传达坚固、可靠和专业感的工业控制软件、数据监控面板和命令行工具的前端界面设计。开发者可以利用此技能快速构建具有独特工业美学风格的Web界面无需从零开始设计视觉语言。该技能提供了完整的UI组件库和样式指南确保设计的一致性和可维护性。该技能提供了详细的操作指南和最佳实践帮助用户快速上手并深入掌握。通过系统的功能模块划分和丰富的应用场景说明用户可以在实际项目中有效运用该技能提升工作效率。该技能注重实用性和可操作性涵盖从基础配置到高级功能的完整知识体系满足不同层次用户的学习需求。持续更新和优化的内容确保用户始终能够接触到最新的技术发展和行业实践。通过此技能的学习和应用用户可以减少摸索时间快速获得可用的解决方案将精力集中在核心业务逻辑和创新工作上从而在技术快速迭代的环境中保持竞争力。该技能的模块化设计使其易于扩展和定制用户可以根据自身需求灵活调整应用方式实现最大化的价值产出。该技能整合了常见的设计模式和最佳实践提供了清晰的学习路径和参考资料帮助用户在短时间内建立起完整的知识框架并有能力在实际项目中灵活运用所学内容解决问题。SKILL: Industrial Brutalism Tactical Telemetry UI1. Skill MetaName:Industrial Brutalism Tactical Telemetry Interface EngineeringDescription: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.2. Visual ArchetypesThe 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.2.1 Swiss Industrial PrintDerived from 1960s corporate identity systems and heavy machinery blueprints.Characteristics:High-contrast light modes (newsprint/off-white substrates). Reliance on monolithic, heavy sans-serif typography. Unforgiving structural grids outlined by visible dividing lines. Aggressive, asymmetric use of negative space punctuated by oversized, viewport-bleeding numerals or letterforms. Heavy use of primary red as an alert/accent color.2.2 Tactical Telemetry CRT TerminalDerived from classified military databases, legacy mainframes, and aerospace Heads-Up Displays (HUDs).Characteristics:Dark mode exclusivity. High-density tabular data presentation. Absolute dominance of monospaced typography. Integration of technical framing devices (ASCII brackets, crosshairs). Application of simulated hardware limitations (phosphor glow, scanlines, low bit-depth rendering).3. Typographic ArchitectureTypography is the primary structural and decorative infrastructure. Imagery is secondary. The system demands extreme variance in scale, weight, and spacing.3.1 Macro-Typography (Structural Headers)Classification:Neo-Grotesque / Heavy Sans-Serif.Optimal Web Fonts:Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended.Implementation Parameters:Scale:Deployed at massive scales using fluid typography (e.g.,clamp(4rem, 10vw, 15rem)).Tracking (Letter-spacing):Extremely tight, often negative (-0.03emto-0.06em), forcing glyphs to form solid architectural blocks.Leading (Line-height):Highly compressed (0.85to0.95).Casing:Exclusively uppercase for structural impact.3.2 Micro-Typography (Data Telemetry)Classification:Monospace / Technical Sans.Optimal Web Fonts:JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime.Implementation Parameters:Scale:Fixed and small (10pxto14px/0.7remto0.875rem).Tracking:Generous (0.05emto0.1em) to simulate mechanical typewriter spacing or terminal matrices.Leading:Standard to tight (1.2to1.4).Casing:Exclusively uppercase. Used for all metadata, navigation, unit IDs, and coordinates.3.3 Textural Contrast (Artistic Disruption)Classification:High-Contrast Serif.Optimal Web Fonts:Playfair Display, EB Garamond, Times New Roman.Implementation Parameters:Used exceedingly sparingly. Must be subjected to heavy post-processing (halftone filters, 1-bit dithering) to degrade vector perfection and create textural juxtaposition against the clean sans-serifs.4. Color SystemThe 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.If Swiss Industrial Print (Light):Background:#F4F4F0or#EAE8E3(Matte, unbleached documentation paper).Foreground:#050505to#111111(Carbon Ink).Accent:#E61919or#FF2A2A(Aviation/Hazard Red). This is the ONLY accent color. Used for strike-throughs, thick structural dividing lines, or vital data highlights.If Tactical Telemetry (Dark):Background:#0A0A0Aor#121212(Deactivated CRT. Avoid pure#000000).Foreground:#EAEAEA(White phosphor). This is the primary text color.Accent:#E61919or#FF2A2A(Aviation/Hazard Red). Same red, same rules.Terminal Green (#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.5. Layout and Spatial EngineeringThe layout must appear mathematically engineered. It rejects conventional web padding in favor of visible compartmentalization.The Blueprint Grid:Strict adherence to CSS Grid architectures. Elements do not float; they are anchored precisely to grid tracks and intersections.Visible Compartmentalization:Extensive utilization of solid borders (1pxor2px solid) to delineate distinct zones of information. Horizontal rules (hr) frequently span the entire container width to segregate operational units.Bimodal Density:Layouts oscillate between extreme data density (tightly packed monospace metadata clustered together) and vast expanses of calculated negative space framing macro-typography.Geometry:Absolute rejection ofborder-radius. All corners must be exactly 90 degrees to enforce mechanical rigidity.6. UI Components and SymbologyStandard web UI conventions are replaced with utilitarian, industrial graphic elements.Syntax Decoration:Utilization of ASCII characters to frame data points.Framing:[ DELIVERY SYSTEMS ], RE-IND Directional:,///,\\\\\\\\Industrial Markers:Prominent integration of registration (®), copyright (©), and trademark (™) symbols functioning as structural geometric elements rather than legal text.Technical Assets:Integration of crosshairs () at grid intersections, repeating vertical lines (barcodes), thick horizontal warning stripes, and randomized string data (e.g.,REV 2.6,UNIT / D-01) to simulate active mechanical processes.7. Textural and Post-Processing EffectsTo prevent the design from appearing purely digital, simulated analog degradation is engineered into the frontend via CSS and SVG filters.Halftone and 1-Bit Dithering:Transforming continuous-tone images or large serif typography into dot-matrix patterns. Achieved via pre-processing or CSSmix-blend-mode: multiplyoverlays combined with SVG radial dot patterns.CRT Scanlines:For terminal interfaces, applying arepeating-linear-gradientto 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)).Mechanical Noise:A global, low-opacity SVG static/noise filter applied to the DOM root to introduce a unified physical grain across both dark and light modes.8. Web Engineering DirectivesGrid Determinism:Utilizedisplay: grid; gap: 1px;with contrasting parent/child background colors to generate mathematically perfect, razor-thin dividing lines without complex border declarations.Semantic Rigidity:Construct the DOM using precise semantic tags (data,samp,kbd,output,dl) to accurately reflect the technical nature of the telemetry.Typography Clamping:Implement CSSclamp()functions exclusively for macro-typography to ensure massive text scales aggressively while maintaining structural integrity across viewports.